Adobe Code y Web Fonts: La competencia a Sublime Text 2 y Google Fonts

Otra de las novedades presentadas en el evento de Adobe "Create the Web" es el editor de código Adobe Code. Un editor de código tan sencillo como interesante enfocado a desarrolladores que deseen un entorno de desarrollo simple y directo, sin una aplicación llena de opciones y paneles innecesarios.

Adobe Code está basado en Brackets, un proyecto Open-Source optimizado por Adobe para los usuarios de Creative Cloud. Si bien el editor está aun en fase "Preview" y carece de algunas opciones básicas si que nos permite tener buenas expectativas de cara a la versión final.

Uno de los puntos fuertes de Adobe Code es su enfoque directo a la hora escribir el código y visualizar el resultado. Code no dispone de una ventana de diseño sino que trabaja directamente con el navegador. Tambien elimina la necesidad de guardar los documentos y refrescar el navegador para visualizar los cambios, haciendo el proceso de desarrollo muchísimo más ágil.

Para abrir esta comunicación con el navegador tenemos al opción "Live Preview" en la aprte superior derecha de la aplicación.



Al seleccionar la opción se nos abrirá el navegador con la página que estemos editando. En esta versión "Preview" unicamente podremos trabajar con Google Chrome.



Tambien solo dispondremos de la visualización de cambios en tiempo real para los archivos CSS. Aunque está previsto que se implemente tambien para el HTML.

Podemos comprobar esta característica seleccionando el archivo CSS vinculado al HTML y modificando algún estilo. En este caso cambiando el fondo del Body del blanco #ffffff a un anaranjado #ffcc56. Vemos que a medida que escribimos el código se actualiza la visualización dentro del propio navegador.



Otra de las características interesantes de Edge Code es la integración con Adobe Edge Web Fonts.

Web Fonts es otro de los servicios presentados por Adobe dentro de la familia Edge. Se trata de una serie de tipografías gratuitas para utilizar en la web basado en Typekit al propio estilo de Google Fonts.

Para comprobar la facilidad de uso de Web Fonts dentro de Edge Code seleccionaremos un estilo CSS y añadiremos una tipografía. A medida que escribimos el código se mostrarán las tipografías predeterminadas.



La opción "Browse Web Fonts" nos abrirá el panel de tipografías disponibles.



Seleccionaremos al tipografía que más nos guste y su nombre aparecerá en el código CSS.



De momento para poder trabajar con esta tipografía deberemos realizar un proceso "manual" que será optimizado en la versión final de la aplicación. Deberemos pulsar sobre el icono de "WF" en la parte superior derecha de la aplicación, lo cual nos abrirá una ventana con el código necesario para incluir la tipografía.



Esta línea de código la copiaremos y pegaremos dentro de nuestro archivo HTML.



Refrescando la ventana del navegador, cosa que como digo anteriormente no será necesaria en la versión final de la aplicación, veremos como se actualiza nuestra página con la nueva tipografía personalizada.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.