{"id":3981,"date":"2024-08-29T15:25:01","date_gmt":"2024-08-29T15:25:01","guid":{"rendered":"https:\/\/hocoos.com\/?post_type=answer&#038;p=3981"},"modified":"2026-01-20T14:36:43","modified_gmt":"2026-01-20T14:36:43","slug":"o-que-e-um-editor-wysiwyg","status":"publish","type":"answer","link":"https:\/\/hocoos.com\/pt\/respostas\/o-que-e-um-editor-wysiwyg\/","title":{"rendered":"O que \u00e9 um editor WYSIWYG?"},"content":{"rendered":"<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>\u00cdndice<\/h2><nav><ul><li><a href=\"#how-does-a-wysiwyg-editor-work\">Como funciona um editor WYSIWYG?\u00a0<\/a><\/li><li><a href=\"#what-are-the-pros-and-cons-of-using-a-wysiwyg-editor\">Quais s\u00e3o os pr\u00f3s e contras de usar um editor WYSIWYG?\u00a0<\/a><\/li><li><a href=\"#who-uses-wysiwyg-editors\">Quem usa editores WYSIWYG?\u00a0<\/a><\/li><li><a href=\"#what-are-some-popular-wysiwyg-editors-used-for-rich-and-user-friendly-website-creation\">Quais s\u00e3o alguns editores WYSIWYG populares usados para a cria\u00e7\u00e3o de sites ricos e f\u00e1ceis de usar?\u00a0<\/a><\/li><li><a href=\"#whats-the-difference-between-wysiwyg-and-traditional-code-editor-editing-experiences\">Qual \u00e9 a diferen\u00e7a entre as experi\u00eancias de edi\u00e7\u00e3o WYSIWYG e as tradicionais (editor de c\u00f3digo)?<\/a><\/li><li><a href=\"#what-are-the-best-practices-for-using-a-wysiwyg-editor\">Quais s\u00e3o as melhores pr\u00e1ticas para usar um editor WYSIWYG?\u00a0<\/a><\/li><li><a href=\"#conclusion\">Conclus\u00e3o<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-does-a-wysiwyg-editor-work\" style=\"font-size:32px\"><strong>Como funciona um editor WYSIWYG?&nbsp;<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Com o WYSIWYG, os usu\u00e1rios projetam p\u00e1ginas da web e estruturas de documentos visualmente. Isso acontece gerando o c\u00f3digo necess\u00e1rio automaticamente e visualizando o trabalho em andamento em tempo real (o editor cria HTML e CSS dinamicamente conforme os elementos s\u00e3o modificados na tela). Isso proporciona uma interface intuitiva e perfeita para fins de edi\u00e7\u00e3o, apesar de ser limitante para desenvolvedores web mais experientes.<\/p>\n\n\n\n<p style=\"font-size:18px\">Estes s\u00e3o alguns dos benef\u00edcios que v\u00eam com o uso de editores WYSIWYG; no entanto, deve-se notar que eles podem n\u00e3o fornecer tanta flexibilidade ou controle sobre o design quanto a codifica\u00e7\u00e3o manual de HTML e CSS.<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nDica profissional:\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\n<strong>Pratique com Projetos Simples<\/strong>: Comece criando p\u00e1ginas da web simples ou modificando o que j\u00e1 existe para desenvolver suas habilidades e conhecer o editor WYSIWYG.\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-are-the-pros-and-cons-of-using-a-wysiwyg-editor\" style=\"font-size:32px\"><strong>Quais s\u00e3o os pr\u00f3s e contras de usar um editor WYSIWYG?&nbsp;<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Os editores WYSIWYG apresentam uma forma de gerar e alterar conte\u00fado para a Web sem exigir qualquer conhecimento de codifica\u00e7\u00e3o HTML ou CSS; no entanto, eles t\u00eam vantagens e desvantagens. Essas vantagens e desvantagens devem ser compreendidas para saber se deve usar um editor WYSIWYG.<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Facilidade de uso:<\/strong> Embora sejam muito pr\u00e1ticos e f\u00e1ceis de usar, os editores WYSIWYG podem tornar os desenvolvedores muito dependentes deles visualmente e, portanto, podem n\u00e3o estar interessados em aprender o c\u00f3digo subjacente para entender melhor o desenvolvimento web.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Velocidade e efici\u00eancia:<\/strong> O editor WYSIWYG \u00e9 \u00f3timo para iniciantes em programa\u00e7\u00e3o sem muito conhecimento; no entanto, os web designers experientes podem se sentir limitados.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Controle sobre o c\u00f3digo: <\/strong>Embora possam ser visualmente convenientes, os editores WYSIWYG podem produzir c\u00f3digo que pode precisar ser aprimorado para melhor desempenho web e visibilidade nos mecanismos de pesquisa.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Dados de modelos:<\/strong> A troca de modelos pode exigir nova formata\u00e7\u00e3o.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"who-uses-wysiwyg-editors\" style=\"font-size:32px\"><strong>Quem usa editores WYSIWYG?&nbsp;<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Muitas pessoas diferentes usam editores WYSIWYG. Isso inclui:<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li>Criadores de conte\u00fado<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li>Web Designers<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li>Marqueteiros<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li>Propriet\u00e1rios de Pequenas Empresas<\/li>\n<\/ul>\n\n\n\n<p style=\"font-size:18px\">Al\u00e9m disso, h\u00e1 tamb\u00e9m os usu\u00e1rios comuns que precisam criar ou editar conte\u00fado web\/documentos\/e-mails sem exigir conhecimento aprofundado de HTML ou CSS.&nbsp;<\/p>\n\n\n\n<p style=\"font-size:18px\">Eles s\u00e3o populares em f\u00f3runs, construtores de sites e CMSs, pois permitem a colabora\u00e7\u00e3o entre usu\u00e1rios com diferentes habilidades t\u00e9cnicas, mas \u00e9 importante notar que eles n\u00e3o t\u00eam o mesmo grau de controle\/flexibilidade que a codifica\u00e7\u00e3o manual em HTML\/CSS.<\/p>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-are-some-popular-wysiwyg-editors-used-for-rich-and-user-friendly-website-creation\" style=\"font-size:32px\"><strong>Quais s\u00e3o alguns editores WYSIWYG populares usados para a cria\u00e7\u00e3o de sites ricos e f\u00e1ceis de usar?&nbsp;<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Editores populares para constru\u00e7\u00e3o de sites s\u00e3o:&nbsp;<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li>Hocoos<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li>Site123<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li>Wix<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li>Webador<\/li>\n<\/ul>\n\n\n\n<p style=\"font-size:18px\">Eles podem ser considerados populares pelas estrelas do GitHub ou downloads do npmjs.com, que expressam o quanto eles foram aceitos na comunidade. Esses editores n\u00e3o exigem habilidades de codifica\u00e7\u00e3o, assemelhando-se ao processo de ferramentas de processamento de texto.<\/p>\n\n\n\n<p style=\"font-size:18px\">A escolha do melhor editor depender\u00e1 de fatores como as necessidades do projeto, as habilidades dispon\u00edveis entre os desenvolvedores envolvidos e os recursos financeiros dispon\u00edveis para investimento nesta \u00e1rea.<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nDica profissional:\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\n<strong>Apresentar uma Tabela de Compara\u00e7\u00e3o<\/strong>: Gere uma tabela que compare os editores WYSIWYG mais comuns com base em suas principais caracter\u00edsticas, custos, bem como pr\u00f3s e contras para ajud\u00e1-lo na escolha de um editor.\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"whats-the-difference-between-wysiwyg-and-traditional-code-editor-editing-experiences\" style=\"font-size:32px\"><strong>Qual \u00e9 a diferen\u00e7a entre as experi\u00eancias de edi\u00e7\u00e3o WYSIWYG e as tradicionais (editor de c\u00f3digo)?<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Diferentes maneiras de construir sites s\u00e3o oferecidas por editores de c\u00f3digo tradicionais e editores WYSIWYG, cada um com seus pr\u00f3prios pr\u00f3s e contras. \u00c9 importante reconhecer esses pontos fortes e fracos para poder escolher um editor que se adapte aos seus objetivos de fluxo de trabalho.<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Feedback visual:<\/strong> Apesar das limita\u00e7\u00f5es mencionadas em rela\u00e7\u00e3o \u00e0 flexibilidade limitada da estrutura de c\u00f3digo subjacente, os editores WYSIWYG permitem que voc\u00ea veja as altera\u00e7\u00f5es imediatamente sem a necessidade de nenhuma habilidade de codifica\u00e7\u00e3o.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Acessibilidade:<\/strong> O WYSIWYG possui ferramentas integradas para layout, estilo ou manipula\u00e7\u00e3o de imagens, o que capacita os iniciantes, embora os web designers experientes possam achar esses editores um pouco limitantes.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Personaliza\u00e7\u00e3o: <\/strong>Nos editores WYSIWYG, o desenvolvimento web oferece uma ampla gama de modelos predefinidos; ainda assim, as fun\u00e7\u00f5es podem n\u00e3o ser suficientes para usu\u00e1rios que precisam de muitos elementos personalizados em seu site.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-are-the-best-practices-for-using-a-wysiwyg-editor\" style=\"font-size:32px\"><strong>Quais s\u00e3o as melhores pr\u00e1ticas para usar um editor WYSIWYG?&nbsp;<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">A maneira mais eficaz de usar um editor WYSIWYG \u00e9 personaliz\u00e1-lo de acordo com as suas necessidades. Comece com um documento em branco para evitar formata\u00e7\u00e3o desnecess\u00e1ria e incorpore o editor aos seus projetos sem problemas. Para garantir a compatibilidade, fa\u00e7a pequenas altera\u00e7\u00f5es, use os recursos que o acompanham e teste em diferentes navegadores. Essas etapas permitem criar sites uniformes, acess\u00edveis e visualmente atraentes; mas lembre-se de que poss\u00edveis problemas inesperados de formata\u00e7\u00e3o ou compatibilidade podem ocorrer devido \u00e0 natureza desses editores; portanto, o teste \u00e9 importante.<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nDicas de Profissional:\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\n<strong>Fa\u00e7a um teste abrangente<\/strong>: Tenha uma vis\u00e3o geral do seu site em diferentes navegadores e dispositivos para garantir consist\u00eancia e compatibilidade.\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\" style=\"font-size:32px\"><strong>Conclus\u00e3o<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Os editores WYSIWYG s\u00e3o projetados de forma que tenham uma interface visual acess\u00edvel para usu\u00e1rios com poucas habilidades t\u00e9cnicas para participar do processo de edi\u00e7\u00e3o, mas podem n\u00e3o ser t\u00e3o atraentes para web designers experientes. Feedback em tempo real e colabora\u00e7\u00e3o aprimorada s\u00e3o os resultados disso; no entanto, existem limites em rela\u00e7\u00e3o \u00e0 personaliza\u00e7\u00e3o, controle de c\u00f3digo e compatibilidade. A escolha varia de acordo com as necessidades do projeto que est\u00e1 sendo feito, bem como as prefer\u00eancias individuais.<\/p>","protected":false},"excerpt":{"rendered":"<p>How does a WYSIWYG editor work?&nbsp; With WYSIWYG, users design web pages and document structures visually. This happens by generating the code required automatically and previewing work in progress as it takes place in real time (the editor creates HTML and CSS dynamically as elements are modified on the screen). This makes for a seamless, [&hellip;]<\/p>","protected":false},"author":39,"featured_media":4001,"template":"","answers_category":[26],"class_list":["post-3981","answer","type-answer","status-publish","has-post-thumbnail","hentry","answers_category-website-builders"],"acf":{"image":7809,"card_image":4001,"content":[{"acf_fc_layout":"header_section","title":"O que \u00e9 um editor WYSIWYG?","descriptions":"The abbreviation WYSIWYG stands for \u201cWhat You See Is What You Get.\u201d This is an interface that lets you modify and edit the look of a document, webpage, or file as it would appear in its final state. That is to say, this user-interface system for development purposes shows you your end product by enabling manipulation of how it looks now and what there is in it.\r\n\r\nAlthough considered user-friendly and intuitive, the popularity of these editors in the desktop publishing, word processing, and web design fields may be based more on their simplicity than their complexity.","tip_label":"","tip":"","additional_tips":null,"key_takeaways_label":"Key Takeaways:","key_takeaways":[{"label":"Visual interface editors, like WYSIWYG, enable the creation and manipulation of content that aids in web design or document creation","body":""},{"label":"The HTML\/CSS code offers a real-time preview for non-technical users but can limit an experienced developer\u2019s flexibility","body":""},{"label":"As incredibly convenient as WYSIWYG editors can be, they might not give much customization and control when compared to the flexibility of hand coding","body":""}]}]},"_links":{"self":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answer\/3981","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answer"}],"about":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/types\/answer"}],"author":[{"embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/users\/39"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/media\/4001"}],"wp:attachment":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/media?parent=3981"}],"wp:term":[{"taxonomy":"answers_category","embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answers_category?post=3981"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}