Buscar en este blog

viernes, 23 de septiembre de 2011

Manual google analytics español


Mi compañero de batallas ha publicado su gran libro:

Analítica Web con Google Analytics ¡Ya esta aquí!

La visión de Google Analytics por un experto y profesional que además en Sociólogo.

Google Analytics parace muy sencillo: si nos limitamos a visitas, contenido, rebote ...

Pero realmente dar respuesta al jefe de marketing o al jefe comercial no basta con ello.

Ahí entran los usuarios únicos, segmentos avanzados, alertas personalizadas, ...

Google analytics genera más de 80 informes no te quedes solo en el panel (dashboard)

lunes, 29 de marzo de 2010

Útil. Unir dos pdf

A veces nos encontramos con la necesidad de unir dos documentos pdf.
Una windowsera me decía que el PDF Creator lo hacía, yo seguía buscando alguna utilidad del Open Office y al final la solución estaba aún mas cerca. Ghostscript (PostScript and PDF language interpreter and previewer)

Ejecutando en consola :


user@host:~$ gs -q -dNOPAUSE -dBATCH -sDEVICE=pdfwrite -sOutputFile=union.pdf \
> fichero1.pdf fichero2.pdf


Para mas información consultar el manual

user@host:~$ man gs


El truco lo he sacado, cómo no de linuca, http://www.linuca.org/body.phtml?nIdNoticia=343


Espero os sirva de ayuda ;-)

domingo, 14 de febrero de 2010

Javascript framework: mootools, prototype, jquery

Desde finales de los noventa a la actualidad ha evolucionado la web a pasos agigantados. E incluso han aparecido nombres como web 2.0 , ajax , internet 2 , … pero realmente no representan de por sí ni una tecnología, ni un lenguaje de programación, si no más bien una tendencia, una moda, una exclusividad e incluso no se quien utilizaba el termino 3.0, que a mi me sigue sonando la versiones del software que compilo.

Pero si me voy a quedar con javascript no intrusivo y gracias a los framework cada vez es más sencillo lograrlo.
Todavía son muchos los desarrollos web en los que me encuentro un onclick, onload, onchage, onsubmit que son válidos aunque no tendríamos unas capas bien organizadas y por supuesto tendríamos javascript intrusivo.

Muchos debates he tenido en los desarrollos sobre mi exceso de validaciones de formularios, si ya has validado en javascript para qué validar en el lado del servidor. Por mucho que me traten de convencer yo valido siempre en el lado del servidor, ya que las palabras de Alexander Hristov nunca se me olvidarán: Siempre se valida en el lado del servidor, en el lado del cliente no sabes si realmente estará habilitado el javascript.

Actualmente hasta mi móvil interpreta javascript, no suelo navegar mucho con lynx pero si que suelo hacer muchas peticiones web con curl y con éstos no hay javascript que valga.

Con ajax podemos aprovechar la validación del servidor para mostrarle directamente al usuario los errores o campos incompletos, enviando el formulario al servidor sin hacer un submit completo de página y recogiendo el error del response.

Pero vamos aún más allá, con javascript no intrusivo, parece que tenemos más trabajo de desarrollo, pero no es cierto, logramos tener separado el html del javascript, ya que con los framework de javascript añadir eventos y peticiones con ajax a cualquier elemento html es la mar de fácil, yo suelo usar mootools, aunque me he comprometido a no hacer técnicas monopolistas y también estoy desarrollando cosas con jquery , las prototype me las dejé por el camino...

Volviendo al javascript no intrusivo, primero desarrollo el form como una petición normal, completa de página y me devuelve el resultado , errores o correcto proceso. Una vez que la pantalla hace su funcionalidad completa, a la vieja usanza, le añadimos el javascript, pero no con onclick o onsubmit si no con un addEvent al form html ya sea por id o por selectors , cambio el submit para que sea por ajax y en el lado del servidor, sea servlet, struts, php, Django, … no redirijo a la página, vista, si no tan solo devuelve el mensaje de error u ok del servidor, a veces es mejor enviar una cabecera de error 501 yo prefiero un 400 Bad Request y así en ajax podemos utilizar el response status code, para saber si el servidor ha dado error o ha realizado el proceso correctamente.

El usar javascript NO intrusivo va a dejar un html más limpio para SEO, los rastreadores que navegan como el lynx, al tener la funcionalidad válida para petición http como para petición ajax nos convertirá en más versatil el desarrollo en el lado del servidor.

Me quedo con las ganas de insistir en el MVC Modelo Vista Controlador y en separar las css y el html, pero me lo guardo para otro POST

sábado, 6 de febrero de 2010

Navegadores. Pasate a Firefox o Chrome

Aprovechando el anterior post sobre Firebug, se me había olvidado mencionar las estadísticas de uso de los navegadores:

Aunque el IE tenga la mayor cuota del mercado, la caída estrepitosa es cada vez más inminente.

Firefox cada vez sube más y Chrome que por fin lo puedo usar sin wine crossover en linux también avanza considerablemente.

Si segmentamos el uso a los fines de semana, Firefox puede llegar a tener tanta cuota como el IE dado que en los hogares, dónde se puede elegir libremente el navegador, la gente se instala Firefox.

Pero tenemos la victoria sobre el derecho a elegir, libertad, en la Unión Europea, donde Microsoft deberá dejar a sus usuarios elegir libremente el navegador a utilizar, y cual será la elección de las personas ???

Ver las gráficas de hitslink.com

También están los recientes ataques a Gmail en China, pero realmente han sido ataques a Google, o han sido una vez más las vulnerabilidades del IE de MS.

Todavía me encuentro muchas personas navegando con el IE 6, google va a dejar de dar soporte para herramientas como Google Docs, pero con las incompatibilidades de los png y sobre todo de las css, y los pixeles como unidades de medida inexactas ya no podía más.

Pero sobre todo se trataba de la seguridad, las personas estaban vendidas, tenías la puerta de su coche abiertas, bajadas las ventanillas, las llaves puestas y la tarjeta de crédito con el pin escrito pegado con un postit, yo por eso voy en bicilceta, "jejejeje"

Los demás navegadores, también tienen bugs y vulnerabilidades, pero se van actualizando y corrigiendo, en cambio entre MS y que la gente lo tiene todo pirata, no tienen acceso a los parches, SP, ...

UNA RAZÓN MÁS POR LAS QUE PASARSE AL MUNDO LIBRE se libre

Volviendo a los navegadores, hay que tener en cuenta que los smartphones: android, iphone, ... empiezan a aparecer entre los visitantes y cada con sus navegadores, muchos basados en Mozilla (Firefox) por ello la cuota aumentara y el desarrollo web hay que orientarlo para cualquier navegador, por ello cumplir los estandares w3c para html, css son fundamentales

También están los netbooks, los mini portátiles, que hacen que la resolución de 800 x 600 px haya que tenerla en cuenta.

No pongo apenas referencias, pero googlea un poco y encontrarás artículos y noticias sobre todos estos temas.

Firebug

Todavía me encuentro programadores que no conocen esta herramienta, supongo porque solo desarrollan para el IE. Creo que desde hace bastante tiempo ya no es una utopía programar javascript para todos los navegadores, tanto para el FireFox, Chrome, Opera, Safari, ...

Los frameworks como mootools, prototype, jQuery, ... nos ayudan y facilitan esta tarea entre otras muchísimas más.

Yo siempre desarrollo con Firefox y por supuesto con Firebug, y luego hago test en los demás navegadores.

Sobre Firebug lo mejor es instalarlo, es un complemento del Firefox, y ver todas las funcionalidades y herramientas que nos facilita:

Consola // para todo y principalmente depurar javascript
HTML // inspeccionar elementos y css
CSS
Script
DOM
Red // tanto para peticiones AJAX e incluso para Flash (bye, bye, flash...)

Los que usamos ubuntu tenemos un problemilla con la última versión de FireFox 3.5 y de Firebug 1.5 , pero tranquilos en launchpad.net ya se abrió el debate y como siempre se soluciona, solo hay que usar Firebug 1.4 , tener en cuenta que el 1.5 es una versión alpha.

Podéis descargar el Firebug en http://getfirebug.com/releases/firebug/1.4/

viernes, 18 de septiembre de 2009

AJAX con mootools. Envio de formulario

Con las mootools es muy fácil usar ajax sin necesidad de manejar el objeto XmlHttpRequest y complicarse con las compatibilidades de los navegadores.

Este ejemplo es el envio de un formulario, tan sencillo como formulario.send();

Ahí va el código:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<script type="text/javascript" src="js/mootools/mootools-1.2.1-core-yc.js"></script>
<style>

/* los colores son muy mejorables */

.formulario {
display: block;
border: 0.1em solid green;
background-color: #777070;
color: #ffffff;
font-size: 0.7em;

}
.formulario label {
display: block;
}
.formulario input {
display: block;
background-color: #efdddd;
color: #f60962;
}
.formulario input[type=submit] {
background-color: #000000;
color: #f60962;
font-weight: bolder;
}
.codigo {
width: 10em;
}
.descripcion {
width: 20em;
}
.cantidad {
width: 5em;
}
.precio {
width: 5em;
}
.dto {
width: 5em;
}
.tax {
width: 5em;
}
.importe {
width: 5em;
}

</style>
</head>
<body>

<form action="controller.do" id="formulario" name="formulario" method="post" class="formulario">
<label>Código</label>
<input type="text" id="codigo" name="codigo" maxlength="16" class="codigo" />
<label>Decripción</label>
<input type="text" id="descripcion" name="descripcion" maxlength="120" class="descripcion" />
<label>Cantidad</label>
<input type="text" id="cantidad" name="cantidad" maxlength="9" class="cantidad" />
<label>Precio</label>
<input type="text" id="precio" name="precio" maxlength="11" class="precio" />
<label>Dto</label>
<input type="text" id="dto" name="dto" maxlength="5" class="dto" />
<label>Tax</label>
<input type="text" id="tasa" name="tasa" maxlength="5" class="tax" />
<label>Importe</label>
<input type="text" id="importe" name="importe" maxlength="15" class="importe" />
<input type="submit" id="guardar" name="guardar" value="Guardar" title="Guardar"/>
</form>
<div id="resultado"></div>
<script type="text/javascript">

window.addEvent('domready', function() {
addEventToForm('formulario','resultado');
});
function addEventToForm(_id_form, _id_result) {

$(_id_form).addEvent('submit', function(e) {
//Prevents the default submit event from loading a new page.
e.stop();

this.set('send', {onComplete: function(response) {

$(_id_result).set('html', response);
}});
//Send the form.
this.send();
});
}

</script>
</body>
</html>


El código de controller.do tan solo es...

<?php
print_r($_REQUEST);
?>

martes, 15 de septiembre de 2009

HTML div organizar contenido

Como todavía me encuentro muchas webs y aplicaciones web con <TABLE><TR><TD>
continúo con el tema de usar div en lugar de table.

Con el siguiente ejemplo podemos organizar una página web o documento html
con divs, centrando el contenido y estableciendo un diseño proporcional,
que se adaptaría a cualquier resolución de pantalla y dispositivo.

No usamos ningún <table> ni <tr> ni <td> ni ..




Ahora el código html y css

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>div html</title>
<!--
/* lo ideal sería tener la hoja de estilos en otro fichero
* pero para el ejemplo lo metemos dentro del documento html
*/
<link rel = "stylesheet" type = "text/css" media="screen" href="media/css/all/estilos.css"/>
-->
<style type="text/css" media="all">
body {
/* para centrar el contenido */
background-color:#ffffff;
text-align:center;
margin:0 auto;
}
#container {
/* # la almoadilla aplica el estilo a los tag html con ese id */
margin: 0 auto;
text-align:left;
/*width:780px; /* para 800 x 600 */
width: 100%;
}
#cabecera {
background-color: blue; /* mejor definir color notación #333ccc */
color: white;
}
#menu {
background-color: orange;
float: right;
width: 20%;
}
#contenido {
background-color: #eadcdc;
float: left;
width: 75%;
}
#pie {
clear: both;
background-color: #333ccc;
color: #ffffff;
}
</style>
</head>
<body>
<div id="container">
<div id="cabecera">
cabecera
</div>
<div id="menu">
menu
<ul>
<li>item menu</li>
<li>item menu</li>
<li>item menu</li>
<li>item menu</li>
<li>item menu</li>
<li>item menu</li>
<li>item menu</li>
<li>item menu</li>
</ul>
</div>
<div id="contenido">
contenido
<h2>La Ñ con utf-8</h2>
<p>
Podemos usar cualquier caracter de nuestro queridisimo lenguaje
con la codificación UTF-8
Ñ ñ á é í ó ú Á É Í Ó Ú ç Ç
</p>
<h2>Titulo dentro del contenido</h2>
<p>
Texto dentro del contenido, texto dentro del contenido
Ah los diseñadores gráficos usan el siguiente texto como borrador
</p>
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

</div>
<div id="pie">
pie
</div>
</div>
</body>
</html>

Fundamental es separar el contenido del diseño.
Por un lado nuestro contenido organizado con html o mejor con xhtml
y por otro lado el diseño.

Copia todo el html, guardalo en un fichero html o xhtml y abrelo con un navegador.

Todo el contenido dentro del tag <style> debería pasar a un fichero estilos.css
pero lo puedes dejar así para hacer pruebas.

También ejemplos visuales de divs con distintos css en la propiedad de display

Y cómo no la w3c con su guía de referencia rápida de css y xhtml:
Guía de Referencia CSS 2.1
Guía de Referencia XHTML