tag:blogger.com,1999:blog-57166763762755156382024-02-08T04:52:36.580-08:00Dicas de ProgramaçãoNelson Sadala Tavareshttp://www.blogger.com/profile/10889321841975083675noreply@blogger.comBlogger6125tag:blogger.com,1999:blog-5716676376275515638.post-17252068528999175302017-12-13T15:56:00.000-08:002017-12-13T15:56:21.876-08:00Conhecendo o Bootstrap, framework de desenvolvimento responsivo<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important;">
<span style="box-sizing: border-box;">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.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">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.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">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.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">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.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">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 (</span><a href="https://github.com/twbs/bootstrap" style="background-color: transparent; box-sizing: border-box; color: #3989cf; text-decoration-line: none;">https://github.com/twbs/bootstrap</a><span style="box-sizing: border-box;">).</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<br /></div>
<h2 style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", sans-serif; letter-spacing: -0.05em; line-height: 1.1; margin: 0px 0px 15px;">
<b style="box-sizing: border-box;">Principais características do Bootstrap</b></h2>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">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:</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<br /></div>
<ul style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.11em; margin-bottom: 10px; margin-top: 0px; padding-left: 24px;">
<li style="box-sizing: border-box; line-height: 1.6;"><span style="box-sizing: border-box;">ícones;</span></li>
<li style="box-sizing: border-box; line-height: 1.6;"><span style="box-sizing: border-box;">menus de contexto;</span></li>
<li style="box-sizing: border-box; line-height: 1.6;"><span style="box-sizing: border-box;">grupos de botões;</span></li>
<li style="box-sizing: border-box; line-height: 1.6;"><span style="box-sizing: border-box;">barras de navegação;</span></li>
<li style="box-sizing: border-box; line-height: 1.6;"><span style="box-sizing: border-box;">alertas;</span></li>
<li style="box-sizing: border-box; line-height: 1.6;"><span style="box-sizing: border-box;">barras de progresso;</span></li>
</ul>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<br /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">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.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">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.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">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 (</span><a href="http://getbootstrap.com/" style="background-color: transparent; box-sizing: border-box; color: #3989cf; text-decoration-line: none;">http://getbootstrap.com/</a><span style="box-sizing: border-box;">) exemplos de utilização do framework.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<br /></div>
<h2 style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", sans-serif; letter-spacing: -0.05em; line-height: 1.1; margin: 0px 0px 15px;">
<b style="box-sizing: border-box;">Futuro do Projeto</b></h2>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">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:</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<br /></div>
<ul style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.11em; margin-bottom: 10px; margin-top: 0px; padding-left: 24px;">
<li style="box-sizing: border-box; line-height: 1.6;"><span style="box-sizing: border-box;">Mudança de LESS para SASS;</span></li>
<li style="box-sizing: border-box; line-height: 1.6;"><span style="box-sizing: border-box;">Melhorias no sistema de grids;</span></li>
<li style="box-sizing: border-box; line-height: 1.6;"><span style="box-sizing: border-box;">Novas opções de customização;</span></li>
<li style="box-sizing: border-box; line-height: 1.6;"><span style="box-sizing: border-box;">Reescrita dos plugins;</span></li>
<li style="box-sizing: border-box; line-height: 1.6;"><span style="box-sizing: border-box;">Melhoria na documentação;</span></li>
<li style="box-sizing: border-box; line-height: 1.6;"><span style="box-sizing: border-box;">Fim do suporte ao IE8;</span></li>
</ul>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<br /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">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.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">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.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<br /></div>
<h2 style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", sans-serif; letter-spacing: -0.05em; line-height: 1.1; margin: 0px 0px 15px;">
<b style="box-sizing: border-box;">Mão na Massa: Baixando e instalando o Bootstrap</b></h2>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">O primeiro passo é fazer o download do arquivo de instalação, para tanto devemos acessar o site oficial do projeto (</span><a href="http://getbootstrap.com/" style="background-color: transparent; box-sizing: border-box; color: #3989cf; text-decoration-line: none;">http://getbootstrap.com/</a><span style="box-sizing: border-box;">), e clicar no botão Dowload Bootstrap, como pode ser visto na figura 1.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<img alt="figura1" class="alignnone size-medium wp-image-403" height="280" sizes="(max-width: 630px) 100vw, 630px" src="https://sigmaplus.net.br/wp-content/uploads/figura1-630x280.png" srcset="https://www.sigmaplus.net.br/wp-content/uploads/figura1-630x280.png 630w, https://www.sigmaplus.net.br/wp-content/uploads/figura1-60x27.png 60w, https://www.sigmaplus.net.br/wp-content/uploads/figura1.png 1101w" style="border-radius: 4px; border: 0px; box-sizing: border-box; margin: 0px; padding: 0px; vertical-align: middle;" width="630" /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">Figura 1: Tela para downloado do bootstrap.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<br /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">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.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<img alt="figura2" class="alignnone size-medium wp-image-404" height="266" sizes="(max-width: 630px) 100vw, 630px" src="https://sigmaplus.net.br/wp-content/uploads/figura2-630x266.png" srcset="https://www.sigmaplus.net.br/wp-content/uploads/figura2-630x266.png 630w, https://www.sigmaplus.net.br/wp-content/uploads/figura2-60x25.png 60w, https://www.sigmaplus.net.br/wp-content/uploads/figura2.png 809w" style="border-radius: 4px; border: 0px; box-sizing: border-box; margin: 0px; padding: 0px; vertical-align: middle;" width="630" /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">Figura 2: Opções de download</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<br /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">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.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">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.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">3 – Sass: Arquivos portados para de Less para Sass para utilização de projetos Ruby, Compass ou Sass.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">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.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">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.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<img alt="figura3" class="alignnone size-medium wp-image-405" height="246" sizes="(max-width: 630px) 100vw, 630px" src="https://sigmaplus.net.br/wp-content/uploads/figura3-630x246.png" srcset="https://www.sigmaplus.net.br/wp-content/uploads/figura3-630x246.png 630w, https://www.sigmaplus.net.br/wp-content/uploads/figura3-60x23.png 60w, https://www.sigmaplus.net.br/wp-content/uploads/figura3.png 766w" style="border-radius: 4px; border: 0px; box-sizing: border-box; margin: 0px; padding: 0px; vertical-align: middle;" width="630" /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">Figura 3: Pasta com arquivos descompactados</span></div>
<h3 style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", sans-serif; font-size: 24px; letter-spacing: -0.05em; line-height: 1.1; margin: 0px 0px 15px;">
</h3>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<br /></div>
<h3 style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", sans-serif; font-size: 24px; letter-spacing: -0.05em; line-height: 1.1; margin: 0px 0px 15px;">
<b style="box-sizing: border-box;">Outras formas de instalação</b></h3>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<b style="box-sizing: border-box;">CDN</b><span style="box-sizing: border-box;">: 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.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">Também é possível fazer o controle dos arquivos instalados através de gerenciadores de dependência (pacotes) .</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<b style="box-sizing: border-box;">Bower</b><span style="box-sizing: border-box;">: Gerenciador de dependência também criado pela equipe do Twitter que serve principalmente para controlar os pacotes front-end de um projeto.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<b style="box-sizing: border-box;">NMP</b><span style="box-sizing: border-box;">: Gerenciador de dependência JavaScript, que utiliza o NodeJS.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<b style="box-sizing: border-box;">Composer</b><span style="box-sizing: border-box;">: Gerenciador de pacotes PHP.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<br /></div>
<h3 style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", sans-serif; font-size: 24px; letter-spacing: -0.05em; line-height: 1.1; margin: 0px 0px 15px;">
<b style="box-sizing: border-box;">Finalizando a instalação</b></h3>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">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.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<img alt="figura4" class="alignnone size-medium wp-image-406" height="348" sizes="(max-width: 630px) 100vw, 630px" src="https://sigmaplus.net.br/wp-content/uploads/figura4-630x348.png" srcset="https://www.sigmaplus.net.br/wp-content/uploads/figura4-630x348.png 630w, https://www.sigmaplus.net.br/wp-content/uploads/figura4-60x33.png 60w, https://www.sigmaplus.net.br/wp-content/uploads/figura4.png 836w" style="border-radius: 4px; border: 0px; box-sizing: border-box; margin: 0px; padding: 0px; vertical-align: middle;" width="630" /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">Figura 4: Tela de download do Jquery</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<br /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">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 </span><a href="https://code.jquery.com/jquery-3.1.1.min.js" style="background-color: transparent; box-sizing: border-box; color: #3989cf; text-decoration-line: none;">Download the compressed, production jQuery 3.1.1</a><span style="box-sizing: border-box;">, e selecionar a opção </span><b style="box-sizing: border-box;">salvar como, </b><span style="box-sizing: border-box;">como</span> <span style="box-sizing: border-box;">mostrado na figura 5.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<img alt="figura5" class="alignnone size-medium wp-image-407" height="227" sizes="(max-width: 630px) 100vw, 630px" src="https://sigmaplus.net.br/wp-content/uploads/figura5-630x227.png" srcset="https://www.sigmaplus.net.br/wp-content/uploads/figura5-630x227.png 630w, https://www.sigmaplus.net.br/wp-content/uploads/figura5-60x22.png 60w, https://www.sigmaplus.net.br/wp-content/uploads/figura5.png 1003w" style="border-radius: 4px; border: 0px; box-sizing: border-box; margin: 0px; padding: 0px; vertical-align: middle;" width="630" /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">Figura 5: Salvando o arquivo Jquery.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<strong style="box-sizing: border-box;">Salve o arquivo na pasta projetos/js e renomeie para jquery.min.js.</strong></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<br /></div>
<h3 style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", sans-serif; font-size: 24px; letter-spacing: -0.05em; line-height: 1.1; margin: 0px 0px 15px;">
<b style="box-sizing: border-box;">Entendo a estrutura de arquivos do bootstrap</b></h3>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">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.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<br /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<img alt="figura6" class="alignnone size-medium wp-image-408" height="386" sizes="(max-width: 368px) 100vw, 368px" src="https://sigmaplus.net.br/wp-content/uploads/figura6.png" srcset="https://www.sigmaplus.net.br/wp-content/uploads/figura6.png 368w, https://www.sigmaplus.net.br/wp-content/uploads/figura6-60x63.png 60w" style="border-radius: 4px; border: 0px; box-sizing: border-box; margin: 0px; padding: 0px; vertical-align: middle;" width="368" /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">Figura 6: Estrutura de arquivo do bootstrap</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;"> </span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">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 </span><b style="box-sizing: border-box;">arquivo mais importante é o bootstrap.css</b><span style="box-sizing: border-box;"> (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.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">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.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">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.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<br /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">Exemplo de código:</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;"><link href="”css/bootstrap.css”" rel="”stylesheet”"></link></span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<br /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">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</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<br /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;">Exemplo de código:</span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; margin-bottom: 15px !important; margin-top: 15px !important;">
<span style="box-sizing: border-box;"><script src="”js/jquery.min.js”" type="”text/javascript”"></span></p>
<p style="box-sizing: border-box; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); margin-top: 15px !important; margin-bottom: 15px !important;">
<span style="box-sizing: border-box;"><script src=”js/bootstrap.min.js” type=”text/javascript” ></span></p>
<p style="box-sizing: border-box; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); margin-top: 15px !important; margin-bottom: 15px !important;">
</p>
<p style="box-sizing: border-box; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); margin-top: 15px !important; margin-bottom: 15px !important;">
<span style="box-sizing: border-box;">O arquivo nmp.js não é necessário caso não esteja sendo utilizado o gerenciador de dependências nmp, pode ser apagado.</span></p>
<p style="box-sizing: border-box; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); margin-top: 15px !important; margin-bottom: 15px !important;">
<span style="box-sizing: border-box;">A pasta fonts possui os arquivos de fontes Glyphicons que são imagens em formato de ícones para utilização em botões, menus, etc.</span></p>
<p style="box-sizing: border-box; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); margin-top: 15px !important; margin-bottom: 15px !important;">
</p>
<h2 style="box-sizing: border-box; font-family: "Open Sans", sans-serif; line-height: 1.1; color: rgb(51, 51, 51); margin: 0px 0px 15px; letter-spacing: -0.05em; background-color: rgb(255, 255, 255);">
<b style="box-sizing: border-box;">Mão na massa: criando o primeiro site com bootstrap</b></h2>
<p style="box-sizing: border-box; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); margin-top: 15px !important; margin-bottom: 15px !important;">
<span style="box-sizing: border-box;">Vamos criar nosso primeiro exemplo, para precisamos ter um editor para escrever o código fonte do nosso site, a princípio podemos fazer utilizando o bloco de notas que vem no windows(notepad.exe), mas por uma questão de estética visual o ideal é utilizar um editor que faça realce de palavras facilitando a visualização do código digitado, existem vários bons editores gratuitos na internet, como podemos citar:</span></p>
<p style="box-sizing: border-box; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); margin-top: 15px !important; margin-bottom: 15px !important;">
</p>
<ul style="box-sizing: border-box; margin-top: 0px; margin-bottom: 10px; font-family: "Droid Serif", serif; font-size: 1.11em; padding-left: 24px; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);">
<li style="box-sizing: border-box; line-height: 1.6;"><span style="box-sizing: border-box;">notepad++ – </span><a href="https://notepad-plus-plus.org/" style="box-sizing: border-box; background-color: transparent; color: rgb(57, 137, 207); text-decoration-line: none;">https://notepad-plus-plus.org/</a></li>
<li style="box-sizing: border-box; line-height: 1.6;"><span style="box-sizing: border-box;">sublime text – </span><a href="http://www.sublimetext.com/2" style="box-sizing: border-box; background-color: transparent; color: rgb(57, 137, 207); text-decoration-line: none;">http://www.sublimetext.com/2</a></li>
<li style="box-sizing: border-box; line-height: 1.6;"><span style="box-sizing: border-box;">atom – </span><a href="https://atom.io/" style="box-sizing: border-box; background-color: transparent; color: rgb(57, 137, 207); text-decoration-line: none;">https://atom.io/</a></li>
<li style="box-sizing: border-box; line-height: 1.6;"><span style="box-sizing: border-box;">brackets – </span><a href="http://brackets.io/" style="box-sizing: border-box; background-color: transparent; color: rgb(57, 137, 207); text-decoration-line: none;">http://brackets.io/</a></li>
</ul>
<p style="box-sizing: border-box; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); margin-top: 15px !important; margin-bottom: 15px !important;">
</p>
<p style="box-sizing: border-box; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); margin-top: 15px !important; margin-bottom: 15px !important;">
<span style="box-sizing: border-box;">Para os nossos exemplos utilizaremos o notepad++, que é um editor bem leve e possui suporte a várias linguagens de programação e plugin de auto completar, lembrando que estaremos criando apenas páginas html utilizando as classes do bootstrap.</span></p>
<p style="box-sizing: border-box; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); margin-top: 15px !important; margin-bottom: 15px !important;">
<span style="box-sizing: border-box;">Após a instalação do seu editor de código fonte crie um novo arquivo chamado olamundo.html e salve na pasta projetos.</span></p>
<p style="box-sizing: border-box; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); margin-top: 15px !important; margin-bottom: 15px !important;">
<span style="box-sizing: border-box;">Agora vamos fazer nosso primeiro site com bootstrap, digite o código fonte a seguir:</span></p>
<p style="box-sizing: border-box; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); margin-top: 15px !important; margin-bottom: 15px !important;">
<img class="alignnone size-medium wp-image-416" src="https://sigmaplus.net.br/wp-content/uploads/coodigofonte1-630x321.png" alt="coodigofonte1" width="630" height="321" srcset="https://www.sigmaplus.net.br/wp-content/uploads/coodigofonte1-630x321.png 630w, https://www.sigmaplus.net.br/wp-content/uploads/coodigofonte1-60x31.png 60w, https://www.sigmaplus.net.br/wp-content/uploads/coodigofonte1.png 710w" sizes="(max-width: 630px) 100vw, 630px" style="box-sizing: border-box; border: 0px; vertical-align: middle; border-radius: 4px; margin: 0px; padding: 0px;"></p>
<p style="box-sizing: border-box; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); margin-top: 15px !important; margin-bottom: 15px !important;">
<span style="box-sizing: border-box;">Código Fonte 1: Primeira página com bootstrap</span></p>
<p style="box-sizing: border-box; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); margin-top: 15px !important; margin-bottom: 15px !important;">
</p>
<h3 style="box-sizing: border-box; font-family: "Open Sans", sans-serif; line-height: 1.1; color: rgb(51, 51, 51); margin: 0px 0px 15px; font-size: 24px; letter-spacing: -0.05em; background-color: rgb(255, 255, 255);">
<b style="box-sizing: border-box;">Entendo o código fonte</b></h3>
<ul style="box-sizing: border-box; margin-top: 0px; margin-bottom: 10px; font-family: "Droid Serif", serif; font-size: 1.11em; padding-left: 24px; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);">
<li style="box-sizing: border-box; line-height: 1.6;"><b style="box-sizing: border-box;">Linha 1: <span style="box-sizing: border-box; font-weight: 400;">A tag DOCTYPE indica que estamos utilizando o HTML 5 como padrão, isto facilita a identificação dos navegadores no momento da montagem da página, este comando não é obrigatório mas quando utilizado deve ser sempre o primeiro do arquivo.</span></b></li>
</ul>
<ul style="box-sizing: border-box; margin-top: 0px; margin-bottom: 10px; font-family: "Droid Serif", serif; font-size: 1.11em; padding-left: 24px; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);">
<li style="box-sizing: border-box; line-height: 1.6;"><b style="box-sizing: border-box;">Linha 2:</b><span style="box-sizing: border-box;"> Na tag html definimos que o conteúdo da página está escrito em português do brasil (pt-br) através do atributo </span><b style="box-sizing: border-box;">lang.</b></li>
</ul>
<blockquote style="box-sizing: border-box; padding: 10px 20px; margin: 0px 0px 20px; font-size: 17.5px; border-left: 5px solid rgb(238, 238, 238); color: rgb(51, 51, 51); font-family: "Open Sans", sans-serif; background-color: rgb(255, 255, 255);">
<h5 style="box-sizing: border-box; font-family: inherit; line-height: 1.1; color: inherit; margin: 0px 0px 15px; font-size: 14px; letter-spacing: -0.05em;">
<span style="box-sizing: border-box; font-weight: 400;">Dica: Porque definir o atributo lang</span></h5>
<h5 style="box-sizing: border-box; font-family: inherit; line-height: 1.1; color: inherit; margin: 0px 0px 15px; font-size: 14px; letter-spacing: -0.05em;">
<span style="box-sizing: border-box; font-weight: 400;">Melhor pronunciação do texto em leitores de tela.</span></h5>
<h5 style="box-sizing: border-box; font-family: inherit; line-height: 1.1; color: inherit; margin: 0px 0px 15px; font-size: 14px; letter-spacing: -0.05em;">
<span style="box-sizing: border-box; font-weight: 400;">Para que os buscadores possam indexar o website no buscador do respectivo idioma. Por exemplo: não tem sentido o Google ranquear muito bem um site em português no Google americano.</span></h5>
<h5 style="box-sizing: border-box; font-family: inherit; line-height: 1.1; color: inherit; margin: 0px 0px 15px; font-size: 14px; letter-spacing: -0.05em;">
<span style="box-sizing: border-box; font-weight: 400;">Para que os browsers escolham o dicionário correto para a correção gramatical nativa em textos e formulários.</span></h5>
<h5 style="box-sizing: border-box; font-family: inherit; line-height: 1.1; color: inherit; margin: 0px 0px 15px; font-size: 14px; letter-spacing: -0.05em;">
<span style="box-sizing: border-box; font-weight: 400;">Renderizar a página rapidamente – o browser carrega o documento mais rápido quando o browser sabe qual o idioma nativo.</span></h5>
<h5 style="box-sizing: border-box; font-family: inherit; line-height: 1.1; color: inherit; margin: 0px 0px 15px; font-size: 14px; letter-spacing: -0.05em;">
<span style="box-sizing: border-box; font-weight: 400;">Fonte: </span><span style="box-sizing: border-box; font-weight: 400;"><a href="http://tableless.com.br/declarando-idiomas-no-html/" style="box-sizing: border-box; background-color: transparent; color: rgb(57, 137, 207); text-decoration-line: none;">http://tableless.com.br/declarando-idiomas-no-html/</a></span></h5>
</blockquote>
<p style="box-sizing: border-box; font-family: "Droid Serif", serif; font-size: 1.24em; letter-spacing: -0.05em; line-height: 1.6; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); margin-top: 15px !important; margin-bottom: 15px !important;">
</p>
<ul style="box-sizing: border-box; margin-top: 0px; margin-bottom: 10px; font-family: "Droid Serif", serif; font-size: 1.11em; padding-left: 24px; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);">
<li style="box-sizing: border-box; line-height: 1.6;"><b style="box-sizing: border-box;">Linha 4: <span style="box-sizing: border-box; font-weight: 400;">A meta tag utilizando o atributo charset </span><span style="box-sizing: border-box; font-weight: 400;">é usado para indicar o formato de codificação de caracteres usado no documento, no caso do utf-8 ele irá representar de maneira adequada caracteres com acentuação.</span></b></li>
</ul>
<ul style="box-sizing: border-box; margin-top: 0px; margin-bottom: 10px; font-family: "Droid Serif", serif; font-size: 1.11em; padding-left: 24px; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);">
<li style="box-sizing: border-box; line-height: 1.6;"><strong style="box-sizing: border-box;">Linha 5:</strong> <span style="box-sizing: border-box;">A meta tag viewport é um comando necessário para definir o layout responsivo.</span></li>
</ul>
<ul style="box-sizing: border-box; margin-top: 0px; margin-bottom: 10px; font-family: "Droid Serif", serif; font-size: 1.11em; padding-left: 24px; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);">
<li style="box-sizing: border-box; line-height: 1.6;"><strong style="box-sizing: border-box;">Linha 7:</strong> <span style="box-sizing: border-box;">Indicação do caminho onde se encontra o arquivo de estilos do bootstrap.</span></li>
</ul>
<ul style="box-sizing: border-box; margin-top: 0px; margin-bottom: 10px; font-family: "Droid Serif", serif; font-size: 1.11em; padding-left: 24px; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);">
<li style="box-sizing: border-box; line-height: 1.6;"><strong style="box-sizing: border-box;">Linha 10:</strong> <span style="box-sizing: border-box;">Nesta linha estamos definindo a primeira classe do bootstrap, neste caso a class container, esta classe é importante para poder alinhar o layout da página com as margens laterais, dependendo do tamanho da tela o container irá definir automaticamente as largura do layout para que o mesmo seja melhor visualizado. A página deverá conter pelo menos 1 (um) container principal que irá englobar toda a programação, podendo ser utilizado um layout fixo (padrão utilizado) ou layout fluído (“container-fluid”), deixando a largura do site utilizando 100% da tela.</span></li>
</ul>
<ul style="box-sizing: border-box; margin-top: 0px; margin-bottom: 10px; font-family: "Droid Serif", serif; font-size: 1.11em; padding-left: 24px; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);">
<li style="box-sizing: border-box; line-height: 1.6;"><b style="box-sizing: border-box;">Linha 11:</b><span style="box-sizing: border-box;"> Aqui utilizamos um componente do bootstrap chamado jumbotron, ele possui </span><span style="box-sizing: border-box;">algumas propriedades do CSS como padding e background-color com valores distintos, possibilitando a cor cinza no fundo e toda a largura da tela.</span></li>
</ul>
<ul style="box-sizing: border-box; margin-top: 0px; margin-bottom: 10px; font-family: "Droid Serif", serif; font-size: 1.11em; padding-left: 24px; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);">
<li style="box-sizing: border-box; line-height: 1.6;"><b style="box-sizing: border-box;">Linhas 15 e 16: <span style="box-sizing: border-box; font-weight: 400;">Indicação do caminho do framework jquery (jquery.min.js) e do arquivo que contém os plugins do bootstrap (bootstrap.min.js), eles serão necessário quando utilizamos algum plugin no nosso layout. O arquivo do jquery deve ser chamado obrigatoriamente antes do arquivo do bootstrap. </span></b></li>
</ul>
</script></span></div>
Nelson Sadala Tavareshttp://www.blogger.com/profile/10889321841975083675noreply@blogger.com0tag:blogger.com,1999:blog-5716676376275515638.post-50707566623904319452011-09-19T17:00:00.000-07:002013-05-16T05:05:43.676-07:00Função e procedimento<span style="font-weight: bold;">O que é uma função/procedimento</span><br />
<div style="text-align: justify;">
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.</div>
<br />
<span style="font-weight: bold;">Qual sua utilidade</span><br />
<div style="text-align: justify;">
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.</div>
<br />
<span style="font-weight: bold;">Qual a diferença entre uma função e um procedimento</span><br />
<div style="text-align: justify;">
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.</div>
<br />
<span style="font-weight: bold;">Como criar uma função ou procedimento</span><br />
<div style="text-align: justify;">
Uma função/procedimento é constituída por 3 partes:<br />
<ul>
<li><b>Cabeçalho:</b> 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á.</li>
<li><b>Variáveis:</b> 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.</li>
<li><b>Programação:</b> Este é o local que contém o código de programação da sub-rotina.</li>
</ul>
</div>
<b>Pascal (Object Pascal, Delphi)</b><br />
<span style="font-weight: bold;"><i>Procedimento</i></span><br />
<pre class="brush: delphi; toolbar: false;">procedure NomeDaProcedure(Parâmetro1: Tipo; ParâmetroN: Tipo);
var
{declaração de variáveis locais, quando necessárias}
Begin
{bloco de instruções}
end;
</pre>
Exemplo:
<br />
<pre class="brush: delphi; toolbar: false;">program ProcTesteSoma;
procedure soma(n1,n2:integer);
begin
Write('A soma dos números é: ',(n1+n2));
readln;
end;
begin
Soma(10,20);
end.
</pre>
<span class="Apple-style-span" style="font-weight: bold;"><i>Função</i></span><br />
<div style="text-align: justify;">
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.
</div>
<pre class="brush: delphi; toolbar: false;">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;</pre>
Exemplo:
<br />
<pre class="brush: delphi; toolbar: false;">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.
</pre>
<br />
<b>Outras Linguagens</b><br />
<br />
<div style="text-align: justify;">
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.</div>
<br />
<!--
*****************************************************
*********** PHP *************
*****************************************************
-->
<b>PHP</b><div class='msghead'>[+/-] Mostrar/Ocultar </div><div class='msgbody'>
<b><i>Procedimento</i></b>
<br />
<pre class="brush: php; toolbar: false;">function NomedaProcedure($parametro1,$parametroN){
/* bloco de instruções */
}</pre>
Exemplo:
<pre class="brush: php; toolbar: false;">
<?php
function Soma($n1,$n2){
echo('A soma dos números é:'.($n1+$n2));
}
Soma(10,20);
?></pre>
<br />
<b><i>Função</i></b>
<br />
<pre class="brush: php; toolbar: false;">function NomedaFuncao($parametro1,$parametroN){
/* bloco de instruções */
return([ValordeRetorno]);
}</pre>
Exemplo:
<pre class="brush: php; toolbar: false;">
<?php
function Soma($n1,$n2){
return($n1+$n2);
}
echo('A soma dos números é:'.Soma(10,20));
?></pre>
<br />
</div>
<!--
*****************************************************
*********** Java *************
*****************************************************
-->
<b>Java</b><div class='msghead'>[+/-] Mostrar/Ocultar </div><div class='msgbody'>
<div style="text-align: justify;">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.</div>
<br />
<b><i>Procedimento</i></b>
<br />
<pre class="brush: java; toolbar: false;">
public void nomeDaProcedure(tipo parametro1, tipo paramentroN){
/* bloco de instruções */
}
</pre>
Exemplo:
<pre class="brush: java; toolbar: false;">
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));
}
}
</pre>
<br />
<b><i>Função</i></b>
<br />
<pre class="brush: java; toolbar: false;">
public int nomeDaFunção(tipo parametro1, tipo paramentroN){
/* bloco de instruções */
return [valorDeRetorno];
}
</pre>
Exemplo:
<pre class="brush: java; toolbar: false;">
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;
}
}
</pre>
</div>
<!--
*****************************************************
*********** C# *************
*****************************************************
-->
<b>C#</b><div class='msghead'>[+/-] Mostrar/Ocultar </div><div class='msgbody'>
<div style="text-align: justify;">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.</div>
<br />
<b><i>Procedimento</i></b>
<br />
<pre class="brush: c#; toolbar: false;">
public void nomeDaProcedure(tipo parametro1, tipo paramentroN)
{
/* bloco de instruções */
}
</pre>
Exemplo:
<pre class="brush: c#; toolbar: false;">
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));
}
}
}
</pre>
<br />
<b><i>Função</i></b>
<br />
<pre class="brush: c#; toolbar: false;">
public int nomeDaFunção(tipo parametro1, tipo paramentroN){
/* bloco de instruções */
return ([valorDeRetorno]);
}
</pre>
Exemplo:
<pre class="brush: c#; toolbar: false;">
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);
}
}
}
</pre>
</div>
Para entender sobre <a href="http://dicaspro.blogspot.com/2011/09/passagem-de-parametros.html">passagem de parâmetros</a> clique aqui. <a href="http://dicaspro.blogspot.com/2011/09/passagem-de-parametros.html">Link</a>Nelson Sadala Tavareshttp://www.blogger.com/profile/10889321841975083675noreply@blogger.com10tag:blogger.com,1999:blog-5716676376275515638.post-16539501682027236412011-09-18T12:30:00.000-07:002011-11-23T10:31:55.539-08:00Passagem de parâmetros<div style="text-align: justify;">
Na maioria das vezes precisamos passar argumentos(informações) do programa principal para uma função(para saber mais sobre funções clique <a href="http://dicaspro.blogspot.com/2008/06/funo-e-procedimento.html">aqui</a>), 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.
</div><br />
<span style="font-weight: bold;">
Qual a diferença entre um argumento passado por valor e por referência?
</span><br />
<div style="text-align: justify;">
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.
</div>
<br />
<b>Pascal (Object Pascal, Delphi)</b><br />
<span style="font-weight: bold;"><i>Passagem por valor:</i></span><br />
<pre class="brush: delphi; toolbar: false;">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;
</pre>
<br />
<span style="font-style: italic; font-weight: bold;">Passagem por referência:</span><br />
Em pascal para passarmos um parâmetro por referência devemos precedê-lo da palavra reservada var.
<pre class="brush: delphi; toolbar: false;">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;
</pre>
<br />
<b>Outras Linguagens</b><br />
<br />
<!--
*****************************************************
*********** PHP *************
*****************************************************
-->
<b>PHP</b><div class='msghead'>[+/-] Mostrar/Ocultar </div><div class='msgbody'>
Em PHP para passarmos um parâmetro por referência devemos precede-lo do símbolo &.
<br />
<b><i>Passagem por valor:</i></b><br />
<pre class="brush: php; toolbar: false;">function NomedaFuncao($parametro1,$parametroN){
/* bloco de instruções */
}</pre>
<br />
<b>Passagem por referência:</b><br />
<pre class="brush: php; toolbar: false;">function NomedaFuncao(&$parametro1,&$parametroN){
/* bloco de instruções */
}</pre>
</div>
<!--
*****************************************************
*********** Java *************
*****************************************************
-->
<b>Java</b><div class='msghead'>[+/-] Mostrar/Ocultar </div><div class='msgbody'>
Em java só existe passagem de parâmetros por valor, para saber mais clique <a href="http://javafree.uol.com.br/wiki/Passagem%20de%20Parametros">aqui</a>.
<br />
<b><i>Passagem por valor:</i></b><br />
<pre class="brush: java; toolbar: false;">void NomedaFuncao (Tipo parametro1, Tipo parametroN){
//bloco de instruções
}</pre>
</div>
<!--
*****************************************************
*********** C# *************
*****************************************************
-->
<b>C#</b><div class='msghead'>[+/-] Mostrar/Ocultar </div><div class='msgbody'>
<div style="text-align: justify;">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 <a href="http://www.forumweb.com.br/artigo/383/csharp/c">clique aqui</a>.</div>
<br /><br />
<b><i>Passagem por valor:</i></b><br />
<pre class="brush: c#; toolbar: false;">void NomedaFuncao (Tipo parametro1, Tipo parametroN){
//bloco de instruções
}</pre>
<br />
<b><i>Passagem por referência:</i></b><br />
Na passagem por referência deve-se colocar a palavra-chave ref.
<pre class="brush: c#; toolbar: false;">void NomedaFuncao (ref Tipo parametro1, ref Tipo parametroN){
//bloco de instruções
}</pre>
<br />
<b><i>Passagem por saída:</i></b><br />
Na passagem por saída deve-se colocar a palavra-chave out.
<pre class="brush: c#; toolbar: false;">void NomedaFuncao (out Tipo parametro1, out Tipo parametroN){
//bloco de instruções
}</pre>
</div>Nelson Sadala Tavareshttp://www.blogger.com/profile/10889321841975083675noreply@blogger.com3tag:blogger.com,1999:blog-5716676376275515638.post-10951833265733308322011-09-17T11:26:00.000-07:002011-11-22T03:23:44.866-08:00Função para verificar CPF<div style="text-align: justify;">
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 <a href="http://ghiorzi.org/cgcancpf.htm">clique aqui</a>. Veremos agora como criar uma função para fazer a validação desses campos (para saber com o que é uma função <a href="http://dicaspro.blogspot.com/2008/06/funo-e-procedimento.html">clique aqui</a>).<br /> <br />
A primeira função é para fazer a validação do CPF, deve ser passado como <a href="http://dicaspro.blogspot.com/2011/09/passagem-de-parametros.html">parâmetro</a> o número que será testado(apenas números), a função então retornará verdadeiro ou falso. </div> <br /> <br />
Para gerar um CPF válido para testar a função <a href="http://www.geradorcpf.com/">clique aqui</a>. <br /><br />
<!--
*****************************************************
*********** Delphi *************
*****************************************************
-->
<b>Delphi/Pascal</b><br />
<div class="msghead">[+/-] Mostrar/Ocultar </div><div class="msgbody">
<pre class="brush: delphi; toolbar: false;">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;
</pre>
</div>
<!--
*****************************************************
*********** Java *************
*****************************************************
-->
<b>Java</b><br />
<div class="msghead">[+/-] Mostrar/Ocultar </div><div class="msgbody">
<br />
<pre class="brush: java; toolbar: false;"> 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));
}
</pre>
</div>
<!--
*****************************************************
*********** PHP *************
*****************************************************
-->
<b>PHP</b><br />
<div class="msghead">[+/-] Mostrar/Ocultar </div><div class="msgbody">
<br />
<pre class="brush: php; toolbar: false;">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);
}
</pre>
</div>
<!--
*****************************************************
*********** C# *************
*****************************************************
-->
<b>C#</b><br />
<div class="msghead">[+/-] Mostrar/Ocultar </div><div class="msgbody">
<br />
<pre class="brush: c#; toolbar: false;">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));
}
</pre>
</div>Nelson Sadala Tavareshttp://www.blogger.com/profile/10889321841975083675noreply@blogger.com0tag:blogger.com,1999:blog-5716676376275515638.post-10304669444336927062011-09-16T10:13:00.000-07:002011-11-22T03:24:09.307-08:00Função para verificar CNPJ<div style="text-align: justify;">
Agora a função que calcula o CNPJ, lembrando que essa função é semelhante a função que calcula o CPF, para saber mais <a href="http://dicaspro.blogspot.com/2011/11/funcao-para-calcular-cpf.html">clique aqui</a>.</div>
<br /><br />
Para gerar um CNPJ válido para testar a função <a href="http://www.geradorcnpj.com/">clique aqui</a>. <br /> <br />
<!--
*****************************************************
*********** Delphi *************
*****************************************************
-->
<b>Delphi/Pascal</b><br />
<div class="msghead">[+/-] Mostrar/Ocultar </div><div class="msgbody">
<pre class="brush: delphi; toolbar: false;">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;</pre>
</div>
<br />
<!--
*****************************************************
*********** Java *************
*****************************************************
-->
<b>Java</b><br />
<div class="msghead">[+/-] Mostrar/Ocultar </div><div class="msgbody">
<pre class="brush: java; toolbar: false;">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));
}
</pre>
</div>
<br />
<!--
*****************************************************
*********** PHP *************
*****************************************************
-->
<b>PHP</b><br />
<div class="msghead">[+/-] Mostrar/Ocultar </div><div class="msgbody">
<pre class="brush: php; toolbar: false;">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);
}
</pre>
</div>
<br />
<!--
*****************************************************
*********** C# *************
*****************************************************
-->
<b>C#</b><br />
<div class="msghead">[+/-] Mostrar/Ocultar </div><div class="msgbody">
<pre class="brush: c#; toolbar: false;">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));
}
</pre>
</div>
<br />Nelson Sadala Tavareshttp://www.blogger.com/profile/10889321841975083675noreply@blogger.com1tag:blogger.com,1999:blog-5716676376275515638.post-47643439702682071402008-08-28T15:59:00.000-07:002011-09-06T05:41:50.408-07:00Utilizando funções do turbo pascal no delphi<div style="text-align: justify;">
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 <a href="http://www.box.net/shared/39mzg5vjmo">turbo pascal</a> ou o <a href="http://www.box.net/shared/4fg91nxeda">pascalzim</a>, 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 (<a href="http://www.box.net/shared/l7r8sfu7ly">clique aqui para baixar</a>). Para utilizar é só jogar o arquivo console.pas na mesma pasta do seu programa e na clausula uses, adicione a biblioteca console. Divirta-se.</div>
Nelson Sadala Tavareshttp://www.blogger.com/profile/10889321841975083675noreply@blogger.com0