PSI 12ºANO » MÓDULO 17E - FERRAMENTAS DE DESENVOLVIMENTO DE PÁGINAS WEB

PROGRAMAÇÃO E SISTEMAS DE INFORMAÇÃO

1. HTML Responsive Web Design

O Responsive Web Design consiste em desenvolver páginas web que se ajustam a todos os dispositivos (desktops, tablets e smartphones). Usa CSS e HTML para redimensionar, ocultar, reduzir, ampliar ou mover o conteúdo das páginas WEB consoante o dispositivo.


O Bootstrap foi criado em 2011 como uma solução interna para resolver inconsistências de desenvolvimento dentro da equipe de engenharia do Twitter. 

Embora inicialmente uma solução interna no Twitter em agosto de 2011, a estrutura Bootstrap foi lançada como um projeto de software livre no Github. Em alguns meses, milhares de desenvolvedores de todo o mundo contribuíram com o código e o Bootstrap tornou-se o projeto de desenvolvimento de software livre mais ativo do mundo. Desde então transformou-se na "estrutura front-end mais popular para o desenvolvimento inicial de projetos móveis com capacidade de resposta na web”.

o Bootstrap é uma coleção de vários elementos e funções personalizáveis para projetos da web, empacotados previamente em numa única ferramenta. Ao projetar um site com o Bootstrap, os desenvolvedores podem escolher quais elementos a usar.Esses elementos personalizáveis contidos no Bootstrap são uma combinação de HTMLCSS JavaScript.  Graças ao conceito de software livre, o Bootstrap é aprimorado continuamente.

Download Bootstrap


2. BootStrap div class="container"

http://getbootstrap.com/css/

EXEMPLO 1

1º Criar uma pasta para o projeto

2º Proceder ao Download http://getbootstrap.com/getting-started/#download e extrair os ficheiros na pasta

3º Proceder ao Download https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js e gravar na pasta js 

 4º Criar uma página (pagina1.html) e gravar na pasta

 5º Criar a div container com largura fixa

                  

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Bootstrap Exemplo1</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
<script src="bootstrap-3.3.5-dist/js/jquery.min.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h1>Página 1</h1>
<p>Testar o Bootstrap</p> 
</div>

</body>
</html>

 6º Modificar a div container para largura 100%

                  

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Bootstrap Exemplo1</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
<script src="bootstrap-3.3.5-dist/js/jquery.min.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
<h1>Página 1</h1>
<p>Testar o Bootstrap</p> 
</div>

</body>
</html>

 7º Mudar a cor de fundo e a cor do texto da página :

Criar um documento CSS (estilos.css) e gravar na pasta

 8º Adcionar a folha de estilos à página

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Bootstrap Exemplo1</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
<link href="css/estilos.css" rel="stylesheet" type="text/css">
<script src="bootstrap-3.3.5-dist/js/jquery.min.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

</head>
<body>

<div id="main" class="container-fluid">
<h1 c>Página 1</h1>
<p>Testar o Bootstrap</p> 
</div>

</body>
</html>

 9º Testar a página

pagina1.html


EXERCÍCIO 1

  Implemente o exemplo 1.

3. Bootstrap Grid System

O Sistema de GRID's do Bootstrap permite criar até 12 colunas por página.

Podem-se agrupar as colunas para criar colunas mais largas:

 Grid Classes

Estrutura básica do Bootstrap Grid

<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>


EXEMPLO 2

Criar uma página com 2 colunas iguais:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Bootstrap Exemplo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
<script src="bootstrap-3.3.5-dist/js/jquery.min.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container-fluid">
<div class="row">
<div class="col-sm-6">coluna esquerda</div>
<div class="col-sm-6">coluna direita</div>
</div>
</div>

</body>
</html>

pagina2.html


EXEMPLO 3

Criar uma página com 2 colunas sendo a da esquerda a maior

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Bootstrap Exemplo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
<script src="bootstrap-3.3.5-dist/js/jquery.min.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container-fluid">
<div class="row">
<div class="col-sm-8">coluna esquerda</div>
<div class="col-sm-4">coluna direita</div>
</div>
</div>

</body>
</html>

pagina3.html


EXEMPLO 4

Criar uma página com 3 colunas iguais (com cor de fundo diferente):

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Bootstrap Exemplo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
<link href="css/custom.css" rel="stylesheet" type="text/css">
<script src="bootstrap-3.3.5-dist/js/jquery.min.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container-fluid">
<div class="row">
<div class="col-sm-4 primeira_col">coluna 1</div>
<div class="col-sm-4 segunda_col">coluna 2</div>
<div class="col-sm-4 terceira_col">coluna 3</div>
</div>
</div>

</body>
</html>

 

@charset "utf-8";
/* CSS Document */

.primeira_col
{
background-color:#6CF;
}
.segunda_col
{
background-color:#CF0;
}
.terceira_col
{
background-color:#C69;
}

pagina4.html


4. Bootstrap Navigation Bar

EXEMPLO 5

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Bootstrap Exemplo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
<script src="bootstrap-3.3.5-dist/js/jquery.min.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container-fluid">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">PSI12</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Início</a></li>
<li><a href="#">Pagina 1</a></li>
<li><a href="#">Pagina 2</a></li> 
<li><a href="#">Pagina 3</a></li> 
<li><a href="#">Pagina 4</a></li> 
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-sm-4">coluna 1</div>
<div class="col-sm-4">coluna 2</div>
<div class="col-sm-4">coluna 3</div>
</div>
</div>

</body>
</html>

pagina5.html


5. Bootstrap Inverted Navigation Bar

EXEMPLO 6

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Bootstrap Exemplo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
<script src="bootstrap-3.3.5-dist/js/jquery.min.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

</head>
<body>

<div id="main" class="container-fluid">
<nav class="navbar navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">PSI12</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Início</a></li>
<li><a href="#">Pagina 1</a></li>
<li><a href="#">Pagina 2</a></li> 
<li><a href="#">Pagina 3</a></li> 
<li><a href="#">Pagina 4</a></li> 
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-sm-4">coluna 1</div>
<div class="col-sm-4">coluna 2</div>
<div class="col-sm-4">coluna 3</div>
</div>
</div>

</body>
</html>

pagina6.html


EXERCÍCIO 2

 

Construa uma página responsive com o seguinte formato de layout:

Sugestão de resolução:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>EXERCICIO 1</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="estilos.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
<script src="bootstrap-3.3.5-dist/js/jquery.min.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

</head>
<body>

<nav class="navbar navbar-inverse remove-all-margin">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">PSI12</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Início</a></li>
<li><a href="#">Pagina 1</a></li>
<li><a href="#">Pagina 2</a></li> 
<li><a href="#">Pagina 3</a></li> 
<li><a href="#">Pagina 4</a></li> 
</ul>
</div>
</div>
</nav>

<div class="container-fluid">

<div class="row">
<div class="col-sm-4"><p>coluna 1</p></div>
<div class="col-sm-8"><p>coluna 2</p></div>
</div>

<div class="row">
<div class="col-sm-12 area_preta">
<p>AREA PRETA</p>
</div>
</div>

<div class="row">
<div class="col-sm-12">
<p>AREA BRANCA</p>
</div>
</div>
</body>
</html>

Ver Solução


6. Bootstrap Image gallery

Classes (Image Shapes):
.img-rounded (Rounded Corners)
.img-circle (Circle)
.img-thumbnail (Thumbnail)

EXEMPLO 7

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Bootstrap Imagens</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
<link href="estilos1.css" rel="stylesheet" type="text/css">
<script src="bootstrap-3.3.5-dist/js/jquery.min.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container">
<div class="row">
<div class="col-sm-4">
<img src="imagens/n1.jpeg" class="img-rounded" alt="Cinque Terre" width="271" height="202">
</div>
<div class="col-sm-4">
<img src="imagens/n1.jpg" class="img-circle" alt="Cinque Terre" width="315" height="236">
</div>
<div class="col-sm-4">
<img src="imagens/n3.jpeg" class="img-thumbnail" alt="Cinque Terre" width="233" height="350">
</div>
</div>
</div>

</body>
</html>


EXERCÍCIO 3

 

Construa uma página responsive que mostre 4 imagens alinhadas ao TOPO com o formato redondo.

EXERCÍCIO 4

 

Construa uma galeria de imagens responsive que mostre várias imagens dispostas em grelha na página.

7. Bootstrap Scrolling Nav

EXEMPLO 8

http://ironsummitmedia.github.io/startbootstrap-scrolling-nav/

http://ironsummitmedia.github.io/startbootstrap-scrolling-nav/css/scrolling-nav.css
http://ironsummitmedia.github.io/startbootstrap-scrolling-nav/js/scrolling-nav.js
http://ironsummitmedia.github.io/startbootstrap-scrolling-nav/js/jquery.easing.min.jshttp://ironsummitmedia.github.io/startbootstrap-scrolling-nav/js/jquery.js

Ver solução


8. Customize

EXEMPLO 9

http://bootswatch.com/
1º Escolher o tema
2º Fazer Download de bootstrap.min.css e substituir (na respetiva pasta)

Ver Solução
obs. é necessário modificar os CSS em scrolling-nav.css


EXERCÍCIO 5

 

Construa uma página WEB pessoal (responsive) organizada em secções que funcione como um portfólio dos trabalhos desenvolvidos na disciplina de PSI.

Sugestões:
http://www.hihayk.com/
http://www.gilguilherme.com/
http://mateussouzaweb.com/

9. Bootstrap Contact Form + PHP


Bootstrap Forms http://www.w3schools.com/bootstrap/bootstrap_forms.asp

EXEMPLO 10

obs. o exemplo refere-se a uma página php (pagina10.php)

<form class="form-horizontal" role="form" method="post" action="pagina10.php">

<div class="form-group">
<label for="nome" class="col-lg-2 control-label">Nome</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="nome" name="nome" placeholder="Primeiro & Último nome" value="<?php echo htmlspecialchars($_POST['nome']); ?>">
<?php echo "<p class='text-danger'>$errNome</p>";?>
</div>
</div>


<div class="form-group">
<label for="email" class="col-lg-2 control-label">Email</label>
<div class="col-lg-8">
<input type="email" class="form-control" id="email" name="email" placeholder="exemplo@dominio.com" value="<?php echo htmlspecialchars($_POST['email']); ?>">
<?php echo "<p class='text-danger'>$errEmail</p>";?>
</div>
</div>

<div class="form-group">
<label for="mensagem" class="col-lg-2 control-label">Mensagem</label>
<div class="col-lg-8">
<textarea class="form-control" rows="4" name="mensagem"><?php echo htmlspecialchars($_POST['mensagem']);?></textarea>
<?php echo "<p class='text-danger'>$errMensagem</p>";?>
</div>
</div>


<div class="form-group">
<div class="col-lg-12">
<input id="submit" name="submit" type="submit" value="Enviar" class="btn btn-primary">
</div>
</div>

<div class="form-group">
<div class="col-lg-12">
<?php echo $result; ?> 
</div>
</div>
</form>


<?php
error_reporting(0);

if (isset($_POST["submit"])) {
$nome = $_POST['nome'];
$email = $_POST['email'];
$mensagem = $_POST['mensagem'];

$from = 'BootStrap Contact Form Demo'; 
$to = 'profritacris@gmail.com'; 
$subject = 'Mensagem de BootStrap Contact Form Demo';

$body = "De: $nome\n E-Mail: $email\n Mensagem:\n $mensagem";

// Check se o nome foi introduzido
if (!$_POST['nome']) {
$errNome = 'Por favor introduza o nome';
}

// Check se o email foi introduzido e se é válido
if (!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
$errEmail = 'Por favor introduza um endereço de email válido';
}

//Check se a mensagem foi introduzida
if (!$_POST['mensagem']) {
$errMensagem = 'Por favor introduza a mensagem';
}

// Se não surgirem erros, enviar a mensagem
if (!$errNome && !$errEmail && !$errMensagem) {
if (mail ($to, $subject, $body, $from)){
$result='<div class="alert alert-success">A sua mensagem foi enviada com sucesso</div>';
} else {
$result='<div class="alert alert-danger">Ocorreu um erro. Tente de novo mais tarde</div>';
}
}
echo "<script>top.location='pagina10.php#contactos'</script>";
}

?>

Ver Solução (.php) | (PDF)

http://zcarlos.pt/configurar-o-xampp-para-windows-para-enviar-e-mails-em-php/

EXERCÍCIO 6

 

Adicione ao seu Portfólio Digital um formulário de contacto. Reconfigure o Xampp de modo a conseguir enviar locamente uma mensagem a partir do seu formulário de contacto.