Curso Web Design | Muse: crie sites sem precisar escrever códigos

Link to Blog do Curso Web Design - Microcamp SP

Muse: crie sites sem precisar escrever códigos

Posted: 11 Sep 2014 06:02 AM PDT

Algum tempo atrás, escrevi aqui sobre a 'morte' do Fireworks, explicando que o programa foi descontinuado pela fabricante, a Adobe, por criar sites na contramão do que é considerado correto hoje em dia (se você não leu, aproveite a ocasião e clique aqui para ler). Basicamente, o motivo pelo qual o programa foi extinto é que ele envelheceu mal, pois cria sites baseados em imagens e não em código puro (HTML, CSS, entre outros).

É bem provável que você e muita gente continue utilizando Fireworks em seus trabalhos. Ele ainda é um ótimo programa para desenhar elementos para web (como botões, banners e fundos), criar GIFs animados, entre outros itens. Apenas não é mais um programa indicado para criar sites! Como sabemos, a informática é dinâmica e o Web Design também acompanha essas mudanças rapidamente. Aliás, muitas vezes a web acaba se tornando a própria agente dessas mudanças, já que basicamente tudo o que é criado atualmente envolvendo a informática possui uma relação com a web, dada a sua importância. Esse talvez tenha sido o Calcanhar de Aquiles do Fireworks: a forma como ele cria sites ainda é baseado na forma como os sites eram criados há 10 anos atrás. E 10 anos em web é muito tempo!

É claro que a Adobe, que já possui uma respeitável quantidade de produtos voltada para o desenvolvimento de sites, não poderia ficar com uma lacuna em seus produtos e logo começou a desenvolver um programa que ajudasse os Web Designers a desenvolverem sites de maneira mais moderna, rápida e prática. Esse programa é o Muse.

Vamos deixar bem claro aqui que ele não é um 'herdeiro' do Fireworks, ele é um programa totalmente novo. Também não é um site criado para uma integração com o Dreamweaver: ele possui uma estrutura e ferramentas próprias e sua maneira de criar um site difere (e muito) do principal programa da Adobe para criar páginas para web.

Apesar disso, há semelhanças, pois o programa oferece diversas ferramentas para criação de páginas envolvendo recursos familiares para quem utiliza outros produtos Adobe (como Illustrator, Photoshop e o Indesign por exemplo). Um bom exemplo disso é o painel de camadas, as famosas "Layers", um conceito já bem comum para os usuários do Photoshop e presente também em outros programas da empresa).

Vantagens x Desvantagens

Talvez a maior qualidade do Muse seja a maneira como ele torna o processo de criação de páginas muito mais fácil para quem tem habilidades em design e pouca intimidade com o desenvolvimento de códigos. Além disso, o programa entrega um resultado final muito bom (ainda que isso dependa da habilidade do utilizador, claro) com uma aparência profissional. O Programa tem tantos recursos bons que surpreende até mesmo quem já tem uma boa experiência em criação de sites da maneira convencional.

No entanto, cabe um alerta: vale observar que o Muse é um programa WYSIWYG (ou seja, “What You See Is What You Get”, ou em português, “O Que Você Vê é O Que Você Obtém”, em uma tradução mais ou menos livre). Portanto, é óbvio que tantas facilidades podem fazer com que um estudante de Web se desinteresse sobre a parte de HTML, CSS e linguagens de programação que compõem a experiência de criar um site completo. O Muse é uma ferramenta muito boa e benéfica sobre muitos ângulos, mas é tudo o que ele é: apenas uma ferramenta. Se você deixar os seus aprendizados sobre a codificação de um site e em um futuro próximo a Adobe também descontinuar o programa, você estará em sérios apuros de novo! Além disso, é bom notar que detalhes como a acessibilidade, o tempo de carregamento, SEO e semântica só podem ser desenvolvidos por mãos humanas, já que nenhuma máquina ou programa tem o poder de prever e desenvolver esses recursos da maneira correta.

Muse e o desenvolvimento de sites

Ao utilizar o Muse, você vai perceber que o programa divide a criação de um site em 04 etapas:

O Planejamento – onde você deve especificar a quantidade de páginas e sua disposição na composição hierárquica do site;
O Design: o visual, com as informações sobre o número de colunas, os elementos de divisão da página e a diagramação do conteúdo;
A Pré-visualização: um modo de exibição onde você poderá observar o resultado do seu trabalho enquanto o desenvolve, como se ele já estivesse online;
A Publicação: com ferramentas para a postagem do site na internet.

Com isso, você controla de maneira inteligente cada processo do todo e consegue compreender melhor cada uma das etapas do trabalho. Uma ideia interessante, que estimula pessoas que não possuam grandes conhecimentos sobre o planejamento e execução de um site a terem um contato maior sobre a forma correta de desenvolvê-lo.

Crie sites para dispositivos móveis facilmente

Outras das principais novidades que o Muse traz é que ele possui logo em sua tela de abertura uma opção para escolher a criação de layouts para Tablets ou Telefones. Com isso, você poderá criar versões de seu site e controlar como o design dessas páginas serão exibidas em diferentes dispositivos móveis.

Recursos do Muse

O Muse tem recursos que permitem a inserção de botões personalizáveis, menus, imagens de fundo e até uma Biblioteca de Widgets incrível para inclusão de diversos recursos. A seguir faço uma breve descrição de alguns dos principais recursos:

Widget de Redes Sociais

Uma das ferramentas mais interessantes é opção de inserir plugins de compartilhamento com as Redes Sociais (que vão desde botões de Curtir e Compartilhar no Facebook até publicar as últimas mensagens de uma conta no Twitter ou as atualizações de imagens de um usuário no Pinterest!). Tudo isso sem precisar ir até a homepage dessas Redes, bastando pouco cliques para inserir e personalizar os recursos.

Apresentações de Slides

Na Bibiloteca de Widgets do programa você ainda encontrará opções para criar uma apresentação de Slides clicando nas opções: básico, em branco, miniaturas, negatoscópio e tela cheia. Esta última ajusta o Slide automaticamente à largura da tela, seja qual for o dispositivo em que for acessado. Você ainda pode definir como as imagens serão apresentadas e configurar o tempo de reprodução de cada um dos slides.

Web Fonts dentro do programa

Um dos recursos mais festejado pelos web designers nos últimos tempos, as Web Fonts permitem uma personalização da tipografia do site independentemente das fontes estarem instaladas no computador, o que aumenta – e muito – o leque de opções para incrementar a aparência de suas páginas web (já falei desse assunto aqui no Blog, se perdeu esse post, clique aqui e boa leitura). No Muse, você poderá utilizar fontes baixadas diretamente dos desenvolvedores de tipografia para uso em seus projetos, apenas adicionando-as a sua coleção dentro do Menu de Fontes do programa.

Formulários em poucos minutos

O widget de Formulários permite criar formulários nas páginas de forma prática e intuitiva. Você apenas escolhe o modelo do formulário que deseja utilizar e o arrasta para dentro da página, criando-o automaticamente. As opções são: Modelo detalhado e Modelo Simples. No primeiro modelo, há várias opções de campos de preenchimento (e que você pode mover ou personalizar á vontade), e no segundo, apenas os campos de Nome, E-mail, Mensagem e o botão de Enviar. Há também o recurso de reCAPTCHA do Google, um serviço gratuito que utiliza distorção de textos e números para distinguir humanos de robôs de Spam, mantendo os seus formulários livres de mensagens desse tipo.

Salve tudo na nuvem e exporte o resultado em HTML

Como os outros programas da Creative Cloud, o Muse tem o o recurso de salvar o seu trabalho ou trabalhar nele a partir do ponto em que parou graças ao armazenamento em nuvem. Além disso, depois que terminar seu trabalho, você também poderá exportar seu site no formato HTML, podendo visualizar as páginas exportadas em seu próprio navegador.

Conclusão

Com tantos recursos incríveis, utilizar o Muse daqui para frente parece irresistível. Você pode baixar o programa e experimentar a versão de testes no site da Adobe (clique aqui para ser redirecionado e fazer o download se desejar). Para tanto, você vai precisar de um ID Adobe para fazer o download e caso ainda não possua um, o cadastro é bem simples e pode ser preenchido em pouco minutos. Mas, atenção: a Versão de Avaliação pode ser utilizada por 30 dias e após esse tempo você deverá pagar para utilizar o programa.

Em breve publicarei um tutorial com o passo a passo para criar e publicar um site neste incrível programa. Caso decida baixar o programa e testá-lo, não esqueça de comentar o que achou aqui nos comentários do Blog.

Não esqueçam de Curtir e Recomendar o blog para os amigos e… até o próximo post!

Páginas

quinta-feira, 11 de setembro de 2014