10 Hacks sobre Dreamweaver – O Melhor Editor de Código para Web Devs
O Dreamweaver é a mãe de todas as atividades baseadas na web na internet. Para a maioria das pessoas, o Dreamweaver é apenas uma ferramenta para criar sites, mas apenas os profissionais sabem que o Dreamweaver é a potência.
O Dreamweaver possui muitos recursos e opções que o tornam a ferramenta favorita dos desenvolvedores da web. Sem dúvida, este software possui o IDE (Integrated Development Environment) mais conhecido que nenhum outro software de desenvolvimento web possui no mercado atual. Seja nas ferramentas de desenvolvimento, colaboração e codificação, o Dreamweaver fornece uma gama decente para os desenvolvedores da Web brincarem. É por isso que para os desenvolvedores web iniciantes, é importante saber como eles podem maximizar o uso do Dreamweaver.
Todos os aspectos que diferenciam os desenvolvedores da Web especializados e os desenvolvedores da Web comuns estão ocultos sob camadas de menus intuitivos lamentáveis, e é por isso que os novos desenvolvedores da Web estão achando difícil melhorar suas habilidades. No entanto, neste artigo, mostrarei a você as funções ocultas e poderosas do Dreamweaver que é muito importante conhecer para atender às demandas do mercado atual. Este artigo ajudará você a acessar essas funções rapidamente e fornecerá os dez principais hacks úteis que melhorarão a qualidade do seu trabalho e melhorarão significativamente a sua codificação.
1 Visualização dinâmica e Visualização ao vivo:
Todos sabem que o Dreamweaver oferece a visualização estática ou nossos arquivos abertos. No entanto, a questão permanece sem resposta nas visualizações dinâmicas de um aplicativo como o WordPress. Para definir a exibição dinâmica, precisamos informar ao Dreamweaver sobre as configurações a serem usadas para as exibições dinâmicas. Para definir isso, vá para as configurações de solicitação HTTP clicando em exibir > Live View > menu de opções e, em seguida, digite o GET ou POST que é necessário para visualizar seu aplicativo corretamente.
Depois disso, troque a Visualização dinâmica no Dreamweaver, que substituirá o painel Visualização de design no WebKit renderizado ao vivo e com pixels perfeitos da sua página. Em seguida, complete-o com o Javascript ativo, manipulações de DOM, consultas de banco de dados, código do lado do servidor e CSS renderizado, em vez do ícone de espaço reservado da interface Design View.
A navegação é o componente de uma página no site responsivo que deve ter a capacidade adaptativa para atender às necessidades de telas menores para as quais o Bootstrap pode ajudar muito. O Bootstrap permite configurar facilmente sua barra de navegação e alternar da faixa horizontal para o painel vertical. A razão por trás disso é que o Dreamweaver suporta toda a flexibilidade de navegação do Bootstrap e é um recurso fácil de usar quando se trata de desenvolver um site eficaz e responsivo.
Para dar uma olhada rápida, segue uma rápida demonstração de como usar o Bootstrap em seu desenvolvimento.
Intensificar a navegação com o Bootstrap começa com o novo diálogo de documento do Dreamweaver. Basta clicar no botão Bootstrap Framework na caixa de diálogo do novo documento e também marcar a caixa de seleção da opção de layout pré-construído para usar as opções de navegação com todos os recursos, como;
- Lista de links padrão, não ordenada e semanticamente correta.
- Uma área para colocação de logotipo para colocar a imagem da marca.
- Pronto para ativar o botão enviar e o campo de pesquisa.
- Predefinições para menus suspensos para itens de subnavegação e complete com os divisores.
- Seções esquerda e direita que podem ser alinhadas quando necessário.
- Capacidade de resposta integrada.
Se você achar difícil, há outra opção. O Dreamweaver permite que você faça a barra de navegação personalizada. Se você preferir a paleta escura, basta adicionar a classe .navbar-inverse ao seu
marcação. Você pode até brincar com ele também. Se você deseja mostrar sua navegação sempre acima da página, digite .navbar-fixe-top. Se você quiser mostrá-lo abaixo, digite .navbar-fixed-bottom. Todas essas classes do Bootstrap são padrão, e a dica de código do Dreamweaver também oferece suporte a essa codificação, portanto, você não precisa manter a codificação inteira em mente. Você só precisa digitar .navbar na exibição do elemento e obterá a lista pop-up na qual poderá escolher a opção desejada.
3 Congelando o JavaScript:
O Ajax tem uma natureza muito dinâmica. É por isso que muitas vezes precisamos interagir com a página com itens indisponíveis ou não renderizados no carregamento da primeira página. Esses itens podem ser injetados na página após algum tempo de carregamento, e é por isso que não aparecem no primeiro carregamento. Por exemplo, quando você pode querer alterar o estilo da dica de ferramenta implementada inteiramente no JavaScript, você costumava pesquisar seu caminho metodicamente em seus scripts para descobrir qual item foi criado onde. Em vez de pesquisar os scripts, tente o seguinte.
Coloque seu Dreamweaver no Live View e renderize sua página. Em seguida, pressione F6 para congelar o JavaScript a qualquer momento, o que permitirá dissecar e direcionar qualquer código de qualquer item dinâmico na página. Isso não apenas ajudará você a direcionar o código exato do item dinâmico, mas também agilizará seu desenvolvimento, reduzindo o tempo de pesquisa de qualquer código no site dinâmico.
4 Destacando o código:
Um script de codificação pode ser muito confuso se você não estiver acostumado a ver códigos complexos dia e noite. É aqui que o destaque dos códigos ajuda a criar separações em todo o script. Em vez de mover os olhos com a ponta do sangramento, o Dreamweaver possui um recurso que destaca a codificação que ajuda você a lê-lo. Para isso, abra as preferências do Dreamweaver e ative a seção de visualizações de tecnologia. Em seguida, clique na opção de realce de código e deixe o Dreamweaver fazer o seu trabalho. No entanto, pode ser necessário atualizar a versão do Dreamweaver porque esse recurso está disponível apenas na versão mais recente.
Depois de habilitar a opção de destaque, basta clicar duas vezes em qualquer tag e destacará todas as instâncias da tag na página atual. No entanto, os parâmetros devem ser definidos. Essa ferramenta é ótima para identificar e acessar rapidamente os elementos semelhantes. Depois de destacar qualquer elemento, use os atalhos de teclado f3 no PC, CMD-G no Mac) para pular de um elemento destacado para o próximo elemento. Além disso, o modificador shift pode voltar para a seção anterior. Além disso, o realce de código também funciona com os atributos e valores das tags HTML para que você possa identificar facilmente as classes específicas.
5 Conclusão Automática do JavaScript:
O Dreamweaver é uma ótima plataforma onde códigos HTML e CSS inteligentes e completos. Porém, algumas pessoas acreditam que o JavaScript não está completo. No caso de jQuery ou Prototype, no Dreamweaver, você deve saber que existem extensões de API que fornecem códigos de conclusão de Javascript. Esses códigos aceleram o processo de desenvolvimento porque, ao usá-los, não há necessidade de digitar scripts inteiros e são bastante úteis para codificadores rápidos.
O Dreamweaver é o único software de desenvolvimento web que permite usar esse tipo de código de conclusão jQuery e Prototype que ajuda todo desenvolvedor web a acelerar sua tarefa e produzir o melhor produto possível com o mínimo de esforço.
6 Acesse os arquivos relacionados facilmente:
CSS e JavaScript são nomes de arquivos independentes que você vê quando abre os arquivos HTML e PHP. Ao abrir o arquivo PHP, você pode vê-lo na parte superior da janela. Como todas essas opções são colocadas na frente, você pode alternar facilmente para esses arquivos e fazer alterações que podem ser salvas mesmo sem abri-los. Ao clicar em qualquer arquivo na barra de arquivos relacionados, você verá sua fonte na Visualização de código e a página principal na Visualização de design.
Além disso, você também pode usar qualquer ferramenta de navegador de código para acessar rapidamente o código-fonte CSS que afetará sua solução atual. Este acesso rápido ao código-fonte CSS reduz o tempo de codificação e permite que o desenvolvedor web se concentre nos diferentes aspectos de seu processo de desenvolvimento.
7 Embeleze os códigos na hora:
Linhas de códigos desorganizadas e confusas mostram que o desenvolvedor dessa codificação não era profissional e habilidoso o suficiente para escrever os códigos em ordem. Isso também é algo que conta muito durante a otimização do mecanismo de busca do site. No entanto, organizar seus códigos e embelezá-los não é tão difícil quanto as pessoas acreditam. Com o conhecimento correto das opções do Dreamweaver, você pode organizar seus códigos na hora. Basta usar a opção "Aplicar formatação de origem" e reformá-la exatamente de acordo com suas preferências. Para tornar sua codificação limpa e organizada, clique em "Formatar código-fonte" na parte inferior da barra de ferramentas de codificação e vá para "editar > barras de ferramentas > codificação" e, em seguida, selecione as “configurações de formato de código" para definir sua configuração preferida.
Outra maneira de organizar seu script é acessar a opção de formatação em Comandos > Aplicar formatação de origem ou aplicá-la apenas em um bloco de codificação selecionando a opção Aplicar formatação de origem à seleção.
8 Codificação sem fiapos:
Não importa o quanto a Adobe equipar o Dreamweaver com ferramentas e recursos poderosos, quanto mais você trabalhar nos sites, mais trabalho terá que fazer no lado da codificação. Isso pode aumentar suas habilidades, mas também abrirá as portas para erros sem fim, porque escrever muitos códigos não é uma tarefa fácil de fazer. O Dreamweaver sabe disso, e é por isso que na versão mais recente do Dreamweaver, que é a Creative Cloud (CC), existe um recurso chamado Linting support. Linting é uma ferramenta básica de verificação de sintaxe de programação que está disponível para CSS, HTML e JavaScript. Com isso, sempre que o Dreamweaver identifica algum problema ou erro, ele envia uma série de sinalizadores gerais e específicos.
Para executar o teste, abra uma página cheia de códigos no Dreamweaver e você verá uma pequena marca de seleção verde em um círculo no lado direito da barra de status. Se houver apenas uma pequena marca de seleção verde em um círculo, está tudo bem com o seu código. Se houver uma marca de cruz vermelha circulada em vermelho, há alguns problemas com sua codificação e você precisa revisá-la para executar seu site corretamente. Além disso, ao clicar na marca do erro, você pode ir para a coluna e linha onde cometeu o erro com a descrição do erro. A melhor coisa é que não há limite para esse recurso e você pode usá-lo até não obter a marca verde.
A capacidade de navegação é uma das coisas mais básicas de todo processo de desenvolvimento web. É por isso que o Dreamweaver facilitou para você, para que você nunca perca essas coisas básicas antes de iniciar seu desenvolvimento web. Abra o documento no Dreamweaver para o qual deseja verificar a compatibilidade. Na barra de menus onde estão colocados os ícones das opções de visualização de código, divisão e desenho, existe outra opção que se chama botão “Verificar página”.
Ao clicar, abrirá um menu suspenso, selecione verificar a compatibilidade do navegador nele e veja o resultado de sua compatibilidade em uma janela separada.
10 Minimização de código:
Ao codificar para o grande site, muitas vezes acontece que um pedaço de código começa a irritá-lo na tela. Muito poucas pessoas sabem que podem minimizar esse pedaço de codificação apenas pressionando um botão do teclado. Quando tiver certeza de que não há necessidade de fazer nenhuma alteração no bloco de codificação, basta selecionar esse bloco e clicar em “-” ao lado do número da linha de código. Esse pedaço será minimizado e não o incomodará até que você o expanda.