Screen Shot 2015-03-18 at 10.23.10

Acabo de probar IE en Mac con el acceso remoto que ofrece Microsoft. Lo tienen montado bajo Azure y el servicio esta enfocado principalmente a los desarrollamos web, ahorrándonos el trabajo de instalar Windows o configurar una máquina virtual.

Para probarlo nos creamos una cuenta (para Microsoft) en Remote ModernIE, luego nos bajamos la app disponible en el AppStore (incluso para plataformas Android e iOS) y una vez ejecutada la aplicación hacemos clic en el «Azure RemoteApp», seleccionamos el servicio de IE y a probar!!!

Foto de iMac, iPad, iPhone

He pasado por varias herramientas centradas en el responsive para probar en diferentes dispositivos, pero al final me quedo usando lo que tengo más a mano (supongo que por rapidez).

Safari + Develop

Nada como probar el responsive de un sitio web directamente en los dispositivos reales para los que estemos desarrollando. Para esto me ayudo bastante del navegador de Apple con su completisisisima herramienta «Develop» donde puedo conectar mi iPad y iPhone con el «Web inspector» de Safari.

Chrome + Emulation

Captura de Emulation

Google Chrome tiene también en su «Inspect Element» una potentisima opción para emular un gran número de dispositivos.

IOS6, XCode, Web inspector

Vaya «title» me acabo de marcar! 😀

Los usuarios de Apple suele tener actualizado su sistema operativo, tanto de escritorio MacOS como de dispositivos móviles iOS. Supongo que su facilidad en los procesos de actualización tiene mucho que ver en ello.

Por suerte la compi @chavalina tenía todavía su iPad con iOS6 y pudo reportarme un fallo de CSS que curiosamente solo se producía en esa versión, tanto con Chrome como Safari. Sin embargo en iOS7 y bajo los mismos navegadores todo perfecto, también en el resto de navegadores y dispositivos.

Ya puestos en contexto vamos al grano.
Como emulador iOS 6 si ya tenemos actualizados nuestro iPad podemos recurrir a Xcode. Tenemos que ir a «Preferences > Downloads > Components» y descargar «iOS 6.1 Simulator«. Nos pide instalar y reiniciar la aplicación Xcode. A continuación creamos un proyecto Xcode «vacio», al lado de los controles principales (Play y Stop) tenemos ahora la opción para seleccionar como sistema operativo iOS6.1 y hacemos clic en el botón Play.

Xcode con iOS6

Una vez emulado podemos usar la fabulosa herramienta Web Inspector de Safari, menú: Develop > iPad Simulator.

Web inspector

A partir de aquí a emular, probar y solucionar. Por curiosidad, os cuento que al final en mi caso, el problema era de CSS con la forma de interpretar -webkit-linear-gradient por parte de iOS6.

wordpress-frameworks

Cada vez son más los themes o frameworks para WordPress que aparecen en las comunidades de desarrollo, y es que ya hay entorno a 60 millones de sitios webs creados bajo este gestor de contenidos. Así que una buena base capaz de agilizar el diseño y desarrollo se convierte en algo imprescindible a día de hoy.

Underscores

  • Es un generador de theme «ultra-minimal» con lo imprescindible para comenzar a desarrollar.
  • Esta creado por la gente de Automattic (WordPress), esto ya es un plus en cuanto a calidad y seguridad pues hay muchas horas de desarrollo y experiencia detrás.

Ir a Underscores.

Bones

  • Toma como base HTML5 Boilerplate lo cual ya es un inmejorable punto de partida.
  • Destaca por ser mobile-first, responsive y tener un código muy limpio.
  • Viene preparado para LESS y Sass.

Ir a Bones.

Skeleton WordPress

  • Basado en el espectacular y minimalista Skeleton framework.
  • Es responsive y mobile-friendly.

Ir a Skeleton WordPress.

Roots (mi favorito)

  • Usa HTML5 Boilerplate como base, Boostrap actualizado, ARIA roles, microformats y rutas relativas limpias.
  • Me encanta su código, muy limpio y minimizado, así como su estructura de ficheros y directorios.
  • Se preocupa por la accesibilidad y SEO.
  • Trabaja exclusivamente con LESS.
  • Tiene una comunidad muy activa y esta en constante actualización.
  • Este mismo web se encuentra bajo Roots Theme.

Ir a Roots.

WP-Foundation

  • Los de ZURB Foundation se han currado este framework destinado exclusivamente a WordPress.
  • Es mobile-first, flexible-grid.
  • Esta preparado para Sass.

Ir a WP-Foundation.

Boilerstrap

  • Basado en el theme de WordPress: Twenty Twelve.
  • Viene con Bootstrap, FontAwesome icons, custom typography, jQuery…

Ir a Boilerstrap.

mapsdistorsionstyle

Como es la segunda vez que me pasa, lo pongo en mi particular baúl de los recuerdos.

Algunos estilos de base en bootstrap.css entran en conflicto con las imágenes de los controles que aparecen del google maps que insertemos en la misma web, teniendo como resultado la ilustración anterior.

Empezamos por identificar el mapa que insertamos (se puede tomar siempre como una buena práctica añadir un ID al mapa). En mi caso es id="map-camvas":

<div id="map-canvas" class="map-aurea"></div>

Como estilos podemos hacer que el mapa sea full-width, ocupando todo el ancho de la pantalla:

#map-canvas {
	position: absolute;
	bottom: 20px;
	left: 0;
	max-width: 100%;
	width: 100%;
	height: 400px;
}

Y la solución al problema del conflicto bootstrap – gmaps:

#map-canvas img { 
	max-width: none;
}
responsivevsoptimized

Vuelvo con un tema recurrente y que siempre levanta mucho debate en la comunidad Web. Surge a raíz del artículo Why We Shouldn’t Make Separate Mobile Websites sobre el Responsive Web Design – RWD (diseño web sensible).

La pregunta básica es: ¿Diseñamos una Web única, o realizamos dos versiones (una de escritorio y otra móvil)?

Continue reading «Diseño sensible vs. versión móvil»

Hace tiempo (2009 y como pasa de rápido…) hablábamos de esto mismo en _blank, rel=”external” y una solución jQuery para abrir enlace en nueva ventana. Ahora traigo una revisión del snippet con esa misma funcionalidad pero un poco más completa y optimziada.

Código jQuery

jQuery(document).ready(function($) { 	
     //open external links in new window
     $('a:not([href^="http://aurea.es"]):not([href^="#"]):not([href^="/"])').addClass('external');
     $('a[class="external"]').click(function(){ $(this).attr('target','_blank'); });
}); 

Explicación

  1. Comenzamos el mítico método ready de jQuery, encargado de comprobar si el DOM esta cargado y preparado para usarse. Tengamos en cuenta que deben estar todos los tags de enlaces ya descargados en el navegador para luego lanzar las operaciones sobre ellos.

  2. A continuación hacemos 3 comprobaciones basadas en el atributo «href». Que el link no comience con el «dominio del sitio web» (link absoluto), que no comience por «#» (link ancla), y que no comience por «/» (link relativo). A todos los enlaces que cumplen esto se les añade la clase «external», ejemplo: class="external".

  3. Una vez tenemos identificados todos los enlaces externos, ya solo queda preparar un evento .click() que añada el atributo target con valor blank (nueva ventana/tab) cuando el evento se dispare.

Tener diferentes hojas de estilo dependiendo del navegador me parece algo horrible 🙁 .  Pero si por algún motivo es necesario, podemos emplear una forma bastante fácil y limpia mediante PHP (Ref. Andrew Martin).

Para ello, (1) pondremos un CSS base que sea compatible para todos los navegadores y a continuación (2) haremos uso del array $_SERVER y del campo donde se cargan las cabeceras con información del navegador del usuario «HTTP_USER_AGENT».

1. Código CSS base:

<link rel="stylesheet" href="base.css" type="text/css">

2. Código PHP:

$browser = $_SERVER['HTTP_USER_AGENT'];	
if (preg_match('/MSIE.8/i', $browser)) { echo ''; } 
elseif (preg_match('/MSIE.7/i', $browser)) { echo ''; }
elseif (preg_match('/MSIE.6/i', $browser)) { echo ''; }
elseif (preg_match('/MSIE.9/i', $browser)) { echo ''; }
elseif (preg_match('/Firefox.2/i', $browser)) { echo ''; }
elseif (preg_match('/Firefox.3.5/i', $browser)) { echo ''; }
elseif (preg_match('/Firefox.3/i', $browser)) { echo ''; }
elseif (preg_match('/Chrome/i', $browser)) { echo ''; }
elseif (preg_match('/Safari/i', $browser)) { echo ''; }
elseif (preg_match('/Opera/i', $browser)) { echo ''; }
else { echo ''; }

El código escribirá el link con la hoja de estilo correspondiente al navegador empleado por el usuario basándose en la comparación de cadenas.

Si lo que queremos es únicamente discernir la versión de MSIE, podemos también recurrir a los comentarios condicionales de Internet Explorer.

Para hacer las pruebas necesarias con los diferentes navegadores, podemos descargarlos o emularlos.