Brackets un gran editor para diseño web




Brackets un gran editor para diseño web
Brackets un gran editor para diseño web

Brackets, un nuevo editor de código abierto que entiende el diseño web. Brackets un gran editor para diseño web. Es un editor de código liviano y potente al mismo tiempo que incluye herramientas visuales dentro del mismo para que puedas obtener la ayuda que necesites cuando la necesites.

Un moderno editor, de código abierto de texto que comprende el diseño web.

Con las herramientas visuales enfocados y apoyo preprocesador, soportes es un moderno editor de texto que hace que sea fácil de diseñar en el navegador. Está elaborado a partir de cero para los diseñadores web y desarrolladores de aplicaciones para usuario.

¿Por qué utilizar los soportes?

Brackets es un editor ligero, pero potente, moderno texto. Mezclamos herramientas visuales en el editor para que pueda obtener la cantidad correcta de ayuda cuando lo desee sin tener que coger el camino de su proceso creativo. Disfrutarás de la escritura de código entre paréntesis.

Brackets es un editor diferente. Brackets tiene varias características únicas como la Edición rápida y la Vista previa dinámica y muchas más que no vas a encontrar en otros editores. Además, Brackets está escrito en JavaScript, HTML y CSS. Esto significa que la mayoría de quienes usan Brackets tienen las habilidades necesarias para modificar y extender el editor. De hecho, nosotros usamos Brackets todos los días para desarrollar Brackets. Para saber más sobre cómo utilizar estas características únicas, continúa leyendo.

Si usabas Grunt mejora el WPO y el SEO de tu web. o webpack, este editor te simplificara la vida. Además se integra con Git

Hecho con corazón y con JavaScript.

Brackets es un proyecto de código abierto Brackets en GitHub, con el apoyo de una comunidad activa y apasionada. Está hecho por otros desarrolladores web como tú!

Proyectos en Brackets

Para poder editar tu propio código en Brackets, puedes simplemente abrir la carpeta que contiene los archivos. Brackets considera a la carpeta abierta como el «proyecto»; características como las Sugerencias de código, la Vista previa dinámica y la Edición rápida solo utilizan los archivos contenidos dentro de la carpeta actualmente abierta.

Estamos intentando algunas cosas nuevas

Edición rápida de CSS y JavaScript

Se acabó aquello de estar saltando de documento en documento perdiendo de vista lo que estás haciendo. Mientras estás escribiendo HTML, usa el atajo de teclado Cmd / Ctrl + E para abrir un editor rápido en línea con todo el contenido CSS relacionado. Ajusta tu CSS y oprime ESC para volver a tu HTML, o simplemente mantenga las reglas CSS abiertas para que pasen a formar parte de tu editor de HTML. Si pulsas ESC fuera de un editor rápido, todos se cerrarán a la vez. La edición rápida también funciona con archivos LESS y SCSS, incluyendo las reglas anidadas.

También puedes usar el mismo atajo para editar otras cosas–como funciones en JavaScript, colores y funciones de temporización de animaciones–y estamos añadiendo más y más continuamente.

Por ahora, no se pueden anidar editores en línea, por lo que sólo puedes usar la característica de Edición Rápida cuando el cursor está en un editor «completo».

Visualiza cambios en archivos HTML y CSS en vivo en el navegador

¿Conoces ese baile de «guardar/recargar» que llevamos años haciendo? ¿Ése en el que haces cambios en tu editor, oprimes guardar, cambias al navegador y recargas para por fin poder ver el resultado? Con Brackets, ya no tienes que hacerlo.

¡Brackets abrirá una conexión en vivo con tu navegador local y le enviará los cambios en el archivo HTML y CSS conforme escribas! Puede que ya estés haciendo algo parecido con las herramientas de desarrollo del navegador, pero con Brackets ya no necesitas copiar y pegar el código final de vuelta a tu editor. ¡Tu código se ejecuta en el navegador, pero vive en tu editor!

Resaltado en vivo de elementos HTML y reglas CSS

Brackets te ayuda a ver cómo los cambios en HTML y CSS afectan a tu página. Cuando tu cursor se encuentre sobre una regla de CSS, Brackets resaltará todos los elementos afectados en el navegador. Del mismo modo, cuando estés editando un archivo HTML, Brackets también resaltará los elementos correspondientes en tu navegador.

Actualmente, Brackets sólo soporta Vista previa dinámica para HTML y CSS. Aún así, en la versión actual, los cambios en archivos JavaScript son recargados automáticamente en el navegador cuando guardas. En estos momentos estamos trabajando en el soporte de Vista previa dinámica para JavaScript. Las actualizaciones automáticas sólo son posibles en Google Chrome, pero esperamos poder trasladar esta funcionalidad a todos los grandes navegadores.

Vista Rápida

Para aquellos que todavía no han memorizado las equivalencias de color entre Hex y RGB, Brackets permite ver exactamente qué color se está utilizando rápida y fácilmente. Tanto en CSS como en HTML, simplemente mueve el cursor sobre cualquier valor de color o gradiente y Brackets mostrará una previsualización del mismo de manera automática. Lo mismo sirve para imágenes: simplemente pasa el cursor sobre la dirección de una imagen en Brackets, y éste mostrará una vista en miniatura de la misma.

Vista previa en vivo

Obtener una conexión en tiempo real a su navegador. Realizar cambios en CSS y HTML y podrás ver instantáneamente los cambios que aparecen en pantalla. También ver donde se está aplicando el selector CSS en el navegador con sólo poner el cursor sobre ella. Es el poder de un editor de código con la comodidad de herramientas dev en el navegador.

Soporte preprocesador

Trabajar con pre-procesadores en una forma totalmente nueva. Sabemos lo importante que son pre-procesadores de flujo de trabajo. Es por eso que queremos hacer Soportes el mejor editor de código para los preprocesadores por ahí. Con los soportes se pueden utilizar de edición rápida y Resalte Vivo con los archivos de menos y SCSS que hacen que trabajar con ellos más fácil que nunca.

¿Necesitas algo más? ¡Prueba una extensión!

Además de todas las bondades naturales de Brackets, nuestra amplia y creciente comunidad de desarrolladores de extensiones ha creado cientos de extensiones que añaden útiles funcionalidades. Si hay algo que necesitas que Brackets no soporta, es bastante probable que alguien haya construido una extensión para ello. Para navegar o buscar en la lista de extensiones disponibles, selecciona Archivo > Gestionar extensiones… y haz clic en la pestaña «Disponibles». Cuando encuentres una que quieras, simplemente presiona el botón «Instalar» a su derecha.

Novedades Brackets versión 1.8

Actualización de Node a versión 6.3.1.

Actualización de todos los módulos NPM más recientes.

Nuevos Elementos de menú contextual de editor. Las operaciones de Cortar, Copiar y pegar ya están disponibles en el menú contextual.

Compatibilidad Brackets

Archivos de Manejo de plantillas.

El plegado de código ahora activado loa párrafos y bloques.

Sugerencias de código ARIA. Las Sugerencias de código de Atributos HTML.

Extensiones populares para Brackets

Emmet

>HTML de alta velocidad y el flujo de trabajo de CSS..

Beautify

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 sencilla.

Involúcrate

Brackets es un proyecto de código abierto. Desarrolladores web de todo el mundo están contribuyendo a construir un mejor editor de código. Haznos saber lo que piensas, comparte tus ideas o contribuye directamente al proyecto.

Espero que te guste Brackets pero si consideras que hay editores más útiles no dudes en comentar este artículo.

. Leer artículo completo en Frikipandi Brackets un gran editor para diseño web.

Te interesa

Desata a tu Saiyan interior y domina el combate en DRAGON BALL: SPARKING! ZERO, YA DISPONIBLE

Desata a tu Saiyan interior y domina el combate en DRAGON BALL: SPARKING! ZERO, YA DISPONIBLE

DESATA A TU SAIYAN INTERIOR Y DOMINA EL COMBATE EN DRAGON BALL: SPARKING! ZERO, YA …

Últimas noticias de Frikipandi.com

Las noticias se actualizan cada 15 minutos.