Adobe lanzó recientemente un proyecto llamado Roma que pretende ser una especie de plataforma de publicación de contenido todo en uno. Puede utilizar esta aplicación innovadora para crear sitios web, proyectos de impresión, PDF interactivos y más.
Hoy te daré una introducción para principiantes súper básica a Roma para que puedas ver qué es, cómo usarla y si es o no adecuada para ti.
Roma
En las propias palabras de Adobe, Project Rome es "Creación de contenido todo en uno simple, potente y todo en uno para prácticamente cualquier persona". Si crees que esto es un poco vago, tienes razón. Pero, de nuevo, todo el proyecto es un poco desconcertante. ¿Es Roma el futuro de Photoshop? ¿Es competencia para Dreamweaver o InDesign?
La respuesta es realmente "ninguna de las anteriores". Después de jugar un poco con él, resulta obvio que Adobe está intentando apuntar a un mercado diferente al de Creative Suite. Si bien CS es un conjunto increíblemente costoso de aplicaciones profesionales potentes que pueden tardar años (¿décadas?) En aprender a fondo, se supone que Roma es una forma fácil de usar para que cualquiera pueda crear contenido enriquecido.
Antes de comenzar, querrá pasar por el sitio web de Roma y descargar la aplicación de escritorio o iniciar la aplicación web (usaré la versión de escritorio).
¿Cuanto cuesta?
Roma está actualmente disponible en una vista previa gratuita. Adobe aparentemente aún no ha decidido su estrategia de precios y quiere ver cómo responden los usuarios antes de continuar. Puede descargar una copia ahora, pero simplemente sepa que algún día es probable que la desactive y le haga comprar una licencia por única vez o incluso una suscripción.
Empezando
Una vez que hayas descargado la aplicación, activarlo debería hacer que aparezca una tira vertical de botones en tu escritorio.
Desde aquí puede navegar por las plantillas predeterminadas o incluso una bonita galería de plantillas enviadas por usuarios, pero estas ya tienen muchas cosas por lo que es mejor que los propósitos de aprendizaje empiecen desde cero.
Haga clic en? Crear nuevo? Botón para abrir una galería bastante grande de posibles tamaños de documentos. Desde aquí ve a? Blank for Screen? y seleccione algo en el? Tamaños del navegador? carpeta. Elegí 960? 550.
Conoce Roma: la interfaz
Cuando ves por primera vez la interfaz de Roma, parece una versión extremadamente simplificada de Photoshop. En lugar de un mar infinito de paletas, solo hay una pareja. De hecho, puede parecer que son demasiado pocos. Esto se debe a que Adobe parece estar experimentando con algunas ideas nuevas que solo le muestran lo que necesita ver cuando necesita verlo, en lugar de darle toda la enchilada de una vez.
La imagen de arriba muestra cómo se compara la pantalla con lo que estamos acostumbrados en Creative Suite. Examinaremos cada una de las secciones a continuación a medida que nos sumergimos en nuestro proyecto simple.
Hojas
El sitio que vamos a construir tendrá varias páginas. Roma se refiere a estos como? Hojas? y los muestra en la parte superior izquierda con vistas previas en miniatura.
Lo primero que queremos hacer es crear una? Hoja maestra ?. Esto nos permitirá configurar algunos elementos básicos que aparecerán en cada página. En lugar de colocar los elementos manualmente en cada hoja, los elementos de la hoja maestra se transferirán automáticamente a sus otras hojas. Esto puede ser confuso al principio porque a menudo verá un elemento en una hoja que parece que no puede editar. Esto se debe a que, aunque el elemento puede aparecer en esa hoja, es un elemento maestro y, por lo tanto, requiere que seleccione la hoja maestra antes de editar.
Para crear una hoja maestra, haga clic en "Mostrar hojas maestras". en la? vista? menú. Esto debería separar el menú de las hojas en dos secciones: Hojas y Hojas maestras. Haga clic en el pequeño botón más para agregar algunas hojas regulares adicionales. Junto a la miniatura de una hoja hay un pequeño ícono de Roma, los verá dispersos por toda la interfaz, lo que indica que hay un menú contextual oculto.
Utilice este pequeño menú desplegable para nombrar sus hojas Inicio, Acerca de, Cartera y Contacto.
Menú de Navegación
Ya que mantenemos esto como una simple introducción a la aplicación, podemos mostrar muchas de las características básicas al construir un menú de navegación. Para empezar, toma la herramienta de texto y dibuja un cuadro. A continuación, escriba? Inicio? y use el menú que se muestra a continuación para seleccionar la fuente que desee.
Aquí realmente ves ese menú mágico en acción. Hay un montón de opciones de menú aquí, cada una con un conjunto de submenús. Lo que obtienes es mucha funcionalidad sin todo el desorden. Definitivamente toma un tiempo acostumbrarse y puede llevar mucho tiempo, pero una vez que lo descubres no es tan malo. Realmente me gustan los pequeños controles deslizantes que se pueden usar para ajustar varias propiedades como el tamaño de fuente.
Una vez que haya resuelto el tamaño y la fuente, vaya al? Link? Menú y establecer el enlace a la? Inicio? hoja.
Esto cambiará automáticamente la apariencia del enlace a azul con un subrayado. Como no queremos ninguno de estos, tendremos que arreglarlo. Cambiar el color de nuevo a negro es bastante fácil, pero el subrayado era más difícil de encontrar. Esta opción se encuentra en "Más opciones de caracteres". menú que se muestra a continuación.
Efecto Hover
A continuación, queremos cambiar la apariencia del enlace cuando el usuario se desplaza sobre él con el cursor. Esto no es exactamente un proceso intuitivo y me llevó unos minutos descubrirlo.
Con su cuadro de texto seleccionado, vaya a? Configuración de eventos? en el? Avanzado? Menú y activar "Eventos estándar".
Ahora deberías tener un? Eventos? Opción en el menú principal. Desde aquí, vaya a? Ratón Entrar? y? Establecer propiedad.? A continuación, seleccione su objeto de texto y establezca la propiedad en Opacidad. Finalmente establecer el valor en 50%.
Esto atenuará el texto al 50% de su opacidad original cuando alguien se cierne sobre él.Me hubiera gustado tener simplemente configurar el color, pero esa opción no parece aparecer en el menú de eventos.
El problema con el que nos encontramos ahora es que el texto cambiará de color en Mouse Enter pero permanecerá así de forma permanente. Para resolver esto, necesitamos agregar otro evento en la salida del mouse que establezca la opacidad de nuevo al 100%. Vea la imagen de abajo para una referencia.
Duplicar el enlace de inicio
Ahora que tenemos nuestro primer enlace configurado de la manera que deseamos, cópielo y péguelo tres veces para crear los enlaces Acerca de, Portafolio y Contactos. Recuerde que tendrá que seleccionar el texto para cada uno, luego vaya y cambie los enlaces para que apunten a las hojas apropiadas.
También querrá distribuir los objetos verticalmente para asegurarse de que estén espaciados uniformemente. Para hacer esto, seleccione todos los cuadros de texto y vaya al menú Alinear.
Vista previa de su trabajo
Para ver si su menú de navegación está funcionando correctamente, haga clic en el pequeño botón del monitor con un botón de reproducción cerca de la parte superior de la pantalla. Esto debería darle una vista previa en vivo de su sitio en acción.
Pase el cursor sobre los enlaces para asegurarse de que estén funcionando y haga clic para ver si la hoja está cambiando.
La paleta de objetos
Ahora que tiene algunos elementos en la página, echemos un vistazo a la paleta de Objetos. Esto es equivalente a la paleta de capas que está acostumbrado a ver en otras aplicaciones y es esencialmente una lista interactiva de todos los elementos de la página.
Tenga en cuenta que es mucho más simple que la paleta de capas de Photoshop. No hay enmascaramiento, efectos de capa, etc.
Acabado de la hoja maestra
Dado que todo buen sitio minimalista tiene un logotipo de círculo de cliché, el nuestro simplemente no puede quedarse sin uno. La burla de uno rápidamente le dará una idea de la herramienta de forma. Observe que las formas son completamente redimensionables sin degradación de la imagen. Roma está perfectamente adaptada para trabajar con objetos vectoriales y rasterizados.
Y con eso, hemos terminado con nuestra hoja maestra. Estos elementos aparecerán en cada página sin ningún esfuerzo adicional.
Terminando el sitio y exportando
Como mencioné anteriormente, la navegación nos permitió cubrir la mayoría de las funciones que quería mostrar. Configuramos enlaces, posicionamos y distribuimos objetos y creamos efectos de desplazamiento.
Desde aquí, debes jugar por tu cuenta y terminar las otras páginas. Intente pegar una imagen, trabajar con párrafos de texto e incluso construir una cuadrícula. Asegúrese de seleccionar la hoja apropiada antes de agregar contenido para que no siga agregando a la Hoja maestra.
Cuando haya terminado con el sitio, tiene dos opciones básicas para exportarlo. El primero es como sitio de Roma. Esto carga su sitio a un servidor alojado de Adobe usando su ID de Adobe (gratis por ahora). Sin embargo, no puede hacer nada con esto de esta manera, así que prefiero exportarlo a un SWF y seleccionar la opción para crear un archivo HTML.
¡Esto te dará un sitio web en vivo y en funcionamiento creado por ti mismo sin una onza de código!
Mis pensamientos sobre roma
Ahora viene la parte que realmente te interesa, ¿puedes usar Roma para proyectos reales? Para responder a esta pregunta, veamos los pros y los contras.
Primero, veamos el lado positivo. Roma es un WYSIWYG innovador que de ninguna manera es perfecto, pero se siente bastante pulido y poderoso. La curva de aprendizaje es mucho más pequeña que las aplicaciones de CS y definitivamente debería atraer a cualquier persona intimidada por esa suite. Además, logra el objetivo siempre ilusorio de permitir que los no desarrolladores construyan un sitio web en funcionamiento sin una sola línea de código.
Sin embargo, a pesar de estos beneficios, nunca me veo usando Roma en un contexto profesional para proyectos web. El mayor obstáculo para mí es que depende tanto de Flash. No voy a lanzarme a una perorata de destello de Flash, pero esto es simplemente un uso poco práctico de la tecnología, ya sea que la ames o la odies. El sitio que acabamos de construir presentaba solo algunos enlaces e imágenes. No hay absolutamente ninguna razón para que los archivos resultantes sean de HTML y CSS puro. Puedo entender que Adobe desea integrar la compatibilidad con Flash, pero no pretendo que pueda crear sitios web con esta herramienta si ni siquiera tiene una opción para una salida web básica.
Tenga en cuenta que este artículo solo analiza Roma desde un punto de vista web. Puede que todavía sea ideal para desarrollar materiales impresos y archivos PDF interactivos. De hecho, es realmente una herramienta realmente impresionante para este último.
Conclusión
En resumen, si usted es un completo extraño en el desarrollo web y necesita crear un sitio rápido sin contratar a nadie ni leer 15 libros, visite Roma. Es bastante fácil de recoger y ejecutar sin importar su nivel de experiencia.
Sin embargo, si está en el mercado de un WYSIWYG robusto y fácil de usar que realmente cree sitios web de nivel profesional, consulte nuestro tutorial sobre Flux 3. Si entiende CSS, Flux es una aplicación excelente y no he encontrado ningún rival digno.
Deja un comentario a continuación y déjanos saber lo que piensas del Proyecto Roma. ¿Qué hizo bien Adobe en este experimento? ¿Que hicieron mal? ¡Queremos escuchar de ti!