Apostila |Adobe Muse
Apresentação Esta apostila é resultado do Projeto de Extensão da Universidade Federal de Mato Grosso do Sul (UFMS) referente ao “Curso para criação de Produtos Web: longforms e websites”. O curso, coordenado pelo Professor Alfredo Lanari de Aragão e ministrado pela acadêmica do sétimo semestre de Jornalismo da UFMS Iasmim Amiden dos Santos, tem o objetivo de apresentar o programa Adobe Muse para criação de longforms e websites. Dessa forma, visa capacitar, principalmente, profissionais das empresas de comunicação voltadas para a Web e alunos do curso de Comunicação Social da UFMS e de outras Instituições de Ensino Superior. Além disso, tem o intuito de apresentar conceitos relacionados à Web, introduzir ferramentas básicas do programa para criar e publicar produtos com design responsivo1 e interativo.
1
O design responsivo é aquele que permite o desenvolvimento de um site para vários dispositivos. A visualização e navegação do conteúdo da página online se adaptam à tablets e smartphones, por exemplo.
2|Página
Apostila |Adobe Muse
Sumário 1. Introdução..................................................................................................................... 5 2. Primeiros passos............................................................................................................ 6 2.1.
Download e instalação do Muse....................................................................... 6
2.2.
Inicialização....................................................................................................... 8
2.3.
Preferências..................................................................................................... 10
2.4.
Escolha de layout............................................................................................. 11
3. Mapa do site................................................................................................................ 12 3.1.
Criação e estruturação.................................................................................... 12
3.2.
Página mãe e filha........................................................................................... 13
3.3.
Página-mestre................................................................................................. 14
3.4.
Cabeçalho e rodapé......................................................................................... 16
4. Cores............................................................................................................................. 17 4.1.
Definição da paleta de cores............................................................................ 17
4.2.
Criar e renomear nova amostra de cor............................................................. 17
5. Texto............................................................................................................................. 18 5.1.
Fontes.............................................................................................................. 18
5.2.
Parágrafo......................................................................................................... 20
6. Biblioteca de widgets................................................................................................... 21 6.1.
Criação e edição de menu................................................................................ 21
6.2.
Apresentações (slide, painéis, composições).................................................. 24
6.3.
Google Maps................................................................................................... 28
6.4.
Criação e edição de formulário........................................................................ 29
7. Links.............................................................................................................................. 31 7.1.
Adicionar link para página do próprio site....................................................... 31
7.2.
Adicionar link externo..................................................................................... 32
7.3.
Criar link âncora.............................................................................................. 33
8. Estados......................................................................................................................... 34 8.1.
Estados de botões........................................................................................... 34
9. Preenchimentos........................................................................................................... 34 9.1.
Preenchimento com cor ou imagem............................................................... 34
10. Efeitos de rolagem....................................................................................................... 36 10.1. Efeitos de movimento e opacidade................................................................. 36 3|Página
Apostila |Adobe Muse
10.2. Efeito paralaxe................................................................................................ 37 11. Plugins.......................................................................................................................... 38 11.1. Baixar e instalar plugins na biblioteca do Muse.............................................. 38 12. Elementos HTML.......................................................................................................... 39 12.1. Inserção de elementos por linguagem HTML.................................................. 39 13. Itens.............................................................................................................................. 40 13.1. Vincular e revincular itens............................................................................... 40 14. Modos.......................................................................................................................... 41 14.1. Modos de trabalho no Muse........................................................................... 41 15. Design responsivo........................................................................................................ 42 15.1. Adaptação para tablet e smartphone............................................................. 42 16. Publicação................................................................................................................... 44 15.1. Publicação no Business Catalyst..................................................................... 44 15.2. Publicação por FTP.......................................................................................... 45
4|Página
Apostila |Adobe Muse
1. Introdução O programa Muse da companhia americana Adobe Systems é uma ferramenta que permite a criação de layouts de sites sem a necessidade de um conhecimento aprofundado sobre linguagens de programação como o HTML (Hypertext Markup Language) e o CSS (Cascading Style Sheets). Esta é uma das melhores alternativas para quem deseja produzir seu próprio conteúdo interativo. O Muse serve para criações lineares e menos complexas, que não exijam atualizações constantes de informações e publicações. O programa é utilizado, principalmente, para a criação de reportagem multimídia, website, uma página ou mais páginas relacionadas entre si disponível na internet e acessível por meio do endereço Web, e conteúdo longform, matérias com mais de 4000 palavras ou grandes reportagens entre 10 a 20 mil palavras, que permitem além de um conteúdo mais contextualizado, uma imersão do leitor na narrativa (LONGHI, 2014)2. Há relação entre o Muse e o Indesign, programa também criado pela Adobe Systems, para diagramação de produtos como jornais, livros e revistas. O Muse é uma adaptação do Indesign para criação, diagramação e publicação de produtos exclusivamente para a Web. Assim como outros aplicativos da Adobe, o Muse é pago, com custo em torno de 60 reais mensais, mas possui a versão gratuita para teste por 30 dias, que disponibiliza ao usuário quase todas as ferramentas oferecidas pela versão paga. O potencial do software está na possibilidade de explorar a convergência entre diferentes formatos como texto, fotografia, áudio e vídeo. Além disso, o uso de widgets3, menus personalizados e outros elementos gráficos para compor o design responsivo do site. Esta apostila tem o intuito de explicar o uso das principais ferramentas e recursos do Muse para facilitar a criação de longforms e websites interativos e estimular a produção de conteúdos multimídia nas universidades e também no mercado de trabalho.
2
LONGHI, Raquel. O turning point da grande reportagem multimídia. In: Revista Famecos. Porto Alegre, v. 21, n. 3, setembro-dezembro 2014. p. 897-917. 3 Widgets são aplicativos que fornecem funcionalidades específicas como os menus, as barras de rolagem, slideshow, formulários, painéis, etc.
5|Página
Apostila |Adobe Muse
2. Primeiros passos 2.1. Download e instalação do Muse Para fazer o download do Muse é necessário baixar o serviço Creative Cloud, uma nuvem que permite o acesso às versões de teste de todas as ferramentas e recursos integrados da companhia Adobe (Figura 1).
Figura 1. Página para efetuar o download do serviço Creative Cloud
Acesse a página mostrada na Figura 1 e clique em “Baixar” no canto superior direito da tela. Em seguida, preencha os campos obrigatórios indicados na Figura 2 e selecione “Entrar” para prosseguir. Se você não tiver uma Adobe ID, clique em “Adquirir uma Adobe ID”. Se já tiver, siga os passos indicados na Figura 3.
Figura 2. Preencha os campos obrigatórios
6|Página
Figura 3. Insira o e-mail e senha da Adobe ID e clique em “Entrar”
Apostila |Adobe Muse
Após preencher os dados da sua Adobe ID, o programa será baixado automaticamente. Para fazer a instalação do Creative Cloud, execute o arquivo “CreativeCloudSet-Up.exe” em seu computador (Figura 4).
Figura 4. Execute o arquivo para instalar o Creative Cloud
A instalação será realizada assim que o arquivo indicado na Figura 4 for executado. Depois de instalado, efetue o login no programa. Uma lista com as ferramentas da Adobe será disponibilizada para o usuário fazer o download do recurso desejado. Para baixar a versão de teste gratuita do Muse, clique em “Avaliar” (Figura 5).
Figura 5. Selecione o aplicativo do Muse no Creative Cloud e clique em “Avaliar”
O aplicativo será instalado em seu computador. Se o programa não abrir automaticamente após a instalação, procure pelo arquivo “Muse.exe” e execute-o. O Muse será inicializado (Figura 6) e você já pode começar a criar o seu site interativo.
7|Página
Apostila |Adobe Muse
Figura 6. Após executado o arquivo “Muse.exe”, o programa será inicializado em seu computador
2.2. Inicialização Para dar início ao processo de criação, é preciso seguir alguns passos básicos de configuração. Durante a inicialização do programa, uma janela com a opção “Criar novo site” será aberta (Figura 7). Selecione esta opção e comece a definir os ajustes das páginas do site (Figura 8).
Figura 7. Crie um novo site. Após salvá-lo, seu site aparecerá na lista de criações recentes toda vez que iniciar novamente o programa
8|Página
Apostila |Adobe Muse
Você deve definir o número de colunas, margens e tipo de resolução. O programa inicia com algumas configurações padrões que você pode manter e clicar em “OK” para prosseguir (Figura 8). Se durante o processo de montagem você necessitar mudar os ajustes, basta acessar as propriedades do site no canto superior direito da interface do programa (Figura 9).
Figura 8. Defina as configurações do seu site
Figura 9. Você pode alterar as propriedades do seu site sempre que precisar
9|Página
Apostila |Adobe Muse
Mantenha o número de colunas em “1”, pois não será necessária esta divisão interna das páginas. As colunas são comumente utilizadas para dispor igualmente o conteúdo e manter um equilíbrio entre a disposição dos elementos, mas isto pode ser resolvido com as réguas automáticas (guias inteligentes) do programa. As margens delimitam a área do conteúdo da página e devem ser no mínimo “20px” para que os elementos não fiquem muito próximos às extremidades da tela do computador, o que pode dificultar a visualização. A altura mínima também deve ser mantida em “500px” como indica a configuração padrão do programa. Durante o desenvolvimento do site, a altura pode ser alterada facilmente de acordo com sua necessidade. O idioma selecionado deve ser o “Português: Brasileiro” para que o Muse faça o reconhecimento e correção das palavras segundo o dicionário gramatical do programa. As palavras escritas incorretamente serão sublinhadas em vermelho pelo Muse. O rodapé deve ser “adesivo” para que se adapte a janela do navegador, isto é, se a janela for maior que o design criado no Adobe Muse, o rodapé será redimensionado automaticamente.
2.3. Preferências As preferências oferecidas servem para facilitar o trabalho do criador do site, que pode optar por telas escuras ou claras, uso das guias inteligentes e conta principal para publicação do conteúdo produzido no Muse. Para acessar as preferências, vá em “Editar” e depois em “Preferências” (Figura 10).
Figura 10. Acesse as preferências para deixar o programa de acordo com seu gosto
10 | P á g i n a
Apostila |Adobe Muse
Escolha a cor do tema que preferir e deixe as opções de “Guias inteligentes” e “Sobreposição do rótulo de dica” ativadas para facilitar seu trabalho no Muse. Insira o e-mail utilizado na sua Adobe ID e clique em “OK” para prosseguir (Figura 11).
Figura 11. Selecione as preferências indicadas na figura acima e clique em “Ok” para começar a montar seu site
2.4. Escolha de layout O Muse permite o design responsivo, desenvolvido para diversos dispositivos como tablets e smartphones. Com a opção de escolha de layout você pode fazer a adaptação com facilidade (Figura 12). Por padrão, o Muse começa pelo layout “Computador”. Mantenha esta configuração para dar início à estruturação principal do site.
Figura 12. Você pode adicionar outro layout ao seu site sempre que desejar
11 | P á g i n a
Apostila |Adobe Muse
3. Mapa do site 3.1. Criação e estruturação A criação do site começa com a estruturação de um mapa com todas as páginas e subpáginas que este irá conter. O mapa do site proporciona diversas facilidades, entre elas, a construção de um menu. Isto porque o software faz o reconhecimento automático das páginas criadas e então apresenta modelos prontos do widget. Para criar um mapa, pense no modelo de navegação que deseja para o seu site. Responda as seguintes perguntas: Por onde o visitante do meu site deve começar a navegar? Qual página é a mais importante? Como será a divisão do conteúdo? Haverá subpáginas? Quais páginas terão modelos iguais de cabeçalho e rodapé e quais terão modelos diferentes? Após responder as perguntas acima, você terá elaborado um roteiro de navegação, isto é, o mapa do seu site. O Muse inicia com uma página comum (Início) e uma mestre (Amestre) criadas (Figura 13). Para criar outras páginas, que irão compor o menu principal do site segundo o seu roteiro de navegação pré-estabelecido, clique no botão indicado na Figura 14.
Figura 14. Clique no botão “+” à direita para criar outra página
Figura 13. Página comum e página-mestre
12 | P á g i n a
Apostila |Adobe Muse
3.2. Página mãe e filha As páginas que você criar à direita da página “Início” serão as nomeadas páginas mãe, ou seja, as principais, que irão aparecer no menu de navegação do seu site. Se na estruturação do seu mapa contêm subpáginas, que estarão relacionadas a alguma das páginas principais e irão aparecer no submenu, estas são nomeadas páginas filhas. No tópico anterior (3.1), você aprendeu a criar as páginas mãe. Para criar uma página filha, é necessário clicar no botão “+” abaixo da página na qual esta estará relacionada (Figura 15). Na estruturação do site exemplo, foram criadas 5 páginas mãe e 1 página filha, que está relacionada à página da Galeria (Figura 16).
Figura 15. Crie página filha
Figura 16. Cinco páginas mãe foram criadas e uma página filha que está relacionada à Galeria
Para alterar o nome das páginas criadas e facilitar o entendimento sobre seu mapa, faça como indicado na Figura 17.
13 | P á g i n a
Apostila |Adobe Muse
Figura 17. Clique duas vezes em cima do nome da página para alterar
Para excluir uma página, que talvez não seja mais necessária no seu mapa, basta clicar no “x” que aparece quando o mouse é posicionado em cima da mesma (Figura 18).
Figura 18. Clique no “x” para deletar a página
3.3. Página-mestre A página mestre pode ser aplicada a qualquer outra do seu mapa e serve para criar páginas padronizadas com logotipos, cabeçalhos, rodapés, entre outros itens. Entenda como funcionam as páginas-mestres pelo modelo apresentado nas Figuras 19 e 20 do site exemplo, que utiliza uma página-mestre aplicada a página “Início”, que irá conter cabeçalho e rodapé, e outra página-mestre aplicada nas que irão conter apenas o cabeçalho. Para aplicar uma página mestre em uma página mãe ou filha, basta arrastá-la para a página desejada (Figura 21).
14 | P á g i n a
Apostila |Adobe Muse
Figura 19 e 20. Páginas-mestres (A e B) aplicadas em diferentes páginas mãe e filha porque terão padrões diferentes de cabeçalho e rodapé
Figura 21. Arraste a página-mestre para a página mãe ou filha que deseja aplicar
15 | P á g i n a
Apostila |Adobe Muse
3.4. Cabeçalho e rodapé O cabeçalho é a área superior da página e o rodapé a área inferior, onde podem ser adicionados textos, figuras e widgets. No Muse, o tamanho do cabeçalho e rodapé só pode ser definido na página-mestre. Comumente, estas áreas são utilizadas no programa para inserir logotipos da empresa a qual o site pertence, informações sobre contato, endereço, etc. No site exemplo, o cabeçalho e rodapé foram usados para inserir o menu e a logomarca. O rodapé será utilizado na “PÁGINA MESTRE A” e o cabeçalho na “PÁGINA MESTRE A e B”. Para definir o tamanho do cabeçalho, abra a página-mestre e arraste a seta azul para a posição que achar necessária para conter todos os elementos que serão inseridos (Figura 22). Faça o mesmo para estabelecer o tamanho do rodapé (Figura 23).
Figura 22. Arraste a seta azul na parte superior da página para definir o tamanho do cabeçalho
Figura 23. Arraste a seta azul na parte inferior da página para definir o tamanho do rodapé
16 | P á g i n a
Apostila |Adobe Muse
Note que as alterações de cabeçalho e rodapé foram realizadas apenas pelas setas indicadas nas Figuras 22 e 23. As setas duplas em azul servem para alterar o tamanho da página e isto pode ser feito em qualquer uma, de acordo com a necessidade de inserção de conteúdo. Não é uma exclusividade das páginas-mestres.
4. Cores 4.1. Definição da paleta de cores Diferente dos produtos criados para serem impressos como os jornais e revistas, que precisam utilizar o sistema de cores subtrativas CMYK (abreviatura em inglês para ciano, magenta, amarelo e preto), os produtos criados para a Web utilizam o sistema de cores aditivas RGB (abreviatura em inglês para vermelho, verde e azul), que é o modelo padrão usado pelos dispositivos eletrônicos. O Muse dispõe uma paleta de cores RGB que pode facilitar o trabalho do webdesigner, pois permite a criação de novas amostras e renomeação das cores. É importante definir previamente algumas das principais cores que serão utilizadas no seu site para evitar a poluição visual e o desequilíbrio entre os elementos das páginas. Pense nas cores que estão associadas ao conteúdo do seu site e aprenda no tópico seguinte como criar novas amostras, caso não tenha a cor que precisa já criada, e como renomeá-las.
4.2. Criar e renomear nova amostra de cor Para criar uma nova amostra de cor, abra uma página do seu site, clique em “Preenchimento” no canto superior esquerdo da interface do programa e depois selecione o botão indicado na Figura 24.
Figura 24. Clique no botão indicado na figura acima para adicionar uma nova amostra
Uma janela com a paleta de cores RBG será aberta e então você poderá escolher a nova cor que deseja criar e renomear (Figura 25). Você pode fazer isto quantas vezes forem necessárias, basta seguir o mesmo processo explicado na Figura 24. Para renomear a amostra você precisa tirar a seleção como mostra a Figura 25.
17 | P á g i n a
Apostila |Adobe Muse
Figura 25. Crie e renomeie uma nova cor
Após criar e renomear todas as cores principais a serem utilizadas no seu produto, estas aparecerão na paleta de cores padrão do programa toda vez que você abrir o seu site.
5. Texto 5.1. Fontes O texto no Muse é uma das únicas ferramentas que contém algumas limitações. São poucas as fontes disponíveis para uso, visto que o programa não dispõe as fontes que estão instaladas no seu computador. É preciso utilizar o próprio recurso do software para adicionar novas fontes. As formatações de parágrafo também deixam a desejar para os webdesigners acostumados com programas como o Adobe Indesign, onde o texto é a principal ferramenta. Não há como criar automaticamente letras capitulares e também não há o recurso de hifenização. Para adicionar um texto ao seu site, vá em “Janela”, na interface do programa, clique em “Barra de ferramentas” e selecione “T”. Depois, crie um retângulo onde seu texto será inserido (Figura 26). O retângulo pode ser redimensionado clicando em qualquer um dos quadrados que delimitam sua área (Figura 26).
18 | P á g i n a
Apostila |Adobe Muse
Figura 26. Crie um retângulo e insira seu texto
Para alterar a fonte do seu texto, selecione-o e acesse a ferramenta pela interface do programa (Figura 27). Note que há as fontes padrão e as fontes do sistema (instaladas no seu computador), mas o programa indica que estas últimas serão exportadas como imagens (Figura 27), o que significa que você poderá visualizá-las, mas quando o seu site estiver pronto e publicado, a fonte será substituída por uma padrão. Para solucionar o problema, você pode instalar novas fontes por meio do próprio programa. Clique em “Adicionar fontes da web” (Figura 27).
Figura 27. Altere e adicione novas fontes ao programa Muse
Quando clicar para adicionar fontes da web, uma lista com mais de 260 famílias de fontes será aberta. Você pode selecionar todas as que deseja baixar e então clicar em “Ok” para fazer o download (Figura 28). Feito o download, as fontes serão automaticamente instaladas na biblioteca de fontes do software. 19 | P á g i n a
Apostila |Adobe Muse
Figura 28. Adicione fontes da web e clique em “Ok” para baixar
5.2. Parágrafo Apesar
dos limites de parágrafo anteriormente mencionados como a falta de hifenização e letra capitular, há uma boa justificação para que esses recursos não sejam necessários. Estas são características de produções a serem impressas. Os produtos para a Web geralmente utilizam textos sem “justificar” porque o acesso no site varia de navegador e tamanho de tela do computador, o que compromete as hifenizações, que precisariam variar de tela para tela. Para fazer ajustes de parágrafo, basta manter a ferramenta “T” e seu texto selecionados e então editar segundo as opções disponíveis na interface do programa (Figura 29).
Figura 29. Faça edições de parágrafo, escolha a entrelinha, espaçamento, espaço de primeira linha, etc.
20 | P á g i n a
Apostila |Adobe Muse
6. Biblioteca de widgets 6.1. Criação e edição de menu O Muse dispõe de uma biblioteca de widgets que podem ser utilizados para customizar o seu site e torná-lo mais interativo e atraente. Um dos widgets mais usados é o menu. Para acessar a biblioteca vá em “Janela” na interface no programa, depois clique em “Biblioteca de widgets” (Figura 30) e então, selecione o widget que deseja usar. Neste caso, vamos começar pelo menu (Figura 31). Arraste o menu escolhido (pode ser vertical ou horizontal) para o cabeçalho e rodapé das páginas-mestres que criou segundo o tópico 3.4.
Figura 30. Abra a biblioteca de widgets
Figura 31. Arraste o menu escolhido para o cabeçalho e rodapé das páginas-mestres
Depois de arrastar o widget de menu para as páginas-mestres, perceba que todas as páginas nas quais foram aplicadas as mestres estarão padronizadas com o elemento. Veja no site exemplo como ficou (Figura 32). O menu está no cabeçalho e rodapé na página que a “MESTRE A” foi aplicada e está apenas no cabeçalho das páginas às quais a “MESTRE B” está relacionada. 21 | P á g i n a
Apostila |Adobe Muse
Figura 32. Páginas com os menus no cabeçalho e rodapé segundo as páginas-mestres
Perceba também que por ter criado o mapa do site segundo o tópico 3.1., o menu foi montado automaticamente com todas as páginas mãe e filha criadas (Figura 33).
Figura 33. Menu segundo as páginas criadas no site exemplo
Para editar o menu e deixá-lo de acordo com a identidade visual que deseja para o seu site, clique em cima do mesmo e depois selecione a seta destacada em azul no canto superior direito do widget (Figura 34). Note que uma janela com várias opções de edição irá abrir.
Figura 34. Clique na seta destacada em azul no canto superior direito do menu e edite o widget
22 | P á g i n a
Apostila |Adobe Muse
Deixe a opção de “Editar junto” selecionada (Figura 34) para que todas as alterações que você fizer sejam aplicadas a todo o menu. No “Tipo de Menu” escolha para exibir todas as páginas (Figura 34), assim quando você clicar na página mãe, a filha também será mostrada. Mantenha a opção de “Mostrar rótulo” selecionada (Figura 34), para que os nomes das páginas continuem a aparecer no menu, e nas outras opções escolha o que melhor se adequar ao seu site. Se você ativar “Mostrar ícone à direita”, você poderá inserir uma foto ou uma logomarca próxima a cada nome de página no menu e basta seguir os passos sobre preenchimento no tópico 9.1. Para mudar a fonte e as cores do seu menu, basta editar o nome das páginas como um texto normal, ou seja, selecione a palavra “Início”, por exemplo, e altere a fonte e a cor pela interface do programa (Figura 35).
Figura 35. Altere o tipo, tamanho e cor da fonte do menu
Para alterar a cor do fundo do menu, basta clicar no widget e selecionar uma nova cor em “Preenchimento” (Figura 36).
Figura 36. Altere a cor de fundo do menu em Preenchimento
Observação: A cor de fundo foi alterada no estado “Normal” do widget. Mas, a mudança de cor também pode ser feita em outros estados: “Em cima”, “Pressionamento do botão do mouse” e “Ativo” (Figura 37). Estas mudanças são chamadas “estados de botão”. Entenda melhor no tópico 8.1.
23 | P á g i n a
Apostila |Adobe Muse
Figura 37. Tipos de estado de preenchimento do widget de menu
6.2. Apresentações (Slides, painéis, composições) As apresentações do Muse são formas diferentes de dispor o conteúdo visual e textual do seu site de maneira compacta, isto é, várias informações concentradas em um único widget como, por exemplo, um slide fotográfico, um painel com as últimas notícias ou até mesmo composições interativas que sejam complementares ao conteúdo. Para criar um slide vá em “Janela”, na interface no programa, clique em “Biblioteca de Widgets” e selecione “Apresentação de slides”. O Muse dispõe de 5 tipos diferentes de slides que você pode editar como quiser. Escolha o que melhor adequar ao seu site e siga as instruções seguintes que são semelhantes para a edição de todos os widgets do programa: Arraste o slide escolhido para a página desejada, selecione-o e clique na seta destacada em azul para fazer as edições. Veja por meio do site exemplo como inserir fotos e personalizar o seu slide (Figura 38). Após arrastar o slide “Tela Cheia” para a página “Galeria” e clicar na seta azul do widget, as opções são autoexplicativas. Você deve clicar no botão da pasta para inserir as fotos (Figura 38).
24 | P á g i n a
Apostila |Adobe Muse
Figura 38. Edite seu slide e clique no botão da pasta para adicionar fotos
Após inserir as imagens no seu slide, você pode escolher a velocidade e tipo de transição, as partes a serem mostradas como os botões de “próximo” e “voltar” e até mesmo mudar o layout quantas vezes quiser e as fotos continuarão a aparecer, não sendo necessário adicioná-las sempre que desejar fazer uma alteração (Figura 38). Você também pode editar ou deletar os botões e numerações. Basta fazer como no tópico 5.1., onde os elementos são selecionados e editados como um texto normal. Você pode apagar o símbolo “>” e escrever “próximo”, por exemplo. Veja no modelo abaixo como ficou esta alteração (Figura 39).
25 | P á g i n a
Apostila |Adobe Muse
Figura 39. Edite a cor, fonte e tamanho dos botões e das numerações do slide
Para criar um painel, vá na “Biblioteca de Widgets”, selecione “Painéis” e arraste o modelo que desejar para uma página do seu site. A edição segue como anteriormente mostrado com os widgets de menu e slide. Clique na seta destacada em azul para fazer as alterações (Figura 40).
Figura 40. Arraste o widget para a página que deseja e faça as edições
Você pode inserir uma foto clicando com o botão direito do mouse em cima da imagem que já consta no widget e então fazer a substituição (Figura 41). O texto é facilmente alterado, basta clicar no parágrafo existente e inserir seu próprio conteúdo (Figura 41). Para alterar cada parte do painel, clique em cima do bloco que deseja editar (Figura 41). Se precisar acrescentar mais um bloco de informações ao widget, clique no botão “+” indicado também na Figura 41.
26 | P á g i n a
Apostila |Adobe Muse
Figura 41. Substitua a imagem e o texto já existente no widget por seu próprio conteúdo em cada uma das partes do painel e, se necessário, adicione mais um bloco
Os painéis são geralmente utilizados para reunir informações de destaque em um site. Veja no site exemplo como ficou o widget após as edições (Figura 42):
Figura 42. Painel do site exemplo após as edições
As composições são muito semelhantes aos painéis, reúnem informações de destaque ou complementares ao conteúdo do site em um único widget de transição. O Muse dispõe de 5 tipos diferentes de composições. Para criar uma composição vá em “Biblioteca de Widgets”, selecione “Composições” e escolha a que melhor se adequar ao seu site. Na Figura 43, do site exemplo, é mostrada a composição “Dica de Ferramenta”. As edições também foram feitas clicando na seta destacada em azul e as imagens foram inseridas pela substituição das fotos já existentes no widget como na explicação anterior. Nesse tipo de composição, cada círculo está relacionado a um bloco informativo. Para inserir conteúdo diferente em cada bloco, basta selecionar o círculo a que este está linkado (Figura 43) e para adicionar outros blocos informativos clique no botão “+” indicado abaixo:
27 | P á g i n a
Apostila |Adobe Muse
Figura 43. Adicione mais blocos informativos clicando em “+” e altere os já existentes clicando no botão a que cada bloco está relacionado
6.3. Google Maps O Google Maps, serviço de visualização de mapa de imagens feitas por satélite, também é um dos widgets que o Muse contém em sua biblioteca. O mapa permite indicar ao visitante do seu site o local da sua empresa, por exemplo. Para fazer isso, acesse a “Biblioteca de widgets”, selecione “Social” e arraste o Google Maps para uma das páginas que criou. Clique na seta destacada em azul para inserir o endereço, o tipo de mapa que quer usar (estradas, híbrido, satélite ou terreno) e o nível do zoom (Figura 44).
Figura 44. Edite o seu Google Maps clicando na seta destacada em azul do widget
O interessante desse widget é que ele pode ser um ótimo mecanismo de interatividade com o visitante, que permite visualizar e explorar as áreas próximas da sua localização e salvar o mapa em uma conta Google. É importante que para melhorar a visualização, o mapa seja aplicado em um tamanho adequado à página. Para redimensionar o widget de acordo com a largura do navegador vá em “Redimensionar”, na interface do programa, depois selecione a 28 | P á g i n a
Apostila |Adobe Muse
opção “Ajustar para a largura do navegador” (Figura 45). Assim, conforme o visitante alterar o tamanho da janela do navegador, o mapa será automaticamente redimensionado. Veja como esta alteração ficou no site exemplo (Figura 46).
Figura 45. Redimensione o tamanho do seu mapa
Figura 46. Mapa do site exemplo redimensionado para se adequar à largura do navegador
6.4. Criação e edição de formulário O widget de formulário serve para que o visitante possa entrar em contato com o webdesigner ou com o dono da empresa a qual o site pertence, para que participe de pesquisas relacionadas aos conteúdos publicados por meio de questionários e até mesmo para obter informações pessoais do próprio visitante, que sejam relevantes para o desenvolvimento do site. Os passos para a criação de um formulário seguem o mesmo caminho dos widgets anteriores: acesse “Biblioteca de widgets”, selecione “Formulários” e escolha entre as duas opções oferecidas pelo Muse. Se você optar pelo formulário simples, não se preocupe, pois durante a edição você pode adicionar quantos campos para preenchimento quiser (Figura 47). 29 | P á g i n a
Apostila |Adobe Muse
Figura 47. Edite o formulário e adicione outros campos para preenchimento
Coloque no formulário o e-mail para o qual você deseja que o preenchimento pelo visitante seja enviado. Altere a cor de fundo dos campos em “Preenchimento” (tópico 6.1) na interface do programa e faça as edições de fonte e texto selecionando a ferramenta “T” e alterando como um texto normal de parágrafo (tópico 5.1). Veja na Figura 48 do site exemplo como o widget foi utilizado. A cor de fundo foi mantida em branco, a fonte do texto foi alterada para “Bebas Neue” e um “grupo de botões de opção” foi inserido.
Figura 48. Formulário do site exemplo
30 | P á g i n a
Apostila |Adobe Muse
7. Links 7.1. Adicionar link para página do próprio site Os links são ferramentas muito utilizadas em sites que possuem várias páginas e divisão de conteúdo. Comumente são feitos textos links que guiam o visitante para outra página, onde as informações sobre certo conteúdo são mais aprofundadas. No site exemplo, foi utilizado um texto link que guia o visitante para a página da “Galeria” (Figura 49). Para linkar um texto ou uma foto à uma página criada em seu site, clique sobre a imagem ou selecione a parte do texto que deseja criar o link e vá em “Hiperlinks” na interface do programa (Figura 50).
Figura 49. Texto link para uma página do site
Depois de acessar a ferramenta de hiperlink, note que todas as páginas criadas em seu site vão aparecer elencadas na lista de links. Então, basta selecionar aquela que deseja vincular ao texto ou à foto selecionada (Figura 50).
Figura 50. Faça links com as páginas
31 | P á g i n a
Apostila |Adobe Muse
7.2. Adicionar link externo Para adicionar links externos, ou seja, links para arquivos, sites, e-mails e outros conteúdos que não constam nas páginas criadas em seu site, basta acessar “Hiperlinks” e ao invés de escolher entre as opções de links dispostas pelo programa, digite o endereço eletrônico do site ou do e-mail que deseja linkar ao texto ou à imagem (Figura 51).
Figura 51. Digite o endereço do link externo
Para vincular uma imagem ou um texto a um arquivo que o visitante possa fazer download, clique em “Vincular ao arquivo” e selecione o documento em seu computador (Figura 51). No site exemplo, o ícone do Facebook foi utilizado para linkar a uma página dessa rede social. Veja na Figura 52.
Figura 52. Ícone com link externo no site exemplo
32 | P á g i n a
Apostila |Adobe Muse
7.3. Criar link âncora Um link âncora é a ligação que direciona o visitante do site para outro local na mesma página. É muito utilizado para produções extensas de conteúdo como as grandes reportagens multimídias, que apresentam longos textos divididos por intertítulos, e para que o leitor chegue ao conteúdo de seu maior interesse com facilidade é criado um link âncora. No site exemplo, a âncora foi usada para ligar um botão a uma parte específica da página. Observe as Figuras 53 e 54 para entender como criar este estilo de link.
Figura 53. Âncora criada em uma parte da página do site exemplo
Figura 54. Botão linkado à âncora
Acesse “Objeto” na interface no programa, depois selecione a opção “Inserir âncora de link” e então posicione a âncora na página do seu site para onde deseja direcionar o visitante. Podemos entender que quando o visitante do site exemplo clicar no botão mostrado na Figura 54, ele será automaticamente direcionado para o local da página indicado na Figura 53.
33 | P á g i n a
Apostila |Adobe Muse
8. Estados 8.1. Estados de botão Os estados são as diferentes aparências que um item do seu site pode ter conforme você passa o mouse sobre ou seleciona. São muito utilizados nos botões criados com a ferramenta de retângulo do programa. No tópico 6.1, você aprendeu que o preenchimento de cor de fundo de um widget como o menu pode ser alterado no estado “Normal”, “Em cima”, “Pressionamento do mouse” e “Ativo”. Estas são as quatro formas que um botão pode ser editado. Para fazer isso, vamos usar o menu que já criamos. Clique em cima do mesmo e vá em “Item de menu” na interface do programa (Figura 55). Selecione o tipo de estado que deseja editar e faça as alterações de cor, efeitos de transparência, etc.
Figura 55. Altere os botões segundo os estados de aparência
O resultado será um menu (ou um botão) que se altera conforme o visitante do seu site passa o mouse sobre ou seleciona o item.
9. Preenchimentos 9.1. Preenchimento com cor ou imagem A ferramenta de preenchimento é uma forma rápida e simples de aplicar um fundo, seja com uma amostra de cor ou uma imagem, numa página ou em um retângulo. Esta ferramenta também é utilizada para possibilitar efeitos de rolagem, ou seja, efeitos que acontecem conforme o visitante desce com a barra de rolagem do navegador como você verá no tópico 10. Para preencher o fundo do seu site com uma só cor, abra a página que deseja colorir, clique em “Preenchimento”, na interface no programa, e aplique a cor (Figura 56).
34 | P á g i n a
Apostila |Adobe Muse
Figura 56. Preencha o fundo da página com uma cor
Da mesma forma, você pode preencher um retângulo com uma única cor ou imagem. Para fazer preenchimento com uma foto, selecione a ferramenta “Retângulo”, desenhe a forma na página e em “Preenchimento” clique em “Adicionar uma imagem”. /
Figura 57. Preencha um retângulo com uma imagem
Após escolher a imagem para o preenchimento, em “Ajuste” selecione a opção “Dimensionar para preencher” e então sua foto ocupará o retângulo proporcionalmente (Figura 58).
Figura 58. Ajuste a imagem
35 | P á g i n a
Apostila |Adobe Muse
10. Efeitos de rolagem 10.1. Efeitos de movimento e opacidade Os efeitos de rolagem são permitidos pela barra de rolagem do navegador, que conforme é descida, os elementos se movimentam, surgem e desaparecem da tela ou realizam o efeito paralaxe, que possibilita a sensação de imersão do visitante no conteúdo do site. Para fazer com que uma imagem se movimente por meio da barra de rolagem, você precisará utilizar um retângulo preenchido por uma foto como explicado no tópico 9.1. Crie um retângulo, preencha-o com a imagem que desejar e vá em “Janela”, abra os “Efeitos de rolagem” e clique na a opção “Movimento” mantendo a foto selecionada (Figura 59).
Figura 59. Faça movimentos de rolagem
Para fazer com que a foto se movimente de cima para a direita, observe atentamente as opções que deve selecionar para que isso aconteça (Figura 59). Quanto mais próxima de “1” a velocidade, a imagem irá rolar mais lentamente e quanto maior o número, maior a velocidade de rolagem. No site exemplo, foi utilizada a velocidade “5”, que é um movimento considerado rápido. A posição escolhida para dar início ao efeito de movimento foi de “597px”. Assim, quando o visitante do site chegar à marcação de 597px da página, a imagem começará a se movimentar do canto superior à direita do navegador (Figura 59). Para fazer com que a foto só apareça numa marcação específica da página, em “Efeitos de rolagem” selecione “Opacidade”. Observe pelo site exemplo que a foto não irá aparecer até o visitante descer com a barra de rolagem na marcação “650px” da página e quando atingir a marcação “700px” a opacidade da foto será reduzida a “0” novamente (Figura 60).
36 | P á g i n a
Apostila |Adobe Muse
Figura 60. Faça efeitos de opacidade
10.2. Efeito paralaxe O efeito paralaxe é o recurso que causa uma ilusão de profundidade no conteúdo, permitindo uma sensação de imersão. Este efeito é possibilitado pelo preenchimento de retângulos com imagens, que apresenta outro tipo de movimento (de frente para trás) que não é possibilitado pelo efeito comum de rolagem explicado no tópico 10.1. Para realizar o paralaxe, preencha um retângulo com uma foto, redimensione a mesma para se ajustar a largura do navegador automaticamente (Figura 61) e em “Preenchimento” clique em “Movimento” e reduza todas as velocidades a “0” (Figura 62).
Figura 61. Redimensione a foto
37 | P á g i n a
Apostila |Adobe Muse
Figura 62. Zere o movimento
Depois de zerar o movimento vá em “Efeitos de rolagem”, clique em “Opacidade” e faça como explicado no tópico 10.1: reduza a opacidade inicial a zero, defina a posição que a imagem vai aparecer 100% e depois reduza novamente a opacidade para que a foto vá desaparecendo conforme a barra de rolagem é descida (Figura 63). Seguindo essas configurações, você terá realizado o efeito paralaxe.
Figura 63. Altere a opacidade para fazer o efeito
Observação: O efeito paralaxe não é realizado apenas quando o movimento é zerado, esta é apenas uma das configurações que possibilitam o efeito. Você pode definir o movimento que desejar.
38 | P á g i n a
Apostila |Adobe Muse
11. Plugins 11.1. Baixar e instalar plugins na biblioteca do Muse Os plugins são ferramentas que facilitam a realização de efeitos e ampliam as formas de interatividade no seu site. Os pacotes de plugins da companhia Adobe são pagos, mas atualmente já existem diversos sites que disponibilizam pacotes gratuitos como o MuseBr, MuseFree e o Muse-Themes. Você pode fazer o download de quantos plugins quiser, pois a biblioteca do Muse não tem limite de espaço. Você pode, por exemplo, baixar plugins de inserção de áudio, vídeo, efeitos paralaxe automático, etc. Todos possuem a extensão “mulib”, que é a extensão própria para o programa Adobe Muse. Para instalar um plugin na biblioteca do seu programa, clique duas vezes sobre o mesmo (Figura 64). Acesse “Janela”, “Biblioteca” e o plugin já poderá ser usado (Figura 65). O uso e edição do plugin é exatamente igual a de um widget: arraste-o para a página desejada e clique na seta destacada em azul para fazer as alterações (tópico 6.1).
Figura 64. Clique duas vezes para instalar
Figura 65. Plugin disponível na biblioteca
12. Elementos HTML 12.1. Inserção de elementos por linguagem HTML A linguagem HTML (Hypertext Markup Language) é utilizada para desenvolver sites para a internet. Apesar de ser mais técnica e exigir conhecimentos aprofundados sobre, é muito eficiente em termos de construção. O Muse vem facilitar o processo de montagem de sites, mas não deixa de fora a linguagem HTML. Você pode, por exemplo, inserir qualquer elemento ou efeito por meio dessa ferramenta. Para utilizá-la, vá em “Objeto”, na interface do programa, selecione “Inserir HTML” e então digite o código do elemento que deseja inserir (Figura 66) e clique em “OK”. No site exemplo, foi inserido um código HTML de um blog (Figura 67). Veja como ficou na Figura 68.
39 | P á g i n a
Apostila |Adobe Muse
Figura 66. Insira um código HTML e clique em “Ok”
Figura 67. Código HTML do blog inserido do site exemplo
Figura 68. Blog inserido por linguagem HTML no site exemplo
13. Itens 13.1. Vincular e revincular itens Após seguir todos os tópicos desta apostila, você terá concluído o processo de criação, estruturação e finalização do seu site. A próxima etapa é a publicação e para isto é necessário verificar se todos os itens que foram inseridos nas páginas do site (imagens, logos, fotos, etc.) estão vinculados ao arquivo original salvo em seu computador. Para fazer a verificação, acesse 40 | P á g i n a
Apostila |Adobe Muse
“Janela”, selecione “Itens” e se algum dos elementos estiver com um ponto de interrogação em vermelho é porque não está vinculado ou perdeu o vínculo com o arquivo original durante a montagem do site (Figura 69). Para revincular um item, clique primeiro com o botão direito do mouse em cima do mesmo e depois em “Revincular” (Figura 69) para procurar o arquivo no computador e inseri-lo novamente.
Figura 69. Faça a revinculação dos itens perdidos
14. Modos 14.1. Modos de trabalho no site Os modos de trabalho no Muse são as formas que você tem de montar e visualizar o seu site. O programa inicia automaticamente no “Modo Plano”, em que são feitas a criação das páginas mãe, filha e mestres (Figura 70). Quando qualquer página é aberta, o “Modo Design” é ativado, onde é feito todo o trabalho de webdesign (Figura 71). Para que você possa ver como ficou o seu site e saber se todos os widgets e elementos HTML estão funcionando corretamente antes fazer a publicação na internet, acesse o “Modo Visualização” em “Exibir”, na interface do programa (Figura 72).
41 | P á g i n a
Apostila |Adobe Muse
Figura 70. Modo Plano quando o programa é aberto
Figura 71. Modo Design quando uma página é aberta
42 | P á g i n a
Apostila |Adobe Muse
Figura 72. Modo Visualização mostra como o site funcionará no navegador
15. Design responsivo 15.1. Adaptação para tablet e smartphone O Muse permite fazer o design responsivo, que é muito utilizado atualmente devido ao crescente acesso à internet por meio de tablets e smartphones. O design pode ser adaptado facilmente a esses dispositivos graças aos recursos do software. Para adaptar seu site montado em layout de computador (tópico 2.4.), vá em “Página” e “Adicionar layout alternativo” (Figura 73). Depois escolha o layout para o qual deseja adaptar.
Figura 73. Adicione outro layout para fazer a adaptação
Depois de escolhido o novo layout, a adaptação será simples. As páginas mães, filhas e mestres serão estruturadas assim como no layout de computador. Para transferir os arquivos de um layout para outro, abra uma página por vez, copie todos os elementos (CTRL+A+CTRL+C) e cole na página que corresponder a qual você fez a cópia. Dessa forma, basta ajustar os elementos dentro das margens do layout de tablet ou smartphone (Figura 74).
43 | P á g i n a
Apostila |Adobe Muse
Figura 74. Ajuste os objetos dentro das margens
16. Publicação 16.1. Publicação no Business Catalyst Para poder fazer a publicação é preciso entender que o Muse dispõe de diferentes formas que permitem disponibilizar o seu site na Web. A primeira delas é pelo “Business Catalyst”, um serviço de hospedagem da própria companhia Adobe, que possibilita até 10 hospedagens gratuitas por tempo limitado (até outra pessoa com uma Adobe ID fazer um site com o mesmo nome e então o seu será substituído no servidor). Este serviço funciona para os webdesigners que precisam mostrar o seu produto final para o cliente antes de pagar por hospedagem e domínio definitivo. Para fazer este tipo de publicação, vá em “Arquivo”, na interface do programa, e clique em “Publicar no Business Catalyst” (Figura 75). Preencha os dados indicados na Figura 77 e clique em “OK”. O Muse vai gerar um link para que o site possa ser acessado na Web.
44 | P á g i n a
Apostila |Adobe Muse
Figura 75. Publique no serviço da Adobe
Figura 76. Preencha os campos e publique o seu site
16.2. Publicação por FTP Outra forma de publicar o seu site é por meio da ferramenta FTP (File Transfer Protocol), uma maneira rápida de transferir arquivos para a internet. Você pode fazer a transferência de arquivos por programas específicos como o FileZilla e o SmartFTP. Nesse caso, você vai precisar exportar todo o seu site em HTML para gerar uma pasta zipada com todos os arquivos a serem transferidos. Faça isso em “Arquivo” e “Exportar como HTML” (Figura 77). 45 | P á g i n a
Apostila |Adobe Muse
Figura 77. Exporte os arquivos como HTML
Se preferir, você pode fazer a publicação por FTP pelo próprio software. Para isso, em “Arquivo” escolha a opção “Carregar no host FTP” e uma janela com campos para preenchimento irá abrir (Figura 78). Após preencher, clique em “Próximo” e o Muse irá transferir todos os arquivos, disponibilizando o seu site na Web.
Figura 78. Preencha os campos e publique o seu site por FTP
46 | P á g i n a
Apostila |Adobe Muse
Créditos
Projeto de Extensão “Curso para criação de Produtos Web: longforms e websites” Universidade Federal de Mato Grosso do Sul (UFMS) Pesquisa e produção da apostila: Iasmim Amiden dos Santos Coordenador: Professor Alfredo Lanari de Aragão • 2016 •
47 | P á g i n a