Home » Adobe »Edge »HTML5 »Noticias »Tutoriales » Currently Reading:

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

octubre 9, 2012 Adobe, Edge, HTML5, Noticias, Tutoriales No Comments
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.

El editor 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 la aplicación es su enfoque directo a la hora escribir el código y visualizar el resultado. Edge 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 interesante 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.

Compártelo:

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

Comment on this Article:








Twitter: zguillez

AdvertisementAdvertisementAdvertisementAdvertisement

Recibe las novedades por email

Post destacado

Adobe Creative Meet Up, 25 octubre

28 sep 2015

Tipografía, dibujo, composición y participación serán las claves del próximo Creative Meetup en Madrid dentro del marco del Brief Festival. Únete en vivo u online para inspirarte, experimentar, aprender nuevas técnicas de la mano de grandes artistas y conocer su flujo de trabajo, ver en primicia las novedades de Adobe MAX y, sobre todo, participar y exponer tu creatividad en la multitud de actividades que te proponemos antes y durante el meetup. Si lo tuyo es la tipografía y el dibujo, haz hueco en tu mochila para tu tablet y tu ipad pues Puño y Clara Montagut prometen hacer temblar …



Map

Ranking

Codigoactionscript.org: 4.65 sobre 5 (106 valoraciones)

twitter-widget.com