Probar IE en Mac con RemoteModernIE, sin Windows ni maquinas virtuales

link - - 4 replies - share
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!!!

Lo que viene siendo un Martes Responsive y como probar en diferentes dispositivos

image - - leave a reply - share
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.

Emulador iOS 6, Simulator de Xcode y Web Inspector

post - - 2 replies - share
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.

Themes o Frameworks para WordPress

post - - leave a reply - share
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.

Imágenes rotas por conflicto entre Bootstrap y Google maps full-width

post - - leave a reply - share
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;
}

Responsive web design

post - - 4 replies - share
deviceponsive-min

Voy a intentar sentar por escrito algunas ideas sobre lo el responsive web design, donde entran en juego:

  1. Mobile first
  2. Enhanced progressive
  3. Media queries
  4. Flexible grid
  5. Images

Read more

Abrir enlaces externos en nueva ventana añadiendo class external y _blank target al vuelo con jQuery

post - - 2 replies - share

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.

CSS adaptado al navegador con PHP

post - - 4 replies - share

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.