WYSIWYG: o que é, como usar e exemplos

TL;DR

WYSIWYG (“what you see is what you get”) é a interface em que a edição já parece o resultado publicado, sem exigir código. O artigo cobre vantagens, limites e exemplos como Docs, Dreamweaver, HubSpot e TinyMCE.

Por que importa: times de marketing publicam páginas sem depender de fila de desenvolvimento.
Como funciona: o editor visual mostra o layout final enquanto você escreve ou arrasta blocos.
Na prática: Word/Docs, Dreamweaver, HubSpot, KompoZer e TinyMCE aparecem como exemplos.
Sim, mas: o texto alerta para menos controle fino e templates que podem limitar design avançado.
Conclusão: escolha WYSIWYG para velocidade editorial; reserve código para casos fora do template.

WYSIWYG é um tipo de interface com o usuário que permite a criação de conteúdos e páginas da web sem a necessidade de programar. O que você vê na tela, por meio de um editor, é o resultado final que você vai ter ao publicar o site.

Para criar um site, você precisa saber programar, certo? Nem sempre! Se você utilizar editores WYSIWYG, pode criar páginas da web sem escrever uma linha de código sequer.

Esse tipo de ferramenta oferece a possibilidade de montar sites por meio de uma interface visual. A lógica do “What You See Is What You Get” é entregar ao usuário, em tempo real, o resultado final que ele visualiza na tela, em vez de ter que abrir outra janela ou imaginar como vai ficar sua renderização.

Sem precisar de um profissional programador, os softwares de edição WYSIWYG permitiram que usuários sem conhecimento específico criassem seus sites. Isso trouxe uma revolução para a web.

Neste artigo, vamos entender melhor o que é WYSIWYG e quais as vantagens desses editores. Acompanhe agora!

Neste post 3

O que são editores WYSIWYG?
Utilização dos editores WYSIWYG: vantagens e desvantagens
Exemplos de editores WYSIWYG online

O que são editores WYSIWYG?

Editores WYSIWYG são programas de criação de textos e páginas da web que oferecem uma interface visual para a edição, de maneira que o usuário consegue visualizar o resultado final enquanto está editando.

Esse tipo de editor se baseia na lógica do What You See Is What You Get, ou seja, o que você vê é o que você obtém. Isso significa que aquilo que o usuário monta na tela já é o formato final da página que os visitantes vão ver. Criadores de site com o recurso de arrastar e soltar (drag and drop) geralmente funcionam assim e até são usados como sinônimo de WYSIWYG.

Mas por que isso é tão interessante para quem trabalha com marketing digital?

Criar um site geralmente exige que você entenda de programação. Na criação tradicional de páginas da web, você escreve linhas de código, que são renderizadas no navegador, de acordo com a linguagem de programação utilizada.

Alguns editores de sites, como o WordPress, facilitam esse trabalho com um editor de textos mais amigável que um editor HTML. Ainda assim, o que você vê não é exatamente o que você obtém, pois você precisa clicar em um botão para visualizar a prévia em outra página.

Já os editores WYSIWYG dispensam a necessidade de saber programar e oferecem uma visualização em tempo real da edição da página. Você dispõe de um editor visual, geralmente com drag and drop e outros recursos de design, e pode montar o site exatamente como deseja, sem escrever uma única linha de código.

Falando em tecnologia, você pode gostar também de ler os nossos artigos:

Utilização dos editores WYSIWYG: vantagens e desvantagens

Editores WYSIWYG podem facilitar muito a vida dos profissionais de marketing digital. Por outro lado, existem limitações que podem dificultar esse trabalho ou exigir a presença de profissionais especializados, como designers e programadores.

A seguir, vamos entender melhor as vantagens e desvantagens dos programas baseados no What You See Is What You Get:

Vantagens

Editores WYSIWYG são fáceis de usar e não exigem conhecimento técnico em design ou programação para fazer um bom trabalho, o que torna a criação de sites mais acessível e democrática;
A tarefa de criar sites se torna mais prática e ágil com a visualização em tempo real, que evita ter que abrir a prévia em outra página ou compilar o conteúdo a todo momento;
Softwares WYSIWYG geralmente oferecem a opção de visualizar a página em dispositivos móveis, o que permite verificar se você vai oferecer uma boa experiência mobile.

Desvantagens

Para se tornar mais acessível, esse tipo de programa tem possibilidades de edição mais limitadas, que podem frustrar profissionais com conhecimentos avançados;
Editores WYSIWYG também costumam apresentar algumas soluções prontas, como temas e templates, que podem fazer o seu site perder diferenciação e se parecer com muitos outros;
Editores mais complexos podem exigir mais capacidade de processamento do sistema e apresentar lentidão durante o seu trabalho.

Exemplos de editores WYSIWYG online

Conheça agora alguns dos editores What You See Is What You Get mais usados no mercado:

Word/Docs

Microsoft Word e Google Docs, entre outros programas de edição de conteúdo (Excel, PowerPoint etc.), são bons exemplos de WYSIWYG. Ao optar pelo modo de exibição “Layout de Impressão” no programa, a forma como você escreve na tela é exatamente o que vai ser impresso na página.

Dreamweaver

O Dreamweaver, da Adobe, é um dos editores mais utilizados por designers e desenvolvedores. O programa, baseado no What You See Is What You Get, oferece uma interface amigável para iniciantes, embora os recursos mais avançados exijam mais conhecimento em webdesign.

HubSpot

O editor da HubSpot é fácil de usar, inclusive por iniciantes. Você pode personalizar temas com a identidade da sua marca, otimizar com SEO para o Google e usar o recurso de arrastar e soltar para montar suas páginas facilmente. Em apenas alguns movimentos, você pode ter um site profissional, mesmo sem experiência em design ou programação.

KompoZer

O KompoZer é um editor gratuito e de código aberto para criar e editar páginas da web. Sem conhecimento em HTML, você pode criar sites gratuitamente, com diversas opções de personalização das páginas e criação de folhas de estilo.

TinyMCE

O TinyMCE também é um software livre amplamente usado. Simples de implementar, oferece uma série de funcionalidades, como templates, corretores e histórico de revisões. O programa tem uma versão gratuita robusta, mas você também pode avançar em versões pagas, a partir de U$ 67/mês.

Agora que você já sabe o que significa WYSIWYG e como funcionam esses softwares, já pode começar a usá-los no seu negócio. Mesmo que você não domine design nem programação, é possível criar um site profissional para, assim, oferecer uma melhor experiência aos seus clientes e passar mais confiança a eles.

Na hora de criar um site, é importante também pensar na segurança dos dados dos usuários. Leia agora sobre o SOAR (Security Orchestration Automation Response) e saiba como melhorar a segurança cibernética da sua empresa.

WYSIWYG elimina a necessidade de programar um site?

Para páginas dentro do que o editor oferece, o artigo diz que sim: dá para publicar sem escrever código. A Wikipedia descreve o mesmo princípio, editar em forma parecida com o produto final. Quando o layout exige lógica customizada, integração profunda ou performance extrema, ainda entra desenvolvimento. Use WYSIWYG no núcleo do site e abra exceções só onde o template quebra.

Qual a principal desvantagem dos editores WYSIWYG?

O guia aponta edição mais limitada e soluções prontas que frustram quem precisa de controle avançado. A velocidade vem de abstrair HTML/CSS, e essa abstração também engessa. Se a marca exige componentes únicos em todas as breakpoints, planeje design system ou código. Para landing pages e posts, o trade-off costuma valer.

Drag and drop é a mesma coisa que WYSIWYG?

O artigo trata construtores com arrastar e soltar como casos frequentes da lógica WYSIWYG, quase como sinônimo no mercado. O núcleo, porém, é a prévia fiel do resultado, com ou sem drag and drop. Ao escolher ferramenta, teste a prévia mobile e o HTML exportado além da biblioteca de blocos.

Quais exemplos o texto indica para começar?

Word/Docs para documentos, Dreamweaver para webdesign, HubSpot para páginas com SEO e temas, KompoZer como opção open source e TinyMCE como editor embutível. Cada um serve um contexto diferente de publicação. Comece pela ferramenta já ligada ao CMS da empresa para evitar retrabalho de migração.

Matt Montenegro

Publicitário e Designer de Produto; ex-CEO da VidMonsters (M&A Hotmart). Fala sobre a indústria de tecnologia e compartilha insights a respeito do atual zeitgeist.