¿Qué es "hoy he aprendido..."?

<!--

Lo primero que os llamará la atención es el diseño del blog, los que me conocéis sabéis que soy una fan incondicional de "Sublime Text" como editor para desarrollo, y me ha parecido un bonito homenaje, simular su espacio de trabajo.

Por otro lado, las entradas de este blog, no pretenden ser documentación exacta y correcta. Me limito a compartir con vosotros la forma de solucionar determinados problemas que me voy encontrando en mi trabajo.

Unas estarán bien, y otras serán un "apaño", por lo que os agradecería que me comentéis lo que queráis, y me corrijáis errores de concepto o burradas que veáis.

Simplemente quiero devolver un poco a la comunidad, ya que yo he aprendido muchísimo gracias a la gente que se molesta en compartir sus conocimientos y experiencias.

Espero que os sirva.

-->

Cuadrados responsive con CSS

Hoy os traigo un truquito para hacer cuadrados perfectos responsive, o rectángulos, también responsive, que mantengan sus proporciones.

Cuando queremos hacer un cuadrado responsive con porcentajes, el problema viene con el alto, porque lógicamente, el porcentaje que demos al alto, se refiere al alto del contenedor y lo normal es que si estamos haciendo un sitio responsive, desconozcamos el alto del padre porque será fluido. Por ello no podremos igualarlo al ancho.

La gracia está en saber que los paddings siempre se refieren al ancho, de modo que voy a utilizarlo para hacer un “falso height” y que sea igual que el ancho.

¿Cómo lo hacemos? Añadiendo un pseudo-elemento con un padding 100%, que como hemos dicho será el 100% del ancho, y por lo tanto igual, ¡ya tenemos nuestro cuadrado responsive!

Podéis ver el ejemplo aquí:

See the Pen Responsive Squares by Diana (@diana_aceves) on CodePen.

Custom Google Maps markers: estilos y animaciones CSS3

Hace unos meses, tuvimos que personalizar los marcadores (markers) de un mapa de Google para un proyecto, y aunque la API Javascript de Google Maps realmente me pareció amplia y fácil de entender, me di cuenta que en lo que más tiempo perdimos, fue en tener claro cómo empezar (que como siempre era una chorrada) pero la primera vez lees y lees sin tener muy claro qué hacer. Otra parte que también nos hizo perder bastante tiempo fue dar con el marker exacto que necesitábamos.

En nuestro caso, los markers debían ser redondos, de colores, y debían tener una animación inicial…ya ves, simpático que estaba el diseñador cuando lo pensó.

Empezaré por el principio para que veáis lo fácil que es presentar el mapa y después pasamos a los markers.

(Nota: Para entender bien este post hay que tener unos mínimos conocimientos de JS y de programación orientada a objetos.)

1. EL HTML: En nuestro HTML necesitamos un div que contendrá el mapa, le ponemos un id para que sea más fácil identificarlo.
Para este ejemplo vamos a hacer un mapa que ocupe el 100% del documento.
También tendremos que poner el link a la API de Maps:

2. EL MAPA: Ahora tenemos que crear el mapa, al constructor debemos pasarle dos parámetros: el elemento html que va a contener el mapa, y un objeto que agrupa las opciones de configuración del mismo.

El objeto mapOptions debe tener la configuración mínima para mostrar nuestro mapa, lo normal es especificar; zoom inicial, punto central del mapa y tipo de mapa (MapTypeId), aunque tenemos un montón de parámetros opcionales para configurar, que podéis ver aquí.

Yo voy a añadir disableDefaultUI, para que no se muestren los controles del zoom, ni el resto de elementos de la UI por defecto.

El punto central lo obtenemos mediante google.maps.LatLng(latitud, longitud), y los tipos de mapa básicos son 4;
ROADMAP, SATELLITE, HYBRID y TERRAIN.
Nosotros usaremos el ROADMAP que es el más común. (Más información acerca de tipos de mapas aquí)

Y para dejar nuestro mapa hecho un primor y ser limpios y ordenados, vamos a meter todo en una función init, para que el mapa se cargue en el evento load.

Hasta aquí hemos creado el mapa con la configuración que queremos y centrado en las coordenadas deseadas, recopilamos código:

3. EL CUSTOM MARKER SIMPLE:

Para dibujar un marker a nuestro gusto, en vez de el típico de Google Maps rojo con el punto negro, tenemos que asociar a nuestro mapa un nuevo objeto que lo defina, para ello utilizaremos la clase google.maps.Marker.

– Le decimos dónde queremos que se coloque el marcador, en nuestro caso, en el centro del mapa, y utilizamos el método .getCenter().
– Le decimos también cómo debe representarse mediante “icon”, que a su vez tiene varios parámetros, veamos:
path determina la forma, aquí podríamos meter notación SVG que queramos (ver ejemplo). En nuestro caso vamos a utilizar unas constantes que ya nos ofrece Google, porque queremos un círculo sin más.
– Definimos el tamaño, colores de borde y relleno y opacidad.
– Y por último, a qué mapa debe asociarse (myMap)

Con todo esto ya tenemos un mapa con un marker personalizado, que quedaría así:

Captura de pantalla 2014-09-14 a la(s) 21.09.43

El código completo sería el siguiente:

4. ANIMAR EL MARKER:

Aquí empezó nuestra odisea de prueba/error porque la API tiene muchas maneras de personalizar los markers (cambiar formas y tamaños, poner una imagen propia…), pero una vez que conseguimos pintar lo que queríamos, no podíamos acceder a él para animarlo, los markers simples de maps, no tienen entidad dentro del DOM, de modo que no podemos atacarlos ni con CSS ni con js.

Existen dos animaciones predeterminadas para ellos (BOUNCE y DROP), pero que no nos servían. Por otro lado, también tenemos la opción de animarlos con el método setTimeout(), pero sinceramente me parece muchísimo más complicado que la solución que encontramos nosotros.

NUESTRO AMIGO EL MARKERWITHLABEL: (Te queremos MarkerWithLabel)

Descubrimos un tipo de marcadores que pueden llevar asociada una etiqueta, totalmente personalizable y…

redoble de tambores…

se puede asociar una clase CSS!!! Albricias!! Yujuuu!!!

El truco está en utilizar el “label” como “marker”, escondiendo el propio marker, y como podemos hacer con CSS “casi” lo que queramos, es mucho más versátil que los markers estándar.

Para ello, en vez de usar la clase google.maps.Marker, usaremos la clase MarkerWithLabel y tendremos que añadir una librería que nos permite utilizarla.

Vais a ver que la sintaxis es muy parecida a los markers que ya hemos visto, la diferencia esencial es el juego que vamos a darle después con CSS, os pongo el código js y seguimos.

Por último, el CSS que hará la animación, como en este caso no hemos definido ni forma ni colores porque no queremos que se vea el marker real, tenemos que hacer que el “label” parezca un marker y darle los estilos que buscamos.

Vamos a pintar un círculo verde con un borde azul, y con una sombra y todo!!!, y que al cargar tenga una animación que lo hace crecer y decrecer 3 veces, el CSS no os lo explico porque si habéis llegado hasta aquí, doy por hecho que lo sabéis interpretar:

Como podéis ver, nuestro círculo es de 20x20px, y ahora os explico el parámetro “labelAnchor: new google.maps.Point(10, 10)”:
Este parámetro coloca el “label” respecto del centro del marker que tiene asociado, si no lo ponemos quedaría así:

Captura de pantalla 2014-09-14 a la(s) 21.40.09

En la imagen vemos un punto negro, que sería el marker (lo he pintado para que se vea) y veis que el label (circulo verde y azul) no está centrado. Como mi label mide 20x20px, lo muevo 10 arriba y 10 a la izquierda.

Tenéis varios ejemplos de MarkerWithLabel aquí.

Pues ya está, podéis ver el mapa final con las animaciones en este Pen:

See the Pen Custom CSS styles and animations in Google Maps markers by Diana (@diana_aceves) on CodePen.

Espero que os sirva! Nos vemos! 😉

Cambia el nombre de varios archivos a la vez con Automator

Ya sabía que Automator es una herramienta potentísima para Mac, pero no lo había usado hasta ahora.

Pierdo mucho tiempo cambiando los nombres de grupos de archivos, (por ejemplo, capítulos de series donde te pone el nombre completo, dirección, fecha de nacimiento de su padre, y web personal del tío que la subió) y hoy me decidí a probar Automator para hacerlo, en vez de ir uno por uno.

Me ha resultado tan sencillo que os pongo el proceso para que empecéis a trastear con él.

1. Abrimos Automator y seleccionamos “Servicio” para crear uno nuevo.
automator1

2. Si no tenemos visible la Biblioteca, la ponemos visible en el botón de la izquierda del panel.
3. Seleccionamos las opciones correspondientes en la parte superior derecha:

– “El servicio recibe la selección de:” -> “ARCHIVOS O CARPETAS” en “FINDER.APP”.
– en la Biblioteca, buscamos “Renombrar ítems del Finder” y arrastramos al espacio de la derecha, (si nos sale un aviso del sistema, aceptamos).
automator2
– nos salen dos bloques de acciones:
automator3
La primera yo me la he cargado porque no quiero que me copie los archivos en ningún directorio nuevo, sino que simplemente los cambie de nombre. Así que lo elimináis, y os queda así:
automator4
– Es importante que seleccionéis en “Opciones” la casilla “Mostrar esta acción al ejecutar el flujo” si queréis que os muestre todos los campos para editar cuando ejecutéis el nuevo servicio, si no, lo hará automático sin que podáis personalizar los nombres cada vez.

En mi caso, como quería cambiar los nombres largos de la serie, me interesa que sea un cambio secuencial y me añada los números de capítulos, pero ahora no concreto nada más para poder elegir lo que me interesa cuando lo utilice.
(No obstante todo lo que vamos a establecer cuando lo ejecutemos, podemos ajustarlo ahora y crear tareas más concretas.)

Nosotros lo vamos a dejar así:
automator5

4. Ahora sólo queda guardar la nueva acción automatizada con el nombre que queráis, con Archivo->Guardar. (Yo lo llamé “Renombrar Grupo Archivos”)

Ya tenemos la acción creada y está accesible en nuestro menú contextual, para cuando queramos utilizarla.

Vamos a ver cómo se usa:

1. Selecciono los archivos a los que quiero cambiar el nombre -> botón derecho -> Servicios -> Renombrar Grupo Archivos

automator6

2. Establezco el patrón que quiero que tenga el nombre, yo quería NombreSerie_NúmeroTemporadaxNúmeroCapítulo (el número de capítulo es la secuencia que va a ponerme automáticamente). Como véis, el patrón me lo muestra debajo para que vea si es realmente lo que quiero.
automator7

Aceptamos y está, tenemos nuestros archivos renombrados de un plumazo.
automator8

Ahora ya sólo os queda googlear para buscar más tareas que os interesen, en Apple por ejemplo, nos enseñan a crear capturas.

Por último que sepáis que los servicios que creáis, se guardan en la carpeta de vuestro usuario, en Librería -> Services, y para verla tenéis que tener la opción de “mostrar archivos ocultos”. Ahí podéis borrar los servicios que ya no utilicéis.

Hasta otra!

Limpiar floats con overflow:hidden

Una de las cosas más útiles que me enseñó mi profe Luis Herrero cuando estudiaba front, fue utilizar overflow:hidden en lugar del poco elegante clearfix.

Utilizando sus propias palabras:

“Cuando un contenedor tiene a todos sus hijos flotando, se queda sin altura”.

Esto impide que podamos ponerle un background, que tengamos límites para “empujar” elementos por arriba y por abajo, que podamos usar padding o margin en el elemento padre, etc…

No voy a entrar en las razones del porqué overflow:hidden funciona como os voy a contar, pero básicamente lo que hace es provocar que el contenedor crezca tanto como sus hijos, es decir, los “envuelve”. No hace falta que os diga lo necesario que es este comportamiento para situaciones como por ejemplo, pintar un menú.

Ejemplo simple:

See the Pen ntjqL by Diana (@diana_aceves) on CodePen.

Quitad el overflow y veréis como el background desaparece, el ul deja de tener altura.

Hay más formas de limpiar los floats, pero eso ya lo dejo para otro post más largo.

El bug de la altura en los iPad landscape con iOS 7

Hoy comparto un bug que me trajo de cabeza en uno de mis últimos proyectos, porque es un bug bug, de esos que no tienen ningún sentido y es imposible arreglar…pero que conociéndolo, podemos buscar soluciones fácilmente.

El bug consiste en que en iPads en landscape con iOS 7, si tenemos un elemento con altura 100% relativa a la ventana, resulta que mide 20px más que ella, ¿cómo te quedas? pues así es.

En mi caso concreto me volvía loca buscando por qué razón un texto que debía posicionarse a una determinada distancia del bottom, salía perfecta en todos los dispositivos, navegadores y SO, excepto en mi iPad mini en horizontal, que se descolocaba…

Podéis ver un ejemplo muy clarificador en la siguiente página, http://krpano.com/ios/bugs/ios7-ipad-landscape/ en ella, si lo véis desde un ipad con iOS 7 en horizontal, lo veréis así, el borde rojo que debería estar abajo, igual que el resto, no sale.

la-foto

Yo lo solucioné mezclando un par de cosas que encontré, básicamente se trata de detectar tanto el dispositivo, como el sistema operativo, por javascript a través del userAgent  y meterle una clase específica al html, al que después atacamos con una media query:

Os paso un enlace donde proponen obligar al html a medir lo que debería medir, mediante un position:fixed y el height, pero a mí esa solución no me servía por la naturaleza de mi proyecto y además no me acaba de convencer algo tan drástico, llamadme rara…

https://gist.github.com/benhuson/8664741

En mi caso, sencillamente puse más distancia al elemento que se me quedaba pegado al bottom y solucionado.

Bueno niños, espero que os sirva!

Cargar solo iframe de youtube cuando el usuario pinche en la miniatura del vídeo

Una entrada rápida hoy!

Optimización, optimización y optimización… para los desarrolladores es como un mantra.

En páginas donde tenemos que mostrar varios vídeos, meter los iframes es una carga brutal de archivos innecesarios antes de saber si el usuario va a ver alguno de ellos.

Para evitar esta sobrecarga de estilos, imágenes, etc que trae asociado el iframe de un vídeo de Youtube, existe un script que sólo lo hace cuando el usuario quiera verlo.

Es muy sencillo, simplemente muestra la miniatura del vídeo y la sustituye por el iframe al pinchar.

El script es el siguiente:

(Evidentemente si no vamos a meter el script en el html/php, le quitamos las etiquetas y lo podemos añadir a nuestro archivo .js).

Donde queramos poner la miniatura/vídeo, metemos la siguiente tag:

El id=”XXX..” lo sustituís por el del vídeo y el tamaño, a gusto del consumidor.

Migra tus playlist de Grooveshark a Spotify

Si googleamos un poco, vemos que hay varias formas de hacer la operación contraria, es decir, exportar nuestras playlist de Spotify a Grooveshark, pero yo que soy una inconformista nunca utilicé Spotify, ya véis! chula que es una…

Bueno al rollo! que ahora me encuentro con que todos mis amiguitos frikis de Twitter comparten sus playlists, y yo no existo en su mundo, nadie sabe si me gusta escuchar a “Foo Fighters” o a “Enrique y Ana” y eso no puede ser, mi ego twittero necesita compartir también la música.

He encontrado una forma bastante efectiva de migrar las listas de Grooveshark a Spotify, os la cuento:

  1. Entrad en groovebackup.com, os pedirá vuestros datos de acceso de Grooveshark (no os pongáis tontitos con ésto, que ya sabemos todos, que para que determinadas apps os digan quién os deja de seguir en Twitter, metéis las claves y no tenéis tantos remilgos).
  2. Buscáis la playlist que queréis exportar, click derecho ->guardar enlace como-> csv
  3. Abrís el csv con OpenOffice Calc (vaaaale o Excel…)
  4. Borráis la columna “Album name”.
  5. Intercambiáis el orden de las columnas del artista y canción, de modo que la primera sea el artista.
  6. Cambiáis el título de las columnas: “ArtistName” -> “Artist” y “SongName” -> “Title”.
  7. Guardamos como csv otra vez.
  8. Entráis en ivyishere.org, importáis el csv que acabáis de guardar.

Os dirá las canciones que tenéis, le dais para que cree la playlist y cuando termina os dice cuántas canciones ha encontrado, ya sabéis que en Spotify no están todas, pero puedo deciros que de una lista de 316 canciones que subí YO a Grooveshark, me ha encontrado 256…no está nada mal yo creo, considerando que la mitad de mis canciones tienen la información bastante cochambrosa…

Habéis leído lo de que “… 316 canciones que yo subí a Grooveshark… ” -> “…playlist Spotify…” pues eso… no digo más.

Por cierto, la playlist para el que quiera Diana Playlist Good Music ohhh yeahhh!!

¿Instalación de 5 minutos? ¡No!, instala WordPress en 30 segundos.

Los que tenéis MAC y trabajáis con WordPress estáis de enhorabuena, WordPress new project config os va a permitir hacer una instalación de WordPress… ¡en 30 segundos!

Los requerimientos para poder utilizar esta maravilla son:

  • MAMP
  • Tener instalado Sublime Text o Codekit
  • sFTP para Sublime, sólo si vas a necesitar la conexión remota.

Se trata de un script que se encarga de hacer todo lo que os pongo a continuación, en tiempo récord:

  • Crea los directorios en MAMP.
  • Instala la última versión de WordPress.
  • Borra los archivos readme.html, license.txt, los themes por defecto de WordPress y el plugin “Hello Dolly”.
  • Crea la base de datos y le pone a las tablas el prefijo que tú digas.
  • Configura el wp-config.php y crea un wp-config-local.php para los parámetros de la base de datos local.
  • Configura un proyecto de Sublime Text o Codekit.

Adicionalmente puedes decirle que haga más cosas:

  • Instalar la lista de plugins que desees.
  • Crear el archivo de conexión remota para sFTP en el servidor que le indiques.

Parecen muchas cosas para hacer en 30 segundos ¿verdad? pues sí, pero lo hace, a través del terminal te pregunta el nombre del proyecto y un par de cosas más, y en unos segundos se te abre el proyecto de Sublime o Codekit, y el navegador por defecto con el wordpress montado.

  1. Descargarte el script desde el repositorio https://github.com/jeremycastelli/Wordpress-new-project-config
  2. Renombra el archivo config-sample.cfg -> config.cfg
  3. Edítalo para verificar las opciones de MAMP y poner el theme y los plugins que quieres que instale por defecto.
    editar archivo .command
    El theme debe existir en Github, sin embargo los plugins ya los coge del repositorio de wordpress.org , un gran avance respecto de versiones anteriores del script, que creo recordar, que también necesitaba plugins que estuvieran en Github, y  limitaba mucho los que podías instalar.
  4. Guardas el archivo y ejecutas newproject.command
  5. ¡Empieza la magia! Se te abre el terminal y te pregunta el nombre de tu proyecto, el prefijo que quieres poner a las tablas de la base de datos, si quieres configurar el sFTP, y voilá! Ya tienes tu WordPress.
Captura de pantalla 2013-12-03 a la(s) 10.09.36

Cómo sobreescribir widgets de Woocommerce

Nuestro último proyecto fue un Woocommerce, donde me tocó modificar varias funcionalidades del propio Woocommerce para adaptarlas al especial funcionamiento que debía tener la tienda.

Para evitar que una actualización de Woocommerce, se cargue todas las modificaciones que yo hago, debía sobreescribir los archivos en una carpeta especial del Theme que estábamos utilizando y después deshabilitar el widget original, para que cargase el modificado por mí. Os digo cómo hacerlo:

1. Copio el archivo de la clase donde está el widget.

2. Dentro de la carpeta de mi Theme, habrá un directorio llamado “woocommerce”, debo crear una carpeta nueva dentro llamada “widgets” si no la hay ya: woocommerce/widgets.

3. Cambio el nombre al archivo (por ejemplo custom_elnombreoriginal.php).

4. Lo abro, extiendo mi nueva clase de la que ya existe, y sólo dejo la función widget():

Ej:

class Custom_WC_Widget_Brand_Nav extends WC_Widget_Brand_Nav {

function widget( $args, $instance ) {

//esta función es la que hay en el wc_widget_brand_nav original, y aquí es donde hago los cambios que quiera.
}

}

5. En mi archivo functions.php deshabito el que viene por defecto y activo el mío.

Ej:

add_action( ‘widgets_init’, ‘override_woocommerce_widgets’, 15 );
function override_woocommerce_widgets() {

if ( class_exists( ‘WC_Widget_Brand_Nav’ ) ) {

unregister_widget( ‘WC_Widget_Brand_Nav’ );
include_once( ‘woocommerce/widgets/custom-wc-widget-brand-nav.php’ );
register_widget( ‘Custom_WC_Widget_Brand_Nav’ );

}

}

Listo!

Plugins para Sublime Text

Vamos con la segunda entrega del post sobre Sublime, igual que el primero, lo escribí para el mejor blog de listas del mundo mundial, es decir, “Una docena de…”

En el primero vimos herramientas que ofrece el propio editor, sin necesidad de añadirle nada. Ahora os contaré cuál son para mí, los plugins que le meten gasolina al Sublime, y lo convierten en el maquinón que hace que el trabajo sea mucho más productivo y rápido.

Como en mi primer post, los plugins están enfocados al desarrollo web, hay infinidad de artículos al respecto, pero veo que hay que buscar mucho para encontrar “otros” que no se repitan una y otra vez, y que me han parecido potentísimos.. aunque inevitablemente hay algunos básicos que deben estar.

Y como en el primer post también, los que utilizáis Windows cambiad la tecla CMD por CTRL.
Importante: Todo está probado para Sublime Text 2, la versión 3 aún no la he testeado. Vamos allá:

1. Package Control

Básicamente es el padre de todos, es el que nos permite gestionar la instalación, desinstalación y muchas más cosas, de cualquier plugin, de forma rápida e intuitiva.

La forma de instalarlo es un poco rara, pero intentaré que lo entendáis:

– Ir a la página de instalación.
– Selecciona la pestaña SUBLIME TEXT 2
– Copia el código que aparece debajo:

packagecontrol

– Abre la consola de Sublime (Menú/View > Show Console)
– Pega el código que acabas de copiar.
– Enter.
– Reinicia Sublime.

Una vez instalado, mostramos los controles con CMD+MAY+P, nos saldrá un desplegable donde, al ir escribiendo en el input, nos va filtrando las opciones que encajan, nosotros utilizaremos sobre todo: Install package, Remove Package, List Package, Enable Package, y Disable Package, que si no sabéis traducir ya os vale, pero por si acaso; Instalar, desinstalar, enumerar, habilitar y deshabilitar los plugins.

A partir de ahora, la instalación de todos los plugins que os muestro se hace de la misma manera:

  • CMD+MAY+P -> INSTALL PACKAGE -> Nos sale una lista de todos los plugins disponibles en el repositorio de Sublime, buscaremos cada uno, lo seleccionamos y ya está.
  • Aconsejo reiniciar Sublime cuando instaléis un plugin, no lo necesitan todos pero muchos sí. Así no os volvéis locos si pensáis que no funciona.

2. El Santo Grial: EMMET

Como Prince, “el artista antes conocido como Zen-Coding” va a hacer que se nos olvide escribir html, este plugin completa el código de todo lo que te puedas imaginar, mediante introducción de unas pocas letras.

Pero no sólo eso, sino que a través de determinados comandos, podemos escribir toda una estructura de capas, en una línea.
Os voy a poner algunos ejemplos pero os aconsejo que os echéis un vistazo donde tenéis todo, todo, todo lo que hace. Es alucinante.

MUY IMPORTANTE: si el documento no está guardado con la extensión correspondiente a cualquier sintaxis html, NO FUNCIONA.

– Crear el documento html: Escribimos html:5 y dando tabulador ( a partir de ahora +Tab), nos genera toda la estructura básica de un HTML5.

emmet1

– Completar etiquetas: Simplemente con escribir el texto de una etiqueta+Tab, completa la etiqueta con su correspondiente cierre.

– Añadir una clase o un id a una etiqueta: Todo tiene una sintaxis muy parecida a CSS, de modo que si queremos poner una clase o un id, lo hacemos con un punto o una almohadilla.

div.miClase+Tab -> <div> </div>

div#miID+Tab -> <div id="miID"> </div>

– Anidar capas: el símbolo > añade hijos a una capa, el símbolo + añade hermanos, el * multiplica por un número… así, la siguiente línea + Tab, genera lo que veis en la imagen:

emmet2

3. sFTP

Esta maravilla la he descubierto hace poco y me tiene totalmente enamorada, básicamente se trata de tener un cliente ftp integrado en nuestro Sublime, lo que nos permite editar cualquier archivo remoto desde local, y simplemente con guardarlo, se actualiza en el servidor.

En serio, es una gozada para cambios y modificaciones finales, evitándonos el trasiego de archivos de acá para allá.

Os cuento como se configura:

  • Lo instalamos como todos desde el Package Control y reiniciamos Sublime.
  • En MENÚ/FILE-> nos ha creado una nueva sección SFTP/FTP, abriremos SETUP SERVER.
sftp1
  • Establecemos los parámetros de la conexión, y guardamos el archivo con el nombre que queramos, para identificar el sitio remoto (sin extensión ninguna), os paso como tengo yo el mío.
sftp2
  • Una vez guardado el archivo de configuración, para abrir la conexión con el servidor simplemente vamos al menú (como al principio) pero ahora seleccionamos: MENU->SFTP/FTP->BROWSE SERVER.
  • Se nos abre un desplegable con los servidores que tengamos configurados, elegimos el que queremos, y nos abre otro desplegable en el directorio raíz remoto, nos movemos por él mediante clicks, y cuando estemos en el archivo que queremos, lo seleccionamos y podemos editarlo, renombrarlo y demás opciones que veis.
sftp3

Si le damos EDITAR, se nos abre en Sublime, también veréis en la consola como se ejecutan las operaciones de conexión, lo editamos, Y AL GUARDAR, SE SUBEN LOS CAMBIOS, así que ojito con la opción SAVE ON FOCUS LOST que os expliqué en el primer post, porque si la tenéis activa y cambiáis de archivo, subís los cambios sin querer.

4. Sidebar Enhancements

Este plugin nos transforma el menú contextual del Sidebar de Sublime, que es bastante básico, en un completísimo gestor de archivos y carpetas.

sidebar

5. YUI Compressor

Fundamental para crear los archivos .min de nuestros .css y .js una vez terminado el proyecto.
Con el archivo que quiero minimizar abierto, simplemente pulsando CMD+B nos crea el .min.css o .min.css en la misma carpeta donde tenemos los originales, por supuesto sin pisarlos.

Os saldrá un mensaje en la consola cuando se ejecute el plugin.

yuicompressor

6. PREFIXR

Esta maravilla nos pone los prefijos CSS3 necesarios para el crossbrowser, sin que nosotros tengamos que estar escribiéndolos.

Escribes la regla CSS te colocas dentro del bloque, le das CMD+CTRL+X y te pone los prefijos que se necesiten.

prefixr

Se puede aplicar a bloques de código que comprendan varios selectores, seleccionando todo, SIEMPRE QUE NO HAYA COMENTARIOS ENTRE ELLOS, este plugin se tuesta con los comentarios.

Revisad siempre el código que os genera porque a veces hace cosas raras, pero compensa con creces el trabajo de ponerlos a manita.

7. Color Picker

Super útil para CSS, con CMD+MAY+C nos abre el color picker propio del sistema operativo, sin más.

colorpicker

Y os hago un 2×1 y os cuento otro, Color Highlighter para identificar los colores que tienes en tu CSS, porque si pones el cursor encima del color, te lo muestra!! Mola mucho mucho…ya no tienes que abrir el picker para saber si el color #fsjgoe era rosa palo o verde aguamarina… (los tíos quedaos con lo de rosa o verde, na más.)

colorhighlighter

8. jQuery

Completo paquete de snippets para jquery, que hace que no tengamos que escribir las funciones, métodos y variables más comunes.

Además como todos los snippets en Sublime son personalizables, podemos modificarlos como mejor nos parezca.

Como siempre, se trata de escribir unas pocas letras, que nos muestre el abanico de funciones posibles y que nos las escriba él solito. Algunos ejemplos:

$+Tab -> $(‘string/element/array/function/jQuery object/string, context’)

this+Tab -> $(this)
fdt+Tab -> fadeToggle(‘slow/400/fast’, function() { });

9. Search Stack Overflow

¿Cuántas veces has terminado encontrando la solución a tu problema en Stack Overflow?? Pues busca directamente ahí y no te marees… este magnífico plugin permite buscar directamente en Stack Overflow desde el editor, y abre el navegador en los resultados de búsqueda.

Lo puedes hacer de dos formas;
– Seleccionas el texto a buscar -> botón derecho, “Stack overflow Search”.

stack1
  • Desde una caja de búsqueda normal, abres el command palette mediante CMD+MAY+P, pones “stack” y te aparece la opción “Search from input”.
    Te aparece el input de buscar de siempre y ya está.
stack2

Parece largo pero os aseguro que se tarda menos que en ir al navegador, meter la frasecita, darle al “buscar” y moverte por los resultados de google. En cuanto te familiarizas con el CMD+MAY+P es casi inmediato.

10. Search WordPress Codex

Yaaaaa.. ya sé que todos somos super profesionales del front, y que wordpress es para los que no saben, pero nos toca tragar y hacer webs en wordpress por un tubo, y como nosotros sabemos, lo hacemos por código, y como lo hacemos por código, este plugin nos viene de coña para consultar en el Códex directamente desde Sublime.

Funciona igual que plugin de Stack Overflow. La búsqueda también puede hacerse mediante selección o mediante input.

Además no se limita a buscar en el Codex, sino que puedo elegir dónde busco de estas cuatro opciones:
– Search WordPress Codex
– WordPress Function Reference
– Search QueryPosts
– QueryPost Function Reference

Maravilloso, si tienes dudas de lo que hace una función, la buscas en el Function Reference y te abre la página de ESA función…en fin…una gozada.

11. WordPress Package

Seguimos con WordPress, este plugin es una completísima colección de snippets para autocompletar todo lo que os imaginéis de sintaxis de nuestro querido CMS.

Está basado en el paquete para TextMate, de modo que para ver cómo funcionan los snippets debéis consultar en el original.

Merece la pena echar un vistazo a toda la documentación porque dejaréis de escribir código cuando desarrolléis WP.

12. Clipboard History

Este plugin también lo descubrí hace poco, y aunque en principio no parece muy útil, estoy viendo que lo es más de lo que creía.

Se trata de tener accesible el histórico de lo que has copiado.

Cuántas veces copias una línea, y cuando te das cuenta, resulta que has copiado otra después, sin haber utilizado la primera, y te metes en un bucle de: “pego ésto ahora, porque si no también lo pierdo, y vuelvo a por lo otro que copié, espera, dónde estaba…me lo apunto en un archivo nuevo para cogerlo ahora, guardar, no, espera joder!! me lo tatúo en la frente? Ahhhhgggg!!!”

Pues eso, abres el histórico y punto. Nada de tatuajes en la frente.

La pega que le pongo es que la combinación de teclas es como para unas prisas, desde luego los que seáis poco coordinados lo tenéis chungo, pero al menos están todas juntas.

CMD+ALT+CTRL+V y nos sale el desplegable:

clipboard

Y con esto amiguitos, cumplo con mis posts sobre Sublime Text, espero que os sea útil la información.
Me encantaría que me contarais cuál usáis vosotros, porque seguro que habéis descubierto plugins muy interesantes que desconozco.
Si tenéis alguna duda, estoy a vuestra entera disposición. A disfrutar desarrollando!