Como utilizar o HtmlDrag: importar, editar, refinar e exportar HTML

Este guia segue o fluxo de trabalho real, desde o material inicial até um resultado HTML final. Aprenda a importar uma página existente, capturar um URL público, utilizar o Aperfeiçoar com IA, transformar ficheiros suportados em HTML editável, fazer edições visuais e guardar, partilhar ou exportar o seu trabalho.

1.º Traga conteúdo para o HtmlDrag

Escolha o caminho inicial que corresponde ao material que já possui. Carregar HTML e Colar Código abre uma página existente para edição visual; Duplicar página captura uma página pública; O Aperfeiçoar com IA realiza edições direcionadas numa página importada; Ficheiro para HTML transforma documentos e imagens suportados num rascunho HTML editável.

1.1 Espaço de trabalho doméstico

A área de trabalho inicial mantém os principais créditos iniciais juntos: Editor de HTML para HTML existente, Refinamento de IA para alterações direcionadas numa página importada e Ficheiro para HTML para gerar uma página editável a partir do material de origem. Escolha a entrada que corresponde ao seu ponto de partida e continue no editor ou na área de trabalho de pré-visualização.

1.2 Duplicar página

O Duplicar página captura uma página pública e transforma o resultado num projeto editável. É útil quando tem uma página de referência ativa, mas não tem o seu ficheiro HTML original.

Introduza um URL público

Abra Duplicar página, cole um endereço público http:// ou https:// e clique em Clonar. Os endereços de rede privada, os caminhos de ficheiros locais e as páginas que requerem login privado não são suportados.

Duplicar página: colar o endereço de uma página web pública e iniciar uma clonagem

Reveja a página capturada

Quando a captura terminar, reveja a página na pré-visualização ou na área de trabalho do editor. Os ativos externos, as imagens protegidas ou o conteúdo apenas JavaScript podem não ser reproduzidos com exatidão; se o resultado estiver incompleto, cole o HTML renderizado ou carregue o HTML original.

1.3 Carregar HTML

Utilize Carregar HTML quando já tiver um ficheiro . html ou . htm e pretender fazer alterações visuais sem reconstruir a página a partir do zero.

Selecione o ficheiro HTML existente

Escolha Carregar HTML e clique ou arraste um ficheiro HTML para a área de upload. A página de origem continua a ser o ponto de partida do editor; O HtmlDrag não transforma a página numa captura de ecrã estática.

Carregar HTML: seleccione ou arraste um ficheiro . html ou . htm existente

Verifique o resultado importado

Após a etapa de verificação e análise de segurança, abra a pré-visualização ou o editor e verifique o layout, o texto, as imagens, as ligações e os recursos externos antes de editar.

1.4 Colar código

Utilize Colar código quando o HTML estiver num assistente de código, editor local, correio eletrónico ou outro separador do browser.

Cole o HTML renderizado

Cole o HTML completo na área de código, incluindo a estrutura e os estilos necessários para a página, e clique em Abrir editor. Se a página foi gerada por uma ferramenta de IA, cole a versão que pretende refinar visualmente em vez de uma descrição da página.

Colar código: introduza o código-fonte HTML e abra-o no editor

Reveja os recursos e avisos de segurança

O HtmlDrag verifica o conteúdo importado antes de o abrir. Reveja qualquer aviso sobre scripts, recursos locais, fontes externas ou incorporações bloqueadas e confirme se a página ainda parece correta no editor.

1.5 Aperfeiçoamento direcionado com IA

Aperfeiçoar com IA serve para alterar uma página existente com uma instrução específica. Comece com uma página HTML carregada, um código colado ou um URL capturado e diga à IA o que alterar sem lhe pedir que reconstrua partes não relacionadas da página.

Aperfeiçoar com IA: escolha uma página existente como fonte para uma edição direccionada

Abra o espaço de trabalho de refinamento

Escolha a entrada Aperfeiçoar com IA e aguarde o carregamento da visualização da página. A área de trabalho mantém a área de instruções junto à página para que possa selecionar o conteúdo exato que necessita de atenção.

Refinamento AI: a página seleccionada está a ser processada

Selecione o âmbito da mudança

Utilize Clique para selecionar para elementos individuais ou Seleção de área para uma região. Também pode entrar no modo de ecrã inteiro quando a página precisar de mais espaço para seleção. Em seguida, descreva a alteração solicitada na caixa de aviso, como rever a cópia selecionada, substituir uma imagem ou ajustar uma área visual focada.

Refinamento AI: assinalar os elementos que a instrução deve afectar

Reveja e continue a editar

Assim que o resultado estiver pronto, compare a visualização atualizada com a página original. Se a alteração estiver correta, abra-a no editor para futuras edições visuais; se não for suficientemente preciso, restrinja a seleção ou reescreva a instrução em vez de alterar elementos não relacionados.

Aperfeiçoar com IA: reveja o resultado e abra-o no editor ou na pré-visualização

1.6 Ficheiro para HTML editável

Ficheiro para HTML cria uma página HTML editável a partir do material de origem. É útil quando o ponto de partida é um PDF, documento Word, apresentação PPT/PPTX, folha de cálculo Excel/XLSX, CSV, Markdown ou ficheiro de texto, ou uma imagem em vez de HTML existente.

Ficheiro para HTML: começar a partir de um documento, folha de cálculo, apresentação ou imagem

Carregar o ficheiro fonte

Abra Ficheiro para HTML, anexe o ficheiro fonte e adicione uma breve instrução descrevendo o que pretende construir. O prompt pode especificar o propósito da página, o público, o tom, a estrutura ou a direção visual.

Ficheiro para HTML: anexar um ficheiro fonte e descrever a página pretendida

Aguarde enquanto o conteúdo é organizado

O HtmlDrag lê primeiro o material de origem, identifica a sua hierarquia de conteúdo e planeia um layout de página. Documentos longos, tabelas, diapositivos e imagens podem demorar diferentes períodos de tempo a serem processados.

Ficheiro para HTML: o código-fonte está a ser montado numa página HTML

Ficheiro para HTML: o sistema está a organizar a hierarquia, o layout e os componentes

Reveja o resultado editável

Quando a página estiver pronta, reveja a pré-visualização e escolha Aperfeiçoar com IA, Abrir no editor, Partilhar ou Descarregar HTML conforme necessário. A saída é uma página HTML editável que pode continuar com o mesmo fluxo de trabalho de edição visual.

Ficheiro para HTML: a página HTML gerada está pronta para revisão e edição

2. Recursos principais do editor visual

O coração do HtmlDrag é um poderoso editor WYSIWYG que permite trabalhar directamente num ambiente HTML real, eliminando a necessidade de edição de código.

2.1 Visão geral da interface do editor

O editor visual combina um ecrã, navegação, um painel de controlo do lado direito e ações para guardar ou exportar. O elemento selecionado é contornado no ecrã, enquanto o painel direito expõe os controlos que se aplicam à seleção atual.

Ambiente de trabalho do editor visual: selecione um elemento, ajuste-o e guarde ou exporte o projeto

Navegação à esquerda e histórico

A navegação esquerda alterna entre a área de trabalho principal e as áreas de trabalho guardadas. Utilize-o para voltar aos créditos de entrada inicial ou para abrir um projeto existente.

Área central do ecrã

O ecrã mostra a página HTML importada ou gerada. Selecione os elementos diretamente, utilize as ferramentas de seleção quando a página é complexa e utilize os controlos de zoom ou de ecrã inteiro quando precisar de mais espaço.

Painel Direito (Editar/Componentes/Camadas/Biblioteca)

O painel direito contém os controlos para editar o elemento selecionado, inserir componentes, localizar elementos na lista de camadas e reutilizar componentes guardados da biblioteca.

Ações superiores e inferiores

A área superior fornece o título do projeto, a partilha, a imagem e as ações de exportação HTML. Os controlos inferiores fornecem ações de visualização, restauro, atualização e guardar versão.

2.2 Operações Básicas e Seleção

O editor suporta seleção direta, seleção de área, revisão em ecrã inteiro e edição focada. Comece com a seleção mais pequena que cubra a alteração que pretende fazer.

Visualização de seleção: reveja os elementos selecionados antes de aplicar uma alteração focada

Reconhecimento de Elemento

Utilize Clique para selecionar para selecionar um elemento na página. O editor descreve o elemento e mostra a sua etiqueta ou conteúdo no estado de seleção.

Seleção de área e ecrã completo

Utilize Seleção de área quando vários elementos próximos pertencem à mesma região visual. Utilize Ecrã completo quando a página necessitar de mais espaço para selecionar, rever ou refinar um layout complexo.

Selecção de ecrã completo: trabalhe com mais espaço em páginas complexas

Modo de arrastar e modo de edição

Utilize o modo de arrastar para reposicionar um elemento selecionado e o modo de edição para alterar o texto ou o conteúdo do elemento compatível. Os controlos do lado direito são atualizados de acordo com a seleção atual.

Bloquear, ocultar e eliminar elementos

Utilize os controlos de elemento ou o menu de contexto para bloquear um elemento contra a edição acidental, ocultá-lo durante a revisão do layout ou eliminá-lo do HTML atual. Confirme a seleção antes de eliminar; utilize desfazer ou restaurar quando precisar de voltar a um estado anterior.

Menu de contexto

Clique com o botão direito do rato num elemento selecionado para aceder a ações rápidas, como copiar, colar, adicionar um elemento à biblioteca, editar ligações, operações de camada, bloquear, ocultar e eliminar.

Seleção múltipla

Utilize a seleção múltipla quando vários elementos precisarem de ser revistos ou ajustados em conjunto. Verifique a lista de elementos selecionados antes de aplicar uma alteração e remova um item da seleção se não for afetado.

2.3 Atalhos do ecrã

Dominar os atalhos do teclado pode aumentar significativamente a eficiência da sua edição. Aqui estão os principais atalhos suportados na área do ecrã:

2.4 Painel Direito - Separador Editar

O separador "Editar" é a área utilizada com mais frequência, proporcionando alternância de modo e ferramentas avançadas de ajuste de estilo. Depois de selecionar um elemento, o painel apresenta opções de edição de forma inteligente com base no tipo de elemento.

Guia Editar: alternadores de modo e ferramentas de estilo

Alternadores de modo

A parte superior do painel disponibiliza quatro opções de modo para controlar o comportamento de interação do editor. Cada alternância pode ser ativada ou desativada de forma independente, com uma notificação de mensagem a indicar o estado atual.

Sugestão: A navegação de ligações está desativada por predefinição durante a edição para permitir a edição de componentes. Para seguir ligações, ative o interruptor «Navegação de ligações» no painel Editar. O envio de formulários também é bloqueado no modo de edição para proteger o conteúdo.

Estilo de texto

Depois de selecionar um elemento de texto ou de entrar no modo de edição, o painel apresenta ferramentas abrangentes de estilo de texto com as seguintes opções de formatação:

Estilo do texto: tipo de letra, tamanho, definições de cor

Estilo do Elemento

Depois de selecionar qualquer elemento, utilize as ferramentas de estilo de elemento para ajustar o seu aspeto:

Estilo de imagem

Após selecionar um elemento de imagem, ajuste as opções de visualização e substitua a imagem:

Estilo de mesa

Quando uma tabela ou célula de tabela é selecionada, estão disponíveis ferramentas dedicadas de edição de tabelas. Para obter instruções detalhadas, consulte 4.10 Edição de tabelas.

Estilo de tabela: operações de linha/coluna, limites e definições de célula

Edição de links

Adicione links clique para navegar a qualquer elemento ou edite links existentes:

Ferramentas de alinhamento (seleção múltipla)

Quando são selecionados vários elementos, o painel apresenta ferramentas de alinhamento e distribuição para o ajudar a organizar rapidamente os layouts dos elementos:

2.5 Painel Direito - Separador Componentes

O separador "Componentes" oferece opções de inserção rápida para vários tipos de elementos, ajudando-o a adicionar rapidamente novo conteúdo ao ecrã. Clique num botão para inserir o componente correspondente.

Separador Componentes: inserir vários elementos com um clique

2.6 Painel Direito - Separador Camadas (Árvore DOM)

O separador "Camadas" fornece uma visualização de lista de todos os elementos editáveis no ecrã, suportando filtragem, operações em lote e posicionamento preciso - uma ferramenta poderosa para gerir elementos de página complexos.

Separador Camadas: gestão de camadas e operações em batch

Lista de cartas de elementos

O painel exibe todos os elementos geríveis como cartões. Cada cartão mostra o tipo de etiqueta do elemento (por exemplo, DIV, IMG, SPAN) e o nível da camada, com os elementos de texto a mostrar uma pré-visualização do conteúdo. Os elementos decorativos da camada estão marcados com um emblema "Decorativo". Os ícones de bloqueio/desbloqueio rápido e de ocultação/visualização aparecem no lado direito de cada cartão.

Opções de filtro

Clique no botão de filtro para filtrar a lista por estado do elemento, com as seguintes opções:

Operações em lote

Depois de selecionar vários elementos na lista de cartões, utilize os botões de operação em lote para um processamento unificado:

Alternar precisão

O separador Camadas fornece uma alternância de precisão para controlar a precisão do reconhecimento do elemento:

Clique no cartão para localizar

Clique em qualquer cartão de elemento para percorrer automaticamente o ecrã e destacar o elemento correspondente, facilitando a localização rápida de componentes específicos na página. Isto é especialmente útil quando se trabalha com layouts de página complexos ou em camadas.

2.7 Painel Direito - Separador Biblioteca (Favoritos)

O separador "Biblioteca" é a sua biblioteca pessoal de componentes onde pode guardar elementos ou componentes utilizados frequentemente para reutilização em diferentes projetos, aumentando a sua eficiência criativa.

Guia Biblioteca: Biblioteca de componentes pessoais

Lista de componentes favoritos

O painel apresenta todos os componentes guardados como cartões, cada um mostrando uma miniatura e um nome. As miniaturas são geradas automaticamente ao guardar; componentes sem nome são apresentados como "Sem título".

Pesquisar favoritos

Utilize a caixa de pesquisa para encontrar rapidamente os componentes guardados por nome. A lista é filtrada em tempo real à medida que escreve.

Inserir componente favorito

Clique no botão “Inserir” num cartão de biblioteca para adicionar este componente ao ecrã atual. Os componentes inseridos podem ser editados e ajustados normalmente.

Renomear/apagar favoritos

Cada cartão de biblioteca oferece opções de “Renomear” e “Apagar”. A renomeação torna os componentes mais fáceis de encontrar posteriormente; a eliminação remove permanentemente o componente guardado – utilize com cuidado.

Como adicionar à biblioteca

Selecione qualquer elemento no ecrã e escolha “Adicionar à Biblioteca” no menu de contexto para guardar esse elemento e os seus filhos como um componente. Uma confirmação de "Adicionado à Biblioteca" aparece em caso de sucesso.

2.8 Menu de Contexto

Clicar com o botão direito do rato num elemento selecionado abre o menu de contexto, proporcionando um acesso rápido a ações comuns. O conteúdo do menu é ajustado dinamicamente com base no tipo de elemento selecionado.

Menu de contexto: acesso rápido a ações comuns

Menu Específico da Tabela

Ao clicar com o botão direito do rato numa célula da tabela, o menu mostra operações adicionais específicas da tabela:

2.9 Edição de Tabelas

Quando uma tabela ou célula de tabela é selecionada, o painel direito apresenta ferramentas dedicadas de edição de tabelas com um estilo de tabela abrangente e capacidades de ajuste de estrutura.

Edição de tabelas: operações de linha/coluna e definições de estilo

Operações de linha e coluna

A secção "Linhas e Colunas" do painel do editor de tabelas fornece:

Mesclar/dividir células

Depois de selecionar várias células adjacentes, utilize “Mesclar células” para as combinar numa só. Para células mescladas, utilize “Split Cell” para as repor nas múltiplas células originais.

Alinhamento celular

Defina o alinhamento do conteúdo da célula em duas dimensões:

Estilo de borda

Personalize o aspeto da borda da tabela, incluindo:

Clique em "Aplicar" para guardar as alterações.

Plano de fundo da célula

Defina a cor de fundo da célula utilizando o seletor de cores – ideal para destacar cabeçalhos ou linhas de dados importantes.

2.10 Controlo de zoom e predefinições da janela de visualização

O controlador de zoom na parte inferior do ecrã fornece o ajuste do zoom e do tamanho da janela de visualização, ajudando-o a visualizar o seu trabalho em diferentes tamanhos de dispositivos.

Controlo de zoom: ajuste o zoom do ecrã e o tamanho da janela de visualização

Aumentar / Diminuir zoom / Repor

Utilize os botões "+" e "-" para ampliar ou reduzir a visualização do ecrã ou mantenha premido Ctrl/Cmd + roda do rato para ampliar rapidamente. Clique no número percentual para repor o zoom predefinido. Segure Espaço + arraste para deslocar o ecrã.

Predefinições de tamanho da janela de visualização

Clique no seletor da janela de visualização para alternar entre os tamanhos de visualização, simulando a visualização em diferentes dispositivos:

Visualizar patches

Para páginas HTML com estruturas especiais, estão disponíveis três patches de visualização para otimizar a visualização. Ativar ou desativar patches irá guardar automaticamente e atualizar a visualização:

Sugestão: Se as correções não produzirem um efeito visível, tente primeiro «Restaurar HTML inicial» e, em seguida, reative a correção.

2.11 Editor de código-fonte HTML

O Editor HTML permite visualizar e editar diretamente o código-fonte HTML completo do seu trabalho – ideal para utilizadores avançados que necessitam de ajustes finos ou adições de código personalizado. Este recurso é apenas Pro.

Editor HTML: editar o código-fonte directamente (Pro)

Ver/editar HTML completo

Ao abrir o Editor HTML, é apresentado o código-fonte HTML completo (incluindo <!DOCTYPE html>). Pode editar o código diretamente; guardar aplica as suas alterações.

Pesquisar e substituir

Utilize Ctrl+F para abrir a localização, introduzindo palavras-chave para localizar rapidamente o código. Utilize Ctrl+H para abrir a substituição para a substituição de texto em lote. A barra de ferramentas mostra a contagem de correspondências (por exemplo, "3/15"), com opções para individual ou substituir tudo.

Vá para a linha

Utilize Ctrl+G ou a funcionalidade de salto da barra de ferramentas para introduzir um número de linha e navegar rapidamente até essa linha – útil para ficheiros HTML grandes.

Caso de partida

Ative a opção "Corresponder maiúsculas e minúsculas" durante a pesquisa para corresponder com precisão ao conteúdo que distingue maiúsculas de minúsculas.

Quebra de palavra

Quando a quebra de linha está ativada, as linhas de código longas são automaticamente quebradas para visualização sem deslocação horizontal.

Copiar/Guardar

Clique em “Copiar HTML” para copiar o código-fonte completo para a área de transferência. Após a edição, clique em Guardar para aplicar as alterações. Se o conteúdo estiver vazio ou contiver erros de sintaxe, são apresentadas mensagens apropriadas.

Nota: Se o conteúdo HTML ultrapassar os limites de armazenamento, ao guardar será apresentada a mensagem «Armazenamento insuficiente; não é possível guardar esta edição». Elimine conteúdo desnecessário ou mude para um plano superior para aumentar a capacidade.

2.12 Barra de ferramentas inferior

A barra de ferramentas inferior fornece os principais botões de ação do editor, incluindo as funções de pré-visualização, desfazer/refazer, restaurar e guardar.

Ambiente de trabalho do editor: controlos inferiores para visualizar, restaurar, atualizar e guardar uma versão

Pré-visualização (abre numa nova janela)

Clique no botão de visualização para abrir uma visualização completa do seu trabalho numa nova janela, mostrando o resultado real da visualização. A página de pré-visualização mostra um aviso de pré-visualização temporário a lembrar os utilizadores que se trata de uma pré-visualização da fase de edição com um link não reutilizável.

Desfazer/Refazer

Desfazer reverte a última operação; Refazer restaura uma operação desfeita. Suporta múltiplas etapas de desfazer/refazer. Também disponível através de Ctrl+Z (desfazer) e Ctrl+Y (refazer).

Atualizar visualização

Clicar em atualizar recarrega a área de visualização. O sistema guarda primeiro o conteúdo atual e depois atualiza o ecrã para mostrar o estado mais recente. Útil após uma edição extensa para sincronizar a exibição.

Restaurar o último estado guardado

Restaura o trabalho para o último estado guardado manualmente. Todas as edições não guardadas serão perdidas – use com cuidado. O sistema solicita confirmação antes de executar.

Restaurar HTML inicial

Restaura o HTML da obra para o seu estado original quando foi criada pela primeira vez. Todo o histórico de edições será apagado. Esta ação é irreversível – certifique-se de que fez cópias de segurança de conteúdos importantes.

Guardar

Guarda manualmente todas as alterações atuais. O sistema também suporta a gravação automática, mas é recomendado guardar manualmente após edições importantes para garantir a segurança dos dados. "Guardar com sucesso" aparece após a conclusão.

2.13 Barra de ferramentas superior

A barra de ferramentas superior exibe informações de trabalho e botões de ação rápida, proporcionando um acesso rápido às funcionalidades de partilha e download.

Espaço de trabalho do editor: controlos principais para download de HTML, exportação de imagens e partilha

Título do projeto (clique duas vezes para editar)

A parte superior apresenta o título do projeto atual; clique duas vezes na área do título para entrar no modo de edição e alterar o nome. O título não pode ficar vazio; "Título atualizado com sucesso" aparece em caso de sucesso. Os projetos sem nome são apresentados como "Trabalho sem título".

Botão Partilhar

Clique no botão de partilha para ativar a partilha de trabalho e gerar um link acessível. Consulte 4.16 Recurso de partilha para obter detalhes. Este recurso é apenas Pro.

Botões de download

O lado direito disponibiliza os botões “Descarregar como imagem” e “Descarregar como HTML”. Consulte 4.15 Exportar e descarregar HTML para obter detalhes.

3. Gestão, partilha e exportação de projetos

Após a edição, exporte ficheiros HTML limpos, gere ligações de visualização seguras com palavras-passe ou gerencie versões do projeto no espaço de trabalho do projeto.

3.1 Exportar e descarregar HTML

Utilize Descarregar HTML na barra de ferramentas superior direita para exportar a versão que reviu no editor. A caixa de diálogo de exportação separa a página editada da fonte original e também fornece opções de cópia e transferência de IA.

Exportar HTML: escolha a fonte editada ou original, copie o HTML ou envie-o para a IA

HTML editado

O separador HTML editado exporta a versão atual, incluindo as alterações efetuadas no ecrã.

HTML original

O separador HTML original mantém a fonte inicial importada disponível quando necessita de comparar ou recuperar a versão inicial.

Copie HTML e exporte para IA

Copiar HTML copia a fonte actual para a área de transferência. Exportar para IA cria uma ligação de transferência para que outro fluxo de trabalho de IA possa ler o HTML atual e continuar a partir do resultado editado.

3.2 Partilhar recursos e visualizações públicas

A funcionalidade Partilhar cria um link público para o trabalho atual para que outras pessoas o possam visualizar sem entrar no editor. A captura de ecrã abaixo mostra as definições de partilha disponíveis antes da publicação do link. Esta funcionalidade está disponível para utilizadores Pro.

Partilhar projeto: escolha a duração da ligação e decida que avisos ou barras laterais mostrar

Escolha as definições de partilha

Clique em Partilhar e escolha uma duração disponível, como 7 dias, 30 dias, 90 dias ou o período restante do seu plano. O link de partilha não pode sobreviver à data de expiração do plano.

Opções de visualização

Pode escolher se pretende ocultar o aviso de segurança e se pretende ocultar a barra lateral direita na página partilhada. Estas opções afetam a visualização do visitante, não a fonte editável no seu projeto.

Partilhar página e acesso

Após partilhar, copie o link gerado e envie para revisores ou clientes. Pode voltar aos controlos de partilha para atualizar o link ou interromper a partilha quando a página já não for pública.

3.3 Barra de atalhos dos Meus Projetos

A barra de atalhos "Os meus projetos" à esquerda permite expandir/recolher a lista de projetos e alternar entre projetos rapidamente, facilitando as transições suaves entre várias criações.

Expandir e recolher

Clique no botão "Os meus projetos" no canto superior esquerdo para expandir a lista de trabalhos da barra lateral. Clique novamente ou clique fora da barra lateral para a recolher. Quando expandido, pode navegar visualmente pelas miniaturas e títulos dos seus projetos de histórico.

Alternar projetos

Clique em qualquer cartão de projeto da lista para carregar imediatamente o seu conteúdo no editor. Isto permite comparar e modificar rapidamente diferentes rascunhos de design sem voltar à página inicial ou ao perfil.

3.4 Instantâneos do histórico de versões

Na barra lateral esquerda, “Os Meus Projetos” (Histórico) fornece um acesso rápido às suas criações anteriores. Lista todos os seus registos de edição em ordem cronológica.

Seleção e edição rápida

Clique em qualquer registo da lista para o carregar rapidamente no editor e continuar a partir do ponto onde parou, sem o reimportar.

Detalhes da janela de visualização

Passe o rato sobre um registo do histórico para ver a sua janela de pré-visualização. Na janela de visualização, pode:

1. Editar título diretamente: clique no texto do título para modificar o nome do projeto instantaneamente.
2. Ver estado da partilha: os ícones indicam se o trabalho está atualmente partilhado.
3. Ações rápidas: aceda a edição, eliminação e outros atalhos.

Histórico: visualização rápida e gestão de projetos anteriores

3.5 Gestão e Organização de Projetos

O módulo de gestão de projetos apresenta todos os projetos que criou, suportando operações de visualização, edição, partilha e eliminação.

Lista de trabalho e filtros

Os projetos são apresentados como cartões ou numa lista. Pode filtrá-los usando:

1. Pesquisar: introduza o código de trabalho ou o título para pesquisar
2. Filtro de tipo: Filtrar por gerador de IA, carregamento de ficheiros, clonagem de páginas Web, colagem de código, etc.
3. Período: selecione as datas de início e de fim para filtrar os projetos de um período específico
4. Classificar por: ordenar por mais recente primeiro, mais antigo primeiro, contagem de gostos ou contagem de visualizações

gestão de projetos: visualizar, filtrar e gerir todos os projetos

Visualizar e editar projetos

Clique no botão "Visualizar" num cartão de projeto para o visualizar. Na interface de visualização, pode:

1. Editar o título do projeto (clique duas vezes no título para editar)
2. Clique em "Editar" para entrar no editor visual e continuar a editar
3. Ver o histórico de gravação da obra e restaurá-la para uma versão específica

Partilhar gerenciamento de status

Os utilizadores Pro podem partilhar projetos, permitindo que outros os visualizem através do link:

1. Ativar partilha: clique no botão "Partilhar" para gerar um link de partilha válido por 7 dias
2. Atualizar partilha: Os projetos já partilhados podem ter os seus links atualizados, atualizando o período de validade
3. Parar de partilhar: clique em "Parar de partilhar" para invalidar imediatamente a ligação

Apagar projetos

Clique no botão "Apagar" num cartão de projeto para o apagar. O sistema mostrará duas caixas de diálogo de confirmação para evitar a eliminação acidental:

1. Primeira confirmação: pergunta se pretende eliminar este trabalho
2. Segunda confirmação: lembra que a eliminação é irreversível

Sugestão: Pode eliminar até 3 registos de cada vez. Depois de eliminar um projeto, o espaço de armazenamento que ocupava será libertado.

A página Projetos é o seu espaço dedicado para visualizar e gerir todas as suas criações. Aceda-lhe rapidamente na barra lateral ou no menu do utilizador.

Exibição de trabalho

A página exibe todos os seus projetos como cartões, cada um contendo:

1. Visualização em miniatura: visualização visual do trabalho para identificação rápida
2. título do projeto: mostra o nome do projeto, clique para editar
3. Tempo de criação: regista quando o trabalho foi criado
4. Estado de partilha: mostra se o trabalho está atualmente partilhado

Projetos: visualize e gerencie todas as suas criações num só local

Ações rápidas

Cada cartão de projeto fornece botões de ação convenientes:

1. Editar: entre no editor visual para continuar a criar
2. Partilhar: gerir ou gerir ligações de partilha (apenas Pro)

4. Dicas e resolução de problemas do sistema

Durante a utilização, poderá encontrar alertas ou limites do sistema. Aqui estão as explicações e sugestões para dicas comuns do sistema.

4.1 Detecção de HTML e alertas de hotlinks

Para garantir a qualidade da importação e a estabilidade do editor, o sistema verifica automaticamente os URLs e os ficheiros, alertando para possíveis problemas.

Detecção de recursos locais

Se uma página contiver caminhos locais (por exemplo, file:// ou C:/), os recursos não serão carregados. Sugestão: certifique-se de que todos os recursos utilizam links HTTP/HTTPS públicos.

Proteção de hotlink de imagem

Alguns sites bloqueiam o acesso externo às imagens. Sugestão: Utilize "Substituir imagem" para fazer o upload de ficheiros locais ou aloja-los num serviço público.

Páginas de renderização dinâmica (SPA)

As páginas que dependem inteiramente de JavaScript (SPA) podem ser importadas como vazias ou incompletas porque o DOM dinâmico não é capturado diretamente. Sugestão: Utilize "Colar Código" copiando o HTML renderizado do seu browser.

Fontes externas/bibliotecas de ícones

As fontes ou ícones com cabeçalhos CORS em falta podem ser apresentados incorretamente. Sugestão: Substitua-as por tipos de letra do sistema ou ícones de biblioteca no editor.

Conteúdo incorporado (iframe)

Por segurança, algum conteúdo iframe pode estar bloqueado ou não interativo. O sistema preserva os espaços reservados sempre que possível.

4.2 Limites de armazenamento e utilização

O HtmlDrag aplica quotas de recursos com base no seu plano. Poderá ver alertas de "Limite de armazenamento atingido" ou "Limite de trabalho atingido".

Limite de armazenamento atingido

Não pode guardar edições ou carregar ficheiros quando estiver sem espaço. Solução:

1. Apaga os itens antigos em "Projectos" para libertar espaço.
2. Clique em "Actualizar agora" no diálogo para obter mais capacidade com um Pro.

Limite de contagem de projetos

Os utilizadores gratuitos têm um limite no número de projetos guardados. Apague projetos antigos ou atualize para aumentar esse limite.

Limites de carregamento de imagens

O sistema verifica o tamanho do ficheiro único e os limites do lote. Se vir "Tamanho do ficheiro excede o limite" ou "Tamanho do lote excedido", comprima as imagens ou carregue em lotes mais pequenos. Os utilizadores profissionais desfrutam de limites mais elevados.

4.3 Sandbox de segurança e higienização

A verificação de segurança integrada avalia automaticamente o risco de conteúdo ao importar URLs, carregar ficheiros ou colar código para proteger a sua conta.

Nível de risco

Com base em ameaças como XSS, scripts maliciosos ou tags perigosas, os riscos são classificados como:

1. Baixo risco: avisos menores; geralmente seguro para prosseguir.
2. Risco médio: possíveis problemas; proceda com cautela.
3. Alto risco: riscos graves; proceder apenas se a fonte for fidedigna.
4. Risco crítico: contém malware ou conteúdo de phishing; bloqueado imediatamente.

Modo de segurança

Para ficheiros com algum risco, o sistema oferece “Medidas de segurança” como Auto Sanitize. Pode optar por “Continuar em modo de segurança”, em que o sistema remove códigos perigosos, preservando o layout e a capacidade de edição.

4.4 Notificações e mensagens do sistema

O módulo Mensagens recebe notificações importantes do sistema, incluindo o estado da conta, lembretes de pagamento, alertas de expiração de subscrição e atualizações de funcionalidades.

Mensagens: Receba notificações e alertas do sistema

Lista de mensagens do sistema

A lista de mensagens é classificada cronologicamente, mostrando o título, o resumo, a hora de criação e a hora de expiração. Clique numa mensagem para visualizar detalhes ou realizar ações (por exemplo, "Continuar pagamento", "Renovar agora").

Filtro não lido

Marque a caixa "Apenas não lidas" no canto superior direito para filtrar rapidamente as mensagens não lidas, ajudando-o a concentrar-se nas notificações importantes.

Marcar tudo como lido

Clique no botão “Marcar tudo como lido” para marcar instantaneamente todas as mensagens da lista atual como lidas, limpando os indicadores de ponto vermelho.

Detalhes da mensagem

Clique num cartão de mensagem para visualizar o conteúdo completo da notificação. Para mensagens de encomenda ou de assinatura, os detalhes incluem frequentemente botões de ação rápida para sua conveniência.

4.5 Feedback e Suporte

Se encontrar problemas ou tiver sugestões, envie-as através do módulo Feedback. Pode fazer o upload de imagens para descrever melhor o seu problema.

Feedback: enviar problemas ou sugestões

Lista e estado de comentários

A lista mostra o seu histórico de envios e o estado atual:

1. Em curso: feedback enviado, a aguardar revisão do administrador.
2. Respondido: o administrador respondeu; clique para visualizar.
3. Fechado: Feedback arquivado ou resolvido; não são permitidas mais respostas.

Enviar novo feedback

Clique em "Novo Feedback", insira o seu conteúdo (obrigatório, mínimo de 10 caracteres). Pode "Carregar imagens" (máximo de 2 MB cada) para fornecer capturas de ecrã. Clique em "Enviar feedback" quando terminar.

Detalhes de feedback e conversa

Clique num item da lista para visualizar o histórico completo da conversa, incluindo as suas mensagens e respostas de administrador. A parte superior mostra o ID do feedback e os anexos.

Continuar resposta

Para feedback "Em curso" ou "Respondido", utilize a caixa de entrada na parte inferior para fornecer mais informações ou responder ao administrador até que o problema seja resolvido.

Ao enviar feedback, pode adicionar capturas de ecrã ou ficheiros relevantes para nos ajudar a compreender melhor o seu pedido. Também pode consultar as respostas do administrador e o histórico da conversa nos detalhes do feedback para acompanhar o progresso.

Valorizamos todos os comentários e procuraremos tratá-los o mais rapidamente possível. Obrigado pela sua participação e apoio!

5. Conta, Créditos e Subscrição (Anexo)

Faça a gestão das definições da sua conta, segurança de login, saldos de crédito e planos de subscrição.

5.1 Registe-se

O HtmlDrag utiliza o registo de e-mail. Basta preencher alguns dados básicos para criar a sua conta. Após o registo bem-sucedido, será automaticamente ligado e redirecionado para a página inicial.

Registo de e-mail

Na página de registo, execute os seguintes passos para criar a sua conta:

1. Introduza o e-mail: forneça o seu endereço de e-mail utilizado com frequência. Este servirá como a sua credencial de login e canal de notificação. Verifique se o formato do e-mail está correto, por exemplo, [email protegido].
2. Definir palavra-passe: a palavra-passe deve conter letras e números, com um comprimento de 8 a 32 caracteres. Recomendamos o uso de uma palavra-passe forte para proteger a sua conta.
3. Confirmar palavra-passe: introduza novamente a palavra-passe para garantir que ambas as entradas correspondem.
4. Definir apelido (opcional): pode personalizar o seu apelido. Se for deixado em branco, o sistema irá gerar automaticamente um apelido padrão para si.
5. Concordo com os Termos: assinale "Li e concordo com os Termos de Serviço e a Política de Privacidade" e clique no botão "Subscrever" para concluir o registo.

Página de registo: introduza e-mail e informações básicas para criar conta

Verificação de e-mail e recompensa de crédito

Após o registo bem-sucedido, o sistema enviará um e-mail de verificação para a sua caixa de entrada. Ao concluir a verificação de e-mail, receberá créditos de bónus que podem ser utilizados para as funcionalidades Gerador de IA e Duplicar página. Caso não receba o e-mail, verifique a sua pasta de spam; pode clicar em "Reenviar" para solicitar outro e-mail de verificação após 3 minutos.

Sugestão: Concluir a verificação do e-mail não só lhe atribui créditos de bónus, como também desbloqueia a experiência completa e reforça a segurança da sua conta.

5.2 Login

O HtmlDrag suporta vários métodos de login. Escolha a opção mais conveniente com base na sua preferência.

Login com e-mail e password

Faça login utilizando o e-mail e a palavra-passe registados:

1. Introduza o seu endereço de e-mail na página de início de sessão
2. Introduza a sua palavra-passe (clique no ícone do olho para alternar a visibilidade da palavra-passe)
3. Clique no botão "Continuar" para concluir o login

Após o login bem-sucedido, será redirecionado automaticamente para a página inicial onde poderá começar a criar.

Login de terceiros (Google/GitHub)

Para um acesso mais rápido, pode iniciar sessão utilizando a sua conta Google ou GitHub:

1. Fazer login com o Google: clique no botão "Fazer login com o Google". No pop-up de autorização do Google, selecione a sua conta e confirme a autorização.
2. Fazer login no GitHub: clique no botão "Fazer login no GitHub". Será redirecionado para a página de autorização do GitHub. Após a confirmação, regressará automaticamente ao HtmlDrag.

Página de login: suporta e-mail/password e contas de terceiros

Sugestão: Iniciar sessão com o Google ou o GitHub cria automaticamente uma conta, pelo que não é necessário um registo separado. No primeiro início de sessão através de um serviço externo, o sistema cria automaticamente uma conta associada.

Esqueci-me do link da senha

Se se esqueceu da sua palavra-passe, clique no link "Esqueceu-se da palavra-passe?" link no canto inferior direito da página de início de sessão para entrar no processo de redefinição da palavra-passe (consulte a Secção 1.3).

5.3 Esqueci-me e redefini a palavra-passe

Se se esqueceu da sua palavra-passe, pode redefini-la usando um código de verificação por e-mail. Todo o processo é concluído numa única página sem redireccionamentos.

Processo de redefinição de palavra-passe

Siga estes passos para redefinir a sua senha:

1. Introduza o e-mail: forneça o endereço de e-mail que utilizou durante o registo
2. Obter código de verificação: clique no botão "Submeter código". O sistema enviará um e-mail contendo um código de verificação de 6 dígitos
3. Introduza o código de verificação: introduza o código de 6 dígitos que recebeu no campo do código de verificação
4. Definir nova palavra-passe: introduza a sua nova palavra-passe (deve conter letras e números, de 8 a 32 caracteres)
5. Confirme a nova palavra-passe: introduza novamente a nova palavra-passe para garantir que correspondem
6. Clique em "Redefinir palavra-passe": complete a redefinição da palavra-passe. Depois de ver a mensagem de sucesso, será automaticamente redirecionado para a página de login

Esqueci-me da palavra-passe: redefinir através do código de verificação por e-mail

Validade do código de verificação

O código de verificação tem um período de validade limitado. Utilize-o imediatamente após receber o e-mail. Se o código tiver expirado, pode clicar no botão "Reenviar" para solicitar um novo código (terá de aguardar o fim da contagem decrescente antes de reenviar).

Nota: Se o seu e-mail não estiver registado no sistema, não será possível enviar o código de verificação. Certifique-se de que introduz o endereço de e-mail utilizado no registo.

5.4 Configurações de perfil

O módulo Definições de perfil permite gerir as informações básicas da sua conta, incluindo as definições de avatar, nickname, e-mail, biografia e palavra-passe.

Alterar Avatar

Clique no botão "Alterar avatar" na área do avatar e selecione um ficheiro de imagem local para fazer o upload. O sistema irá cortar e guardar automaticamente o seu novo avatar.

Alterar apelido

Clique no botão editar ao lado do seu apelido, introduza um novo nome e clique em “Guardar”. O seu apelido será exibido em todos os seus projetos e comentários.

Gestão de e-mail

A secção de e-mail mostra o seu endereço de e-mail atual e o estado de verificação:

1. Verificado: o seu e-mail foi verificado e todas as funcionalidades estão disponíveis
2. Não verificado: clique em "Enviar e-mail de verificação" para completar a verificação e ganhar créditos de bónus
3. Alterar e-mail: primeiro precisa de verificar o seu e-mail atual e, em seguida, introduzir um novo endereço de e-mail para concluir a alteração.

Biografia

Introduza a sua autoapresentação na área bio (recomendado: não mais de 200 caracteres) e clique em “Guardar” para atualizar.

Alterar palavra-passe / Definir palavra-passe

Clique no botão "Alterar palavra-passe" para abrir a caixa de diálogo de definições de palavra-passe:

1. Utilizadores com uma palavra-passe existente: introduza a sua palavra-passe atual e defina uma nova palavra-passe (8 a 32 caracteres, incluindo letras e números)
2. Utilizadores sem palavra-passe: defina uma nova palavra-passe diretamente. Após a configuração, pode entrar com e-mail e password

Apagar conta

Para eliminar a sua conta, clique no botão “Apagar conta” na parte inferior da página. Por segurança, terá de verificar a sua identidade através do código de verificação por e-mail.

Nota: Depois de enviar o pedido de eliminação, a sua conta entra num período de retenção (normalmente, 30 dias) durante o qual não poderá iniciar sessão. Após esse período, o sistema elimina permanentemente os seus projetos, créditos e histórico.

Perfil: Gerir avatar, nickname, e-mail e password

5.5 Utilização de armazenamento

O módulo Utilização de armazenamento apresenta o consumo de armazenamento da sua conta, ajudando-o a compreender o espaço restante e a planear as suas criações em conformidade.

Visão geral do armazenamento

A secção superior mostra o seu uso geral, incluindo:

1. Usado: o espaço de armazenamento atualmente em uso
2. Total: o limite de armazenamento da sua conta (os utilizadores Pro gozam de maior capacidade)
3. Restante: Espaço disponível para a criação de novos projetos
4. Projetos armazenados: número atual de projetos guardados e o limite

Divisão de armazenamento

O sistema categoriza o armazenamento em três tipos:

1. Conteúdo HTML: espaço utilizado pelo código da página web dos seus projetos
2. Recursos de imagem: espaço utilizado pelos ficheiros de imagem enviados
3. Outros recursos: espaço utilizado por outros anexos

Limite de contagem de projetos

Os utilizadores Gratuitos e Pro têm limites de contagem de trabalho diferentes. Ao atingir o limite, terá de eliminar alguns projetos ou atualizar o seu plano antes de criar novos.

Atualização e atualização de armazenamento

Clique no botão atualizar para atualizar as informações de armazenamento. Para obter mais espaço de armazenamento, clique em “Atualizar armazenamento” para visitar a página de preços e escolher um plano adequado.

Sugestão: Se o armazenamento da sua conta estiver cheio ou atingir o limite de projetos, o sistema suspende a criação de novos projetos. Elimine alguns projetos ou mude para um plano superior para repor as permissões de carregamento.

5.6 Créditos e histórico de utilização

O módulo Histórico de Crédito apresenta o histórico de transações de crédito da sua conta, incluindo os registos de consumo e de ganhos.

Histórico de transações de crédito

Os registos de crédito são apresentados numa tabela contendo as seguintes informações:

1. Data: quando ocorreu a alteração do crédito
2. Tipo: O tipo de operação da alteração de crédito
3. Alteração de créditos: créditos adicionados (positivos) ou deduzidos (negativos)
4. Descrição: explicação detalhada da alteração

Pode utilizar filtros de intervalo de datas para visualizar registos de um período específico.

Tipos de crédito

1. Gerador de IA: créditos consumidos ao utilizar a funcionalidade Gerador de IA
2. Duplicar página: créditos consumidos ao utilizar a funcionalidade Duplicar página
3. Recompensa de registo: créditos concedidos a novos utilizadores após registo e verificação de e-mail
4. Bónus da plataforma: créditos atribuídos pela plataforma
5. Presente mensal: crédito mensal para utilizadores Pro
6. Recarga de crédito: créditos obtidos através de compras a crédito
7. Ajuste administrativo: créditos ajustados manualmente pelos administradores

Histórico de crédito: ver detalhes da transação de crédito

Sugestão: Os utilizadores Pro recebem créditos adicionais todos os meses. Os créditos podem ser utilizados em funcionalidades pagas, como o Gerador de IA e Duplicar página.

5.7 Histórico de Encomendas e Faturação

O módulo Histórico de encomendas apresenta o seu histórico de compras e registos de pagamentos, facilitando a consulta e a gestão de encomendas.

Gestão de pedidos

A lista de encomendas mostra os seus registos de compras. Pode:

1. Ver estado e detalhes do pedido
2. Utilize filtros para encontrar rapidamente pedidos específicos
3. Continuar o pagamento de encomendas pendentes
4. Feche ou apague pedidos desnecessários

Sugestão: Se tiver problemas com o pagamento, pode fechar a encomenda atual e criar uma nova.

5.8 Preços e Planos de Subscrição

A página de preços é onde gere a sua assinatura e os carregamentos de crédito. Escolha o plano que melhor se adapta a si e desbloqueie mais possibilidades criativas.

Planos de subscrição

A HtmlDrag oferece planos de subscrição Pro e Pro Max. Após a subscrição, poderá utilizar os benefícios incluídos durante o período de subscrição ativa:

Pro: para criadores regulares que necessitam de edição completa de HTML, geração de IA, partilha e fluxo de trabalho de exportação.

Pro Max: para uma criação de IA mais pesada, projetos maiores e limites de utilização mais elevados.

As subscrições são renovadas de acordo com o ciclo de faturação apresentado na finalização da compra. Pode gerir ou cancelar a renovação na sua conta ou no fornecedor de pagamento.

Preço: Escolha o plano que melhor se adapta a si

Créditos de recarga

Se apenas necessitar do uso temporário dos recursos de geração de IA ou clonagem de páginas Web, pode optar por recarregar créditos. Os créditos adquiridos nunca expiram e pode recarregar a qualquer momento quando estiver a esgotar - sem necessidade de espera.

Comparação de recursos

As principais diferenças entre o Gratuito e o Pro são as seguintes:

Guia de utilização de crédito

Cada geração de IA consome uma quantidade fixa de créditos. Os utilizadores gratuitos recebem créditos de bónus mensais básicos, enquanto os utilizadores Pro recebem mais. Os créditos adquiridos nunca expiram e pode recarregar a qualquer momento quando estiverem a esgotar – sem esperar pela recuperação da quota.

Comece com HtmlDrag

Comece com uma página HTML existente, um URL público, um aviso para o Aperfeiçoar com IA ou um ficheiro compatível. O HtmlDrag ajuda-o a passar do material de origem para uma edição visual, uma vista partilhável ou uma exportação HTML limpa.

Comece a criar agora

Este guia abrange o carregamento de HTML, colagem de código, clonagem de páginas Web, refinamento de IA, ficheiro para HTML, edição de texto e imagem, tabelas, componentes, camadas, ligações, bloqueio e eliminação de elementos, guardar, partilha e exportação de HTML.