Diferencia entre revisiones de «Brackets (editor de texto)»
(Etiqueta: revisar proyecto) |
(Etiqueta: revisar proyecto) |
||
| Línea 31: | Línea 31: | ||
Se trata de una herramienta [[Open Source]] con una interfaz clara y directa que dispone de detección automática del código y ayudas en la escritura, sangriado y coloración para identificar segmentos, pudiendo organizar todos los elementos de nuestro proyecto a través del área de trabajo que podemos organizar en árbol y en la que se integran los archivos de código y los propios elementos visuales que formen parte de la web que se desea crear. | Se trata de una herramienta [[Open Source]] con una interfaz clara y directa que dispone de detección automática del código y ayudas en la escritura, sangriado y coloración para identificar segmentos, pudiendo organizar todos los elementos de nuestro proyecto a través del área de trabajo que podemos organizar en árbol y en la que se integran los archivos de código y los propios elementos visuales que formen parte de la web que se desea crear. | ||
| − | |||
==Características== | ==Características== | ||
| Línea 44: | Línea 43: | ||
==Caracteristicas ampliadas== | ==Caracteristicas ampliadas== | ||
| − | *Vista previa en vivo. <br /> | + | * Vista previa en vivo. <br /> |
Es una característica que me ha impresionado y con la que podemos no solo visualizar el resultado del código HTML+CSS+Javascript, sino que podemos modificar en tiempo real cualquier parte del código y se verán reflejados instantáneamente los cambios en la ventana de previsualización. Por el momento la vista previa en vivo está disponible únicamente con el navegador Chrome, pero ya están trabajando para implementarla en otros navegadores. | Es una característica que me ha impresionado y con la que podemos no solo visualizar el resultado del código HTML+CSS+Javascript, sino que podemos modificar en tiempo real cualquier parte del código y se verán reflejados instantáneamente los cambios en la ventana de previsualización. Por el momento la vista previa en vivo está disponible únicamente con el navegador Chrome, pero ya están trabajando para implementarla en otros navegadores. | ||
| − | *Edición del código CSS directamente desde el código HTML. <br /> | + | * Edición del código CSS directamente desde el código HTML. <br /> |
El título puede sonar un confuso pero me explico, esta característica de Brackets consiste en permitir editar el archivo CSS que sirve de hoja de estilos a un documento HTML directamente desde el propio código HTML sin tener que abrir el archivo CSS, Brackets combina todo en la misma ventana. Para entenderlo mejor, en la siguiente imagen vemos como podemos modificar el estilo de la etiqueta HTML H1 cuya hoja de estilo es main.css directamente desde la ventana con el código HTML. | El título puede sonar un confuso pero me explico, esta característica de Brackets consiste en permitir editar el archivo CSS que sirve de hoja de estilos a un documento HTML directamente desde el propio código HTML sin tener que abrir el archivo CSS, Brackets combina todo en la misma ventana. Para entenderlo mejor, en la siguiente imagen vemos como podemos modificar el estilo de la etiqueta HTML H1 cuya hoja de estilo es main.css directamente desde la ventana con el código HTML. | ||
* Brackets muestra las rutas de archivos. <br /> | * Brackets muestra las rutas de archivos. <br /> | ||
| − | Otra de las grandes ventajas de Brackets es que nos muestra los directorios de nuestro proyecto para localizar la ruta del recurso que queremos emplear, ya sean imágenes, fuentes, | + | Otra de las grandes ventajas de Brackets es que nos muestra los directorios de nuestro proyecto para localizar la ruta del recurso que queremos emplear, ya sean imágenes, fuentes, etc. Esta opción se muestra al emplear una propiedad HTML o CSS que haga uso de un archivo externo. |
*Previsualización de colores e imágenes directamente desde el código. <br /> | *Previsualización de colores e imágenes directamente desde el código. <br /> | ||
| − | Cuando desde el código se hace referencia a una imagen o a un color, si pasamos el cursor por encima de la ruta de la | + | Cuando desde el código se hace referencia a una imagen o a un color, si pasamos el cursor por encima de la ruta de la imagen o por encima del valor del color, se nos muestra un cuadro en el que previsualizar la imagen o el color en cuestión. |
| − | |||
==Extensiones populares para Brackets == | ==Extensiones populares para Brackets == | ||
| Línea 62: | Línea 60: | ||
*'''Autoprefixer''': Analizar CSS y añadir prefijos de proveedores de forma automática. | *'''Autoprefixer''': Analizar CSS y añadir prefijos de proveedores de forma automática. | ||
*'''W3C Validation''': Validador [[W3C]] sencillo. | *'''W3C Validation''': Validador [[W3C]] sencillo. | ||
| − | |||
== Conociendo más == | == Conociendo más == | ||
| Línea 68: | Línea 65: | ||
'''Brackets''' es un proyecto de código abierto por lo que dispone de la ventaja de contar con modificaciones implementadas por la comunidad de programadores [[web]]. Por tanto, las mejoras que se introduzcan es muy posible que coincidan con sus exigencias como [[programador]], permitiendo que incluir las propias. | '''Brackets''' es un proyecto de código abierto por lo que dispone de la ventaja de contar con modificaciones implementadas por la comunidad de programadores [[web]]. Por tanto, las mejoras que se introduzcan es muy posible que coincidan con sus exigencias como [[programador]], permitiendo que incluir las propias. | ||
| − | |||
== Ventajas de Brackets: == | == Ventajas de Brackets: == | ||
| Línea 81: | Línea 77: | ||
*Desarrollo activo. <br /> | *Desarrollo activo. <br /> | ||
Brackets tiene un desarrollo muy activo y cada mes o mes y medio sale una versión nueva con corrección de bugs o nuevas características. Este es un punto importante ya que el editor seguirá evolucionando para dar mejores prestaciones a los programadores. | Brackets tiene un desarrollo muy activo y cada mes o mes y medio sale una versión nueva con corrección de bugs o nuevas características. Este es un punto importante ya que el editor seguirá evolucionando para dar mejores prestaciones a los programadores. | ||
| − | |||
== Inconvenientes de Brackets== | == Inconvenientes de Brackets== | ||
| Línea 89: | Línea 84: | ||
*A la hora de abrir/guardar archivos no permite seleccionar la codificación de caracteres, sólo trabaja con UTF-8. | *A la hora de abrir/guardar archivos no permite seleccionar la codificación de caracteres, sólo trabaja con UTF-8. | ||
Algunos de estos inconvenientes pueden ser solucionados empleando extensiones, que hay disponibles una gran variedad para añadir funcionalidades extra a '''Brackets'''. | Algunos de estos inconvenientes pueden ser solucionados empleando extensiones, que hay disponibles una gran variedad para añadir funcionalidades extra a '''Brackets'''. | ||
| − | |||
== Fuentes== | == Fuentes== | ||
Revisión del 14:12 16 ago 2017
| ||||||||||
Brackets, editor de código diseñado por Adobe y de código abierto destinado a desarrolladores web y con una interfaz y funciones que contribuyen a evitar distracciones. Involucra por completo HTML, CSS y JavaScript y mejora la productividad.
Es un editor de código liviano y potente, y al mismo tiempo ncluye herramientas visuales permitiendo obtener la ayuda que se necesite. Un moderno editor, de código abierto de texto que comprende el diseño web.
Se trata de una herramienta Open Source con una interfaz clara y directa que dispone de detección automática del código y ayudas en la escritura, sangriado y coloración para identificar segmentos, pudiendo organizar todos los elementos de nuestro proyecto a través del área de trabajo que podemos organizar en árbol y en la que se integran los archivos de código y los propios elementos visuales que formen parte de la web que se desea crear.
Sumario
Características
Una de sus características más interesantes es el modo de vista previa dinámica en la que podemos abrir nuestro proyecto en el navegador y ver en tiempo real las modificaciones que hacemos en el código fuente. Además, sus funcionalidades son enormemente ampliables al permitir el uso de extensiones de terceros. Una de ellas, la llamado Extract for Brackets, ya viene integrada, y permite exportar los datos de formato de un archivo PSD de Photoshop, aunque para ello es necesario registrarse con una cuenta de Adobe.
- Editor de código HTML, CSS y JavaScript.
- Función Quick Edition que permite la edición de estilos sobre el mismo elemento.
- Live Free Preview que refresca el navegador para ver el resultado del código en tiempo real.
- Programado utilizando HTML, CSS y JavaScript.
- Posibilidad de extender y personalizar el editor así como contribuir al proyecto.
- Gestor de extensiones.
- Interfaz muy limpia y minimalista.
Caracteristicas ampliadas
- Vista previa en vivo.
Es una característica que me ha impresionado y con la que podemos no solo visualizar el resultado del código HTML+CSS+Javascript, sino que podemos modificar en tiempo real cualquier parte del código y se verán reflejados instantáneamente los cambios en la ventana de previsualización. Por el momento la vista previa en vivo está disponible únicamente con el navegador Chrome, pero ya están trabajando para implementarla en otros navegadores.
- Edición del código CSS directamente desde el código HTML.
El título puede sonar un confuso pero me explico, esta característica de Brackets consiste en permitir editar el archivo CSS que sirve de hoja de estilos a un documento HTML directamente desde el propio código HTML sin tener que abrir el archivo CSS, Brackets combina todo en la misma ventana. Para entenderlo mejor, en la siguiente imagen vemos como podemos modificar el estilo de la etiqueta HTML H1 cuya hoja de estilo es main.css directamente desde la ventana con el código HTML.
- Brackets muestra las rutas de archivos.
Otra de las grandes ventajas de Brackets es que nos muestra los directorios de nuestro proyecto para localizar la ruta del recurso que queremos emplear, ya sean imágenes, fuentes, etc. Esta opción se muestra al emplear una propiedad HTML o CSS que haga uso de un archivo externo.
- Previsualización de colores e imágenes directamente desde el código.
Cuando desde el código se hace referencia a una imagen o a un color, si pasamos el cursor por encima de la ruta de la imagen o por encima del valor del color, se nos muestra un cuadro en el que previsualizar la imagen o el color en cuestión.
Extensiones populares para Brackets
- Emmet: HTML de alta velocidad y el flujo de trabajo de CSS.
- Beautif: Formato de archivos de JavaScript, HTML y CSS.
- File Icons: Presentar iconos en el árbol de archivos.
- Indent Guides: Mostrar guías de sangría en el editor de código.
- Git: La integración de Git para Brackets.
- Autoprefixer: Analizar CSS y añadir prefijos de proveedores de forma automática.
- W3C Validation: Validador W3C sencillo.
Conociendo más
Brackets plantea una manera de escribir código en la que se involucra CSS y JavaScript con HTML de una forma más natural. En vez de cambiar de pestaña cada vez que se quiere editar algún elemento vinculado a HTML con la posible pérdida de concentración, el usuario puede hacer uso de la función QuickEdition con la combinación de teclas Ctrl+E. De esta manera bajo el elemento en cuestión aparecerá todo lo vinculado a él.
Brackets es un proyecto de código abierto por lo que dispone de la ventaja de contar con modificaciones implementadas por la comunidad de programadores web. Por tanto, las mejoras que se introduzcan es muy posible que coincidan con sus exigencias como programador, permitiendo que incluir las propias.
Ventajas de Brackets:
- Está en español.
Brackets está completamente en español y soporta otros 24 idiomas por el momento. Para los usuarios más noveles esto puede ser una ventaja.
- Es gratuito y de código abierto.
Brackets es de código abierto y está disponible en GitHub el código fuente. Es un editor totalmente gratuito y sin coste alguno para el usuario.
- Es multiplataforma.
Está disponible para Windows, Linux y Mac OS X. La versión de Linux tiene un desarrollo más lento que la versión para Windows.
- Autocompletado de texto.
Cómo buen editor para aplicaciones web soporta autocompletado para HTML, CSS y Javascript. Una cosa que me ha llamado la atención, es que a la hora de usar el autocompletado no se emplea la tecla Tabulador para seleccionar el elemento del autocompletado, sino que se emplea la tecla Enter, esto puede ser costumbre mía ya que en Visual Studio y Sublime Text el autocompletado funciona con Tabulador.
- Desarrollo activo.
Brackets tiene un desarrollo muy activo y cada mes o mes y medio sale una versión nueva con corrección de bugs o nuevas características. Este es un punto importante ya que el editor seguirá evolucionando para dar mejores prestaciones a los programadores.
Inconvenientes de Brackets
- Lo primero que nos encontramos al instalar Brackets es un inconveniente y es que se asocia con archivos de extensión PHP sin dar opción al usuario a decidir si quiere establecer esta asociación o no.
- Brackets dispone de un visor de imágenes que incluye una cruceta con coordenadas x e y, útil para crear sprites o seleccionar coordenadas pero el visualizador de imágenes no dispone de zoom para un posicionamiento de la cruceta más fino.
- Algo que me ha sorprendido es que no soporta code folding (plegado de código), esto es algo básico y muy útil, sobre todo en proyectos extensos.
- A la hora de abrir/guardar archivos no permite seleccionar la codificación de caracteres, sólo trabaja con UTF-8.
Algunos de estos inconvenientes pueden ser solucionados empleando extensiones, que hay disponibles una gran variedad para añadir funcionalidades extra a Brackets.
