Tag: css

Categorias
Tecnologia

Usando Grunt para compilar SCSS (Sass)

O Grunt é um gerenciador de tarefas JavaScript. O conheci pela primeira vez quando utilizei o Yeoman para desenvolver um projeto em AngularJS (leia mais).

O Sass é uma linguagem de extensão de CSS, que se auto-intitula “CSS com superpoderes”.

Precisei começar um novo projeto de frontend montando apenas os HTMLs, JavaScripts e CSSs das páginas. Então resolvi conhecer melhor o Grunt e o Sass.

Percebi que dominar essas ferramentas gera dezenas de possibilidades novas para o desenvolvimento frontend. Claro que ainda não dominei, mas vou escrever um pouco sobre o que já aprendi.

Obs: Para todos os comandos abaixo estou utilizando a linha de comando (console) do Linux.

Para instalar o Sass é necessário o package manager do Ruby, o RubyGems.

sudo su -c "gem install sass"

Para instalar o grunt-cli é necessário o package manager do Node.js, o npm. Aproveito para já instalar os pacotes que vou utilizar: grunt-contrib-sass e grunt-contrib-watch.

npm install grunt grunt-contrib-sass grunt-contrib-watch

Estou usando o Bootstrap nesse projeto, então é necessário instalar o bootstrap-sass pelo npm.

npm install boostrap-saas

Minha estrutura de diretórios será a seguinte:

  • project/
    • node_modules/
    • public/
      • css/
      • img/
      • js/
      • index.html
    • sass/
      • style.scss
    • Gruntfile.js
    • package.json

No arquivo Gruntfile.js configuramos todas as tarefas que o Grunt vai executar. No caso desta publicação faremos a preprocessamento do SCSS para CSS.

Todas as tarefas do Grunt são executadas na linha de comando (console) precedidas por “grunt”, como por exemplo “grunt watch” ou “grunt build”.

Primeiro configurei o Sass para compilar para o ambiente de desenvolvimento, nesse caso o CSS não ficará comprimido, para que eu possa vê-lo em ação. No caso da configuração para ambiente de produção ele será comprimido.

Então configuro a tarefa do grunt-watch, ela acionará a tarefa “sass:dev“, que configuramos no passo anterior, a cada mudança que eu fizer aos arquivos *.scss. Isso serve para que eu não precise rodar um comando grunt manualmente a cada alteração no SCSS, o que seria contraproducente.

Obs: Para que isso aconteça é preciso deixar o comando “grunt watch” rodando na linha de comando (console).

No final do arquivo registro as tarefas com o registerTask. No caso apenas “grunt build“, que será usado para gerar o CSS final comprimido para produção, pois a tarefa que gera os arquivos não-comprimidos para ambiente de desenvolvimento já será chamada pelo grunt-watch e não precisa ser registrada novamente.

Estas tarefas registradas ao final do arquivo servem para agregar várias tarefas a um único comando. Assim quando você precisar rodar tudo de uma vez para gerar a versão de produção, você rodorá apenas “grunt build” e todas as tarefas da lista serão executadas. No nosso caso temos apenas o Sass por enquanto, mas futuramente podemos ter diversas tarefas a serem executadas para gerar os arquivos de prod.

Vou falar mais sobre Grunt e Sass no futuro. Se tiver alguma sugestão ou dúvida sobre o conteúdo desta publicação, dexe um comentário abaixo.

Categorias
Tecnologia

Sticky navbar com Bootstrap

Como fixar a barra de navegação do Bootstrap quando a barra de rolagem chegar nela? Essa funcionalidade é chamada de Sticky Navbar.

Utilizando esse código JavaScript abaixo a barra de navegação estática (com a classe .navbar-static-top) passa a ficar fixada no topo da página (classe .navbar-fixed-top) quando a barra de rolagem atinge certa parte da página.

      var num = $('.navbar').offset().top;

      $(window).bind('scroll', function () {
          if ($(window).scrollTop() > num) {
              $('.navbar').addClass('navbar-fixed-top');
              $('.navbar').removeClass('navbar-static-top');
          } else {
              $('.navbar').addClass('navbar-static-top');
              $('.navbar').removeClass('navbar-fixed-top');
          }
      });

A variável num contém a quantidade de pixels do topo até onde a barra de rolagem vai atuar para modificar o estilo da navbar. Neste caso estou utilizando o método offset() do jQuery para verificar a altura da barra de navegação automaticamente.

As classes de navbar descritas acima são originalmente do Bootstrap (testado com o Bootstrap 3.3.2), mas com algumas adaptações pode ser utilizado em qualquer outro CSS, basta alterar os nomes das classes no código.

Esse código foi encontrado nesse JSFiddle e apenas alterei para a utilização do método offset().

Categorias
Tech

O que é Tableless?

Apesar de muito utilizada atualmente no meio da informática, principalmente em anúncios de empresas que desejam profissionais de webdesign, muitas pessoas não estão familiarizadas com a expressão Tableless.

Então vamos começar por onde o problema começou.

WYSIWYG (ou What You See Is What You Get) é uma expressão utilizada para definir programas que demonstram na tela exatamente o que você verá no resultado final. Essa expressão começou a ser utilizada para programas editores de texto, porém muitos foram (e são) os programas geradores de HTML que atuam da mesma forma, escondendo o código fonte da página de internet por trás da visão final. Um exemplo? O Adobe Dreamweaver.

No começo da popularização da internet, muitos iniciantes utilizaram esse tipo de programa para publicar sua primeira home page na grande rede. O Microsoft FrontPage foi um dos primeiros que eu conheci.

Acontece que esses programas (como o FrontPage, por exemplo) baseavam a estruturação de seu código em tabelas (ou tables). Ou seja, o que você fazia na tela gerava tabelas no código fonte para ficar do jeitinho que você via. Se você queria colocar uma imagem do lado da outra, gerava-se uma tabela com duas colunas e uma linha. Até aí, tudo certo.

O problema é que existe algo chamado semântica no html. Ou seja, cada tag do código fonte tem seu objetivo, ela existe e atua por um motivo.

No caso da tag <table> (referente à construção de tabelas) ela serve para tabelar as informações, ou seja, fazer uma tabela. Simples assim, como no Excel, por exemplo, sabe? Ou aquelas que você faz pra marcar quem está ganhando no jogo de cartas… Ela não serve para você estruturar o lay-out da página, dividir o menu, ou colocar aqueles gifs animados de personagens de anime ou games.

E é daí que vem a expressão Tableless ou, em português, Sem Tabela.

Falando de forma bem básica, um lay-out tableless é semântico e se utiliza dos blocos (ou divs) para estruturação da página.

Mas você pode perguntar o porquê disso. Eu lhe respondo, para que a página possa ser acessada por tudo e todos.

Como assim? Simples, se um browser é feito para pessoas com deficiência visual, ele usará a semântica para ler as tags html e passar a informação correta ao usuário.

Outra vantagem está em dispositivos móveis, um website tableless tem uma chance muito maior de encaixar corretamente na sua pequena tela.

Ainda existem muitas outras dicas para quem quer usar tableless, como por exemplo, não formatar NADA no código fonte. Para isto serve o CSS, ou Cascading Style Sheets. Mas isso fica para outro post.

Categorias
Tech

Portfolio Webdesign

Segue uma galeria com imagem e descrição de alguns dos trabalhos feitos no último ano na área do Webdesign. Presentes nesta lista estão hotsites, websites institucionais, lay-out de sistemas de gerenciamento, websites de vendas, informativos eletrônicos e email marketing.

Todos utilizam webstandars: Xhtml com CSS (tableless).

[nggallery id=1]