Avisar de contenido inadecuado

Eventos en Pixelovers

Expand

onBeforeUnload: Cómo recordarle al usuario que grabe antes de cerrar una pagina

Hace poco me surgió para un proyecto la necesidad de interceptar el cierre de la pestaña del navegador. La idea era que si el usuario estaba editando los datos de un formulario y cerraba la pestaña sin haber guardado estos datos, se le avisara de que iba a perder los datos y se le diera la oportunidad de cancelar el cierre y guardar la información del formulario.

Asi que investigando un poco descubri el evento onBeforeUnload que se comporta de una forma peculiar.

onBeforeUnload se lanza antes de que se descargue el contenido de la pagina, y es una funcion que está integrada en la mayoria de los navegadores. En los navegadores donde no esté definida simplemente se ignora la asignación de este evento.

El tema es que el manejador de este evento debe devolver una cadena que es la que se mostrará al usuario junto con los botones de “Abandonar la página” o “Permanecer en la página”

Expand

Javascript y jQuery: Consejos y Buenas Practicas (Parte II)

Hace unas semanas iniciamos una serie de 2 posts para hablar de lo que consideramos que son unas buenas practicas para desarrollar codigo Javascript con la libreria jQuery.

http://stc.obolog.net/multimedia/fotos/309000/308801/308801-209198.jpg

Con este post cerramos la serie y profundizamos un poco más en el tema

En el primer post de esta serie comentamos algunas generalidades que nos pueden servir de base a la hora de desarrollar un código JS eficiente. En este segundo post hablaremos de como solucionar de forma eficiente problemas concretos que nos solemos encontrar en nuestros desarrollos.

Asi que, ahi vamos...

Expand

Namespace en eventos de jQuery

Namespace o espacio de nombre (españolización que no se usa) es la contextualización de una variable o método, es decir, consiste en asociar un identificador a un grupo de variables y/o métodos.  En la vida real disponemos de muchos ejemplos, por ejemplo OboLog tiene el número de post 123, y Pixelover también puede tener el post 123 porque ambos están en namespaces diferentes, obolog y pixelover, respectivamente.

Ahora que sabemos que significa, vamos a ver como se aplica esto a los eventos en jQuery y luego veremos una aplicación práctica de los namespaced events. Todos sabemos como añadir un manejador de evento (click, por ejemplo) a un elemento mediante el método bind:

$("a").bind("click", function() { /* Code... */ });

Ahora si queremos contextualizar ese evento click, que pertenezca a un grupo utilizamos el siguiente código:

$("a").bind("click.namespace", function() { /* Code... */ });

Esto funcionará, igual que el anterior ejemplo, en cada click que se haga a los elementos a, pero además podremos llamar únicamente a esta función mediante el metodo trigger o desligar un grupo de funciones asociadas a un evento,

$("a").trigger("click.namespace");

Con esto hemos lanzamos el evento click con el espacio de nombre "namespace" de los elementos a.

$("a").unbind(".namespace");

Y con esto hemos desligado todos los tipos de eventos del espacio de nombre namespace, ya sean eventos click, dbclick, mousedown, mouseup, etc..

¿Se te ocurre como podrías utlizar los espacios de nombre en los eventos? Aquí te dejo un ejemplo simple de namespaced events. Consiste en un formulario que añade los valores que introduces en el campo "name" en una lista. La particularidad es que he dividido la tarea en 2 funciones, una para crear la lista y otra para añadir elementos, la primera de ellas la bindeo antes que la segunda y la desvindeo al acabarse ella misma. De esta manera consigo que la primera vez se llame a ambas funciones y las sucesivas solamente a la segunda.

HTML:

<form action="" method="post" id="addName">
<p>
  <label for="Name">Nombre:</label>
    <input type="text" name="name" value="" id="name"/>
  </p>
  <p><input type="submit" value="Añadir nombre"/></p>
</form>

Javascript:

//Bind Event for the first time
$('#addName').bind('submit.first', function(){
    $(this).after('<p>Lista de nombres:</p><ul id="listNames"></ul>').unbind('submit.first');
});

//Bind Event for ever
$('#addName').bind("submit", function(){
if('' == this.name.value) return false;
$('#listNames').append('<li>' + this.name.value + '</li>');
return false;
});

Ese es un ejemplo para ver el funcionamiento del namespacing, pero en este caso, ya que eliminamos el evento en la primera ejecución sería más útil utilizar el atajo one, quedando el primer evento de la siguiente manera:

//Bind Event for the first time
$('#addName').one(function(){
    $(this).after('<p>Lista de nombres:</p><ul id="listNames"></ul>');
});

Aquí podéis ver el funcionamiento del código expuesto anteriormente:

Demo

¿Qué te aparecido? ¿Te resulta útil? Cuéntanos dónde y cómo lo has aplicado para que aprendamos todos trucos nuevos de jQuery.

Expand

Fundamentos web 2007: día 3 - Workshop sobre microformatos

30938-29231.jpg

Aquí vamos de nuevo, arrancando el tercer y último día de las jornadas, dedicado a un workshop full day que va a ser dirigido por Tantek Çelik, sobre Microformatos.

10:36 - Tantek ha empezado haciendo una pequeña introducción hablando de los orígenes de la web semántica. Está hablando del concepto POSH. Comenta que espera que la jornada sea lo más interactiva posible, invitando a participar a todos aquellos que quieran comentar cualquier cosa durante sus explicaciones.

Describe algunos de los microformatos más elementales, empezando por rel. El atributo rel puede usarse para implementar, por ejemplo, los microformatos rel-license ( para indicar la licencia aplicable a determinado contenido ), XFN ( para indicar la relación existente entre dos personas ), rel-tag ( para indicar que determinado enlace responde a una categorización _etiqueta_ ), vote-links ( para indicar que un enlace se usa para votar / valorar determinado contenido ).

11:16 - He subido algunas fotos más al álbum de Flickr. Mientrs tanto Tantek ha hablado de la importancia de tener en cuenta la accesibilidad cuando trabajemos con microformatos. Ha comentado también acerca de las etiquetas abbr y acronym, cuyo uso correcto estaba convencido que conocía y... no!

Hasta ahora utilizaba la etiqueta acronym para marcar cualquier conjunto de iniciales que sirva para identificar un concepto ( FBI, HTML, KISS, POSH, LAMP... ), cuando en realidad sólo debe usarse para aquellos que funcionan y se leen como una palabra. Haciendo caso a los ejemplos anteriores, sólo lo serían KISS, POSH o LAMP. Por mi parte sólo usaba ABBR para abreviaciones de palabras del tipo etc., telf., dña., d., e.g., ... Haciendo caso a la especificación, FBI, HTML, WWW... deberían marcarse con la etiqueta ABBR. Nunca te acostarás sin saber una cosa más.

11:30 - Está hablando sobre el microformato hCard, utilizado para marcar perfiles de usuario ( nombre, nickname, email, dirección... ) El microformato hCard basa su estructura en el formato vCard, usado en la mayoría de software y dispositivos que trabajan con información de contactos ( agendas PDA, teléfonos, aplicaciones tipo Outlook... )

12:42 - OperatorTras el descanso para el café, empieza retomando el tema del hCard, y recomienda a aquellos que hayan traído portátil instalar la extensión Operator para Firefox. Operator permite interactuar con aquellos elementos de una página que hagan uso de microformatos. Funciona como una barra de herramientas adicional que nos da acceso a aquellos contactos, eventos, direcciones, tags... que haya marcados en la página, ofreciendo opciones para exportar la información que contienen. Por ejemplo en el caso de contactos marcados con hCard, nos permite exportarlos a nuestro gestor de contactos ( Outlook, libreta de direcciones, la Agenda en Mac... ).

Operator

12:56 - Han repartido algunos ejercicios entre los asistentes. Se propone una práctica para marcar un perfil sencillo con nuestro nombre y nuestra web. En realidad no tiene más misterio que conocer qué nombres de clase usar y para qué. Revisad la especificación y haced vosotros mismos algunas pruebas usando Operator para comprobar que lo hacéis correctamente. Como curiosidad podéis ver algunos atajos permitidos para simplificar el marcado de nombres.

13:41 - Seguimos viendo ejemplos y realizando algunos ejercicios prácticos. Quizás lo más interesante es que está apuntando a algunas excepciones útiles para identificar o marcar casos concretos, combinando algunos de los atributos de determinada forma. Prometo una recopilación a posteriori... Ahora prefiero atender. Wink

14:09 - Media hora más tarde de lo previsto... a comer!

-------- 

16:49 - Finally! Termina con hCard y pasa a comentar hCalendar. Pone como ejemplo a Upcoming ( algo así como Eventtos, pero en inglés y con algunas funcionalidades orientadas a red social ). Recuerda que se pueden usar cualquiera de los generadores de microformatos disponibles en la propia página de microformats.org.

Resulta interesante la idea de combinar y / o anidar diferentes microformatos para conseguir estructuras complejas. Pone como ejemplo un evento marcado con hCalendar cuyo location se marca usando hCard, indicando que se trata de un negocio.

17:59 - C'est fini. Hemos hecho un repaso de un par de microformatos algo más complejos, como son hReview y hResume, que combinan estructuras de microformatos más elementales. Como se veía venir... nada de XFN. Le atacaré ahora si se deja, o via mail. Wink

Ala, un placer compartirlo con ustedes. Ahora, a recoger y pillar el taxi para el aeropuerto, que esta noche llego tarde y empalmo con la despedida de soltero de Raúl. Let's rock.

Expand

Fundamentos web 2007: día 2

Mesa redonda Fundamentos Web

Empieza el segundo día de las jornadas. Parece que la espicha hizo estragos entre los participantes: la sala está medio vacía. De todas formas la primera ponente ha empezado su presentación. Se trata de George Oates, de Flickr, y va a hablarnos de "Cómo diseñar para y con la Comunidad Web". Here we go.

10:18 - Empieza explicando qué es Flickr. "Un buen lugar para compartir fotos". Da algunos números interesantes. Tienen más o menos 1.4 ¡billones! de fotos. ¿Sabíais que Flickr empezó siendo un juego online? Quizás haya algo en la Wayback Machine... De todas formas, comenta que ya en aquella versión "primitiva" de Flickr, la idea subyacente era permitir la colaboración, la idea de poder "compartir" con otros usuarios...

10: 24 - Comenta que sólo eran 5 personas cuando empezó todo, pero que el equipo creció rápidamente. Habla sobre el proceso de desarrollo y publicación de código y fixes en Flickr: realizan releases de código varias veces al dia. Defiende el concepto de Beta como un estado en el que se acepta la idea de que algunas cosas puedan fallar, pero que se encuentra en contínua mejora y evolución, los errores se solucionan sobre la marcha.

Flickr: fundamentos para su crecimiento

  • Está formado por gente. Es importante tenerles en cuenta. Importancia de la gestión de la privacidad.
  • Diseñar teniendo en cuenta el "blank state". Lo comentaré con detalle más tarde, hay algún link por ahí de 37signals que puede ser interesante para ampliar este concepto.
  • Tener en cuenta la configuración por defecto de las opciones de privacidad tratando de tener el cuenta la mejor experiencia posible para el usuario.
  • Ofrecer diferentes vías para disfrutar de la experiencia.
  • Mostrar la actividad de los usuarios. Es una de las bases del sistema
  • Ofrecer ayuda y soporte de forma accesible y sencilla. Habla de las normas de comportamiento de la comunidad para asegurar un ambiente de relación correcto entre usuarios. Interesante...
  • Mantener un punto de vista neutral. "Un gran poder comporta una gran responsabilidad". Interesante de nuevo... no debe ser nada fácil gestionar una comunidad virtual tan inmensa como la de Flickr.

10:44 -  Habla de la API externa de Flickr. La API no deja de ser una representación virtual de Flickr de la cual cualquier desarrollador puede sacar partido para crear su propia aplicación, reinterpretando los contenidos para mostrar su propia idea. Muestra algunos ejemplos originales de aplicaciones que sacan partido de la API de Flickr. Recomienda visitar Big Huge Labs, donde se muestran decenas de desarrollos específicos que parten de la API de Flickr.

10: 49 - Aparecen las machine tags, y comenta sobre diferentes aplicaciones que sacan partido de ellas. Básicamente se trata de etiquetas complejas que permiten añadir un nivel de especificidad. LastFM por ejemplo las usa para relacionar fotografías en Flickr con eventos registrados en su site. Por ejemplo "lastfm:event=290867" nos diría que la etiqueta corresponde a LastFM, e identificaría que pertenece al evento 290867.

Habla de los riesgos de ofrecer su API en abierto, y de algunos estragos causados por desarrolladores poco cuidadosos... ( ¿ha mostrado una gráfica de cacti? )

Insiste en el respeto a la privacidad.

Los ordenadores adoran los estándares... las personas no tanto. La gestión del caos en la comunidad mediante la cooperación.  

Aplausos. 

11:14 - Mi batería se termina. Agh.

---

20:18 - Ya en el hotel, pasando las fotos del día al portátil para subirlas a Flickr. Las colgaré en el álbum que ya creé ayer, Fundamentos web 2007, y también en el grupo de Flickr de Fundamentos Web. Para las ponencias que no he podido "retransmitir", podéis esperar un par de días a que ordene las notas y las recoja en un post ( aunque de hoy creo que sólo rescataré la ponencia de Tantek Çelik sobre microformatos y las redes sociales abiertas... ) , o revisar torresburriel.com o tripix.net, donde han realizado un exhaustivo seguimiento de las mismas.

Expand

Fundamentos web 2007: día 1

30596-29058.jpg

Trataré de actualizar este post con la información más relevante de las jornadas. También podéis seguir el evento a través de los exhaustivos seguimientos a los que nos tiene acostumbrados Daniel (me da que le tengo a un par de asientos).  

10:15- Acaban de terminar las presentaciones y el bla bla bla institucionales. Empieza el programa. La próxima ponencia se titual "10 años de CSS ( y los que le quedan)". Let's go.

Los principios

  • Mantener el HTML independiente del dispositivo y accesible
  • Hacer más fáciles de mantener los documentos, compartiendo los criterios de estilo.
  • Más y mejor control del estilo
  • Compartir el estilo con otros formatos SGML

La recomendación del w3c sobre CSS 1 fecha del 17 de diciembre de 1996

Originalmente sólo se plantearon 2 niveles, pero:

  • Demasiadas cosas tuvieron que dejarse fuera de la especificación ( bordes redondeados, sombras, etc...)
  • Algunas cosas se incluyeron en la especificación pero no se implementaron masivamente.
  •  Otras cosas se especificaron o se implementaron de forma incorrecta. ( IE suckof, cof, cof... )

Se decidió revisar el nivel 2 de CSS, con lo que:

  • Se solucionaron algunas ambigüedades
  • Se eliminaron algunas indefiniciones
  • Se aplazaron funcionalidades hasta el nivel 3
  • Se empezó en 2002 y se ¿terminó? este mismo año, 2007

En general el esfuerzo ha sido exitoso: hay menos bugs de navegador y el uso de CSS ha crecido a un 72% (!)

Prioridades en el desarrollo de CSS 3

  • Grid-based layouts
  • Rotaciones, etc.
  • Texto en vertival
  • Impresión de libros
  • Aritmética simple
  • Fondos mejorados
  • Bordes mejorados
  • Sombras
  • Transparencias
  • Fuentes incrustadas
  • Layouts para interfaces gráficas de usuario
  • Presentaciones
  • Comportamiento de los enlaces

 10:45 - Está poniendo algunos ejemplos de layouts complejos. Recuerdo algunas cosillas que nos avanzó el año pasado Dave Shea sobre CSS 3. Un año más tarde y seguimos aquí. No nos queda ná para conseguir eso, y que todos los navegadores lo soporten!

10:53 - La charla está acabando, llega la ronda de preguntas. Creo que haré una pausa... pensaba que la batería del portátil aguantaría un poco más, pero se hace mayor... ;-)

16:06 - Hemos terminado de comer y empieza la ponencia de Arthur Barstow, de Nokia: "Movilidad y estándares web". Los problemas de batería se suman a algunos problemas de red que hacen realmente difícil navegar o postear. Por el momento seguiré tomando notas en papel. Durante la tarde publicaré algunos resúmenes. De momento se mantiene el interés.  Buenísima la ponencia de Jeffrey Veen, de Google: "Diseñando la nueva generación de aplicaciones web". Un orador nato. :)

----

20:14 - Reflexión: tengo que cambiar de portátil. O mejor dicho: es la última vez que me llevo portátil ajeno a este tipo de eventos. MacBook ya. En fins... a falta de portátil he ido ordenando algunas ideas en papel que espero poder plasmar entre hoy ( va a ser complicado ) y mañana.  La charla de la tarde no ha estado mal, y el debate ha tenido momentos interesantes ( ¿siempre traen a uno de Microsoft para acribillarlo? ) comentando temas sobre el papel del W3C en todo esto de la web semántica, sobre la innovación, sobre cómo las definiciones evolucionan constantemente y otras yerbas. 

He colgado algunas fotos en Flickr, y podéis consultar las del resto en el grupo que hay creado bajo el nombre Fundamentos Web. Ahora voy a ir bajando que dentro de un ratín empieza la espicha. Mañana más. 

Expand

Mañana empieza Fundamentos Web

30471-28759.jpg Por fin ha llegado el dia: Mañana empiezan en Gijón las jornadas de Fundamentos Web 2007.

A los que tenéis que suerte de poder asistir, espero poder saludaros en persona y tomar juntos unas sidras a la salud de los estándares web, y a los que no, informaros que realizaremos un seguimiento de las ponencias, tanto a través del blog como de  nuestro Twitter ( http://www.twitter.com/pixelovers ).

Yo voy tirando para el aeropuerto o no llegaré a tiempo... ¡Hasta mañana! 

Expand

Fundamentos Web 2007: Allí estaremos

15853-15130.jpgFundamentos Web es uno de los eventos a nivel nacional más importantes en el ámbito del desarrollo y el diseño web con estándares. La edición de este año se celebrará los días 3 al 5 de Octubre en Gijón, Asturias y reunirá a profesionales de la talla de Tim Berners Lee, al que podríamos considerar el "padre y la madre" de la WWW tal y como la conocemos hoy en día, o Tantek Çelik (blog), director de tecnología de Technorati.

Animado por la experiencia del año pasado, espero poder repetir este año. Además de poder escuchar en vivo a algunas de las voces más influyentes del mundo en esta área, resulta especialmente interesante el networking que se genera en este tipo de eventos, las discusiones que se inician de forma paralela después de cada ponencia, y los talleres prácticos con los que suelen concluir.

Por el momento no hay mucha información sobre el programa en la web oficial del congreso, así que estaremos atentos para poder ir publicando las novedades.

Mientras tanto, y después de haber recuperado algunos apuntes del año pasado, estoy preparando una serie de artículos a modo de resumen de algunos de los temas que más interesantes me parecieron en la edición del 2006. El primero de ellos tratará sobre internacionalización: "Practical and Cultural Issues in Designing International Websites". Próximamente en sus pantallas.

Actualización: Lo prometido es deuda: