Cómo construir un sitio web con Adobe Project Rome
Adobe lanzó recientemente un proyecto llamado Roma que pretende ser una especie de plataforma de publicación de contenido todo en uno. Puede usar esta aplicación innovadora para crear sitios web, imprimir proyectos, PDF interactivos y más.
Hoy te daré una introducción básica para principiantes a Roma para que puedas ver qué es, cómo usarla y si es adecuada para ti.
Roma
En las propias palabras de Adobe, Project Rome es "Creación y publicación de contenido 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, 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 potentes y profesionales que pueden tomar años (¿décadas?) Para aprender a fondo, Roma está destinada a ser una forma fácil de usar para que cualquiera pueda crear contenido rico.
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?
Actualmente, Roma está disponible en una vista previa gratuita. Aparentemente, Adobe 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 sepa que algún día probablemente la desactivará y le hará comprar una licencia única o incluso una suscripción.
Empezando
Una vez que haya descargado la aplicación, al activarla debería aparecer una tira vertical de botones en su escritorio.
Desde aquí, puede explorar las plantillas predeterminadas o incluso una bonita galería de plantillas enviadas por los usuarios, pero estas ya tienen muchas cosas en marcha, por lo que es mejor que, con fines de aprendizaje, comience desde cero.
Haga clic en el botón "Crear nuevo" para abrir una galería bastante grande de posibles tamaños de documentos. Desde aquí, vaya a "En blanco para la pantalla" y seleccione algo en la carpeta "Tamaños del navegador". Elegí 960 × 550.
Conoce Roma: la interfaz
Cuando observa 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 hay muy pocos. Esto se debe a que Adobe parece estar experimentando con algunas ideas nuevas que solo le muestran lo que necesita ver cuando lo necesita, en lugar de darle toda la enchilada de una vez.
La imagen de arriba muestra cuán desnuda está la pantalla en comparación con lo que estamos acostumbrados en Creative Suite. Echaremos un vistazo más de cerca a cada sección a continuación a medida que profundicemos 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 esquina 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 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 editarla.
Para crear una hoja maestra, haga clic en "Mostrar hojas maestras" en el menú "Ver". Esto debería separar su menú de hojas en dos secciones: Hojas y Hojas maestras. Haga clic en el pequeño botón más para agregar algunas hojas regulares adicionales. Al lado de la miniatura de una hoja hay un pequeño ícono de Roma, los verá dispersos por la interfaz, lo que indica que hay un menú oculto y sensible al contexto aquí.
Use este pequeño menú desplegable para nombrar sus hojas como Inicio, Acerca de, Portafolio y Contacto.
Menú de Navegación
Dado que mantenemos esto como una simple introducción a la aplicación, podemos mostrar muchas de las características básicas creando un menú de navegación. Para comenzar, tome la herramienta de texto y dibuje un cuadro. Luego 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. Aquí hay un montón de opciones de menú, cada una con un conjunto de submenús. Lo que obtienes es mucha funcionalidad sin todo el desorden. Definitivamente lleva 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 menú "Enlace" y configure el enlace a la hoja "Inicio".
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 a negro es bastante fácil, pero el subrayado fue más difícil de encontrar. Esta opción se encuentra en el menú "Más opciones de caracteres" que se muestra a continuación.
Efecto de desplazamiento
A continuación, queremos cambiar la apariencia del enlace cuando el usuario se desplaza sobre él con el cursor. Este no es exactamente un proceso intuitivo y me tomó unos minutos descubrirlo.
Con su cuadro de texto seleccionado, vaya a "Configuración de eventos" en el menú "Avanzado" y active "Eventos estándar".
Ahora debería tener una opción de "Eventos" en el menú principal. Desde aquí, vaya a "Intro del mouse" y "Establecer propiedad". A continuación, seleccione su objeto de texto y establezca la propiedad en Opacidad. Finalmente establezca el valor en 50%.
Esto atenuará el texto al 50% de su opacidad original cuando alguien se mueva sobre él. Me hubiera gustado simplemente establecer 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 al ingresar con el mouse, pero permanecerá así permanentemente. Para resolver esto, necesitamos agregar otro evento en la Salida del mouse que restablezca la opacidad al 100%. Vea la imagen a continuación para una referencia.
Duplicar el enlace de inicio
Ahora que tenemos nuestro primer enlace configurado de la manera que queremos, cópielo y péguelo tres veces para crear los enlaces Acerca de, Portafolio y Contacto. Recuerde que tendrá que seleccionar el texto para cada uno, luego ingresar y cambiar los enlaces para que apunten a las hojas apropiadas.
También querrá distribuir los objetos verticalmente para asegurarse de que estén espaciados de manera uniforme. Para hacer esto, seleccione todos los cuadros de texto y vaya al menú Alinear.
Vista previa de tu trabajo
Para ver si su menú de navegación funciona 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.
Desplácese sobre los enlaces para asegurarse de que funcionan 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 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
Como todo buen sitio minimalista tiene un logotipo de círculo cliché, el nuestro simplemente no puede permanecer sin uno. Burlarse de uno rápidamente le dará una idea de la herramienta de forma. Tenga en cuenta que las formas son completamente redimensionables sin degradación de la imagen. Roma es perfecta para trabajar con objetos vectoriales y de trama.
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é antes, la navegación nos permitió cubrir la mayoría de las características que quería mostrar. Configuramos enlaces, objetos posicionados y distribuidos y creamos efectos de desplazamiento.
Desde aquí deberías jugar por tu cuenta y terminar las otras páginas. Intente pegar una imagen, trabajando con párrafos de texto e incluso construyendo una cuadrícula. Asegúrese de seleccionar la hoja adecuada antes de agregar contenido para no seguir agregando a la hoja maestra.
Cuando haya terminado con el sitio, tiene dos opciones básicas para exportarlo. El primero es como un sitio de Roma. Esto carga su sitio a un servidor alojado de Adobe utilizando su ID de Adobe (gratis por ahora). Sin embargo, no puede hacer nada de esta manera, así que prefiero exportarlo a un SWF y seleccionar la opción para crear un archivo HTML.
¡Esto le dará un sitio web en vivo y en funcionamiento creado por usted 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, echemos un vistazo a los pros y los contras.
Primero, veamos el lado positivo. Rome 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 CS y definitivamente debería atraer a cualquiera que se sienta intimidado por esa suite. Además, logra el objetivo siempre ilusorio de permitir que los no desarrolladores realmente creen un sitio web que funcione sin una sola línea de código.
Sin embargo, a pesar de estos beneficios, no me veo usando Roma en un contexto profesional para proyectos web. El mayor obstáculo para mí es que depende mucho de Flash. No voy a lanzarme a una diatriba contra 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 unos pocos enlaces e imágenes. No hay absolutamente ninguna razón para que los archivos resultantes no sean HTML y CSS puro. Puedo entender que Adobe quiera construir en soporte Flash, pero no afirme que puedo construir 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 miró a Roma desde un punto de vista web. Todavía podría ser excelente para desarrollar materiales impresos y archivos PDF interactivos. De hecho, en realidad es una herramienta realmente increíble para este último.
Conclusión
En resumen, si eres un completo desconocido para el desarrollo web y necesitas construir un sitio rápido tú mismo sin contratar a nadie o leer 15 libros, visita Roma. Es bastante fácil recoger y ejecutar sin importar su nivel de experiencia.
Sin embargo, si está buscando 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 un rival digno.
Deje un comentario a continuación y díganos qué piensa del Proyecto Roma. ¿Qué hizo Adobe correctamente en este experimento? ¿Que hicieron mal? ¡Queremos escuchar de ti!
