Utilidades para JS, CSS y PHP
Utilidades para JS, CSS y PHP
Utilidades para JS, CSS y PHP
Completa lista de hacks para poder actuar especficamente sobre los navegadores que deseemos.
/***** Selector Hacks ******/ /* IE6 and below */ * html #uno { color: red } /* IE7 */ *:first-child+html #dos { color: red } /* IE7, FF, Saf, Opera */ html>body #tres { color: red } /* IE8, FF, Saf, Opera (Everything but IE 6,7) */ html>/**/body #cuatro { color: red } /* Opera 9.27 and below, safari 2 */ html:first-child #cinco { color: red } /* Safari 2-3 */ html[xmlns*=""] body:last-child #seis { color: red } /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body:nth-of-type(1) #siete { color: red } /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body:first-of-type #ocho { color: red } /* saf3+, chrome1+ */ @media screen and (-webkit-min-device-pixel-ratio:0) { #diez { color: red } } /* iPhone / mobile webkit */ @media screen and (max-device-width: 480px) { #veintiseis { color: red } } /* Safari 2 - 3.1 */ html[xmlns*=""]:root #trece { color: red } /* Safari 2 - 3.1, Opera 9.25 */ *|html[xmlns*=""] #catorce { color: red } /* Everything but IE6-8 */ :root *> #quince { color: red } /* IE7 */ *+html #dieciocho { color: red } /* Firefox only. 1+ */ #veinticuatro, x:-moz-any-link { color: red } /* Firefox 3.0+ */ #veinticinco, x:-moz-any-link, x:default { color: red /***** Attribute Hacks ******/ /* IE6 */ #once { _color: blue } /* IE6, IE7 */ #doce { *color: blue; /* or #color: blue */ } /* Everything but IE6 */ #diecisiete { color/**/: blue } /* IE6, IE7, IE8 */ #diecinueve { color: blue\9; } /* IE7, IE8 */ #veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */ #veintesiete { color: blue !ie; } /* string after ! can be anything */
ResponsiveSlides.js
ResponsiveSlides.js es un pequeo plugin de jQuery que crea un slideshow "responsive" dentro de un solo contenedor. Funciona con una amplia gama de navegadores incluyendo todas las versiones de IE desde IE6 en adelante. Tambin agrega soporte CSS para max-width en los navegadores IE6 y otros que no lo soporten de forma nativa. La nica dependencia es jQuery y que todas las imgenes sean del mismo tamao. La mayor diferencia con respecto a otros plugins "responsive" es el tamao (~ 1kb miniaturizado y comprimido).
width:100px; } }
return $str;
CSS
Cross browser coding can be sometimes tricky but these browser specific css hacks can help you with your problems. With them cross browser compatibility comes to you served on a plate. /***** Selector Hacks ******/ /* IE6 and below */ * html #uno { color: red } /* IE7 */ *:first-child+html #dos { color: red } /* IE7, FF, Saf, Opera */ html>body #tres { color: red } /* IE8, FF, Saf, Opera (Everything but IE 6,7) */ html>/**/body #cuatro { color: red } /* Opera 9.27 and below, safari 2 */ html:first-child #cinco { color: red } /* Safari 2-3 */ html[xmlns*=""] body:last-child #seis { color: red } /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body:nth-of-type(1) #siete { color: red } /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body:first-of-type #ocho { color: red } /* saf3+, chrome1+ */ @media screen and (-webkit-min-device-pixel-ratio:0) { #diez { color: red } } /* iPhone / mobile webkit */ @media screen and (max-device-width: 480px) { #veintiseis { color: red } } /* Safari 2 - 3.1 */ html[xmlns*=""]:root #trece { color: red } /* Safari 2 - 3.1, Opera 9.25 */ *|html[xmlns*=""] #catorce { color: red } /* Everything but IE6-8 */ :root *> #quince { color: red } /* IE7 */ *+html #dieciocho { color: red } /* Firefox only. 1+ */ #veinticuatro, x:-moz-any-link { color: red } /* Firefox 3.0+ */ #veinticinco, x:-moz-any-link, x:default { color: red } /***** Attribute Hacks ******/ /* IE6 */ #once { _color: blue } /* IE6, IE7 */ #doce { *color: blue; /* or #color: blue */ } /* Everything but IE6 */ #diecisiete { color/**/: blue } /* IE6, IE7, IE8 */ #diecinueve { color: blue\9; } /* IE7, IE8 */ #veinte { color/*\**/: blue\9; } /* IE6, IE7 -- acts as an !important */ #veintesiete { color: blue !ie; } /* string after ! can be anyth
Strings are a very important kind of data, and you have to deal with them daily with web development tasks. In this article, I have compiled 10 extremely useful functions and code snippets to make your php developer life easier.
Source: http://phpbuilder.com/columns/Jason_Gilmore060210.php3?page=2
}
} Source: http://www.jonasjohn.de/snippets/php/contains.htm
Captcha
A peticin de algunos lectores, voy a publicar un pequeo ejemplo sobre la aplicacin de mi anterior post "Captcha con proteccin de colores". Tanto el citado post como ste, son ejemplos. Deben ser tomados como puntos de partida y presuponen ciertos conocimientos de programacin que se escapan del propsito de ambos posts. Dicho esto, veamos un ejemplo ms completo. Necesitamos dos ficheros. El primero es el capcha, la imagen que el usuario deber reconocer. Podemos nombrar el fichero como captha.php y el cdigo sera el siguiente: captha.php
<?php session_start(); header("Content-type: image/png"); $anchura = 146; $altura = 30; $im = @imagecreate($anchura, $altura)or die("Cannot Initialize new GD image stream"); imagecolorallocate($im, 255, 250, 255); $noise_color = imagecolorallocate($im, 207, 239, 250); for($i=0; $i<($anchura*$altura)/3; $i++) { imagefilledellipse($im, mt_rand(0,$anchura), mt_rand(0,$altura), 1, 1, $noise_color); } for($i=0; $i<($anchura*$altura)/150; $i++ ) { imageline($im, mt_rand(0,$anchura), mt_rand(0,$altura), mt_rand(0,$anchura), mt_rand(0,$altura), $noise_color); } $texto_color[0] = imagecolorallocate($im, 255, 0, 0); $texto_color[1] = imagecolorallocate($im, 51, 166, 207); $caracteres = 'ABCDEFGHKLMNPRSTUVWYZ23456789'; $longitud = 5; function generarCodigo($longitud,$caracteres) { $code = ''; for($i = 1, $cslen = strlen($caracteres); $i <= $longitud; ++$i) { $code .= strtoupper( $caracteres{rand(0, $cslen - 1)} ); } return $code; } $texto = generarCodigo($longitud,$caracteres); unset($_SESSION['captcha']); $_SESSION['captcha']['blue'] = $_SESSION['captcha']['red'] = ''; for($j = 0; $j < mb_strlen($texto); $j++) { imagettftext($im, 20, 0, 5+($j*23), 24, $texto_color[$j%2], 'Includes/elephant.ttf', $texto[$j]); if(($j%2) == 1) { $_SESSION['captcha']['blue'] .= $texto[$j]; } else { $_SESSION['captcha']['red'] .= $texto[$j]; } } imagepng($im);
imagedestroy($im); ?>
Ahora necesitamos crear otro fichero (formulario.php) que se encargar de procesar los campos del formulario y comprobar que el captcha ha sido introducido correctamente. formulario.php
<?php session_start(); if($_POST['enviar']=="ok") { // LIMPIAMOS LO RECOGIDO EN EL FORMULARIO $captcha_recogido = filter_var($_POST['valores_captcha'], FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH); // CONVERTIMOS EN MAYUSCULAS $captcha_recogido = strtoupper($captcha_recogido); if(empty($captcha_recogido)) { echo "<strong>Debes introducir los caracteres en rojo que aparecen en la imagen.</strong>"; }else{ if($captcha_recogido==$_SESSION['captcha']['red']) { // HA INTRODUCIDO CORRECTAMENTE EL CAPTCHA Y // CONTINUAMOS PROCESANDO EL FORMULARIO echo "<strong>El formulario ha sido procesado.</strong>"; }else{ echo "<strong>Los caracteres introducidos no coinciden con los de la imagen. Intntalo otra vez.</strong>"; } } } ?> <form action="#" method="post" name="form_captha"> <!-- CAMPOS DEL FORMULARIO --> <p><img src="01032011_captcha.php" alt="captcha" /></p> <p><label>Teclea los caracteres en rojo</label><input type="text" name="valores_captcha" /></p> <input name="enviar" type="submit" value="ok" /> <label> </form>
Ahora tan slo nos queda extraer el ranking, a partir del xml con la ayuda de PHP:
$url = "www.elpais.com"; $xml= "http://data.alexa.com/data?cli=10&dat=s&url=".$url; $datos = simplexml_load_file($xml) or die("No se puede cargar"); $ranking = $datos->SD[1]->POPULARITY['TEXT']; if($ranking > 0){ echo "El ranking de Alexa para este sitio es <strong>".$ranking."</strong>"; }else{ echo "No se puede obtener el ranking"; }
Por ejemplo:
http://data.alexa.com/data?cli=10&dat=s&url=www.elpais.com
Cuando modificamos o actualizamos un sitio web, a veces resulta desactivarlo temporalmente y redirigir a los usuarios a una pgina en la que se les informe que la web est en mantenimiento. La siguiente funcin PHP es un modo sencillo de hacerlo sin tener que recurrir a .htaccess.
function maintenance($mode = FALSE){ if($mode){ if(basename($_SERVER['SCRIPT_FILENAME']) != 'maintenance.php'){ header("Location: http://example.com/maintenance.php"); exit; } }else{ if(basename($_SERVER['SCRIPT_FILENAME']) == 'maintenance.php'){ header("Location: http://example.com/"); exit; } } }
$str_palabras = implode ('|', $arr_palabras); return preg_replace ('@\b('.$str_palabras.')\b@si', '<strong style="background-color:yellow">$1</strong>', $cadena); } $Texto = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut adipiscing risus nec arcu interdum at lobortis neque auctor. Morbi in gravida ipsum. Nunc imperdiet, metus sit amet fermentum volutpat, nisi tortor auctor dui, sed porttitor augue mi vitae arcu. Mauris vitae ante sit amet elit tincidunt eleifend et tempor est. Aenean vitae viverra velit. Maecenas pulvinar dolor at ante eleifend vitae fermentum dui auctor. Pellentesque fringilla ultrices odio, vitae elementum lorem gravida in. Curabitur tincidunt sagittis luctus. Cras sit amet sagittis sapien. Nunc tempus dapibus nibh, et posuere nibh aliquam in. "; $Palabras = array("Lorem","sit","amet"); echo highlight($Texto, $Palabras); ?>
Para activar el modo mantenimiento, tan slo habra que pasar el valor TRUE a la funcin
maintenance(TRUE);
La funcin debe ser llamada antes de que se haya producido cualquier salida en el navegador.
"insert", "update", "delete", "drop", "exec(", "execute(", "cast(", "char", "nchar", "varchar", "nvarchar", "substring", "sysobject", "iframe", "syscolumns" ); $recuento=0; foreach( $_GET as $key => $value ) { for($i=0;$i<sizeof($baneados);$i++) { $Cadena = strtoupper($value); $Encontrar = strtoupper($baneados[$i]); $pos = strpos($Cadena, $Encontrar); if($pos !== false) { $recuento++; } if(strlen($Cadena)>$this->longitud){ $recuento++; } if(eregi('[^a-z0-9_]',$Cadena)){ $recuento++; } } } if($recuento>0){ header('Location:'.$this->url); } } }
Este cdigo debe ir antes de que se haya producido cualquier salida desde el navegador. Al principio de la pgina por ejemplo. De este modo se aceptaran parmetros como:
http://www.dominio.com/index.php?Id=45&acc=new&op=32
Es bastante interesante definir una longitud pequea, siempre que sea posible:
$g = new dXSS(); $g->url = 'http://www.google.es'; $g->longitud = 3; $g->TestGet();
Permitira:
http://www.dominio.com/index.php?Id=45&sub=3&acc=new&op=32
Pero no:
http://www.dominio.com/index.php?Id=<meta%20http-equiv="refresh"%20content="0;">
o incluso:
http://www.dominio.com/index.php?Id=$%
La clase testea cada uno de los parmetros recibidos y: 1.- Se asegura que no est en la lista de palabras baneadas 2.- Se asegura de que no tenga una longitud superior a la especificada 3.- Comprueba que slo contenga caracteres alfanumricos Si se detecta un parmetro no vlido se redirige a la $url especificada. Un ejemplo de funcionamiento sera:
$g = new dXSS(); $g->url = 'http://www.google.es';
NOTA: Esta clase nicamente controla los parmetros recibidos por $_GET. Fcilmente se podra adaptar o modificar la clase para la informacin recibida por $_POST o que incluso se ocupase de ambas cosas pero quera mostrar un uso muy sencillo. Lo ideal es combinar esta clase con otras clases o funciones que comprueben el contenido recibido a travs de los formularios, utilizar tokens en los formularios, establecer los permisos apropiados a las carpetas del sitio web, utilizar.htaccess, recurrir a filter_input si la versin de PHP instalada es reciente, etc. En estas cosas ms vale que sobre que falte.
echo date("m/d/Y",filemtime("test.php"));
Utilizamos la funcin filemtime, que obtiene el momento de la ltima modificacin de un archivo. Esta funcin devuelve el momento de cundo los bloques de informacin de un archivo fueron escritos, es decir, el momento en el que el contenido del archivo de modific.
un un La la
for($j = 0; $diferencia >= $duraciones[$j] && $j < count($duraciones)-1; $j++) { $diferencia /= $duraciones[$j]; } $diferencia = round($diferencia); if($diferencia != 1) { $intervalos[5].="e"; //MESES $intervalos[$j].= "s"; } return "$tiempo $diferencia $intervalos[$j]"; } // Ejemplos de uso // fecha en formato yyyy-mm-dd // echo tiempo_transcurrido('2010/02/05'); // fecha y hora // echo tiempo_transcurrido('2010/02/10 08:30:00');
function myTruncate($string, $limit, $break=".", $pad="...") { // return with no change if string is shorter than $limit if(strlen($string) <= $limit) return $string; // is $break present between $limit and the end of the string? if(false !== ($breakpoint = strpos($string, $break, $limit))) { if($breakpoint < strlen($string) - 1) { $string = substr($string, 0, $breakpoint) . $pad; } } return $string; } ?>
Ejemplo:
$cadena="Ut at risus magna. Aenean in urna urna, bibendum ultricies libero. Quisque accumsan, dolor ut sagittis fermentum, ipsum sapien posuere arcu, eget fermentum lorem leo mattis risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rhoncus tincidunt pulvinar. Aliquam sed odio vitae erat vestibulum eleifend. In hac habitasse platea dictumst. Fusce fringilla aliquet leo a porta. Proin facilisis vehicula nisi, pharetra pellentesque turpis rutrum in. Quisque laoreet nisi augue. Fusce lorem metus, mollis sed aliquam eget, dapibus sit amet dui. Nulla facilisi. Vestibulum laoreet, orci in euismod tristique, est ligula sagittis dolor, a pellentesque odio ligula tempus risus. Aenean elit ligula, facilisis sed tincidunt ac, facilisis eget ipsum. "; echo myTruncate($cadena, 200,' ', '...');
Esta funcin y algunas ms, todas ellas muy interesantes en Handy PHP Code Snippets.
Easy Google Maps es una clase para PHP que, como su nombre indica facilita la inclusin de mapas a travs de Google Maps en un sitio web. Lo primero que deberemos hacer, para poder utilizar la API de Google Maps es obtener una key o clave para el dominio en el que pensemos utilizar la API. Una vez tenemos una key podemos invocar un mapa de un modo tan sencillo como:
<?php
require'EasyGoogleMap.class.php'; $key ="XXXXXXXXXX"; $gm = & new EasyGoogleMap($key); $gm->SetMapZoom(15); $gm->SetAddress("Colon 22, Valencia"); $gm->SetInfoWindowText("Esta es la primera direccin"); $gm->SetAddress("Periodista Azzati 7, Valencia"); $gm->SetInfoWindowText("Esta es la segunda direccin"); ?> <html> <head> <title>EasyGoogleMap</title> <?php echo $gm->GmapsKey(); ?> </head> <body> <?php echo $gm->MapHolder(); ?> <?php echo $gm->InitJs(); ?> <?php echo $gm->UnloadMap(); ?> </body> </html>
//Para establecer el tipo de puntero // De modo predeterminado se utiliza GT_FLAT $gm->SetMarkerIconStyle('FLAG'); $gm->SetMarkerIconStyle('GT_FLAT'); $gm->SetMarkerIconStyle('GT_PILLOW'); $gm->SetMarkerIconStyle('HOUSE'); $gm->SetMarkerIconStyle('PIN'); $gm->SetMarkerIconStyle('PUSH_PIN'); $gm->SetMarkerIconStyle('STAR'); //Para establecer el color del puntero // De modo predeterminado se utiliza PACIFICA $gm->SetMarkerIconColor('PACIFICA'); $gm->SetMarkerIconColor('YOSEMITE'); $gm->SetMarkerIconColor('MOAB'); $gm->SetMarkerIconColor('GRANITE_PINE'); $gm->SetMarkerIconColor('DESERT_SPICE'); $gm->SetMarkerIconColor('CABO_SUNSET'); $gm->SetMarkerIconColor('TAHITI_SEA'); $gm->SetMarkerIconColor('POPPY'); $gm->SetMarkerIconColor('NAUTICA'); $gm->SetMarkerIconColor('DEEP_JUNGLE'); $gm->SetMarkerIconColor('SLATE'); //Establecer el texto del bocadillo informativo $gm->SetInfoWindowText("Este es el punto uno")
Donde "XXXXXXXXXX" es la key que acabamos de obtener. Ver ejemplo en funcionamiento Algunas de las propiedades que podemos establecer son las siguientes:
//Para habilitar/deshabilitar el zoom progresivo. // De modo predeterminado deshabilitado (FALSE) $gm->mContinuousZoom = FALSE; //Para habilitar/deshabilitar La escala del mapa. // De modo predeterminado habilitado (TRUE) $gm->mScale = TRUE; //Para habilitar/deshabilitar el mapa interno. // De modo predeterminado deshabilitado (FALSE) $gm->mInset = FALSE; //Para habilitar/deshabilitar el tipo de mapa. // De modo predeterminado deshabilitado (FALSE) $gm->mMapType = FALSE; # default //Para establecer las dimensiones del mapa //De modo predeterminado 300px x 300px $gm->SetMapWidth(500); $gm->SetMapHeight(500); //Para establecer el zoom //De modo predeterminado 13 $gm->SetMapZoom(10);
El uso es realmente sencillo. Lo unico que no me acababa de gustar es que apareciese el bocadillo de la primera direccin. Prefiero que aparezcan los bocadillos cuando el usuario hace click. Simplemente cogiendo la clase y comentando estas dos lneas ya lo tendremos,
if $ret .= "marker.openInfoWindowHtml(address_$i.infowindowtext);\n"; ($i===0)