Novidades da CS6

Atualização 12.1, 24 de setembro de 2012: 

Para saber as novidades de conteúdo desta versão, consulte Novidades | Creative Cloud.

Atualização 12.2, 14 de fevereiro de 2013:

Para saber as novidades de conteúdo desta versão, consulte Novidades | Creative Cloud | Fev 2013

Tutoriais em vídeo

Os tutoriais em vídeo dos novos recursos na Dreamweaver CS6 agora estão disponíveis na Adobe TV (http://www.adobe.com/go/learn_dwcs6_adobetv_br).

Novo gerenciador de sites

A caixa de diálogo Gerenciar sites (Sites > Gerenciar sites) está com uma nova aparência, mas grande parte da funcionalidade continua a mesma. A funcionalidade adicional inclui a capacidade de criar ou importar sites do Business Catalyst.

• Opções da caixa de diálogo Gerenciar sites

Layouts fluidos CSS com base em grade

Use o novo layout de grade fluido no Dreamweaver (Novo  > Novo layout de grade fluido) para criar layouts CSS adaptáveis que variam de acordo com o tamanho da tela. Quando uma página da Web é criada com a grade fluida, o layout e o conteúdo são ajustados automaticamente ao dispositivo de visualização do usuário, seja um computador desktop, tablet ou smartphone.

• Como usar layouts de Grade fluida na Dreamweaver CS6
• WebDesign Tuts: introdução às grades fluidas da Dreamweaver CS6

• Adobe TV: Uso de layouts de grade fluidos na Dreamweaver CS6
• Adobe TV: Criação de designs adaptativos com layouts de grade fluidos na Dreamweaver CS6

Transições do CSS3

Use o novo painel Transições do CSS para aplicar modificações de propriedade suaves a elementos de página em resposta à ativação de eventos, como passar o mouse, clicar e focalizar. Um exemplo comum é um item da barra de menus que muda de cor gradualmente ao passar o mouse sobre ele. Agora é possível criar transições do CSS usando o suporte de nível de código e o novo painel Transições do CSS (Janela > Transições do CSS).

• Como funcionam as transições do CSS3
• Efeitos de transição do CSS3 no Dreamweaver (referência)
• Criar alterações suaves com o painel de transições do CSS (tutorial)
• Adobe TV: Uso das transições do CSS3 na Dreamweaver CS6
  

Seleção de diversas classes CSS

Agora é possível aplicar várias classes CSS em um mesmo elemento. Selecione o elemento, abra a caixa de diálogo Seleção de várias classes e escolha as suas classes. Depois de aplicar várias classes, o Dreamweaver criará novas classes a partir das suas seleções. Em seguida, as novas classes estarão disponíveis em outros lugares onde você faz seleções CSS.

Você pode abrir a caixa de diálogo Seleção de várias classes de diversos pontos de acesso:

• O inspetor de propriedades de HTML (Escolha Aplicar várias classes no menu)
• O menu pop-up Regra-alvo do inspetor de propriedades CSS
  
• O menu de contexto do seletor de tags na parte inferior da janela Documento (clique com o botão direito do mouse em uma tag e escolha Definir classe > Aplicar várias classes)

Integração do PhoneGap Build

Por meio da integração direta com o novo serviço PhoneGap Build, os clientes da Dreamweaver CS6 podem criar aplicativos nativos para dispositivos móveis usando seus conhecimentos de HTML, CSS e JavaScript. Depois de se conectar ao PhoneGap Build pelo painel PhoneGap Build (Site > PhoneGap Build), você poderá criar o aplicativo da Web diretamente no serviço e baixar os aplicativos móveis resultantes para o seu desktop ou dispositivo móvel. O serviço PhoneGap Build gerencia o projeto e permite a criação de aplicativos nativos para as plataformas móveis mais conhecidas, como Android, iOS, Blackberry, Symbian e webOS.

• O que é o PhoneGap?
• Compactar aplicativos da Web com o PhoneGap Build (referência)
• Adobe TV: Compactação de aplicativos com o PhoneGap Build

Amostras do jQuery Mobile 1.0 e do jQuery Mobile

jQuery Mobile 1.0

A Dreamweaver CS6 é enviada com o jQuery 1.6.4, bem como os arquivos do jQuery Mobile 1.0. As páginas iniciais do jQuery Mobile estão disponíveis na caixa de diálogo Novo documento (Arquivo > Novo > Página da amostra > Iniciadores de disp. móveis). Você também pode escolher entre dois tipos de arquivos CSS ao criar suas páginas para o jQuery Mobile: arquivos CSS completos ou arquivos CSS divididos em componentes estruturais e temáticos.

• Aplicativos do jQuery Mobile e páginas para usuários iniciantes
• Adobe TV: Suporte aprimorado do jQuery Mobile na Dreamweaver CS6

Amostras do jQuery Mobile

Visualize todas as amostras (temas) em um arquivo CSS do jQuery Mobile usando o novo painel Amostras do jQuery Mobile (Janela > Amostras do jQuery Mobile). Em seguida, use o painel para aplicar amostras ou removê-las dos vários elementos na sua página do jQuery Mobile. Use esse recurso para aplicar amostras individualmente a cabeçalhos, listas, botões e outros elementos.

• Uso de temas do jQuery Mobile na Dreamweaver CS6 (tutorial)
• Adobe TV: Suporte aprimorado do jQuery Mobile na Dreamweaver CS6
  

Integração ao Business Catalyst

Novos sites do Business Catalyst

Agora é possível criar um novo site de avaliação do Business Catalyst diretamente do Dreamweaver e explorar todos os recursos que o Business Catalyst pode oferecer aos seus clientes e projetos.

Painel do Business Catalyst

Depois de efetuar logon no Site do Business Catalyst, será possível inserir e criar módulos diretamente do painel Business Catalyst (Janela > Business Catalyst) no Dreamweaver. Você terá acesso a diversas funcionalidades, como catálogos de produto, blogs e integração de mídia social, carrinhos de compras e mais. A integração fornece uma forma de trabalhar continuamente com seus arquivos locais no Dreamweaver e com o conteúdo de banco de dados no site do Business Catalyst.

• Integração do Dreamweaver ao Business Catalyst (referência)
• Reimportar sites do Business Catalyst para a Dreamweaver CS6 (referência)
• Personalizar um módulo do Business Catalyst usando o Dreamweaver (referência)
• Adobe TV: Criar e editar site do Business Catalyst

Fontes da Web

Agora é possível usar fontes criativas da Web (como as do Google ou do Adobe Fonts) no Dreamweaver. Primeiro, use o Web Font Manager (Modificar > Fontes da Web) para importar uma fonte para o site do Dreamweaver. A fonte fica disponível para uso nas suas páginas da Web.

• Adobe TV: Trabalho com fontes da Web na Dreamweaver CS6

Otimização simplificada de PSD

A caixa de diálogo Visualização de imagem da Dreamweaver CS5 agora se chama Otimização de imagem. Para abrir a caixa de diálogo, selecione uma imagem na janela Documento e clique no botão Editar configurações da imagem no Inspetor de propriedades.  Algumas das opções encontradas na antiga caixa de diálogo Visualização de imagem da CS5 aparecem no Inspetor de propriedades.

Uma visualização instantânea da imagem é exibida em Projeto enquanto você altera configurações na caixa de diálogo Otimização de imagem.

• Editar imagens no Dreamweaver (referência) 
• Adobe TV: Edição de imagens na Dreamweaver CS6

Melhorias à transferência de FTP

O Dreamweaver usa a transferência multicanal para transferir simultaneamente os arquivos selecionados usando vários canais. O Dreamweaver também permite o uso simultâneo das operações Obter e Colocar para transferir arquivos.

Se houver largura de banda suficiente disponível, a transferência assíncrona multicanal de FTP acelerará consideravelmente o processo de transferência.

Para obter mais informações, consulte http://blogs.adobe.com/dreamweaver/2012/06/ftp-improvement-in-dreamweaver-cs6.html.