Categoría: Desarrollo frontend

Marco de trabajo Web para desarrollo: Coda2, CodeKit, MAMP y SourceTree

Marco de trabajo Web

Hoy en día el flujo de trabajo para desarrollo Web se ha vuelto muy complejo, se usan muchos lenguajes, herramientas, compiladores, plugins, widgets, gestores de contenido, lenguajes front-end, lenguajes back-end, controladores de versiones, etc.. Pelearse cada vez con todo esto es muy tedioso, así que poco a poco vas adaptando o evolucionando tu marco de trabajo Web para que no repercuta en tiempos y eficiencia.

Mis Herramientas y el marco de trabajo Web

Hay herramientas y marcos de trabajo alternativos (sublimetext, gulp, terminal…), aquí voy a comentar las herramientas que yo utilizo desde ya hace unos añitos como marco de trabajo Web para desarrollo: Coda2, CodeKit, MAMP y SourceTree. Son herramientas que han ido evolucionando con los tiempos, y con ello yo he ido adaptandome a esa mejoras.

Coda, Codekit, Mamp, SourceTree
Continue reading «Marco de trabajo Web para desarrollo: Coda2, CodeKit, MAMP y SourceTree»

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

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

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

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

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

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;
}

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

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.