Como criar um site com o Adobe Project Rome
A Adobe lançou recentemente um projeto chamado Rome, destinado a ser uma espécie de plataforma de publicação de conteúdo completa. Você pode usar este aplicativo inovador para criar sites, imprimir projetos, PDFs interativos e muito mais.
Hoje, darei a você uma introdução básica a Roma para iniciantes, para que você possa ver o que é, como usá-lo e se é certo ou não para você.
Roma
Nas próprias palavras da Adobe, o Project Rome é "criação, publicação simples e poderosa de conteúdo completo para praticamente qualquer pessoa". Se você acha que isso é um pouco vago, você está certo. Mas, novamente, todo o projeto é um pouco intrigante. Roma é o futuro do Photoshop? É uma competição do Dreamweaver ou InDesign?
A resposta é realmente "nenhuma das opções acima". Depois de brincar um pouco, fica óbvio que a Adobe está tentando atingir um mercado diferente do que com o Creative Suite. Embora o CS seja um conjunto incrivelmente caro de aplicativos profissionais poderosos que podem levar anos (décadas?) Para serem aprendidos completamente, Roma deve ser uma maneira fácil de usar para praticamente qualquer um criar conteúdo rico.
Antes de começarmos, você deve visitar o site de Roma e fazer o download do aplicativo de desktop ou iniciar o aplicativo da web (usarei a versão para desktop).
Quanto custa isso?
Roma está atualmente disponível em uma visualização gratuita. Aparentemente, a Adobe ainda não decidiu sua estratégia de preços e quer ver como os usuários respondem antes de prosseguir. Você pode baixar uma cópia agora, mas saiba que um dia provavelmente a desativará e fará com que você compre uma licença única ou talvez uma assinatura.
Começando
Depois de baixar o aplicativo, a inicialização deve fazer com que uma faixa vertical de botões apareça na área de trabalho.
A partir daqui, você pode navegar pelos modelos padrão ou até mesmo uma boa galeria de modelos enviados pelo usuário, mas eles já têm muita coisa acontecendo, portanto é melhor para fins de aprendizado começar do zero.
Clique no botão "Criar novo" para abrir uma galeria bastante grande de possíveis tamanhos de documento. A partir daqui, vá para “Blank for Screen” e selecione algo na pasta “Browser Sizes”. Eu escolhi 960 × 550.
Conheça Roma: a interface
Quando você vê pela primeira vez a interface de Roma, ela parece uma versão extremamente simplificada do Photoshop. Em vez de um mar sem fim de paletas, há apenas um par. De fato, pode parecer haver muito poucos. Isso ocorre porque a Adobe parece estar experimentando algumas novas idéias que mostram apenas o que você precisa ver quando precisa vê-lo, em vez de fornecer toda a enchilada de uma só vez.
A imagem acima mostra o quão nua a tela é comparada com o que estamos acostumados no Creative Suite. Vamos dar uma olhada em cada seção abaixo ao mergulhar em nosso projeto simples.
Folhas
O site que vamos construir terá várias páginas. Roma se refere a elas como "Folhas" e as exibe no canto superior esquerdo com visualizações em miniatura.
A primeira coisa que queremos fazer é criar uma "Master Sheet". Isso nos permitirá configurar alguns itens básicos que aparecerão em todas as páginas. Em vez de colocar itens manualmente em todas as planilhas, os itens da planilha mestre serão automaticamente transferidos para as outras planilhas. No início, isso pode ser confuso, pois muitas vezes você vê um elemento em uma planilha que parece que não consegue editar. Isso ocorre porque, embora o item possa aparecer nessa planilha, é um elemento mestre e, portanto, exige que você selecione a planilha antes de editar.
Para criar uma planilha mestre, clique em "Exibir planilhas mestre" no menu "Visualizar". Isso deve separar o menu de folhas em duas seções: Folhas e Folhas mestre. Clique no botão pequeno mais para adicionar algumas folhas regulares extras. Ao lado da miniatura de uma planilha há um pequeno ícone de Roma, você os verá espalhados por toda a interface, indicando que há um menu oculto e sensível ao contexto aqui.
Use este pequeno menu desdobrável para nomear suas folhas como Página inicial, Sobre, Portfólio e Contato.
menu de navegação
Como mantemos isso como uma introdução simples ao aplicativo, podemos mostrar muitos dos recursos básicos criando um menu de navegação. Para começar, pegue a ferramenta de texto e desenhe uma caixa. Em seguida, digite “Home” e use o menu mostrado abaixo para selecionar a fonte que você gosta.
Aqui você realmente vê esse menu mágico em ação. Há várias opções de menu aqui, cada uma com um conjunto de submenus. O que você obtém é muita funcionalidade sem toda a confusão. Definitivamente, leva algum tempo para se acostumar e pode ser demorado, mas depois que você descobre isso não é tão ruim. Eu realmente gosto dos pequenos controles deslizantes que podem ser usados para ajustar várias propriedades, como o tamanho da fonte.
Depois de descobrir o tamanho e a fonte, vá até o menu "Link" e defina o link para a planilha "Home".
Isso mudará automaticamente a aparência do link para azul com um sublinhado. Como não queremos nenhum deles, teremos que corrigi-lo. Mudar a cor de volta para preto é fácil, mas o sublinhado foi mais difícil de encontrar. Esta opção é encontrada no menu "Mais opções de caracteres", mostrado abaixo.
Efeito de pairar
Em seguida, queremos alterar a aparência do link quando o usuário passar o mouse sobre ele com o cursor. Este não é exatamente um processo intuitivo e demorei alguns minutos para descobrir.
Com a caixa de texto selecionada, vá para "Configurações do evento" no menu "Avançado" e ative "Eventos padrão".
Agora você deve ter uma opção "Eventos" no menu principal. A partir daqui, vá para “Mouse Enter” e “Set Property”. Em seguida, selecione seu objeto de texto e defina a propriedade como Opacidade. Por fim, defina o valor para 50%.
Isso escurecerá o texto para 50% de sua opacidade original quando alguém passar o mouse sobre ele. Eu gostaria de simplesmente definir a cor, mas essa opção parece não aparecer no menu de eventos.
O problema que encontramos agora é que o texto mudará de cor no Mouse Enter, mas permanecerá assim permanentemente. Para resolver isso, precisamos adicionar outro evento na saída do mouse que defina a opacidade de volta a 100%. Veja a imagem abaixo para uma referência.
Duplicar o link inicial
Agora que configuramos nosso primeiro link da maneira que queremos, copie e cole três vezes para criar os links Sobre, Portfólio e Contato. Lembre-se de que você terá que selecionar o texto para cada um deles, depois entrar e alterar os links para apontar para as folhas apropriadas.
Você também deseja distribuir os objetos verticalmente para garantir que estejam espaçados uniformemente. Para fazer isso, selecione todas as caixas de texto e vá para o menu Alinhar.
Visualizando seu trabalho
Para ver se o menu de navegação está funcionando corretamente, clique no pequeno botão do monitor com um botão de reprodução próximo à parte superior da tela. Isso deve fornecer uma visualização ao vivo do seu site em ação.
Passe o mouse sobre os links para garantir que eles estejam funcionando e clique ao redor para ver se a planilha está mudando.
A paleta de objetos
Agora que você tem alguns elementos na página, vamos dar uma olhada na paleta Objetos. Isso é equivalente à paleta Camadas que você está acostumado a ver em outros aplicativos e é essencialmente apenas uma lista interativa de todos os elementos da página.
Observe que é muito mais simples que a paleta de camadas do Photoshop. Não há mascaramento, efeitos de camada, etc.
Finalizando a folha mestre
Como todo site minimalista bom tem um logotipo de círculo clichê, o nosso simplesmente não pode permanecer sem um. Zombar de um rapidamente dará uma ideia da ferramenta de forma. Observe que as formas são completamente redimensionáveis sem degradação da imagem. Roma é perfeitamente adequada para trabalhar com objetos de vetor e raster.
E com isso, terminamos com a nossa Master Sheet. Esses elementos aparecerão em todas as páginas sem nenhum esforço adicional.
Finalizando o site e exportando
Como mencionei antes, a navegação nos permitiu cobrir a maioria dos recursos que eu queria mostrar. Montamos links, posicionamos e distribuímos objetos e criamos efeitos de foco.
A partir daqui, você deve brincar por conta própria e terminar as outras páginas. Tente colar em uma imagem, trabalhando com parágrafos de texto e talvez até criando uma grade. Certifique-se de selecionar a planilha apropriada antes de adicionar conteúdo, para não continuar adicionando à planilha mestre.
Ao terminar o site, você tem duas opções básicas para exportá-lo. O primeiro é como um site de Roma. Isso carrega o site em um servidor hospedado pela Adobe usando seu ID da Adobe (gratuito por enquanto). No entanto, como você não pode fazer nada dessa maneira, prefiro exportá-lo para um SWF e selecionar a opção para criar um arquivo HTML.
Isso fornecerá um site ao vivo e funcional, criado por você mesmo sem um pingo de código!
Meus pensamentos sobre Roma
Agora vem a parte em que você está realmente interessado, você pode usar Roma para projetos reais? Para responder a essa pergunta, vejamos os prós e contras.
Primeiro, vamos olhar para o lado positivo. Roma é um inovador WYSIWYG que não é de forma alguma perfeito, mas parece bastante polido e poderoso. A curva de aprendizado é muito menor do que os aplicativos de CS e deve definitivamente atrair qualquer pessoa intimidada por esse conjunto. Além disso, atinge o objetivo sempre ilusório de permitir que não desenvolvedores construam um site em funcionamento sem uma única linha de código.
No entanto, apesar desses benefícios, nunca me vejo usando Roma em um contexto profissional para projetos na web. O maior obstáculo para mim é que é tão dependente do Flash. Não vou lançar um discurso retumbante em Flash, mas esse é simplesmente um uso impraticável da tecnologia, quer você a ame ou odeie. O site que acabamos de construir apresentava apenas alguns links e imagens. Não há absolutamente nenhuma razão para que os arquivos resultantes sejam nada além de HTML e CSS puro. Entendo a Adobe que deseja criar suporte para Flash, mas não afirmo que posso criar sites com essa ferramenta se você nem tiver uma opção para uma saída básica da Web.
Lembre-se de que este artigo olhou apenas para Roma do ponto de vista da web. Ainda pode ser ótimo para o desenvolvimento de materiais impressos e PDFs interativos. Na verdade, é realmente uma ferramenta realmente incrível para o último.
Conclusão
Para resumir, se você é um completo estranho ao desenvolvimento web e precisa criar um site rápido sem contratar ninguém ou ler 15 livros, confira Roma. É bastante fácil escolher e executar, independentemente do seu nível de conhecimento.
No entanto, se você está no mercado para um WYSIWYG robusto e fácil de usar que realmente cria sites de nível profissional, confira nosso tutorial sobre o Flux 3. Se você entende de CSS, o Flux é um aplicativo matador e não encontrei um rival digno.
Deixe um comentário abaixo e deixe-nos saber o que você acha do Projeto Roma. O que a Adobe fez bem nesse experimento? O que eles fizeram de errado? Nós queremos ouvir de você!
