Bufa Webmaster

La función SUM(X) de mysql suma todos los valores de la misma columna de una determinada tabla/s, tomando solo los registros que cumplan con los requisitos del WHERE por ejemplo :

Por ejemplo, tenemos una tabla que guarda los votos de los usuarios y queremos hacer un recuento del total de un determinado usuario mediante su id:

$result = mysql_query("SELECT SUM(puntos) as total FROM encuesta WHERE idusuario=1");	
$row = mysql_fetch_array($result, MYSQL_ASSOC);
echo $row["total"];

El archivo host es un archivo sin extensión, que utiliza nuestro sistema operativo para guardar la correspondencia entre dominios de Internet y direcciones IP.

Al grano, puede que necesitemos editar este archivo cuando por ejemplo hagamos un cambio de hosting de una determinada web y tenemos que esperar esas horas mientras se propagan las nuevas DNS… bien, si no queremos esperar todas esas horas podemos editar este archivo host y insertar una nueva linea indicando: “ip del dominio” / “url del dominio”, de la siguiente forma:

255.255.255.0     www.bufa.es

Este archivo se encuentra ubicado en el disco duro, en el directorio donde Windows fue instalado, dependiendo de tu sistema operativo, las rutas predeterminadas son:

Windows XP / 2003 / Vista / 7
C:\Windows\System32\drivers\etc\hosts

Windows 95 / 98 / Me
C:\Windows\hosts

Windows NT / 2000
C:\WINNT\System32\drivers\etc\hosts

Mac OS / iPhone OS
/private/etc/hosts

Unix / Linux / BSD
/etc/hosts
Novell NetWare
SYS:etc\hosts

OS/2 / eComStation
“bootdrive”:\mptn\etc\

BeOS
/boot/beos/etc/hosts

Symbian OS 6.1-9.0
C:\system\data\hosts

Symbian OS 9.1+
C:\private\10000882\hosts

Vamos a ver un bonito efecto de rollover en jQuery sobre un div aplicando un efecto fade en el color de fondo (background) de ese elemento. Para ello utilizamos la funcion animate:

<script type="text/javascript"> 
$(document).ready(function(){
   $(".caja_fade").hover(function() {
      $(this).stop().animate({ backgroundColor: "#a7bf51"}, 800);
      },function() {
      $(this).stop().animate({ backgroundColor: "#F00" }, 800);
   });
}); 
</script>

<style>
.caja_fade{
   width:250px;
   height:150px;
   line-height:150px;
   text-align:center;
   background:#A0DAF6;
   color:#fff;
   font-size:16px;
}</style>

<div class="caja_fade">PASA EL CURSOR POR ENCIMA</div>

Os muestro un listado de colores html junto a sus nombres y codigos hexadecimal. Son colores compatibles con los principales navegadores web.

Estos nombres de colores los podemos utilizar en nuestro CSS en lugar del codigo hexadecimal, introduciendo su nombre o codigo hex, por ejemplo:

Esto es una <font color="Crimson">prueba</font> de <font color="DarkOrchid">diversos</font> <font color="DarkViolet">colores</font> <font color="#DAA520">html</font> en el documento

Resultado:

Esto es una prueba de diversos colores html en el documento

Una función muy sencilla que nos será de utilidad cuando queramos convertir automaticamente todas las direcciones url (que comiencen por http) en hiperenlaces. Para ello utilizamos expresiones irregulares junto con la función preg_replace de php.

$cadena = "Este es un texto que contiene una dirección url http://www.leonpurpura.com";
 
function convertirUrls($cadena){
	return preg_replace("#http://([A-z0-9./-]+)#", '<a href="$1">$0</a>', $cadena);
}
 
// Modo de uso:
echo convertirUrls($cadena);

Vamos a crear una función en php para obtener la cadena de texto comprendida entre otras 2 palabras o cadenas de texto (inicio, fín). Utilizaremos la función explode para dividir en 2 partes la cadena y obtener así la cadena resultante comprendida entre esas 2 otras variables.

function obtenerCadena($contenido,$incio,$fin){
    $r = explode($inicio, $contenido);
    if (isset($r[1])){
        $r = explode($fin, $r[1]);
        return $r[0];
    }
    return '';
}
 
// Modo de uso
$mitexto = 'Sin León no hubiera España, que antes que Castilla leyes, Concilios, fueros y reyes, dieron prestigio a León. La fama cantó su hazaña con clarines de victoria: ¡León escribió la historia de Covadonga a Colón! Con su sangre a torrentes vertida dio a la Patria preciado blasón y en sus labios cobró vida el hermoso lenguaje español';
 
echo obtenerCadena($mitexto,'fama','victoria');
// Resultado: cantó su hazaña con clarines de

La mayoría de páginas web son compatibles y funcionan bien en el iPhone y Blackberry. Sin embargo, aún es posible hacer estas páginas web más optimizadas para el iPhone de Apple, pasándole mayor información al iPhone acerca de cómo se debe mostrar la página web en el navegador del iPhone (Safari Mobile).

Además, para aquellas web que tratan de emular la funcionalidad de las aplicaciones incorporadas en iPhone, tales como aplicaciones web que utilizan Canvas, AJAX para limitar el tamaño de la página a 320×480px (o 480×320px), lo mejor es asegurarse de que el iPhone y Blackberry sean totalmente compatibles para nuestra web, utilizando el formato correcto y así evitar problemas, como que la página web no escala adecuadamente cuando se gira la pantalla, etc…

La pantalla

La pantalla es una de las partes más importantes que tenemos que conocer para optimizar una página web para iPhone, las medidas reales (en pixeles) de la pantalla de nuestro dispositivo móvil, en este caso el iPhone tiene una resolución de pantalla de 320×480 píxeles (o viceversa, dependiendo de la orientación).

También es posible que hayáis oido hablar del término “viewport“, que es la zona “visible” o visor de una página dentro de un navegador, es decir, sacando scroll-bars, menús, etc.

Una de las mejor manera para optimizar nuestra web para iPhone es añadiento una nueva etiqueta META dentro de la etiqueta HEAD de nuestro documento web. Con esta META lo que hacemos es indicarle al teléfono el tamaño de visualización de la página web:

<meta name="viewport" content="initial-scale=1.0" />
<meta name="viewport" content="user-scalable=false" />

También podemos personalizar a mano el ancho al que debe prepararse la página web, en este caso a 320px de resolución y no permitimos ampliar y reducir el uso emergente del zoom (user-scalable=false):

<meta name="viewport" content="width=320,user-scalable=false" />

CSS

Para hacer sus páginas web sean más accesibles en diferentes plataformas, le sugerimos que no utilice valores absolutos en tu CSS. En su lugar, mejor utilizaremos valores relativos. Para el tamaño de fuente, utilizaremos porcentajes como el 80% y el 120% en vez de utilizar valores absolutos como 10px, 12px, etc…

Uso de tablas. Los diseños basados en tablas se convertieron hace años en parte fundamental del diseño web. Este tipo de diseño es más importante que nunca en el iPhone porque los usuarios pueden hacer zoom en una columna específica con el programa doble-click del iPhone.

Detectar iPhone automaticamente

Vamos a ver cuando un usuario está navegando desde un iPhone. La forma más sencilla de hacer esto es-como es obteniendo iel navegador actual del usuario.

A continuación se muestra un código PHP que buscar el agente del usuario.

if (ereg("Mobile.*Safari",$_SERVER['HTTP_USER_AGENT'])) {
echo "Estas navegando desde iPhone";
}

JAVASCRIPT

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
	 if (document.cookie.indexOf("iphone_redirect=false") == -1) window.location = "http://www.bufa.es/mobil";
}

PHP

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')){
	header('Location: http://www.bufa.es/mobil');
	exit();
}

CSS

<link media="only screen and (max-device-width: 480px)" href="estilo_mobil.css" type= "text/css" rel="stylesheet">
<link media="screen and (min-device-width: 481px)" href="estilo_normal.css" type="text/css" rel="stylesheet">

Puede que en nuestro tema de wordpress nos interese alguna vez no mostrar el último post o entrada en una determinada sección de nuestra web… para ello utilizaremos la función query_post y su parámetro offset (al cual le podemos indicar el número de entradas a excluir).

A continuación vamos a listar los 5 post más recientes (posts_per_page=5) excluyendo solo el último (offset=1):

<?php
// el Query
query_posts('posts_per_page=5&offset=1');
 
// el Loop
if ( have_posts() ) : while ( have_posts() ) : the_post();
 ..
endwhile; else:
 ..
endif;
 
// reseteamos Query
wp_reset_query();
?>

Habeis insertado recientemente el botón share de facebook y tenéis problemas con el título que queréis compartir? Por defecto facebook te coge el contenido de la etiqueta TITLE dentro del HEAD de tu página web. Es posible que posteriormente queráis cambiarlo por otro texto… pués bien, cuidado por que facebook guarda en cache el primer título (sobre todo en páginas web nuevas) y tarda varios días en actualizarse por el nuevo.

Ejemplo de uso de botón share de facebook:

<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.bufa.es&t=Bufa%20Webmaster"><img src="http://www.onbile.com/images/share_facebook.png" width="50" height="18" alt="Facebook"></a

Ejemplo de uso de la página destino dentro de la etiqueta HEAD

<fb:share-button class="meta"> 
<meta name="title" content="Mi Título" /> 
<meta name="description" content="Aquí la descripción de la página web" /> 
<link rel="image_src" href="http://www.bufa.es/images/milogo.png" /> 
<link rel="target_url" href="http://www.bufa.es" /> 
</fb:share-button>

Onbile es una plataforma online multi-idioma (español, inglés, portugués, italiano, francés, alemán y japonés) para crear la versión móvil (iPhone, Blackberry, etc..) de tu página web gratis.

Si aún no tienes la versión movil de tu web es posible que necesites algunas de estas plantillas web para móvil.

En solo 5 minutos, en 3 pasos:

• Customiza tu diseno
• Anade tus contenidos, páginas, secciones, imagenes, etc.
• Pega el código en tu página de inicio

http://www.onbile.com