A versão 2015 do Dreamweaver CC concentra-se no design responsivo, nas melhorias nos recursos de edição de código, na visualização de páginas da Web em dispositivos e na extração em lote de imagens otimizadas da Web com várias resoluções de composições do Photoshop. A integração com a estrutura do Bootstrap ajuda a criar sites responsivos para dispositivos móveis. As Consultas de mídia visual complementam ainda mais a experiência de design responsivo da Web permitindo que você visualize e modifique seu design em vários pontos de quebra. 

Esse lançamento também inclui vários aprimoramentos a recursos de edição na Visualização dinâmica e no CSS Designer. Este artigo apresenta esses novos recursos e aprimoramentos, e fornece links aos recursos para obter mais ajuda e aprendizado.

O Dreamweaver agora permite testar suas páginas da Web prontas para produção simultaneamente em vários dispositivos. Você pode ver como sua página da Web flui em vários fatores de forma e também testar recursos interativos em suas páginas. Tudo isso sem precisar instalar nenhum aplicativo para dispositivos móveis nem precisar conectar fisicamente os dispositivos ao desktop. Basta digitalizar o código QR gerado automaticamente com os dispositivos e visualizar suas páginas da Web nos dispositivos.

A inspeção dinâmica, quando acionada no desktop, reflete em todos os dispositivos conectados e ajuda a inspecionar vários elementos, além de otimizar o design conforme necessário.

Para obter informações detalhadas, consulte Visualizar e inspecionar páginas da Web em vários dispositivos.

Consultas de mídia visual

As barras de Consulta de mídia visual são uma representação visual das consultas de mídia presentes em uma página. Essas barras ajudam a exibir a página da Web em diferentes pontos de quebra e a exibir como os diferentes componentes de sua página se reajustam em diferentes visores. Enquanto exibe a página em visores distintos, você pode fazer alterações de design específicas para um visor sem afetar o design da página em outros visores.

A consulta de mídia visual consiste em três barras como linhas horizontais, cada uma representando uma categoria de consulta de mídia:

•  Verde: consultas de mídia com condições de max-width
•  Azul: consultas de mídia com condições de min-width e max-width
•  Roxo: consultas de mídia com condições de min-width

Para obter mais informações, consulte Criar e usar consultas de mídia no Dreamweaver.

Suporte a linting de código

Com esta nova versão do Dreamweaver, agora você pode depurar erros comuns em seu código usando linting. Linting é o processo de análise de código que sinaliza erros potenciais ou uso suspeito de código. O Dreamweaver pode executar o linting de arquivos HTML, CSS e JavaScript quando eles são carregados, salvos ou editados. Os erros e avisos são relacionados no novo painel Saída.

Para obter mais informações, consulte Linting de código.

Suporte a Emmet

Você é um desenvolvedor ávido que digita várias linhas de código no Dreamweaver? Poupe tempo usando abreviações do Emmet no código. Fáceis de lembrar e digitar, essas abreviações se expandem em código completo na Visualização de código quando você pressiona a tecla Tab.

Para obter informações detalhadas, consulte Inserir código usando Emmet.

Prévia na Visualização de código

Se estiver trabalhando na Visualização dividida, você poderá ver qualquer alteração nas imagens ou cores imediatamente na Visualização dinâmica ou de design. No entanto, quando você opta por trabalhar somente na Visualização de código, as imagens são apenas nomes de arquivo, não intuitivos na maioria das vezes. As cores (a menos que cores predefinidas sejam usadas) também são apenas uma série obscura de números. Com esta versão do Dreamweaver, é possível visualizar rapidamente imagens e cores direto na Visualização de código. Esse recurso ajuda a estabelecer uma conexão visual entre os nomes de arquivos de imagem e os formatos de cores e a imagem ou cor real que eles representam. Como resultado, você pode tomar decisões de design com mais rapidez e reduzir significativamente o tempo de desenvolvimento.

Para obter mais informações, consulte Visualização de imagens e cores na Visualização de código.

A Visualização de código também exibe uma visualização do erro. O número da linha do código que contém o erro é destacado em vermelho. Quando você passa o mouse sobre o número, uma breve descrição do erro é exibida.

Observação: somente o primeiro erro da linha é exibido. Se a linha contém apenas um aviso, a descrição do aviso é exibida. Se a linha contém um aviso e um erro, apenas a descrição do erro é exibida.

Novos snippets de código

Snippets são trechos de código que você pode reutilizar repetidamente em seus projetos. Esta versão do Dreamweaver fornece snippets de código novos e atualizados:

• Snippets Bootstrap
• Animações e transições CSS
• Efeitos CSS
• Snippets CSS
• Snippets HTML
• Snippets JavaScript (atualizados)
• Snippets PHP
• Snippets de pré-processador
• Snippets de design responsivo

Para obter informações sobre como usar snippets de código, consulte Trabalhar com snippets de código.

Além disso, agora você pode manter os snippets de código atualizados nas instalações do Dreamweaver usando o recurso de sincronização na nuvem. Para obter informações sobre como sincronizar snippets de código com a Creative Cloud e outras instalações do Dreamweaver, consulte Sincronizar configurações do Dreamweaver com a Creative Cloud.

Integração de Bootstrap

Bootstrap é a estrutura HTML, CSS e JavaScript gratuita mais popular para o desenvolvimento de sites responsivos que priorizam os dispositivos móveis (“mobile-first”). A estrutura inclui modelos CSS e HTML responsivos para botões, tabelas, navegação, carrosséis de imagens e outros elementos que você pode usar na sua página da web. Também estão disponíveis alguns plug-ins JavaScript opcionais, que permitem que mesmo os desenvolvedores com conhecimento de codificação básico desenvolvam sites excelentes e responsivos.

O Dreamweaver permite criar documentos de Bootstrap e editar páginas da Web existentes usando o Bootstrap. Você pode desenvolver seu site Bootstrap usando um dos modelos iniciais do Bootstrap na caixa de diálogo Novo documento (Modelos iniciais > Modelos do Bootstrap). 

• Bootstrap – Agência
  
• Bootstrap – Comércio eletrônico
• Bootstrap – Portfólio
• Bootstrap – Produto
• Bootstrap – Imobiliária
• Bootstrap – Currículo
  

Você também pode criar um documento personalizado do Bootstrap na caixa de diálogo Novo documento (Novo documento > Bootstrap). Em seguida, crie o site passo a passo usando componentes do Bootstrap como acordeões e carrosséis usando o painel Inserir no Dreamweaver. Ou, se você tiver composições do Photoshop, use o Extract para levar imagens, fontes, estilos, texto e muito mais para o seu documento do Bootstrap.

Seja um arquivo do Bootstrap totalmente desenvolvido ou um projeto em andamento, você pode editá-los no Dreamweaver não apenas para editar código, mas também para usar recursos de edição visual como a edição na Visualização dinâmica, o CSS Designer visual, as Consultas de mídia visual e o Extract para fazer alterações no design. 

Para obter informações detalhadas, consulte Trabalhando com arquivos do Bootstrap.

Suporte para edição de tabelas na Visualização dinâmica

Você pode editar tabelas na Visualização dinâmica com facilidade usando uma ou várias das seguintes opções:

Para obter mais informações, consulte Redimensionamento de uma tabela e Formatação de tabelas e células.

Novos menus na Visualização dinâmica

Os recursos de edição na Visualização dinâmica agora foram aprimorados com os seguintes menus disponíveis na Visualização dinâmica:

• Modificar
• Formato
• Comandos
• Site
• Opção "Colar especial" em Editar e no menu de contexto

Suporte para elementos de interface do usuário do jQuery na Visualização dinâmica

Usando o painel Inserir, agora você pode inserir diretamente widgets do jQuery na Visualização dinâmica. Arraste o elemento necessário do painel Inserir para a Visualização dinâmica e segure o mouse para usar um dos seguintes recursos para inserir:

• Guias dinâmicos: esses guias aparecem à medida que você passa o mouse sobre os elementos na Visualização dinâmica depois de arrastar o elemento necessário do painel Inserir. Usando Guias dinâmicos, você pode inserir elementos na parte superior ou inferior, ou à esquerda ou à direita de um elemento em foco.

• Ícone DOM: o ícone DOM aparece quando você pausa por um momento quando os Guias dinâmicos aparecem. Clique no ícone para exibir a estrutura DOM em um pop-up e arraste o elemento para um local preciso na estrutura do documento.

• Assistente de posição: o Assistente de posição ajuda a posicionar o elemento antes, depois ou dentro do elemento em foco (na Visualização dinâmica).

Para obter mais informações, consulte Inserir elementos diretamente na Visualização dinâmica.

Painel DOM

A Exibição rápida do elemento se transformou no painel DOM (Windows > DOM). O painel DOM oferece todas as funcionalidades da Exibição rápida do elemento e muito mais. Este painel está disponível em todas as áreas de trabalho e é persistente, o que significa que você pode abrir dois documentos e acessar seus painéis DOM simultaneamente.

Usando o painel DOM, você pode:

• Arrastar elementos do painel Inserir para inseri-los precisamente na estrutura do documento.
• Copiar, colar, duplicar, mover ou excluir elementos estruturais no documento.
• Exibir qualquer elemento na página no contexto com a estrutura do documento. O elemento em foco é realçado no painel DOM.

Para obter informações detalhadas sobre como usar o painel DOM e editar a estrutura HTML usando o painel, consulte Painel DOM.

Dicas de código SVG em documentos HTML

Dicas de código para todos os elementos e atributos SVG agora têm suporte em documentos HTML. Usando essas dicas de código, agora você pode adicionar elementos SVG na Visualização de código de documentos HTML assim como faz em um documento SVG.

Visualizações de tecnologia

Começando com esta versão, a equipe do Dreamweaver fornece visualizações de alguns recursos para coletar feedback dos clientes. Com base no feedback, esses recursos serão aprimorados e incluídos como recursos principais do Dreamweaver. Você pode acessar tais recursos na categoria Visualizações de tecnologia da caixa de diálogo Preferências.

O recurso de visualização nesta versão é Realce de código. Esse recurso realça todas as ocorrências de qualquer texto selecionado na Visualização de código.

Para usar esse recurso, execute as seguintes etapas:

Você pode navegar entre o texto realçado usando os seguintes atalhos do teclado:

• Selecionar a próxima ocorrência: F3 (Win), Cmd + G (Mac)
• Selecionar a ocorrência anterior: Shift + F3 (Win), Cmd + Shift + G (Mac)

Visualização personalizada na Visualização de código com a API ShowPreview

Com esta versão do Dreamweaver, você pode gerar um pop-up de visualização personalizada que será exibido quando você passar o mouse sobre o código na Visualização de código. Para implementar visualizações personalizadas, você pode usar a nova API, showPreview, juntamente com a API mm:browsercontrol existente. Por exemplo, você pode usar essas APIs para exibir uma visualização de todos os parâmetros de uma função JavaScript quando você passar o mouse sobre o nome da função.

Para obter mais informações, consulte Referência de API do Dreamweaver: Funções da Visualização de código.

Dobramento de código

Na versão anterior do Dreamweaver, era preciso selecionar os blocos de código na Visualização de código e, depois, recolhê-los. Nesta versão e na posterior, é possível recolher os blocos de código simplesmente passando o mouse sobre os números de linha e clicando no triângulo que é exibido.

O dobramento (recolhimento) de código está disponível em arquivos HTML, CSS, LESS, Sass, SCSS, JS, PHP, XML e SVG e é baseado em blocos de tags.

As ações Copiar, Recortar, Colar e do tipo arrastar e soltar mantêm o estado de dobramento do código. Por exemplo, quando você copia um bloco de código que está recolhido, a ação de colagem cola o texto copiado como um bloco recolhido.

Nos arquivos HTML, ao contrário da funcionalidade anterior de recolhimento de código, agora o conteúdo recolhido contém a tag de finalização e é renderizado de maneira diferente. Além disso, o número de caracteres exibidos em um bloco de código recolhido aumentou. Isso ajuda a visualizar os atributos iniciais, se houver.

Para obter informações detalhadas, consulte Recolher código.

Aprimoramentos do Extract

• Extract para dispositivos
• Suporte a unidades %

Extract para dispositivos

Dispositivos variam não só em tamanhos, mas em resoluções. Seu plano para um design responsivo da Web deve considerar várias versões de resoluções de imagens que são renderizadas adequadamente nos dispositivos. No entanto, criar muitas versões de resoluções diferentes para todas as imagens no seu projeto pode ser uma tarefa desanimadora.

O Extract no Dreamweaver facilita muito essa tarefa. Enquanto extrai uma imagem da sua composição do Photoshop na versão 2015 do Dreamweaver, você também pode optar por extrair versões de resoluções diferentes dessa imagem. A imagem no Photoshop é dimensionada automaticamente em resoluções predefinidas e diferentes durante a extração.

Em seguida, você pode chamar essas imagens no JavaScript ou nas consultas de mídia para exibi-las com base no dispositivo em que elas são visualizadas. Por exemplo, para uma tela Retina de alta densidade, você pode usar a versão 2X da imagem. 

Para obter mais informações, consulte Extrair imagens de arquivos PSD.

Suporte a unidades %

No painel Extract, agora você pode exibir a largura e altura das imagens em valores em %, além dos pixels. Também é possível exibir as medidas em %.

Quando você clica em um ativo no painel Extract, o pop-up exibido oferece uma opção para alternar entre pixels e %. A unidade selecionada neste pop-up é mantida quando você exibe medidas entre ativos.

Aprimoramentos na edição na Visualização dinâmica

Inserção aninhada na Visualização dinâmica

Agora você pode inserir elementos dentro de outros elementos na Visualização dinâmica. Ao arrastar elementos do painel Inserir, do painel Ativo ou da Visualização dinâmica e passar o mouse sobre elementos diferentes na página, você perceberá o feedback visual para aninhar elementos (junto com as guias antes e depois).

• Guias antes/depois: quando você passa o mouse sobre a parte superior ou inferior do elemento, cada parte referente a 30% do elemento.
• Feedback de aninhamento visual: quando você passa o mouse sobre o centro do elemento, referente a 40% do elemento.

Edição de seletores diretamente na Exibição de elementos

Agora basta clicar no nome do seletor na Exibição do elemento para editá-lo. Você pode confirmar as alterações clicando em qualquer lugar na página.

Alterações na barra de ferramentas Codificação

As seguintes opções na barra de ferramentas Codificação relacionadas a recolhimento de código foram removidas:

• Recolher tag completa
• Recolher seleção

Observação: essas opções foram removidas do menu de contexto de clique com o botão direito do mouse e também do menu Editar.   Agora é possível recolher o código passando o mouse sobre o número de linha e clicando no triângulo que é exibido.   Além disso, as seguintes opções não estão mais disponíveis para arquivos HTML, CSS, e JS.

• Realçar código inválido
• Alertas de erro de sintaxe na barra de informações

Agora é possível usar o linting para encontrar erros no código e o painel Saída exibe os resultados do linting.

Aprimoramentos no CSS Designer

• Modos Tudo e Atual
• Dicas para os valores de propriedade
• Codificação por cores para consultas de mídia
• Outras alterações

Modos Tudo e Atual

Agora o CSS Designer fornece dois modos diferentes para visualização e edição de propriedades do CSS:

• Tudo: neste modo, todos os CSS, consultas de mídia e seletores no documento atual são listados. O modo em questão não é sensível à seleção na Visualização dinâmica ou de design.

Ele é ideal para quem deseja criar CSS, consultas de mídia ou seletores.

• Atual: neste modo, os estilos computados de qualquer elemento selecionado na Visualização dinâmica ou de design são listados. Em um arquivo CSS, se o foco estiver em um seletor, o modo exibirá as propriedades desse seletor.

Dicas para os valores de propriedade

O Dreamweaver agora exibe dicas de código no CSS Designer, semelhante à Visualização de código, para configurar novas propriedades.

Codificação por cores para consultas de mídia

As consultas de mídia no painel CSS Designer agora são destacadas em cores para corresponder às Consultas de mídia visual.

•  Verde: consultas de mídia com condições de max-width
•  Azul: consultas de mídia com condições de min-width e max-width
•  Roxo: consultas de mídia com condições de min-width

Outras alterações

• Opção Exibir conjunto: a caixa de seleção Exibir conjunto na seção Propriedades agora é marcada por padrão quando o Dreamweaver é iniciado pela primeira vez. Qualquer alteração nessa opção (marcar ou desmarcar) permanecerá em todas as sessões subsequentes do Dreamweaver.

• O painel rola para exibir Adicionar propriedade no centro: quando você clica em + na seção Propriedades, a seção rola para que a linha Adicionar propriedade seja exibida no centro do painel. Se a seção Propriedades for muito pequena, a linha Adicionar propriedade será exibida na parte inferior do painel.

• Realce de fundo ao adicionar novas propriedades: quando o foco está na caixa de texto Adicionar nova propriedade, a linha é realçada em fundo cinza.

• Alteração na posição dos botões + e -: os botões + e - que aparecem em cada painel no painel CSS Designer foram movidos da extrema direita para a extrema esquerda, a fim de torná-los mais visíveis.

• A categoria Personalizadas foi renomeada: o nome da categoria das propriedades Personalizadas foi alterado para Mais.

Alterações no fluxo de trabalho do servidor de teste

Os aprimoramentos de fluxo de trabalho do servidor de teste nesta versão têm o objetivo de simplificar a edição de documentos com código no lado do servidor na Visualização dinâmica.

Alterações na configuração do servidor

Diferentemente das versões anteriores do Dreamweaver, agora você pode designar um servidor específico como servidor de teste ou servidor remoto, e não ambos. As caixas de verificação na interface do usuário de configuração do servidor foram substituídas por botões de opção para tornar obrigatória a especificação de servidores.

Se você abrir um site ou importar configurações de um site criado em versões anteriores do Dreamweaver, e o site tiver um único servidor especificado como servidor remoto e de testes, uma entrada duplicada do servidor será criada. Uma das entradas será marcada como servidor remoto (com sufixo _remote), e a outra, como servidor de teste (com sufixo _testing).

Envio automático de arquivos dinâmicos

Agora o Dreamweaver sincroniza automaticamente documentos dinâmicos para seu servidor de teste quando você abre, cria ou salva alterações feitas em documentos dinâmicos. O Dreamweaver não exibe mais as caixas de diálogo “Atualizar servidor de teste” ou “Enviar arquivos dependentes” para fluxos de trabalho do servidor de teste.

Para obter mais informações, consulte Envio automático de arquivos dinâmicos.

Alterações no fluxo de trabalho do Business Catalyst

A extensão Business Catalyst foi suspensa e não estará mais disponível para uso com o Dreamweaver CC 2015 ou mais recente. O Dreamweaver CC 2014.1.1 é a última versão compatível com a extensão Business Catalyst.

Para usar a Business Catalyst com o Dreamweaver CC 2015 ou mais recente, use a opção de conexão SFTP no Dreamweaver. Para obter mais informações, consulte a Documentação sobre o Business Catalyst.

Este é o anúncio oficial sobre essa alteração no site do Business Catalyst. 

Outras alterações

• O painel Inserir foi reorganizado para agrupar todas as opções nas categorias Comum, Layout e Mídia em uma categoria mais lógica - HTML.

• Os vídeos de minitour e o link para iniciá-los no menu Ajuda foram removidos. Essa opção também não está disponível para outros idiomas, além do inglês.

• As opções presentes no menu suspenso na barra do documento na parte inferior de uma página foram organizadas. Agora apenas as opções Orientação, Tamanho total e Editar tamanhos estão disponíveis.