Conhecendo o Bootstrap, framework de desenvolvimento responsivo

O Bootstrap é atualmente o framework mais popular para o desenvolvimento de interface de sites e aplicações responsivas. Trabalhando com o conceito mobile first, onde a ideia é que o desenvolvedor web inicie a criação do layout a partir dos dispositivos móveis e então passe ao desenvolvimento de dispositivos maiores como tablets e pcs.

Indicado para desenvolvedores iniciantes até os mais experientes, o Bootstrap trabalha com a tríade HTML(5)+CSS(3)+Javascript(Jquery), facilitando a curva de aprendizado ao trabalhar com tecnologias amplamente utilizadas no dia a dia dos desenvolvedores.

Inicialmente este framework foi criado por Mark Otto e Jacob Thornton,que compõem a equipe de trabalho do Twitter, como um kit de ferramentas de desenvolvimento front-end destinado a organizar e agilizar a integração e manutenção do código, pois cada desenvolvedor da equipe utilizava uma biblioteca diferente, o que gerava inconsistências no produto final necessitando um retrabalho para a integração dos diferentes códigos.

A partir desse desenvolvimento inicial que ocorreu durante o primeiro Twitter Hackweek, realizado entre 22 e 29 de outubro de 2010, os dois programadores perceberam o potencial do projeto e em  19 de agosto de 2011 anunciaram a primeira versão estável do framework, distribuído da forma open-source.

Atualmente o projeto se encontra na versão 3.3.7 sendo mantido pela comunidade no formato opensource e distribuído sob a licença MIT através do repositório Github (https://github.com/twbs/bootstrap).

Principais características do Bootstrap

Sendo completamente criado em compatibilidade com os padrões do Html5 e o CSS3, o Bootstrap foi desenvolvido inicialmente utilizando o pré-processador LESS, ferramenta usada para gerar folhas de estilo css, e suportando também o pré-processador SASS, agilizando o desenvolvimento da interface de sites html, não sendo necessário em um primeiro momento que o programador web digite uma linha de CSS sequer, ao mesmo tempo que oferece uma interface amigável e moderna sendo expandido com temas desenvolvidos por terceiros, além de possuir uma vasta gama de componentes de interface, tais como:

• ícones;
• menus de contexto;
• grupos de botões;
• barras de navegação;
• alertas;
• barras de progresso;

Utiliza um sistema de grids que facilita a criação de sites responsivos, fixos ou fluídos e completamente adaptados para os mais variados dispositivos, com foco inicial no desenvolvimento para dispositivos móveis.

Em conjunto com o framework Jquery (Javascript), contém uma grande diversidade de plugins que auxiliam o programador a implementar um interface mais rica sem a menor dificuldade, apenas alterando algumas configurações do plugin desejado, além de estarem completamente integrados com as classes de interface do Bootstrap.

Por ser um dos frameworks front-end mais utilizados atualmente, possui farta documentação que pode ser encontrada na internet sendo que o próprio projeto disponibiliza em seu site oficial (http://getbootstrap.com/) exemplos de utilização do framework.

Futuro do Projeto

Em agosto de 2013 foi lançada a atual versão do Bootstrap (v3), sendo que atualmente está em desenvolvimento a versão 4 do framework, que promete várias novidades entre elas:

• Mudança de LESS para SASS;
• Melhorias no sistema de grids;
• Novas opções de customização;
• Reescrita dos plugins;
• Melhoria na documentação;
• Fim do suporte ao IE8;

O plano de desenvolvimento prevê o lançamento de algumas versões alpha, duas versões betas, duas releases candidates para então lançar a versão final.

Apesar do desenvolvimento da nova versão a equipe do projeto prometeu continuar com a manutenção da versão 3 do framework, através da correção de bugs críticos e melhorias na documentação.

Mão na Massa: Baixando e instalando o Bootstrap

O primeiro passo é fazer o download do arquivo de instalação, para tanto devemos acessar o site oficial do projeto (http://getbootstrap.com/), e clicar no botão Dowload Bootstrap, como pode ser visto na figura 1.

Figura 1: Tela para downloado do bootstrap.

O site será encaminhado para a área de download onde encontra-se várias opções de instalação, a mais comum é fazer o download dos arquivos compactados, que estão disponibilizados em três versões como podemos ver na figura 2.

Figura 2: Opções de download

1 – Bootstrap: Esta é a versão simplificada do bootstrap, ela contém os arquivos – compilados e reduzidos(para um carregamento mais rápido da página) – CSS, JavaScript e as fontes. Nesta versão não está incluído a documentação e nem os arquivos fontes.

2 – Source Code: Possui o código fonte Less dos arquivos CSS, JavaScript, fontes e a documentação do framework, além de exemplos (também disponíveis no site oficial). Para utilização dos arquivos Less é necessário um compilador Less e a configuração dos arquivos.

3 – Sass: Arquivos portados para de Less para Sass para utilização de projetos Ruby, Compass ou Sass.

Nos nossos exemplos usaremos a versão 1 (bootstrap), para tanto clique em Download Bootstrap e será então baixado um arquivo .zip que contém os arquivos necessários para a criação dos projetos.

Após o download descompacte o arquivo em e renomeie a pasta criada para projetos, como mostra a figura 3, ela será utilizada para criação dos exemplos.

Figura 3: Pasta com arquivos descompactados

Outras formas de instalação

CDN: Além das três opções de download o site MaxCDN disponibiliza links para inclusão direta nas página internet, não necessitando fazer o donwload dos arquivos para utilização nos projetos.

Também é possível fazer o controle dos arquivos instalados através de gerenciadores de dependência (pacotes) .

Bower: Gerenciador de dependência também criado pela equipe do Twitter que serve principalmente para controlar os pacotes front-end de um projeto.

NMP: Gerenciador de dependência JavaScript, que utiliza o NodeJS.

Composer: Gerenciador de pacotes PHP.

Finalizando a instalação

Além dos arquivos do bootstrap para que o framework funcione de forma adequada é necessário a instalação do Jquery, para tanto faremos o acesso a página do projeto Jquery e clique na opção Download Jquery, como mostrado na figura 4.

Figura 4: Tela de download do Jquery

O site será encaminhado para a área de download do jquery, para baixar o arquivo vamos clicar com o botão direito em cima do link Download the compressed, production jQuery 3.1.1, e selecionar a opção salvar como, como mostrado na figura 5.

Figura 5: Salvando o arquivo Jquery.

Salve o arquivo na pasta projetos/js e renomeie para jquery.min.js.

Entendo a estrutura de arquivos do bootstrap

A estrutura do framework possui três pastas distintas que contém os arquivos básicos para iniciar a desenvolver os projetos utilizando o bootstrap. Os arquivo css e js possuem as versões normais e as versões reduzidas (.min), ao fazer a referência no arquivo html pode ser utilizado tanto a versão normal quanto a reduzida, na prática a versão normal é mais fácil para fazer a leitura do código fonte caso haja necessidade de fazer alteração em alguma parte do arquivo já a versão reduzida agiliza o processo de carregamento da página, deixando o processo mais rápido devido a compactação do arquivo. Agora vamos entender os arquivos apresentados na figura 6.

Figura 6: Estrutura de arquivo do bootstrap

  

A pasta css contém os arquivos de estilização do framework, esses arquivos já estão compilados e prontos para uso e são a base para a interface do projeto. O arquivo mais importante é o bootstrap.css (ou min na sua versão reduzida), esse arquivo precisa estar obrigatoriamente vinculado a página em html para poder utilizar os recurso do bootstrap, já o arquivo bootstrap-theme adiciona efeitos especiais em vários componentes de interface não sendo obrigatório sua utilização.

Os arquivos com extensão .map são utilizados apenas no momento de desenvolvimento para mapear os arquivos em ferramentas de debug, eles não não obrigatórios em ambientes de produção.

Em resumo a princípio precisamos apenas vincular o arquivo bootstrap.css ou o bootstrap.min.css, caso haja a necessidade de fazer alguma alteração nos estilos do tema padrão podemos criar um arquivo css extra para tais alterações.

Exemplo de código:

Já a pasta js contém os scripts javascript e os a programação dos plugins nativos do framework, para o funcionamento destes plugins precisamos vincular o arquivo do jquery que baixamos do site do projeto e salvamos na pasta em questão, sendo obrigatório o vínculo na página html do arquivo jquery.min.js e o bootstrap.js ou sua versão reduzida bootstrap.min.js

Exemplo de código:

Função e procedimento

O que é uma função/procedimento

Podemos dizer que funções/procedimentos são sub-rotinas que executam uma tarefa particular. Todas as linguagens de programação atuais possuem formas de se criar sub-rotinas incluindo C++, JAVA, C# e Object Pascal (Delphi). Além do programador poder criar suas próprias sub-rotinas, a própria linguagem de programação tem sub-rotinas que facilitam o trabalho do programador. Como exemplo podemos citar funções matemáticas para calculo de seno, coseno e tangente, funções de texto que podem pegar partes de um texto(substring), contar a quantidade de caracteres, transformar tudo em maiúsculo, etc.

Qual sua utilidade

Elas são muito utilizadas para organizar a programação, criando sub-rotinas que poderão ser reutilizadas em várias partes do programa, evitando assim que um mesmo código de programação tenha que ser reescrito várias vezes. Outra característica importante é o fato de que quando criamos uma função ou procedimento, caso ela possua algum erro é mais fácil de corrigir pois teremos que mudar apenas a sub-rotina e dessa forma, todos os locais onde são chamados essas sub-rotinas já estarão corrigidos. Isso facilita a manutenção do programa.

Qual a diferença entre uma função e um procedimento

A principal diferença entre uma função e um procedimento está no fato de que uma função obrigatoriamente retorna um valor, enquanto que um procedimento não retorna valor algum, ou seja o procedimento apenas executa uma ação. No caso do Pascal(Object Pascal/Delphi) o comando para criar uma função é diferente do comando para criar um procedimento, como veremos abaixo.

Como criar uma função ou procedimento

Uma função/procedimento é constituída por 3 partes:

• Cabeçalho: No cabeçalho você define o nome da função/procedimento, os parâmetros que serão passados para a mesma(não é obrigatório) e no caso da função, qual o tipo de retorno que ela terá.
• Variáveis: Caso seja necessário pode-se definir variáveis de apoio que só serão poderão ser utilizadas dentro da sub-rotina(variáveis locais). Os valores dessas variáveis são automaticamente descartadas quando a sub-rotina é finalizada.
• Programação: Este é o local que contém o código de programação da sub-rotina.

Pascal (Object Pascal, Delphi)
Procedimento

procedure NomeDaProcedure(Parâmetro1: Tipo; ParâmetroN: Tipo);
var
{declaração de variáveis locais, quando necessárias}
Begin

   {bloco de instruções}

end;

Exemplo:

program ProcTesteSoma;

procedure soma(n1,n2:integer);
begin
   Write('A soma dos números é: ',(n1+n2));
   readln;
end;

begin
   Soma(10,20);
end.

Função

Diferente do procedimento, devemos definir que tipo de dado a função vai retornar, e dentro do bloco de instruções devemos incluir um comando para retornar o valor da função, no caso do pascal usamos o próprio nome da função, em Object Pascal podemos utilizar o nome da função ou o comando Result, que é o mais recomendado quando estamos trabalhando orientado a objetos.

function NomeDaFunção(Parâmetro1: Tipo; ParâmetroN: Tipo): Tipo de retorno;
Var
{declaração de variáveis locais, quando necessárias}
Begin

   {bloco de instruções}
   NomeDaFunção := [ValordeRetorno]; ou Result := [Valor de Retorno];

end;

Exemplo:

program FuncTesteSoma;

function soma(n1,n2:integer):integer;
begin
   soma := (n1+n2); 
end;

begin
   Write('A soma dos números é: ',Soma(10,20));
   readln;   
end.

Outras Linguagens

Em outras linguagens de programação, para criação de uma função usamos o mesmo comando a diferença está no retorno da sub-rotina.

PHP

[+/-] Mostrar/Ocultar

Procedimento

function NomedaProcedure($parametro1,$parametroN){
    
   /* bloco de instruções */

}

Exemplo:

Função

function NomedaFuncao($parametro1,$parametroN){
    
   /* bloco de instruções */
   return([ValordeRetorno]);
}

Exemplo:

Java

[+/-] Mostrar/Ocultar

Na linguagem java não existe funções e procedimentos e sim métodos, os métodos podem ou não retornar um valor, semelhante aos procedimentos e funções, utiliza-se palavra reservada void para indicar que o método não tem retorno.

Procedimento

    public void nomeDaProcedure(tipo parametro1, tipo paramentroN){
       
      /* bloco de instruções */

    }

Exemplo:

public class ProcTesteSoma {

     public static void main(String[] args) {
        soma(10,20);
    }
    
    public static void soma(int n1, int n2){
       System.out.println("A soma é: "+(n1+n2));
    }
    
}

Função

    public int nomeDaFunção(tipo parametro1, tipo paramentroN){
       
      /* bloco de instruções */
      return [valorDeRetorno];

    }

Exemplo:

public class FuncTesteSoma {

     public static void main(String[] args) {
       System.out.println("A soma é: "+soma(10,20));
    }
    
    public static int soma(int n1, int n2){
       return n1+n2;
    }
    
}

C#

[+/-] Mostrar/Ocultar

Assim como na linguagem java, em C# não existe funções e procedimentos e sim métodos, e utiliza-se a palavra reservada void para indicar que o método não tem retorno.

Procedimento

    public void nomeDaProcedure(tipo parametro1, tipo paramentroN)
   {
       
      /* bloco de instruções */

    }

Exemplo:

using System;

namespace ProcTesteSoma
{
 class MainClass
 {
  public static void Main (string[] args)
  {
     Soma(10,20); 

  }
  
  public static void Soma (int n1, int n2)
  {
   Console.WriteLine("A soma dos numeros é: "+(n1+n2));
  }
 }
}

Função

    public int nomeDaFunção(tipo parametro1, tipo paramentroN){
       
      /* bloco de instruções */
      return ([valorDeRetorno]);

    }

Exemplo:

using System;

namespace FuncTesteSoma
{
 class MainClass
 {
  public static void Main (string[] args)
  {
     Console.WriteLine("A soma dos numeros é: "+Soma(10,20)); 

  }
  
  public static int Soma (int n1, int n2)
  {
   return (n1+n2);
  }
 }
 
}

Para entender sobre passagem de parâmetros clique aqui. Link

Passagem de parâmetros

Na maioria das vezes precisamos passar argumentos(informações) do programa principal para uma função(para saber mais sobre funções clique aqui), para tanto utilizamos parâmetros, que nada mais são do que os valores de entrada de uma função. Os parâmetros são definidos no cabeçalho da função e podemos passar quantos parâmetros forem necessários. Existem duas maneiras de se passar os argumentos por valor e/ou por referência.

Qual a diferença entre um argumento passado por valor e por referência?

Quando passamos um parâmetro por valor a função recebe uma cópia do argumento que está sendo enviado, enquanto que quando passamos o valor por referência, passamos na verdade a referência do argumento, ou seja seu endereço na memória. Na prática, quando passamos o argumento por valor, mesmo que haja uma alteração do argumento dentro da função, essa alteração não reflete na variável externa, enquanto que na referência quando existe uma alteração dentro do argumento da função ela refletirá diretamente na variável externa, alterando seu valor.

Pascal (Object Pascal, Delphi)
Passagem por valor:

function NomeDaFuncao(Parâmetro1: Tipo; ParâmetroN: Tipo): Tipo de retorno;
var
{declaração de variáveis locais, quando necessárias}
Begin

   {bloco de instruções}

end;

Passagem por referência:
Em pascal para passarmos um parâmetro por referência devemos precedê-lo da palavra reservada var.

function NomeDaFuncao(var Parâmetro1: Tipo; var ParâmetroN: Tipo): Tipo de retorno;
var
{declaração de variáveis locais, quando necessárias}
Begin

   {bloco de instruções}

end; 

Outras Linguagens

PHP

[+/-] Mostrar/Ocultar

Em PHP para passarmos um parâmetro por referência devemos precede-lo do símbolo &.
Passagem por valor:

function NomedaFuncao($parametro1,$parametroN){
    
   /* bloco de instruções */

}

Passagem por referência:

function NomedaFuncao(&$parametro1,&$parametroN){
    
   /* bloco de instruções */

}

Java

[+/-] Mostrar/Ocultar

Em java só existe passagem de parâmetros por valor, para saber mais clique aqui.
Passagem por valor:

void NomedaFuncao (Tipo parametro1, Tipo parametroN){
        
   //bloco de instruções

}

C#

[+/-] Mostrar/Ocultar

Em C# pode-se fazer a passagem de parâmetros de 3 maneiras: Por valor, por referência e por saída. A passagem por valor funciona da mesma maneira, já por saída é muito semelhante a passagem por referência, a diferença é que por referência é necessário realizar a inicialização da variável no local da chamada da função, enquanto que na passagem por saída não é necessário inicializar a variável, para saber mais clique aqui.

Passagem por valor:

void NomedaFuncao (Tipo parametro1, Tipo parametroN){
        
   //bloco de instruções

}

Passagem por referência:
Na passagem por referência deve-se colocar a palavra-chave ref.

void NomedaFuncao (ref Tipo parametro1, ref Tipo parametroN){
        
   //bloco de instruções

}

Passagem por saída:
Na passagem por saída deve-se colocar a palavra-chave out.

void NomedaFuncao (out Tipo parametro1, out Tipo parametroN){
        
   //bloco de instruções

}

Função para verificar CPF

Muitas vezes precisamos fazer a validação de CPF e do CNPJ, seja por que cliente solicitou essa função no sistema ou até mesmo para se manter a integridade do sistema. Tanto o CPF como o CNPJ possui dígito verificador que serve para fazer a validação do número digitado, para conhecer como é feito o cálculo clique aqui. Veremos agora como criar uma função para fazer a validação desses campos (para saber com o que é uma função clique aqui).

A primeira função é para fazer a validação do CPF, deve ser passado como parâmetro o número que será testado(apenas números), a função então retornará verdadeiro ou falso.

Para gerar um CPF válido para testar a função clique aqui.

Delphi/Pascal

[+/-] Mostrar/Ocultar

function isCPF(num: string): boolean;
var
  n1,n2,n3,n4,n5,n6,n7,n8,n9: integer;
  d1,d2: integer;
  digitado, calculado: string;
begin
   // Pega os 9 primeiros números
   n1:=StrToInt(num[1]);
   n2:=StrToInt(num[2]);
   n3:=StrToInt(num[3]);
   n4:=StrToInt(num[4]);
   n5:=StrToInt(num[5]);
   n6:=StrToInt(num[6]);
   n7:=StrToInt(num[7]);
   n8:=StrToInt(num[8]);
   n9:=StrToInt(num[9]);

   // Faz o cálculo do primeiro dígito
   d1:=n9*2+n8*3+n7*4+n6*5+n5*6+n4*7+n3*8+n2*9+n1*10;
   d1:=11-(d1 mod 11);
   if d1>=10 then d1:=0; //Se o cálculo for igual a 10 então ele é zero 

   //Faz o calculo do segundo digito
   d2:=d1*2+n9*3+n8*4+n7*5+n6*6+n5*7+n4*8+n3*9+n2*10+n1*11;
   d2:=11-(d2 mod 11);
   if d2>=10 then d2:=0; //se o cálculo for igual a 10 então ele é zero

   calculado:=inttostr(d1)+inttostr(d2); //Define o que foi calculado
   digitado:=num[10]+num[11]; //Define o que foi digitado

   //Se o número que foi calculado for igual ao que foi digitado
   //a função retorna verdadeiro, senão retorna falso
   Result := (calculado=digitado);
end;

Java

[+/-] Mostrar/Ocultar

    static boolean isCpf(String cpf) {
        int n1,n2,n3,n4,n5,n6,n7,n8,n9;
        int d1,d2;
        String digitado, calculado;

        // Pega os 9 primeiros números
        n1 = (int)cpf.charAt(0)-48;
        n2 = (int)cpf.charAt(1)-48;
        n3 = (int)cpf.charAt(2)-48;
        n4 = (int)cpf.charAt(3)-48;
        n5 = (int)cpf.charAt(4)-48;
        n6 = (int)cpf.charAt(5)-48;
        n7 = (int)cpf.charAt(6)-48;
        n8 = (int)cpf.charAt(7)-48;
        n9 = (int)cpf.charAt(8)-48;
        
        // Faz o cálculo do primeiro dígito
        d1 = n9*2+n8*3+n7*4+n6*5+n5*6+n4*7+n3*8+n2*9+n1*10;
        d1 = 11-(d1 % 11);
        if (d1 >= 10){
            d1 = 0;
        }

        // Faz o cálculo do segundo dígito
        d2 = d1*2+n9*3+n8*4+n7*5+n6*6+n5*7+n4*8+n3*9+n2*10+n1*11;
        d2 = 11-(d2 % 11);
        if (d2 >= 10){
            d2 = 0;
        }

        calculado = Integer.toString(d1)+Integer.toString(d2);//Define o que foi calculado
        digitado = cpf.substring(9,11); //Define o que foi digitado


        //Se o número que foi calculado for igual ao que foi digitado
        //a função retorna verdadeiro, senão retorna falso
        return (calculado.equals(digitado));
    }

PHP

[+/-] Mostrar/Ocultar

function isCPF($cpf){
 
 // Pega os 9 primeiros números  
 $n1 = $cpf{0};
 $n2 = $cpf{1};
 $n3 = $cpf{2};
 $n4 = $cpf{3};
 $n5 = $cpf{4};
 $n6 = $cpf{5};
 $n7 = $cpf{6};
 $n8 = $cpf{7};
 $n9 = $cpf{8};
    
 // Faz o cálculo do primeiro dígito
 $d1 = $n9*2+$n8*3+$n7*4+$n6*5+$n5*6+$n4*7+$n3*8+$n2*9+$n1*10;
 $d1 = 11-($d1 % 11);
 if ($d1>=10) { $d1 = 0; } //Se o cálculo for igual a 10 então ele é zero 
    
 //Faz o calculo do segundo digito
 $d2 = $d1*2+$n9*3+$n8*4+$n7*5+$n6*6+$n5*7+$n4*8+$n3*9+$n2*10+$n1*11;
 $d2 = 11-($d2 % 11);
 if ($d2>=10) { $d2 = 0; } //se o cálculo for igual a 10 então ele é zero
    
 $calculado = $d1.$d2; //Define o que foi calculado
 $digitado = $cpf{9}.$cpf{10}; //Define o que foi digitado
 
 //Se o número que foi calculado for igual ao que foi digitado
 //a função retorna verdadeiro, senão retorna falso
 return (strcmp($calculado, $digitado) == 0);
}

C#

[+/-] Mostrar/Ocultar

public static bool isCpf(string cpf) {
   int n1,n2,n3,n4,n5,n6,n7,n8,n9;
   int d1,d2;
   string digitado, calculado;
 
   // Pega os 9 primeiros números
   n1 = Convert.ToInt32(cpf.Substring(0,1)); 
   n2 = Convert.ToInt32(cpf.Substring(1,1));
   n3 = Convert.ToInt32(cpf.Substring(2,1));
   n4 = Convert.ToInt32(cpf.Substring(3,1));
   n5 = Convert.ToInt32(cpf.Substring(4,1));
   n6 = Convert.ToInt32(cpf.Substring(5,1));
   n7 = Convert.ToInt32(cpf.Substring(6,1));
   n8 = Convert.ToInt32(cpf.Substring(7,1));
   n9 = Convert.ToInt32(cpf.Substring(8,1));
   
   // Faz o cálculo do primeiro dígito
   d1 = n9*2+n8*3+n7*4+n6*5+n5*6+n4*7+n3*8+n2*9+n1*10;
   d1 = 11-(d1 % 11);
   if (d1 >= 10){
      d1 = 0;
   }
 
   // Faz o cálculo do segundo dígito
   d2 = d1*2+n9*3+n8*4+n7*5+n6*6+n5*7+n4*8+n3*9+n2*10+n1*11;
   d2 = 11-(d2 % 11);
   if (d2 >= 10){
      d2 = 0;
   }
 
   calculado = Convert.ToString(d1)+Convert.ToString(d2);//Define o que foi calculado
   digitado = cpf.Substring(9,2); //Define o que foi digitado
 
   //Se o número que foi calculado for igual ao que foi digitado
   //a função retorna verdadeiro, senão retorna falso
   return (calculado.Equals(digitado));
}

Função para verificar CNPJ

Agora a função que calcula o CNPJ, lembrando que essa função é semelhante a função que calcula o CPF, para saber mais clique aqui.

Para gerar um CNPJ válido para testar a função clique aqui.

Delphi/Pascal

[+/-] Mostrar/Ocultar

function isCNPJ(num: string): boolean;
var
   n1,n2,n3,n4,n5,n6,n7,n8,n9,n10,n11,n12: integer;
   d1,d2: integer;
   digitado, calculado: string;
begin
   //Pega os 12 primeiros números
   n1:=StrToInt(num[1]);
   n2:=StrToInt(num[2]);
   n3:=StrToInt(num[3]);
   n4:=StrToInt(num[4]);
   n5:=StrToInt(num[5]);
   n6:=StrToInt(num[6]);
   n7:=StrToInt(num[7]);
   n8:=StrToInt(num[8]);
   n9:=StrToInt(num[9]);
   n10:=StrToInt(num[10]);
   n11:=StrToInt(num[11]);
   n12:=StrToInt(num[12]);

   //Verifica o primeiro dígito
   d1:=n12*2+n11*3+n10*4+n9*5+n8*6+n7*7+n6*8+n5*9+n4*2+n3*3+n2*4+n1*5;
   d1:=11-(d1 mod 11);
   if d1>=10 then d1:=0; //se o cálculo for igual a 10 então ele é zero   

   //Verifica o segundo dígito
   d2:=d1*2+n12*3+n11*4+n10*5+n9*6+n8*7+n7*8+n6*9+n5*2+n4*3+n3*4+n2*5+n1*6;
   d2:=11-(d2 mod 11);
   if d2>=10 then d2:=0; //se o cálculo for igual a 10 então ele é zero

   calculado:=inttostr(d1)+inttostr(d2);//Define o que foi calculado 
   digitado:=num[13]+num[14]; //Define o que foi digitado

   //Se o número que foi calculado for igual ao que foi digitado
   //a função retorna verdadeiro, senão retorna falso
   Result := (calculado=digitado);
end;

Java

[+/-] Mostrar/Ocultar

static boolean isCnpj(String cnpj) {
        int n1,n2,n3,n4,n5,n6,n7,n8,n9,n10,n11,n12;
        int d1,d2;
        String digitado, calculado;

        // Pega os 12 primeiros números
        n1 = (int)cnpj.charAt(0)-48;
        n2 = (int)cnpj.charAt(1)-48;
        n3 = (int)cnpj.charAt(2)-48;
        n4 = (int)cnpj.charAt(3)-48;
        n5 = (int)cnpj.charAt(4)-48;
        n6 = (int)cnpj.charAt(5)-48;
        n7 = (int)cnpj.charAt(6)-48;
        n8 = (int)cnpj.charAt(7)-48;
        n9 = (int)cnpj.charAt(8)-48;
        n10 = (int)cnpj.charAt(9)-48;
        n11 = (int)cnpj.charAt(10)-48;
        n12 = (int)cnpj.charAt(11)-48;

        // Faz o cálculo do primeiro dígito
        d1 = n12*2+n11*3+n10*4+n9*5+n8*6+n7*7+n6*8+n5*9+n4*2+n3*3+n2*4+n1*5;
        d1 = 11-(d1 % 11);
        if (d1 >= 10){
            d1 = 0;
        }

        // Faz o cálculo do segundo dígito
        d2 = d1*2+n12*3+n11*4+n10*5+n9*6+n8*7+n7*8+n6*9+n5*2+n4*3+n3*4+n2*5+n1*6;
        d2 = 11-(d2 % 11);
        if (d2 >= 10){
            d2 = 0;
        }

        calculado = Integer.toString(d1)+Integer.toString(d2);//Define o que foi calculado
        digitado = cnpj.substring(12,14); //Define o que foi digitado

        //Se o número que foi calculado for igual ao que foi digitado
        //a função retorna verdadeiro, senão retorna falso
        return (calculado.equals(digitado));
    }

PHP

[+/-] Mostrar/Ocultar

function isCNPJ($cnpj){
 
 // Pega os 12 primeiros números  
 $n1 = $cnpj{0};
 $n2 = $cnpj{1};
 $n3 = $cnpj{2};
 $n4 = $cnpj{3};
 $n5 = $cnpj{4};
 $n6 = $cnpj{5};
 $n7 = $cnpj{6};
 $n8 = $cnpj{7};
 $n9 = $cnpj{8};
 $n10 = $cnpj{9};
 $n11 = $cnpj{10};
 $n12 = $cnpj{11};
  
 // Faz o cálculo do primeiro dígito
 $d1 = $n12*2+$n11*3+$n10*4+$n9*5+$n8*6+$n7*7+$n6*8+$n5*9+$n4*2+$n3*3+$n2*4+$n1*5;
 $d1 = 11-($d1 % 11);
 if ($d1>=10) { $d1 = 0; } //Se o cálculo for igual a 10 então ele é zero 
   
 //Faz o calculo do segundo digito
 $d2 = $d1*2+$n12*3+$n11*4+$n10*5+$n9*6+$n8*7+$n7*8+$n6*9+$n5*2+$n4*3+$n3*4+$n2*5+$n1*6;
 $d2 = 11-($d2 % 11);
 if ($d2>=10) { $d2 = 0; } //se o cálculo for igual a 10 então ele é zero
    
 $calculado = $d1.$d2; //Define o que foi calculado
 $digitado = $cnpj{12}.$cnpj{13}; //Define o que foi digitado

 //Se o número que foi calculado for igual ao que foi digitado
 //a função retorna verdadeiro, senão retorna falso
 return (strcmp($calculado, $digitado) == 0);
}

C#

[+/-] Mostrar/Ocultar

public static bool isCNPJ(string cnpj) {
   int n1,n2,n3,n4,n5,n6,n7,n8,n9,n10,n11,n12;
   int d1,d2;
   string digitado, calculado;
 
   // Pega os 12 primeiros números
   n1 = Convert.ToInt32(cnpj.Substring(0,1)); 
   n2 = Convert.ToInt32(cnpj.Substring(1,1));
   n3 = Convert.ToInt32(cnpj.Substring(2,1));
   n4 = Convert.ToInt32(cnpj.Substring(3,1));
   n5 = Convert.ToInt32(cnpj.Substring(4,1));
   n6 = Convert.ToInt32(cnpj.Substring(5,1));
   n7 = Convert.ToInt32(cnpj.Substring(6,1));
   n8 = Convert.ToInt32(cnpj.Substring(7,1));
   n9 = Convert.ToInt32(cnpj.Substring(8,1));
   n10 = Convert.ToInt32(cnpj.Substring(9,1));
   n11 = Convert.ToInt32(cnpj.Substring(10,1));
   n12 = Convert.ToInt32(cnpj.Substring(11,1));
   
   // Faz o cálculo do primeiro dígito
   d1 = n12*2+n11*3+n10*4+n9*5+n8*6+n7*7+n6*8+n5*9+n4*2+n3*3+n2*4+n1*5;
   d1 = 11-(d1 % 11);
   if (d1 >= 10){
      d1 = 0;
   }

   // Faz o cálculo do segundo dígito
   d2 = d1*2+n12*3+n11*4+n10*5+n9*6+n8*7+n7*8+n6*9+n5*2+n4*3+n3*4+n2*5+n1*6;
   d2 = 11-(d2 % 11);
   if (d2 >= 10){
      d2 = 0;
   }
 
   calculado = Convert.ToString(d1)+Convert.ToString(d2);//Define o que foi calculado
   digitado = cnpj.Substring(12,2); //Define o que foi digitado

   //Se o número que foi calculado for igual ao que foi digitado
   //a função retorna verdadeiro, senão retorna falso
   return (calculado.Equals(digitado));
}

Utilizando funções do turbo pascal no delphi

Para as aulas de lógica de programação, a linguagem de apoio que utilizo é o pascal, pois essa linguagem é muito parecida com os pseudocódigos, mas ao invés de usar o turbo pascal ou o pascalzim, eu prefiro utilizar o Delphi selecionando o projeto como console application(file/new/other/console application), pois já vai acostumando o aluno a trabalhar com a IDE. Mas muitas vezes encontramos dificuldades ao utiliza-lo pois alguns comandos que existiam no Turbo Pascal 7, não existe no Delphi, como por exemplo ReadKey, KeyPressed, Gotoxy. Porém eu encontrei na internet uma biblioteca para o delphi que simula esses comandos (clique aqui para baixar). Para utilizar é só jogar o arquivo console.pas na mesma pasta do seu programa e na clausula uses, adicione a biblioteca console. Divirta-se.