Eliminar BOM para validar tu pagina web
"The Unicode Byte-Order Mark (BOM) in UTF-8 encoded files is known to cause problems for some text editors and older browsers. You may want to consider avoiding its use until it is better supported."
Aqui descubriremos que significa Byte-Order Mark (BOM) y como podemos deshacernos de ella de una forma total y definitiva. ( aplicable también a blogs como por ejemplo wordpress, que parece que ocasionalmente sucede).
¿Qué es el BOM? Su significado es Byte Order Mark (BOM) y son unos carácteres que se sitúan al principio de un archivo codificado como UTF-8 para avisar a las máquinas que lo procesen si deben leer y guardar ese archivos mediante el metodo big-endian o little-endian. Estos dos metodos simplemente se basan en la manera en como se almacenan los datos, no estamos hablando de formatos o lenguajes ahora mismo sino de codigo binario cosa que normalmente a un programador web a menos de que haya alcanzado al nivel 100 no necesitaria (normalmente) entender.
Cuando aparece el BOM
La marca de BOM es añadida por nuestro editor de texto/código automáticamente, algunos editores te permiten elegir si añadirla o no en sus preferencias o cuando guardas el archivo, otros no tienen la capacidad de añadirla y otros la añaden siempre (posiblemente la ultima posibilidad es la que generó nuestro pequeño problema...).
Cómo quitarlo
Muchos sitios recomiendan que abras tu archivo en un editor que te permita guardar archivos como UTF-8 no BOM y que lo guardes con ese formato pero yo personalmente aunque pueda funcionar, ese método no lo recomiendo ya que la única manera de saber si funcionó es validando tu archivo, nunca sabrás donde estaba el fallo ni si lo estas arreglando en el archivo correcto.
Puedes pensar que es obvio, si el index de tu página produzca el error es que ese archivo contiene el BOM. Pero, este error puede saltar por cualquier archivo adjunto a nuestro html/php. Puede ser un js externo, un include de php, cualquier fichero que incluyamos a nuestro archivo puede ser el responsable. Así que vayamos a la parte práctica.
Eliminar BOM editando el código binario
La única manera de saber con seguridad si un archivo contiene la marca maligna es abrirlo con un editor hexadecimal y comprobar si contiene el carácter al principio de todo. El código hexadecimal para BOM es “EF BB BF” asi que tendremos que comprobar todos los archivos que usemos en nuestra web.
Un error común de BOM
"Warning: Cannot modify header information - headers already sent by (output started at C:\xampp\htdocs\www\gbelandria\index.php:1) in C:\xampp\htdocs\www\gbelandria\index.php on line 3"
Cuando trabajamos con cookies, el explorador nos indica que no puede imprimir nada antes de la cabecera, esto es una señal tipica de que el archivo tienen BOM.
El BOM es una ladilla
Mejorando el paginador (PHP)
Para paginar resultados necesitamos saber 3 valores:
1. Número de Página: este valor lo pide el usuario, asi que es fácil obtenerlo.
2. Total de registros por página: normalmente lo define el programador con una constante
3. Total de registros: necesitamos saber el total de registros para poder crear la cantidad de enlaces necesarios por página.
Donde se desperdicia el potencial y malgasta recurso de MySQL normalmente es en el 3 valor. Pues muchos ejecutan una consulta con LIMIT y otra consulta con un COUNT sin el LIMIT. Y es allí donde es el error, ya que MySQL ofrece las funciones: SQL_CALC_FOUND_ROWS y FOUND_ROWS.
* SQL_CALC_FOUND_ROWS: calcula el número de resultados de una consulta sin LIMIT.
* FOUND_ROWS: obtiene el resultado del último SQL_CALC_FOUND_ROWS ejecutados.
Aunque con estas funciones debemos igual ejecutar dos consultas, el calculo y tiempo de respuesta es mucho más rápido que haciéndolo con COUNT.
<' ?php
$link = @mysql_connect("localhost", "usuario", "password");
mysql_select_db("base_de_datos", $link);
// maximo por pagina
$limit = 5;
// pagina pedida
$pag = (int) $_GET["pag"];
if ($pag <' 1)
{
$pag = 1;
}
$offset = ($pag-1) * $limit;
$sql = "SELECT SQL_CALC_FOUND_ROWS id, nombre FROM tabla LIMIT $offset, $limit";
$sqlTotal = "SELECT FOUND_ROWS() as total";
$rs = mysql_query($sql);
$rsTotal = mysql_query($sqlTotal);
$rowTotal = mysql_fetch_assoc($rsTotal);
// Total de regist ros sin limit
$total = $rowTotal["total"];
? >
<'tabIe border="1" bordercolor="#000">
<'t head>
<'t r>
<'t d>Id<'/t d>
<'t d>Nombre<'/t d>
<'/t r>
<'/t head>
<'tbody>
<' ?php
while ($row = mysql_fetch_assoc($rs))
{
$id = $row["id"];
$name = htmlentities($row["nombre"]);
? >
<'t r>
<'t d>
<' ?php echo $id; ? >
<'/t d>
<'t d>
<' ?php echo $name; ? >
<'/t d>
<'/t r>
<' ?php
}
? >
<'/tbody>
<'tfoot>
<'t r>
<'t d colspan="2">
<' ?php
$totalPag = ceil($total/$limit);
$links = array();
for( $i=1; $i<'=$totalPag ; $i++)
{
$links[] = "<'a href=\"?pag=$i\">$i<'/a>";
}
echo implode(" - ", $links);
? >
<'/t d>
<'/t r>
<'/tfoot>
<'/tabIe>
Google Wave
Lo que vimos es un preview para desarrolladores, pero de entrada podemos decir, sin dudas, que las tecnologías detrás de Google Wave cambiarán la web en el próximo año, de la misma manera que Gmail creó la Web 2.0.
Todo está basado en el navegador, HTML 5
Google está empujando MUY fuerte a HTML 5. Primero con la versión de Gmail para iPhone, luego con todas las novedades de Android y ahora con Google Wave.
Sin embargo, no son idiotas y saben que si quieren éxito, han de poder implementar esto en todos los navegadores. Por lo que desde ahora, todo navegador con el plugin Google Gears instalado obtendrá mágicamente las habilidades de HTML 5. Bases de datos offline, Canvas de dibujo vectorial (nada de SVG o SWF), videos nativos, etc.
Pero no se contentaron con HTML 5. Crearon una nueva tecnología para navegadores...
Drag and drop en el navegador
Imagina arrastrar una carpeta llena de fotos desde tu escritorio encima del navegador y subir automáticamente a Facebook o a Flickr todas esas fotos, son más clicks ni procesos que el arrastras y soltar. Eso es posible ya mismo en Google Wave. Es una de las capacidades que Gears incluirá para los navegadores, pero Google ya envió la proposición a W3C para ser incluido en el draft definitivo de HTML 5. Y ya vendrá implementado en las próximas versiones de Webkit, Google Chrome y Firefox.
Chat, edición y colaboración en tiempo real
Un nuevo protocolo de comunicación instantánea, aparentemente más veloz que lo que hemos visto en sistemas de mensajería como messenger o Google Talk, llamado Wave Protocol, está detrás de varias innovaciones de Google Wave.
Imagina ir respondiendo un mensaje en Messenger y ver letra por letra lo que escribe la otra persona. Luego extiendelo a la edición de un documento. Donde cuatro personas pueden estar trabajando sobre el mismo documento, al mismo tiempo, en tiempo real. O quizás retocando una fotografía y dando comentarios punto por punto en cada zona modificada.
Y todo centrado en un "wave", la visión de Google del futuro del email.
Publicación a blogs y otras plataformas de contenido
¿Cuantas veces una serie de emails se convierten en un post de blog? ¿Cuantas veces la cadena de correos que escribiste con el jefe se vuelven un comunicado de prensa o una carta para clientes? Google Wave toma todo este contenido, lo centraliza en un "wave" y tras terminar su edición (con colaboración en tiempo real), es posible publicarlo a un .doc, convertirlo a PDF, enviarlo por correo tradicional, ponerlo en blogger o en una multitud de plataformas, como quieras. Incluso exportarlo a HTML o a texto plano.
Además, el API de Google Wave permitirá que esta plataforma se conecte, virtualmente, a lo que te imagines.
Google Wave puede ser integrado en cualquier sitio web
Tomando una nota de Friendfeed, la capa de comentarios en tiempo real puede ser instalada en CUALQUIER sitio web, embebible. De modo que puedes poner comentarios realtime y colaboración en tu blog, foro o donde sea. Esta cosa tiene que cambiar la forma que usaremos internet y la centralización de las conversaciones.
Un nuevo corrector ortográfico basado en la inteligencia artificial de Google Translator
Hace un año, Google analizó cientos de miles de libros escritos en varios idiomas, traducidos profesionalmente por humanos. Creo una serie de algoritmos que analizaran las conversaciones en esos libros y, usando este mapa de conocimiento, traducir cualquier tipo de conversación basada en el contexto.
Pues ahora los cabrones han tomado esta tecnología y han creado un corrector ortográfico que es capaz de analizar y entender el contexto de la conversación y corregir a un nivel que, honestamente, jamás se ha visto. Errores ortográficos, gramaticales o incluso de contexto.
Google Wave tiene gadgets colaborativos
Con el API abierto de Google Wave es posible crear aplicaciones para Wave. Las aplicaciones son básicamente widgets incrustables dentro de los "waves". Pero sumándole la colaboración realtime y el historial de modificaciones, se crean interesantes posibilidades.
Imagina incrustar un juego de ajedrez. Dos personas juegan, pero para Google, cada movimiento del juego es una edición a un documento. De modo que si quieres dar un replay a una jugada, vas a una linea de tiempo colaborativa, mueves para adelante y atrás y ves estos cambios volviendo a ocurrir.
Los gadgets están hechos en Javascript y HTML 5.
Mapas colaborativos y "grabables"
Toma lo que dije de los gadgets y aplicalo a un mapa. Puedes grabar con instrucciones detalladas y comentarios una ruta en un mapa de Google Maps, enviar el "wave" a tu madre y decirle cómo llegar a tu nuevo apartamento, paso a paso.
Encuestas, formularios y minería de datos a través de waves
Es posible enviar formularios en waves y permitirle a Google Wave recibir, indexar y analizar la información que los destinatarios del wave llenen. De modo que puedes enviar una encuesta de calidad a todos tus empleados y ver en tiempo real las respuestas de ellos, quien ha respondiendo, quien no.
Sumale Google Charts y puedes tener gráficos analiticos de los resultados recibidos. Por supuesto, en tiempo real.
Google Wave Server, Google Wave instalable en tu servidor
Google Wave Server es Open Source. Puedes descargarlo e instalarlo en el servidor de la oficina, reemplazar el correo con waves y tener todo en tu empresa. Puedes personalizarlo con los colores y logos de tu empresa, crear una intranet... lo que sea. Es open source. Sólo necesitas un server Linux (o quizás windows, si está hecho en Java).
Fuck... instalable en tu propio servidor, open source...
Traducción real-time de lo que escribes
¿Recuerdan el corrector ortográfico con inteligencia artificial. Ahora, si hablas ahora mismo con un japones al otro lado del mundo, puedes hablarle en español y decirle a Google Wave que traduzca en tiempo real la conversación a japones para él. Él, por supuesto, puede hacer lo mismo.
Va de nuevo: Conversación entre dos idiomas diferentes con traducción en tiempo real. Si esto funciona a un 80% de calidad y llega al mainstream, cambiará el comercio y la conectividad del mundo a un nivel doloroso.
¿Cuando está disponible esto?
Hay invitaciones para la beta privada de Google Wave. Por lo que hemos escuchado en la rueda de prensa, aun es un trabajo en proceso y faltan muchas cosas, cómo ¿Cómo se borra un wave? ¿Quien es el dueño de un wave? Pero a medida que estas cosas terminen, seguro empezará a estar disponible para el público pronto.
Sospecho que en un año tendremos versión definitiva instalable en nuestros servers para todos.
Algunas cosas que probablemente no conozcas sobre PHP
Estas dos funciones ip2long() y long2ip() sirven para almacenar las direcciones IP cómo enteros en vez de cómo cadenas en la base de datos, esto reducirá los recursos de almacenamiento conseumidos de los 15 bytes de un chasr(15) a los 4 bytes de un entero.
Validación de direcciones de email
La validación parcial de direcciones IP es fácil gracias a la función checkdnsrr().
Esta función nos asegura que el dominio devuelto existe, por ejemplo muy útil en caso cómo este:
'usuario@gmail.com' Válida
'usuario@wwwgmail.com' No Válida
Formatear código
Una función que formatea una cadena pasada, especialmente pensada para código fuente, highlight_file().
Muy útil en caso de que queramos compartir dudas sobre nuestro código con algún amigo ya sea por el messenger, IRC o cualquier servicio parecido.
No muestres los errores
Evita mostrar los errores de mensajes con la función error_reporting(0). Útil en caso de tener hospedaje compratido deberás incluirlo en la primera línea de cada uno de tus scripts, esto evitará que información de conexiones PHP y usuarios MySQL sea mostrada.
Consejos para optimizar PHP
2 - Incrementar una variable en un método es lo mas rápido, del mismo modo que hacerlo en una función.
3 - Incrementar una variable global es dos veces mas lento que una variable local.
4 - Incrementar la propiedad de un objeto (ej. $this->prop++) es 3 veces más lento que incrementar una variable local.
5 - Incrementar una variable indefinida es 9 ó 10 veces más lento que una ya pre-declarada.
6 - El hecho de declarar una variable global a pesar de que no la utilices en ninguna función pone lento tu script, PHP tiene que chequear si la variable existe.
7 - La llamada a una función con un parametro toma aproximadamente el mismo tiempo que de 7 a 8 operaciones con variables locales, y esa misma llamada a un método supondrían unas 15 operaciones.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt magna ut justo suscipit viverra. Vestibulum nisi nulla, imperdiet tristique consequat luctus, auctor non nulla.
Quisque mi orci, imperdiet et vestibulum ut, feugiat a ligula. Nulla facilisi. Nullam nulla magna, tincidunt eu tempus vitae, gravida suscipit risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Nullam sit amet commodo sapien. Maecenas tincidunt sem quis lacus mattis vel tincidunt risus consectetur. Vestibulum dignissim ornare nulla nec consequat. Praesent pretium leo sodales orci ullamcorper id aliquet magna interdum. Duis tempor vestibulum erat, ac auctor felis vehicula nec. Cras porttitor tortor facilisis libero faucibus ut placerat quam accumsan.
Suspendisse eu commodo metus. Mauris volutpat varius pretium. Maecenas sit amet ante turpis, id feugiat velit. Sed vitae nisi lectus, non vestibulum ipsum. Fusce est libero, dignissim vel venenatis quis, consectetur id dolor.
Pellentesque placerat tincidunt gravida. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi.
…
No, no me he vuelto loco. Pero esto es lo que ha debido pensar un pana cuando le he mandado una prueba de diseño de una página con este texto de arriba y se ha quedado extrañado diciéndome que no sabía latín. Si, es latín, pero yo tampoco se lo que significa, pero tiene una explicación.
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen.
No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
Javascript sobre el URL
Imagenes en movimiento
javascript:scroll(0,0); R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px"; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',5); void(0);
Editar página
javascript:document.body.contentEditable='true'; document.designMode='on'; void(0);
Esto sirve a veces para ver como estan distribuidos los elementos de cualquier pagina. Si ves una imagen que no se mueve es porque esta cargado como backgroung.