Blog Dicas de Web Design

5 ferramentas web

5 ferramentas recentes de desenvolvimento Web que você deve conhecer

Hoje, a internet está crescendo exponencialmente. Ela também está ficando mais complexa do que nunca. Precisamos de mais ferramentas que possam nos ajudar a livrar um pouco do peso de desenvolvimento de sites. Assim, neste post, reunimos um conjunto de ferramentas modernas que vão ajudar no desenvolvimento web.

Esperemos que está lista te apresente boas ferramentas de desenvolvimento web, especialmente para aqueles de vocês que estão apenas começando.

1. CSS Pré-Processadores

less

CSS é muito fácil de escrever. A sintaxe é simples e fácil de entender. Mas, quando um projeto cresce muito, você pode ter que gerenciar várias folhas de estilos para lidar com milhares de linhas de CSS e se você conhece CSS, sabe que se torna super difícil administrar essa situação.

Este é o lugar onde CSS pré-processadores se tornam realmente úteis. CSS pré-processador nos permite escrever CSS em forma de programação com variáveis e funções, que depois é compilado em formato CSS compatível com navegadores. Também é possível reutilizar as propriedades CSS com algumas regras especiais, como @extend e @include.

Existe uma série de CSS Pré-processadores: Sass, LESS, Stylus, e Myth.

2. Template Engine (Sistema de Template)

handlebars

Criar uma página HTML estática é simples. No entanto, se você tiver várias páginas HTML para lidar em seu projeto, as coisas podem ficar fora de mão. A maioria destas páginas podem compartilhar os mesmos componentes, como um cabeçalho, a barra lateral e um rodapé.

Se você mudar alguma coisa na barra lateral, você deve alterar a barra lateral nas outras páginas, uma a uma, ou utilizar um sistema de template em vez disso?

Usando um sistema de template soa melhor para esta situação. Há agora um número de sistemas de templates que podemos usar, como o Kit, Jade, e Handlebars. Cada um tem suas próprias convenções de escrita. Kit, por exemplo, vem apenas com variáveis e capacidade de importação que são declaradas com uma tag de comentário HTML simples, assim:

  1. // exemplo de importação de template externo 
  2. <!-- @include inc/partial  -->  
  3. // esta é uma variável
  4. <!-- @var: Valor da variável --> 

Jade e Handlebars vêm muitos recursos robustos para atender a projetos mais complexos. Se você quiser construir um site estático escalável, você deve tirar vantagem de um sistema de template.

3. Task Runner (Executor de tarefas)

grunt

O processo de construir um site é consideravelmente repetitivo. Minificação, compilação, validação de código, junção de arquivos e atualização do navegador, para citar alguns. Essas são as coisas que nós provavelmente mais fazemos no desenvolvimento de projetos. Felizmente, esses processos podem ser automatizados usando um executor de tarefas, tais como Grunt e Gulp.

Você pode dizer ao Grunt para fazer um conjunto de tarefas especificadas no arquivo Gruntfile.js. Há agora uma abundância de plugins para automatizar quase tudo com Grunt, assim você não precisa escrever as suas próprias tarefas Grunt.

Digamos que você quer compilar seu arquivo LESS em CSS, você pode instalar o grunt-contrib-less. Se seu projetos estão ficando cansativos, é hora de você utilizar um executor de tarefas para agilizar o fluxo de trabalho.

4. Ferramenta de Testes Sincronizados

ghostlab

Esta é  uma ferramenta inevitável se você está construindo um site  otimizado para dispositivos móveis. Se você tem uma série de dispositivos para testar o seu site, você definitivamente precisa de testes sincronizados, que permite você testar o seu site em vários dispositivos simultaneamente.

Atualização da página, bem como as interações como clicar e rolar são refletidas em todos os dispositivos testados ao mesmo tempo, te poupando dessa ação repetitiva.

Existem duas ferramentas que você pode tentar fazer isso: um plugin para o Grunt chamado BrowserSync, e uma aplicativo gráfico chamado Ghostlab.

5. Toolkit de Desenvolvimento

codekit

Um toolkit de desenvolvimento reúne uma série de ferramentas em um único aplicativo. Se você não está confortável com a configuração baseada em texto do Grunt, uma aplicação gráfica provavelmente sera a melhor ferramenta para você.

Codekit foram os primeiros a desenvolver este tipo de aplicação, e inclui LESS, Sass, Kit, Jade, Siml, Uglify, Bower, e muito mais em sua lista de recursos.

Codekit só é compatível com o OS X (sistema operacional dos Macs da Apple). Se você estiver usando o Windows, você pode tentar Prepros, se você estiver usando Linux, tente o Koala-app.

Posts Relacionados

  • SEO - Como melhorar o ranking do seu site modificando o título da página

    O conteúdo do seu site é o elemento mais importante para ter um bom raking nos motores de buscas. Não basta apenas ter um website bonito se a informação textual da sua página é pobre e mal escrita. O título da sua página, e como o restante do conteúdo se relaciona com esse título tem um grande peso no seu ranking, especialmente para o Google. Saiba como definir seus títulos pensando no SEO da sua página.

  • Um designer organizado ganha tempo e poupa aborrecimentos.

    Bagunça e confusão não andam de mãos dadas com trabalhos de qualidade. O designer Dan Rose explica por que você deve sempre criar arquivos organizados.

Adicionar comentário


Código de segurança
Atualizar

© 2017 iDesigns Studio. Todos Direitos Reservados.
Design Gráfico e Web Design - Centro, Vitória, ES