PHP: Averiguar el sistema operativo del servidor web

PHP posee la constante PHP_OS que devuelve el sistema operativo. Para los sistemas operativos Linux PHP_OS devuelve la cadena "Linux", pero para los sistemas windows nos puede devolver (dependiendo del tipo de sistema) por lo menos tres valores: WINNT, WIN32, Windows.

Esto no es un gran problema. Todo lo que tenemos que hacer es convertir en mayúsculas la cadena entera y comprobar que las tres primeras letras son "WIN". A continuación podemos ver una sencilla función que determina si el sistema operativo del servidor es Windows, Linux o cualquier otro.

function serverOS()
{
    $sys = strtoupper(PHP_OS);
 
    if(substr($sys,0,3) == "WIN")
    {
        $os = 1;
    }
    elseif($sys == "LINUX")
    {
        $os = 2;
    }
    else
    {
        $os = 3;
    }
 
    return $os;
}

La función devuelve 1 para Windows, 2 para Linux y 3 para otros sistemas operativos.

Visto en yourinspirationweb.com » »

Convertir un color de formato hexadecimal a RGB con PHP

A veces puede resultar útil convertir un color en formato hexadecimal, como por ejemplo #336699, a un formato RGB, como por ejemplo (51,102,153).

En esta entrada se muestra una función que realiza esta conversión en PHP.

function hex2rgb($hex){
	$hex = ereg_replace("#", "", $hex);
        $color = array();

        if(strlen($hex) == 3) {
        $color['r'] = hexdec(substr($hex, 0, 1) . $r);
        $color['g'] = hexdec(substr($hex, 1, 1) . $g);
        $color['b'] = hexdec(substr($hex, 2, 1) . $b);
        }
        else if(strlen($hex) == 6) {
        $color['r'] = hexdec(substr($hex, 0, 2));
        $color['g'] = hexdec(substr($hex, 2, 2));
        $color['b'] = hexdec(substr($hex, 4, 2));
        }

        return $color;
}

Ejemplo de uso:

$color = hex2rgb('336699');
echo "R:". $color['r']."
";
echo "G:". $color['g']."
";
echo "B:". $color['b']."
";

Lo que nos devolvería:

R:51
G:102
B:153

25 Fragmentos CSS para algunas de las tareas más comunes y frustrantes

Traducción de la selección de "snippets" publicados en 25 CSS Snippets for Some of the Most Common and Frustrating Tasks y que nos pueden ser útiles en nuestros desarrollos con CSS.

Agregar sombra al texto: .text-shadow
Puede ser interesante para que un texto destaque sobre el resto.

.text-shadow {
   text-shadow: 2px 2px 4px #666;
}

Añadir un borde basado en una imagen – border-image
Puedes crear cualquier tipo de borde para cualquier objeto u objetos de tu sitio web usando el siguiente fragmento de código. Tan sólo debes proporcionar tu propia imagen de "border.png" y personalizar el uso de la propiedad border-image.

#border-image-style {
   border-width:15px;
   /* Existen 3 tipos de bordes: repetido, redondeado o estirado (repeat / round / stretch) */
   -moz-border-image:url(border.png) 30 30 stretch ;
   -webkit-border-image:url(border.png) 30 30 stretch;
}

Añadir sombras a imágenes - box-shadow
Ayuda a que tus bordes e imágenes destaquen más respecto al fondo.

box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);

Añadir bordes redondeados - border radius
Con el siguiente snippet podrás redondear los bordes de distintos elementos.

.round{
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px; /* future proofing */
   -khtml-border-radius: 10px; /* for old Konqueror browsers */
}

Adición de esquinas redondeadas de forma individual - border-radius
Puedes elegir también cuál de las 4 esquinas se redondeará o tener una plantilla para redondear cada esquina.

#Bottom_Right {
   height: 65px;
   width:160px;
   -moz-border-radius-bottomright: 50px;
   border-bottom-right-radius: 50px;
}
#Bottom_Left {
   height: 65px;
   width:160px;
   -moz-border-radius-bottomleft: 50px;
   border-bottom-left-radius: 50px;
}
#Top_Right {
   height: 65px;
   width:160px;
   -moz-border-radius-topright: 50px;
   border-top-right-radius: 50px;
}
#Top_Left {
   height: 65px;
   width:160px;
   -moz-border-radius-topleft: 50px;
   border-top-left-radius: 50px;
}
?>

Añadir un gradiente - linear-gradient
Con CSS3, ya no se necesita utilizar imágenes para crear gradientes. Puedes usar CSS para añadir un gradiente al fondo de un elemento. Cambia los valores de color hexadecimal ("74b8d7" y "437fbc") por los colores del gradiente que quieres.

background: -webkit-gradient(linear, left top, left bottom, from(#74b8d7), to(#437fbc));
background: -moz-linear-gradient(top,  #74b8d7,  #437fbc);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#74b8d7', endColorstr='#437fbc'); 

Añadir cambios de página para impresión - page-break
El siguiente fragmento de código agrega saltos de página a artículos y otros contenidos de gran tamaño a tu sitio web cuando el visitante decide imprimirlos. Este método sirve tanto para la impresión tradicional en papel, como a la hora de que se creen copias o impresiones digitales en PDF.

.page-break{
   page-break-before:always;
}

Crear rápidamente citas
Una cita es exactamente eso: una cita formateada de distinta forma, dentro de un artículo, que destaca y resalta una declaración clave u cualquier otro texto. El siguiente "snippet" permite crear citas de un modo sencillo.

	
.pull-quote {
   width: 200px;
   float: right;
   margin: 5px;
   font-family: Georgia, "Times New Roman", Times, serif;
   font: italic bold #ff0000 ;
}

Centrar horizontalmente tu sitio web
En los días de pantallas panorámicas de alta resolución, es molesto visitar sitios web que están alineados a la izquierda.

.wrapper {
   width:960px;
   margin:auto;
}

Centrar verticalmente determinados contenidos
El siguiente fragmento de código centra verticalmente el contenido que se encuentre dentro del elemento con esta clase.

.container {
   min-height: 10em;
   display: table-cell;
   vertical-align: middle;
}

Dando al pie de página una posición fija - position fixed
Esto hace que el pie de página se pegue a la parte inferior de la pantalla. Cambia el color de fondo del pie según tus necesidades.

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:32px;
   width:100%;
   background:#333;
}
/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

Agregar una "imagen de cargando"
Útil para sitios web que utilizan imágenes pesadas o de alta resolución.

img {
   background: url(loader.gif) no-repeat 50% 50%;
}

Reemplazar el texto del título por un logo - text-indent
El siguiente código es para cuando necesitas ocultar el texto del título en la cabecera de tu sitio web, reemplazarlo por la imagen de tu logo. El siguiente código lo oculta pero lo mantiene dentro de tu web por razones de SEO.

h1 {
   text-indent:-9999px;
   margin:0 auto;
   width:400px;
   height:100px;
   background:transparent url("images/logo.jpg") no-repeat scroll;
}

Agregar una letra capital
Cómo hacer que la primera letra de un párrafo sea más grande que el resto.

p:first-letter{
	display:block;
	margin:5px 0 0 5px;
	float:left;
	color:#000;
	font-size:60px;
	font-family:Georgia;
}

Personalizar el estilo de los enlaces en función del tipo de fichero
El siguiente snippet muestra pequeños iconos junto al enlace para mostrar el formato del archivo o el tipo de enlace. El ejemplo proporciona estilos para los enlaces externos, a correo, pdf y zip. Puedes añadir más simplemente copiando y pegando y añadiendo tus propias extensiones (por ejemplo ".mp3").

/* enlaces externos
 ^=  indica que queremos dar estilo a aquellos enlaces que comiencen por http://
*/
a[href^="http://"]{
    padding-right: 20px;
    background: url(external.gif) no-repeat center right;
}
/* emails
^= indica que queremos dar estilo a aquellos enlaces que comiencen con mailto:
*/
a[href^="mailto:"]{
    padding-right: 20px;
    background: url(email.png) no-repeat center right;
}
/* pdfs
$= indica que queremos dar estilo a aquellos links cuyos hrfs terminen con ".pdf".
*/
a[href$=".pdf"]{
    padding-right: 20px;
    background: url(pdf.png) no-repeat center right;
}
/* zip
Igual que el anterior pero para los archivos zip y se añade un icono a la derecha del enlace. Por ello lo de :after
*/
a[href$=".zip"]:after{
    content: url(icons/zip.png);
}

Redimensionar tu imagen de fondo

El siguiente fragmento simplemente hace lo que el título dice. Simplemente cambia los valores del ejemplo para redimensionar tu imagen de fondo.

#resize-image {
   /* Imagina que la imagen image_1.png tiene unas dimensiones de 200x400px */
   background:url(image_1.png) top left no-repeat;
   -moz-background-size: 100px 200px;
   -o-background-size: 100px 200px;
   -webkit-background-size: 100px 200px;
}

Múltiples columnas
El siguiente código permite crear múltiples columnas para tu contenido, sin necesidad sin necesidad de pasar por la molestia de crear párrafos separados o tablas. El ejemplo incluye líneas de separación grises entre las columnas, que se pueden cambiar de color o eliminar.

#columns-3 {
   text-align: justify;
   -moz-column-count: 3;
   -moz-column-gap: 12px;
   -moz-column-rule: 1px solid #c4c8cc;
   -webkit-column-count: 3;
   -webkit-column-gap: 12px;
   -webkit-column-rule: 1px solid #c4c8cc;
}

Link Rollover básico con sprites CSS
Ahorra ancho de banda y la necesidad de crear una versión separada de tu botón "hover" usando el siguiente snippet. Mueve la imagen de fondo del botón cuando el ratón pasa por encima del mismo, creando el efecto de "hover".

a {
       display: block;
       background: url(sprite.png) no-repeat;
       height: 30px;
       width: 250px;
}
a:hover {
       background-position: 0 -30px;
}

@font-face a prueba de balas
Esta es la sintaxis de Fontspring para @font-face:

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?') format('eot'),
         url('myfont-webfont.woff') format('woff'),
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');
    }

Añadir Google Fonts
Usa el siguiente "snippet" para añadir la API de Google Fonts. Esto permite utilizar en tu web fuentes con un aspecto muy atractivo y que se mostrarán de un modo adecuado en todos los equipos y navegadores.

En la cabecera:

/* Cargar una fuente */
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Serif">
/* Carga múltiple de fuentes */
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Nobile|Droid+Serif|Old+Standard+TT|Droid+Sans">

En tu CSS:

body {
font-family: 'Droid Serif', serif; font-size: 48px;
}

Voltear una imagen - transform
Más útil de lo que a priori uno pueda pensar. Este truco es para cuando tienes un botón, flecha o cualquier otro elemento gráfico y no tengas que voltear la imagen de forma manual y subirla como una imagen distinta.

img.flip {
   -moz-transform: scaleX(-1);
   -o-transform: scaleX(-1);
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
   filter: FlipH;
   -ms-filter: "FlipH";
}

Rotar una imagen o un texto
Usando esta técnica puedes rotar una imagen, texto o cualquier otro elemento. Cambia el valor de "rotate" para indicar cuantos grados quieres rotarlo. Añadiendo un "-" (como en el ejemplo) girará en sentido contrario a las agujas del reloj.

/* Para Firefox, Safari, Chrome, y cualquier otro navegador gecko/webkit */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
 
 /* Para IE */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 
/* Para Opera */
-o-transform: rotate(30deg);

Lista completa de hacks CSS específicos para navegadores
Con estos hacks podrás podrás apuntar mejor a IE, Firefox, Chrome, Safari y Opera desde dentro del CSS.

	
/***** Selector Hacks ******/
 
/* IE6 e inferiores */
* html #uno  { color: red }
 
/* IE7 */
*:first-child+html #dos { color: red }
 
/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }
 
/* IE8, FF, Saf, Opera (Todo menos IE 6,7) */
html>/**/body #cuatro { color: red }
 
/* Opera 9.27 e inferiores, 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  }
 
/* Todo menos IE6-8 */
:root *> #quince { color: red  }
 
/* IE7 */
*+html #dieciocho {  color: red }
 
/* Sólo Firefox 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 */ }
 
/* Todo menos IE6 */
#diecisiete { color/**/: blue }
 
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
 
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
 
/* IE6, IE7 -- actía como !important */
#veintesiete { color: blue !ie; } /* la cadena después de ! puede ser cualquier cosa */
 
/* IE8 */
#anotherone  {color: blue\0/;} /* debe ir al FINAL de todas las reglas */

Eric Meyers CSS reset
Un CSS reset es una serie de reglas que restablecen las incoherencias en la hoja de estilos, para que tu sitio web sea consistente en todos los navegadores. Cosas como los márgenes, tamaños de fuente, alturas de línea por defecto, etc. El siguiente CSS reset ha sido realizado por Eric Meyer, y se ha convertido en un stándar.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
 
body {
line-height: 1;
}
 
ol, ul {
list-style: none;
}
 
blockquote, q {
quotes: none;
}
 
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
 
:focus {
outline: 0;
}
 
ins {
text-decoration: none;
}
 
del {
text-decoration: line-through;
}
 
table {
border-collapse: collapse;
border-spacing: 0;
}

jQuery: Convertir cualquier URL en un enlace

La siguiente función permite convertir cualquier URL contenida en un texto en un vínculo.

$.fn.crearLinks = function() {
        var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
        this.each(function() {
            $(this).html(
                $(this).html().replace(regexp,'<a href="$1">$1</a>')
            );
        });
        return $(this);
    }

Ver ejemplo en funcionamiento » »

PHP: función para obtener el primer párrafo de una cadena de texto

Sencilla solución para obtener el primer párrafo de un texto.

function getFirstPara($string){
        $string = substr($string,0, strpos($string, "</p>")+4);
        return $string;
}

Visto en » »