Hoy vamos a hablaros de Brackets, un editor de texto un tanto especial. Brackets es un editor de texto gratuito. En él podemos encontrar un diseño realmente bonito y sin dejar de lado a las prestaciones.
¿Cómo instalar Brackets?
Brackets es un programa gratuito, pero por el nombre del programa si pones “Brackets” en Google como es normal te aparecerán web relacionadas con ortodoncias. Podéis encontrar su web poniendo “Brackets IDE” o entrando directamente a brakets.io.
La instalación de Brackets es realmente simple. Lo descargas de su web y luego instalamos el wizard (tipico instalador de siguiente, siguiente, siguiente…). No tengáis miedo, no tienes que desmarcar la típica casilla de publicidad para que no te ponga “Bing” como navegador por defecto.
¿Qué hace especial a Brackets?
No vamos a mentiros, nosotros normalmente instalamos “Sublime text” en nuestros equipos para tener un editor de texto. Pero brackets tiene dos cosas que lo hacen un editor muy potente, sobre todo si lo comparamos con el típico notepad de Windows….
Área de trabajo
Con el área de trabajo podemos tener acceso a los archivos con los que estemos trabajando desde el propio editor. Básicamente podremos colocarnos en la carpeta contenedora de nuestro proyecto y tener acceso a los archivos que contiene desde el editor.
Para hacer esto, una vez tengamos Brackets instalado, tendremos que ponernos sobre cualquier carpeta de nuestro equipo y hacer click derecho sobre ella. Después haremos click en “Open as Brackets project” y nos abrirá Brackets con todos los archivos que contenga la carpeta en el área de trabajo.
Desde la barra del área de trabajo podremos crear nuevas carpetas y nuevos archivos (todo sin salirnos de nuestro área de trabajo). De este modo no tendrás que salirte del editor para crear un nuevo archivo HTML, CSS o el tipo de archivo que quieras.
Vista previa
Cuando estas diseñando una web normalmente escribes código durante un rato y luego guardas para ver el resultado. Solo voy a decir una cosa. “Vista previa” + “Doble pantalla” = Gloria Absoluta. Y es que cuando tienes un ordenador con dos pantallas puedes editar código en una y ver como quedan los cambios en tiempo real en la otra. Realmente esto facilita mucho la labor visual de la web.
Como dice el propio Brackets, la vista previa se verá en una ventana de Google Chrome. Pero como ya hemos dicho antes, el futuro de los navegadores a día de hoy creemos que esta en Google Chrome, no en Firefox ni mucho menos en Internet Explorer (o el nuevo Microsoft Edge).
Buscar y Reemplazar
Al igual que en Google Chrome, en Brackets también puedes buscar palabras en el texto. Puedes hacerlo de dos formas:
- Desde la barra de herramientas haciendo click en Buscar/Buscar
- Pulsando ” Control + F “
Nosotros recomendamos usar la segunda, ya que es el mismo atajo que utilizan la mayoría de programas para esta función. Con esto podremos buscar todas las veces que se repita la palabra en el texto de forma rápida.
Pero lo realmente potente es la opción de Reemplazar, la encontraremos en:
- Desde la barra de herramientas haciendo click en Buscar/Reemplazar
- Pulsando ” Control + H “
Esta opción es como la anterior, pero nos permite reemplazar palabras o partes de estas por otra cadena de texto distinta. Ademas, podremos elegir si modificar solamente una palabra o modificar todos los resultados de la búsqueda a la vez. Una opción muy útil y potente, la cual nos permite incluso habilitar la distinción entre mayúsculas y minúsculas.
División de la vista
Desde la barra del área de trabajo tenemos un botón con forma de “libro” cuadrado partido por la mitad, o como queráis vosotros verlo, el cual nos permitirá dividir la vista en dos: de forma vertical u horizontal.
Esto viene muy bien para tener HTML a un lado y el CSS a otro, de modo que no solo no tendrás que salir de Brackets, si no casi ni cambiar la vista entre archivos.
Otras funcionalidades de Brackets
No comentamos todas las funcionalidades de Brackes en profundidad ya que tiene unas cuantas y no distan mucho de la de la mayoría de editores de texto. Creemos que si todo lo anterior no os ha convencido, estos puntos no lo harán, pero comentamos algunas otras funcionalidades que tiene Brackets.
- Elección de Temas para cambiar la “Skin” de Brackets.
- Posibilidad de añadir extensiones desde “Archivo/Gestionar extensiones”
- Algunas muy interesantes como MaterializeCSS o “W3C Validation”
- Abrir proyectos recientes
- Subir/Bajar/Borrar/Duplicar una linea de código.
- Generar Getters y Setters
- ….
Opciones muy útiles pero mas enfocadas a diseño web profesional y programación.
Conclusión sobre Brackets
Es una herramienta gratuita y muy potente. Nosotros la recomendamos sobre todo si vas a trabajar “haciendo webs a código”. Ya que, aunque en Sublime Text tienes también algunas de estas herramientas como la división de la vista o la función buscar y reemplazar, no tienes la opción de vista previa. Sólo por esto merece la pena darle una oportunidad.
Cabe decir que el partido a esta herramienta se le saca sobre todo con dos pantallas. A ser posible una de ellas de tamaño normal (para ver la web aproximadamente como la verán tus usuarios desde el ordenador) y otra algo mas grande (una pantalla a ser posible más panorámica para dividir la vista en dos partes y verla bien). Si este es tu caso, esta herramienta te encantará. En caso contrario, intenta buscar un monitor aunque sea antiguo para tu ordenador y pruebalo. Una vez pruebes la doble pantalla te sentirás solo y desnudo cuando solo tengas una pantalla delante tuya. A nosotros nos ocurre.
Si quieres crear una pagina a código puro y quieres hacerlo con estilo, no dudes mas y usar Brackets.
