Brackets es un editor de código fuente descontinuado [5] con un enfoque principal en el desarrollo web . [6] Creado por Adobe Systems , es un software gratuito y de código abierto con licencia MIT , y actualmente se mantiene en GitHub por Adobe y otros desarrolladores de código abierto. Está escrito en JavaScript , HTML y CSS . Brackets es multiplataforma , disponible para macOS , Windows y la mayoría de las distribuciones de Linux . El propósito principal de Brackets es su HTML en vivo., Funcionalidad de edición de CSS y JavaScript . [7]
Desarrollador (es) | Adobe Systems |
---|---|
Versión inicial | 4 de noviembre de 2014 [1] |
Lanzamiento final | 1.14.2 [2] / 6 de abril de 2020 |
Versión de vista previa | 1.14 vista previa 1 (15 de abril de 2019 [±] [3] | )
Repositorio | |
Escrito en | JavaScript , HTML , CSS |
Sistema operativo | macOS , Windows y Linux |
Tamaño | ~ 75 MB |
Disponible en | 38 idiomas [4] |
Tipo | Editor de código fuente |
Licencia | MIT |
Sitio web | corchetes |
El 4 de noviembre de 2014, Adobe anunció la primera versión (1.0) de Brackets. La actualización introdujo nuevas funciones, como combinaciones de teclas de acceso directo personalizadas y sugerencias de JavaScript más precisas. Brackets tiene un enfoque principal en el desarrollo en JavaScript, CSS y HTML . Con el lanzamiento de la versión 1.0, Adobe anunció una función que extrae información de diseño de un archivo PSD para facilitar la codificación en CSS. [8] A partir del 28 de junio de 2016, la función se suspendió oficialmente debido al bajo uso. [9] Sin embargo, Extract todavía está disponible a través de Photoshop y Dreamweaver, los cuales forman parte de su servicio pago, Adobe Creative Cloud. [10] La última versión de Brackets es 1.14.2. [11]
En marzo de 2021, Adobe anunció que dejará de admitir corchetes el 1 de septiembre de 2021. [12]
Historia
Adobe comenzó por primera vez a desarrollar un editor de texto para el desarrollo web en Edge Code , que se suspendió en noviembre de 2014. [13] Este esfuerzo se transformó más tarde en Adobe Brackets. Con el lanzamiento de Brackets 1.0, Adobe anunció que el desarrollo de una aplicación de código abierto para el desarrollo web estaba listo y ya no era un proyecto experimental. Brackets contiene contribuciones de más de 282 colaboradores de la comunidad y tiene más de 400 solicitudes de corrección de errores y nuevas funciones. Cada versión de Brackets tuvo más de 100,000 descargas, y fue el decimosexto proyecto más popular en GitHub el 16 de enero de 2015. [14]
El repositorio de Brackets en GitHub ( repositorio de Bracket ) tiene actualmente 152 sucursales , 110 lanzamientos y 17,700 confirmaciones al 30 de agosto de 2018. El código fuente está disponible gratuitamente bajo la licencia MIT . Un desarrollador puede modificar las funciones de Brackets y personalizarlas para su propia conveniencia al bifurcar el código del software . [15]
Características
Los soportes ofrecen varias funciones [16] que incluyen:
- Edición rapida
- Documentos rápidos
- Vista previa en vivo
- JSLint
- MENOS soporte [17]
- Código abierto [18]
- Extensibilidad
Edición rapida
La edición rápida permite la edición en línea de elementos CSS, propiedad de color y JavaScript para desarrolladores. Esta característica incorporada se puede aplicar a múltiples funciones o propiedades simultáneamente y todas las actualizaciones se aplican directamente al archivo asociado con los elementos modificados.
- Archivo HTML
- La aplicación de la edición rápida a los elementos HTML mostrará todas las propiedades CSS correspondientes en un cuadro debajo del elemento seleccionado. Los usuarios pueden optar por crear nuevas reglas CSS directamente dentro del editor y editar las propiedades CSS de una etiqueta en línea sin salir del contexto del archivo HTML .
- Archivo JavaScript
- En las funciones de JavaScript , la edición rápida realiza el mismo procedimiento que con los elementos HTML , pero muestra el cuerpo de la función seleccionada dentro del cuadro desplegable. Todas las actualizaciones del cuerpo de la función se propagarán y actualizarán directamente dentro del archivo JavaScript correspondiente .
- Archivos que contienen propiedades de color hexadecimal o RGB
- Para las propiedades de color, la edición rápida devolverá un selector de color en línea para la vista previa y la funcionalidad de ajuste de color.
Vista previa en vivo
Cuando se hace clic en el fragmento de código respectivo en CSS / HTML, el navegador web muestra inmediatamente la salida relacionada con ese fragmento de código en el navegador web. Esta función se denomina Vista previa en vivo, esta función también envía las ediciones de código instantáneamente al navegador para presentar una página web actualizada a medida que los desarrolladores modifican el código. Los corchetes contienen un backend de Node.js que predice lo que hace el código cuando el desarrollador escribe el código.
Dos escenarios para la vista previa en vivo
- Sin lógica de back-end
- Con la vista previa en vivo, Brackets lanzará el archivo HTML elegido en Google Chrome al proporcionar contenido estático desde el servidor integrado de Brackets . Este procedimiento no requiere ninguna lógica de back-end para admitir la visualización de cambios en el archivo HTML .
- Lógica de back-end
- Con la lógica de back-end, Brackets dirigirá Google Chrome a una URL de proyecto proporcionada que se ejecuta en un servidor separado , pero deshabilitará la compatibilidad con funciones relacionadas con HTML . Como resultado, el navegador no podrá actualizar ningún archivo HTML , PHP , etc. en tiempo real y el resaltado de elementos también se desactivará para estos archivos. Solo las ediciones y el resaltado de elementos relacionados con archivos CSS se reflejarán en tiempo real. En su lugar, todas las actualizaciones de archivos que no sean CSS se volverán a cargar automáticamente. Estas limitaciones existen porque proporcionar la funcionalidad de edición en vivo para archivos HTML requiere inyectar anotaciones en el código HTML antes de que el código se cargue en el navegador . Estas inyecciones normalmente son manejadas por el servidor integrado de Brackets , pero son inexistentes cuando los proyectos utilizan servidores personales separados .
Funcionalidad
- Actualizaciones de HTML y CSS en tiempo real (sin recargar)
- Resaltado de elementos : los elementos seleccionados en archivos HTML y CSS se resaltan en el navegador .
Limitaciones de la vista previa en vivo
- Actualmente solo funciona con Google Chrome de escritorio (no con Chromium de código abierto ), como navegador de destino .
- La apertura de herramientas de desarrollo en Google Chrome cerrará todas las conexiones de desarrollo en vivo.
- Todos los archivos que se van a ver deben estar dentro de una carpeta abierta actualmente entre corchetes.
- Solo se puede obtener una vista previa de un archivo HTML a la vez.
- Las actualizaciones en tiempo real se pausan cuando se encuentra HTML sintácticamente inválido . Los corchetes reanudarán la inserción de cambios en el navegador cuando se corrija la sintaxis .
Vista dividida
Esta característica divide la vista principal en dos partes. Los usuarios pueden dividir la vista vertical u horizontalmente según su propia conveniencia, lo que les permite trabajar en dos archivos al mismo tiempo. Un desarrollador puede trabajar simultáneamente en dos archivos diferentes de dos tipos diferentes, dos archivos del mismo tipo o incluso dos partes diferentes del mismo archivo al mismo tiempo. Funciones como Vista previa en vivo y Edición rápida funcionan en ambas vistas.
Compatibilidad con varios formatos de archivo
Los corchetes admiten códigos de varios tipos de archivos, desde C ++ , C , VBScript hasta Java , JavaScript , HTML , Python , Perl y Ruby . La lista completa comprende más de 38 tipos de archivos. Esto le da al usuario flexibilidad para trabajar en varios archivos de un proyecto simultáneamente.
Brackets admite una función llamada "lente PSD" que ayuda a extraer sin problemas cada una de las imágenes, logotipos y estilos de diseño del archivo PSD sin abrir Photoshop para verificarlos. Al llamar a esta función una vista previa, Adobe transmite que hay mucho trabajo por delante antes de que esta función pueda perfeccionarse. Esta función generó críticas positivas de los desarrolladores, pero se informaron muchos problemas durante las etapas iniciales del lanzamiento de la función. El problema se resolvió más tarde mediante una extensión.
Integración de Teseo
Brackets integra Theseus, un depurador de JavaScript de código abierto que permite a los desarrolladores establecer puntos de interrupción, recorrer el código e inspeccionar el valor de las variables en tiempo real. [19] Theseus se puede usar para depurar cualquier extensión en Brackets y se instala fácilmente usando el administrador de extensiones incorporado . Theseus también trabaja en conjunto con Live Preview a través de un servidor proxy que registra una función y sus valores asociados cada vez que se llama a la función.
Extensiones
Al estar construido con HTML , CSS y JavaScript , los desarrolladores pueden proporcionar funcionalidad adicional a Brackets mediante la creación de extensiones . [16] [20] Estas extensiones se pueden encontrar e instalar usando el administrador de extensiones incorporado . Las extensiones también se pueden encontrar en línea a través del Registro de extensiones de Brackets .
Ver también
- Marco integrado de cromo (CEF)
- Lista de editores de texto
- Comparación de editores de texto § Funciones de programación
- Comparación de editores HTML
- Átomo
Referencias
- ^ Stewart, Ryan. "Corchetes 1.0 y extracto para corchetes (vista previa) ahora disponibles" . Blog de soportes . Adobe Systems . Archivado desde el original el 8 de febrero de 2015 . Consultado el 15 de noviembre de 2014 .
- ^ "Lanzamiento 1.14.2" . 6 de abril de 2020 . Consultado el 6 de abril de 2020 .
- ^ https://github.com/adobe/brackets/releases
- ^ github .com / adobe / brackets / blob / master / src / nls / README .md
- ^ Aviso de EOL de soportes - Blog de soportes
- ^ "Editor de código de soportes de Adobe" . Technewss. Archivado desde el original el 13 de diciembre de 2014 . Consultado el 12 de diciembre de 2014 .
- ^ "Un editor de código fuente abierto y moderno que comprende el diseño web" . Soportes . Consultado el 23 de abril de 2021 .
- ^ Por Harrison Weber, VentureBeat. " Adobe lanza su editor de texto de código abierto Brackets fuera de la versión beta, lanza la herramienta de extracción de CSS ". 4 de noviembre de 2014.17 de noviembre de 2014.
- ^ "Actualización sobre Extracto para corchetes (vista previa)" .[ enlace muerto permanente ]
- ^ "Actualización sobre Extract for Creative Cloud Assets Online Service y Brackets" .
- ^ "Notas de la versión 1.14.2" , corchetes: un editor de código fuente abierto para la web, escrito en JavaScript, HTML y CSS , Adobe Systems Incorporated, 2020-04-06 , consultado el 2020-10-26
- ^ "Aviso de fin de vida entre paréntesis" . Brackets Blog: el editor de código fuente abierto y gratuito para la Web . 2021-03-01 . Consultado el 1 de marzo de 2021 .
- ^ Código de Adobe Edge CC
- ^ LaFontaine, David (16 de enero de 2015). "Adobe se sumerge en las aguas del software de código abierto con corchetes 1.0" . Capas .
- ^ Adobe Brackets: editor de código abierto para diseñadores web
- ^ a b "Cómo utilizar los corchetes" , Adobe
- ^ Revisión del editor de texto: Adobe Brackets , 22 de enero de 2014, archivado desde el original el 29 de marzo de 2015 , consultado el 27 de marzo de 2015
- ^ "Corchetes: editor de código de fuente abierto gratuito construido con HTML / CSS" , Hongkiat
- ^ "Theseus JavaScript Debugger for Chrome and NodeJS" , Blog de soportes , 28 de agosto de 2013
- ^ "A Review of the Brackets Editor" , SitePoint , 18 de abril de 2014
enlaces externos
- Página web oficial