M19 Bootstrap - introducao

Prévia do material em texto

M19 opção 5
Ferramentas de Desenvolvimento de Páginas Web
PSI 3º ano
Ferramentas de Desenvolvimento de Páginas Web
TGPSI - Paulo Reis - Agrupamento de Escolas da Batalha
Frameworks Front-End: Bootstrap
3
4
Introdução
5
Front-End vs. Back-End
 Se criarmos um script numa linguagem de servidor (PHP, ASP.NET, Java, Ruby, etc.) 
que apenas calcula a soma de 2 + 2, será o SERVIDOR (ou back, o server) que 
calculará o resultado. 
 Se fizermos o mesmo cálculo numa linguagem de cliente (JavaScript) quem 
calculará a operação é o BROWSER do utilizador. Por isso o termo client ou front.
6
Bootstrap
 O Bootstrap é uma framework Web gratuita e de código aberto que permite a 
criação de sites e aplicações Web responsivas de forma simples e rápida.
 A framework disponibiliza modelos baseados em HTML e CSS para os mais 
variados tipos de componentes gráficos, como, por exemplo, botões, tipografia, 
navegação e outros componentes da interface gráfica, bem como extensões 
JavaScript opcionais. 
 Bootstrap foi originalmente desenvolvido para o a 
plataforma Twitter, a que designou Twitter
Blueprint, desenvolvido por Mark Otto e Jacó 
Thornton como um instrumento para incentivar a 
consistência através de ferramentas internas.
 A versão atual é Bootstrap 4 lançada em 2017.
7
Por que usar o Bootstrap ?
Grandes vantagens ao nível de:
 Facilidade - qualquer pessoa com conhecimentos básicos de HTML e CSS 
pode criar um site de forma simples.
 Rapidez - para além dos componentes da framework, existem inúmeros 
templates Bootstrap na Web que podem ser usados, gratuitamente, de forma a 
acelerar o processo de criação de um site.
 Responsividade - todos os componentes da framework são responsivos, ou 
seja, o site ajusta-se de forma automática a todos os tipos de dispositivos 
desde smartphones até desktops.
 Compatibilidade - o Bootstrap é compatível com todos os browsers (Chrome, 
Firefox, Internet Explorer, Edge, Safari e Opera), não sendo necessário qualquer 
codificação extra. 
8
Ferramentas de desenvolvimento com o Bootstrap
 É aconselhável o uso de um editor especializado para HTML, CSS e JavaScript de 
forma a agilizar a edição de código e a ter um controlo mais fino sobre os erros 
sintáticos das linguagens.
Exemplos:
 Visual Studio Code https://code.visualstudio.com/
 Sublime Text https://www.sublimetext.com/
 Notepad++ https://notepad-plus-plus.org/
 Atom https://atom.io/
 Brackets http://brackets.io/
 Caso não se pretender instalar software no nosso computador, podemos optar 
por um editor online:
 CodePen https://codepen.io/
https://code.visualstudio.com/
https://www.sublimetext.com/
https://notepad-plus-plus.org/
https://atom.io/
http://brackets.io/
https://codepen.io/
9
Visual Studio Code: extensões
 O Bootstrap é um pouco verboso na construção de blocos HTML. Para simplificar 
e acelerar a edição de código, aconselha-se a instalação de extensões ao editor 
Visual Studio Code. 
 Pressionar Ctrl Shift X (ou menu View
e depois Extensions).
 Digitar Bootstrap.
 Selecionar Bootstrap v4 Snippets.
 Pressionar em Install.




10
Analisador estático de código Bootlint
 É aconselhável o uso de uma ferramenta to tipo lint no processo de criação de 
sites usando o Bootstrap. Trata-se de um analisador estático de código que 
verifica se o código obedece à sintaxe da linguagem.
 Bootlint
 Procurar por Bootlint This Page no 
Google Chrome Webstore
 Pressionar o botão Add to Chrome.

 Confirmar Adicionar extensão.


11
Download do Bootstrap
 Para usar o Bootstrap numa aplicação Web, é necessário incluir uma referência à 
framework no código da aplicação. Existem duas formas de o fazer:
 Descarregar o Bootstrap e incluir uma referência local;
 Incluir uma referência online para um Content Delivery Network (CDN).
12
Acesso local
 Clicar no botão Download no site oficial https://getbootstrap.com/. 
Aí são disponibilizadas várias versões: 
 Compiled CSS and JS: inclui o código compilado da 
última versão (ficheiros CSS, JavaScript e fontes), pronto 
a usar. Não incluí código-fonte, nem documentação.
 Source: incluí o código-fonte, ficheiros JavaScript, fontes 
e a documentação. Requer um compilador Less ou Sass.
 Descarregar a versão Bootstrap
(ficheiro ZIP) para o computador.
https://getbootstrap.com/
13
 Descompactar a versão Bootstrap (ficheiro ZIP) para o computador.
 bootstrap.css: ficheiro principal de estilização.
 bootstrap.js: ficheiro de scripts que fazem 
funcionar os plugins nativos.
14
Exemplo prático #1
 Depois da descompactação estamos prontos a criar layouts responsivos, 
bastando para tal referenciar o ficheiro bootstrap.css no documento HTML, 
conforme o seguinte código:
 Será necessário copiar as pastas anteriores 
(css e js) para o projeto Web de forma a 
poder aceder localmente aos seus ficheiros.
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>...</body>
</html>
15
Acesso via CDN
 Se não pretendermos fazer o download e hospedar o Bootstrap, poemos 
incluí-lo a partir de um CDN. Várias empresas prestam este serviço, como a 
Google e a Microsoft. 
 BootstrapCDN: fornece suporte para as CSS e para o 
JavaScript.
 Usar as referências 
disponíveis no site oficial.
16
Exemplo prático #2
 A referência incluída no excerto de código anterior ficaria da seguinte forma:
<html>
<head>
<!--<link rel="stylesheet" href="css/bootstrap.css">-->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous">
<!-- ... -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous">
</script>
</head>
<body>...</body>
</html>
https://getbootstrap.com/docs/4.5/getting-started/download/#bootstrapcdn
https://getbootstrap.com/docs/4.5/getting-started/download/#bootstrapcdn
17
Local ou CDN ?
 Na maior parte das vezes, usar uma referência para um serviço CDN é a melhor 
abordagem pelas seguintes razões:
 Maior velocidade de entrega – os serviços CDN são oferecidos por grandes empresas, com 
replicação de servidores e diversas localizações de entrega. Decerto que a Google poderá 
enviar um script jQuery mais rápido que o próprio servidor web, distribuindo-o desde uma 
localização mais próxima à rede do cliente que visita o nosso site;
 Aumento da possibilidade de chache-hit – é muito provável que o cliente que visita o nosso 
site já tenha em cache o script jQuery, depois da visita a outra página Web que também esteja 
a usar o CDN de alguma destas empresas. Por isso, talvez o cliente nem tenha de descarregar 
a framework e possa utilizar uma cópia da cache do browser.
 Redução da quantidade de largura de banda usada pelo nosso servidor.
 Uma boa estratégia é usar o hosting local durante o processo de desenvolvimento 
do site e, após a colocação do site em produção, usar um serviço CDN.
18
A minha primeira página Bootstrap
 Abrir um editor HTML e criar um ficheiro index.html com o seguinte código:
<!DOCTYPE html>
<html>
<head>
<title>A minha primeira página Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<h1>A minha primeira página Bootstrap!</h1>
<p>Olá, Bootstrap people!</p>
</div>
</body>
</html>
19
 Do código anterior, referir que o elemento <meta> instrui o browser a adotar uma 
renderização e um zoom adequados à respetiva viewport (área visível ao 
utilizador numa página web).
 O Bootstrap também requer um elemento contentor <div> que agregue todo o 
conteúdo do site. Neste caso foi usada a classe .container, que define um 
contentor responsivocentrado e de largura fixa.
20
 Vamos agora verificar se a ferramenta Bootlint produz algum erro. Começamos 
por abrir a consola do browser (Ctrl+Shift+I no Chrome) e depois vamos clicar 
no bootmarklet incluído na barra de marcadores.
 Como resultado deverá surgir uma janela indicando a existência de bugs na 
página.
https://youtu.be/4F4qzPbcFiA
https://youtu.be/4F4qzPbcFiA