Mi combinación ganadora para Internet Explorer 8

Cuando empezamos un nuevo proyecto siempre queremos aprovechar todo el potencial de HTML5, pero por desgracia no podemos olvidarnos de nuestro fiel amigo Internet Explorer 8.

Por suerte, ya hace tiempo que desterramos de nuestras maquetas a sus predecesores: Internet Explorer 6 y 7, pero IE8 se quedará con nosotros a tomar otro par de copitas más antes de irse.

Gracias a frameworks como bootstrap, foundation o paraGridma, podemos tener un esqueleto de aplicación moderno, pero perfectamente funcionar en IE8. En el desarrollo de paraGridma, el mayor problema que me encontre para adaptarlo a IE8 fue el de que aceptara algunas de las novedades de HTML5 y sobretodo el uso de media-queries.

Finalmente, opte por la combinación de dos librerías: html5shiv y respond.js.

Podemos incluir estas librerías por el método condicional tradicional:

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

O también podemos incluirlo de esta otra forma.

<?php
  // because new Internet Explorer develop tools don't proccess conditional comments
  $conditionalComments = '';
  if (strpos($_SERVER['HTTP_USER_AGENT'],'MSIE 8.0') !== false) {
    $conditionalComments .= '<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>';
    $conditionalComments .= '<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>';
  }

  echo $conditionalComments;
?>

Es recomendable usar esta segundo método si estamos testando la web con las develop tools de explorer 11, ya que incomprensiblemente este navegador no entiende los comentarios condicionales cuando emulamos una versión anterior del navegador.

Y hasta aquí mi consejo de hoy. Espero que os haya sido de utilidad.

Adaptar el alto y ancho al embeber un iframe de Youtube, Vimeo, …

Uno de los problemas que surgen al hacer una web responsible es el de querer mostrar un iframe de Youtube, Vimeo, etc… Los iframes que nos facilitan estos proveedores suelen tener asociado una anchura y altura fijas, por lo que difícilmente se van a adaptar a nuestro flamante diseño fluido. Lo bueno, es que ya hace tiempo alguien muy sesudo se encontró con este problema, y le dio una solución de lo más sencilla, para que al altura del iframe siempre sea relativa a su anchura.

video_responsive

<div class="responsiveContent">
    <iframe src="//www.youtube.com/embed/_veOIvMWazU" 
            allowfullscreen="" frameborder="0"></iframe>
</div>

 

.responsiveContent {
  position: relative;
  height: 0;
  overflow: hidden;
  padding-bottom: 56.2%;
  margin-bottom: 20px;
}
.responsiveContent iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Como vemos en el código la solución pasa por:

  • Quitar toda referencia a width o height en la etiqueta del propio iframe
  • Crear un contenedor para el iframe con altura 0
  • La altura vendrá definida por el padding que le demos al contenedor. Al darle el padding en porcentage, la altura siempre sera el x% de la anchura del padre.

Podéis ver este ejemplo funcionando en mi querido framework paragridma.

Lo único que tendréis que tener en cuenta es el aspect ratio del vídeo que queráis mostrar. En caso de no coincidir se deberá de modificar el padding del contenedor.

Espero que este truqui os sea de utilidad.

Mensaje de alerta si abandonas un formulario sin salvar

En ocasiones creamos formularios en los que queremos prevenir que el usuario abandone la página sin haber salvado los cambios.

Para conseguir esto podemos usar el metodo de javascript, que es invocado antes de que el ususario se vaya de la pagina (click en un link, o refresco de pantalla) :

window.onbeforeunload  = function(e) {
   return "message";
};

Pero no es suficiente con esto, tenemos que cambiar un poco esta función, para mejorar el comportamiento en varios navegadores, y para evitar que salga dicho mensaje al hacer submit del formulario.

$('form').find(':input').change(function(){
	var dirtyForm = $(this).parents('form');

	// change form status to dirty
	dirtyForm.addClass('unsavedForm');
});

$('form').submit(function () {
	$(this).removeClass('unsavedForm');
});

window.onbeforeunload = function(e) {
	e = e || window.event,
	message = "lorem ipsum";

	// show alert if there are some unsaved form
	if ($('.unsavedForm').size()) {
		// For IE and Firefox
                if (e) {
                  e.returnValue = message;
                }
                // For Safari
                return message;
	}
};

Con este pequeño código conseguiremos nuestro objetivo.

El alert que sale es de sistema (vamos, muy feo) y no se puede customizar mas que el mensaje (y no en todos los navegadores), pero evitaremos alguna que otra perdida de datos por parte de nuestros usuarios.

Espero que os sea de ayuda.

Componente de Tabla como RadioGroup

Hoy he tenido que desarrollar un nuevo componente, para un muy interesante proyecto que estamos empezando a desarrollar en Paradigma.

Este componte debe de mostrarse como una tabla, tal y como podéis ver en la siguiente imagen con el diseño creado por el artistazo @davidmontalvo, pero debe de actuar como un grupo de input tipo radio, ya que el usuario podrá seleccionar cada una de las celdas.

(más…)

Metaetiquetas SEO

Nunca viene mal recordar conceptos básicos, y en este caso toca turno de las metaetiquetas.

Estas son las metaetiquetas que se suelen usar en una web (incluyo las de geoposicionamiento):

<title>Nombre descriptivo y único de cada una de las paginas de tu web</title>

<meta http-equiv="content-language" content="en-gb" /> <!-- "es-es" si es española-->
<meta http-equiv="language" content="english" />  <!-- spanish -->
<meta name='geo.position' content="40.452537;-3.726412"> <!-- coordenadas del lugar físico -->
<meta name="ICBM" content="40.452537,-3.726412" />
<meta name='geo.placename' CONTENT='Madrid'> <!-- nombre de la ciudad -->
<meta name='geo.country' content="ES">
<meta name='DC.title' content="Titulo único de la página">
<meta name="keywords" content="palabras, clave, descritivas" />
<meta name="description" content="Descripción de la pagina" />
<meta property="og:title" content="Titulo único de la página"/>
<meta property="og:image" content="http://url/logo.png"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.domain.com"/>
<meta property="og:site_name" content="Nombre de la web"/>
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="es_ES" />
<head profile="http://microformats.org/profile/hcalendar">
<meta name="robots" content="index, follow" />

y recuerda insertarlas todas dentro de la cabecera de la página:


<head>

...

</head>

iosSlider: Responsive and touchable Carousel

Después de llevar todo el día buscando un buen carrusel para usar en mis proyectos he conseguido encontrar lo que buscaba:

  • Un carrusel que se adapte en tamaño, para poder ser usado en los proyectos de responsive design.
  • Válido tanto para ordenadores de escritorio como para terminales táctiles (móviles y tablets)
  • Que las animaciones se hicieran con el acelerador hardware de CSS3 para que funcione de una manera más fluida.
  • Opensource

Finalmente me he decantado por iosSlider . Tiene muy buena pinta, y está muy bien documentado.

Todavía no me he “peleado” con el, pero ya me muero de ganas por meterle mano.

Otra alternativa también muy atractiva era TouchCarousel, pero el hecho de que sea un plugin de pago (aunque tan solo son 10$) me ha hecho decantarme por iosSlider.

jQuery Event Calendar Plugin – english version

I’m trully glad to publish today my first jQuery plugin. It has taken a big amount of hours of hard work, but as long as I see the results, I realize that it has all been worth it.

DEMO Page / jQuery Event Calendar Plugin examples | jQuery Event Calendar Plugin download

Introduction


jQuery Event Calendar Plugin is another plugin to show events in a calendar directly in your web app.

The presentation of the events is made in a really comfortable way, as long as you can see all the following events at eyesight, or just a particular date event (displaying the whole month or just a day).

This widget shows the current day and all the other days that have events scheduled.

So… just another calendar plugin

Well, it is, but it also goes far beyond.

There are several jQuery plugins to visionate and manage calendars and events:

But… even when we had done a great research, none of them adjusted with the needs that we have in our projects, and if they did, they were prepaid plugins that we couldn’t nor wanted to use in our OpenSource projects.

In particular, this plugin has been created for an OpenSource project that we are developing in  Paradigma Tecnológico for agile project management using Scrum, a project I’ll show you in a very short period of time.

Also, it has been develop for responsive design, so you can work fine with it in desktop, tablet and even smartPhones

How does it work?

The first thing we have to know is how the plugin recieves the events. There are some methods to communicate between the plugin and the events, but in all cases the information has to be represented as a json with the following structure:

The plugin is highly customizable, so you are able to modify it through these parameters:

  • Send the json to the plugin in an inline JavaScript function or on an extern file.
  • Cache the received events or make new calls on every date change.
  • Change the calendar size to every width we need (it is 100% responsive, it is 100% fluid)
  • Supports all languages
  • Limit the number of events to show
  • Weeks start on Sundays or Mondays
  • Show the days in a calendar view, by weeks or all the month in a single line
  • Show the event description, or not
  • Open the event links in a new window, or not
  • Change the velocity of the animation when changing dates
  • Show the events inside a panel with scroll to avoid the widget from changing its size

We encourage you to visit the demo page of the plugin to see all its posibilities in action, and the explanation of each parameter that has been used.

And, if you like it, don’t doubt on downloading the plugin

And now, what?

I’m thinking on improving the plugin, so any kind of bugs you find on it will be highly welcomed.

Following tasks:

  • timeago integration
  • Make the plugin 100% responsive: addapt to its content as it already does, but also to the browser size changes. Already done

jQuery Event Calendar Plugin

Hoy tengo el gustazo de hacer publico mi primer plugin jQuery. Han sido unas cuantas horas de trabajo, pero creo que el resultado merece la pena.

Página de DEMO/EJEMPLOS de jQuery Event Calendar Plugin | DESCARGA de jQuery Event Calendar Plugin

Introducción a jQuery Event Calendar Plugin

jQuery Event Calendar Plugin es otro plugin más para visionar eventos en un calendario en tu aplicación web.

La representación de los eventos es realmente cómoda, ya que de un simple vistazo vemos los próximos eventos que tengamos, o los eventos de una fecha en particular (mes completo o día).

El widget nos muestra tanto el día actual, como los días en los que hay eventos.

Pues vaya…. otro plugin más de calendario

Pues si y no. Me explico.

Es cierto que hay montones de plugins jQuery para la gestión y visionado de calendarios y eventos:

Pero lo cierto es que por unos motivos u otros ninguno de ellos se adaptaba a las necesidades que teníamos en nuestros proyectos, y si se adaptaban, eran plugins de pago que no podíamos ni queríamos usar en nuestros proyectos OpenSource.

En particular el desarrollo de este plugin ha sido creado para un proyecto OpenSource que estamos desarrollando en Paradigma Tecnológico para la gestión de proyectos ágiles con Scrum, y del cual pronto os hablaremos.

¿Cómo funciona?

Lo primero que debemos conocer es como recibe el plugin los eventos. Hay varios métodos de comunicación entre el plugin y los eventos, pero en todos los casos la información debe de ser representada en un json con la siguiente estructura:

El plugin es altamente configurable, pudiendo modificarlo a través de parámetros:

  • Enviar al plugin el json a través del propio fichero JS, o tenerlo en un fichero externo
  • Cachear los eventos recibidos, o realizar nuevas llamadas con cada cambio de fecha
  • Representar el calendario al tamaño deseado (todavía no es 100% responsive o fluido, pero estamos trabajando en ello para la próxima versión)
  • Posibilidad de traducirlo al idioma deseado
  • Limitar el número de eventos a mostrar
  • Definir el día de comienzo de la semana
  • Mostrar los días en modo calendario por semanas o todo en una sola linea
  • Mostrar o no la descripción de los eventos
  • Abrir los links de los eventos en nueva ventana o no
  • Cambiar la velocidad de animación en el cambio de fechas
  • Mostrar los eventos en un panel con scroll, y así evitar cambios en el tamaño del widget.

Os recomendamos visitar la página de demo del plugin para ver todas las posibilidades en acción, y la explicación de los parámetros usados.

Si os gusta no dudéis en descarse el plugin

¿Y ahora qué?

Pues por mi parte tengo algunas tareas para mejorar el plugin y la intención de resolver todas las incidencias que surjan.

Próximas tareas:

  • Integración del plugin timeago
  • Realizar cambios necesarios para convertir el plugin en 100% responsive: aparte que se adapte al ancho de su contenedor, que eso ya lo hace ahora, que se adapte a los cambios de tamaño del navegador. Ya hecho