top of page

AULA 1

Aula 1

Módulo 3 - Linguagens de Programação II

1. BootStrap

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 HTML, CSS e JavaScript.  Graças ao conceito de software livre, o Bootstrap é aprimorado continuamente.

 

COMO USAR O BOOTSTRAP?

 

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 jquery

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4. Adicionar o Bootstrap e o jquery às páginas do projeto

 

BOOTSTRAP CONTAINER

Bootstrap requer um elemento a envolver o conteúdo do site:

 

LARGURA FIXA

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

 

<body>
   <div class="container">

   </div>

</body>
</html>

 

LARGURA FLUÍDA

<!DOCTYPE html>
<html lang="pt-br">
 

<head>
<title>PÁGINA DO PROJETO COM Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap.min.css">
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
</head>

 

<body>
   <div class="container-fluid">

   </div>

</body>
</html>

 

 

BOOSTRAP 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

  • xs (phones)

  • sm (tablets)

  • md (desktops)

  • lg (larger desktops)

 

 

Estrutura basica 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 1 - CRIAR UM HEADER

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

 

<body>

<div class="container-fluid">
   <div class="row">
      <div class="col-sm-12">
         <img src="http://placehold.it/2610x731" class="img-responsive">
      </div>
   </div>
</div>
</body>
</html>

 

 

 

 

EXEMPLO 2 -
CRIAR UMA PÁGINA COM HEADER, FOOTER E 4 COLUNAS PARA OS CONTEÚDOS

<!DOCTYPE html>
<html lang="pt-br">
 

<head>
<title>PÁGINA DO PROJETO COM Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap.min.css">
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
</head>

 

<body>

   <div class="container-fluid">
      <div class="row">
         <div class="col-sm-12">
            <img src="http://placehold.it/2610x731" class="img-responsive">
         </div>
      </div>
   </div>
   

   <div class="container-fluid">
      <div class="row">
         <div class="col-sm-3">
            COLUNA1
         </div>
         <div class="col-sm-3">
            COLUNA2
         </div>
         <div class="col-sm-3">
            COLUNA3
         </div>
         <div class="col-sm-3">
            COLUNA4
         </div>
      </div>
   </div>

 

   <div class="container-fluid">
      <div class="row">
         <div class="col-sm-12">
            <div class="text-right">
               © Copyright ritacris.com 2015
            </div>
         </div>
      </div>
   </div>

</body>
</html>

 

 

 

 

BOOTSTRAP NAVIGATION BAR

 

EXEMPLO 3 -

CRIAR UMA PÁGINA COM HEADER, BARRA DE NAVEGAÇÃO, FOOTER E 2 COLUNAS PARA OS CONTEÚDOS

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>PÁGINA DO PROJETO COM Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap.min.css">
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap-3.3.6-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>

 

   <div class="container-fluid">
      <div class="row">
         <div class="col-sm-12">
            <img src="http://placehold.it/2610x731" class="img-responsive">
         </div>
      </div>
   </div>

 

   <div class="container-fluid">
      <div class="row">
         <div class="col-sm-8">
            COLUNA1
         </div>
         <div class="col-sm-4">
            COLUNA2
         </div>
      </div>
   </div>

   

   <div class="container-fluid">
      <div class="row">
         <div class="col-sm-12">
            <div class="text-right">
               © Copyright ritacris.com 2015
            </div>
         </div>
      </div>
   </div>

</body>
</html>

 

 

 

 

PÁGINA EXEMPLO

 

 

 

 

 

 

 

 

PROPOSTA DE TRABALHO 1 

 

Desenvolva uma página web, com uso da ferramenta BootStrap, na qual deverá conter os seguintes elementos:

  • Navigation Bar  - com 6 opções

  • Header - Imagem central

  • Grid System - 2 colunas (1ª coluna com 4 espaços e 2ª coluna com o restante espaço disponível)

  • Footer - com o teu nome completo e data de nascimento, alinhado à direita

Aula 2

AULA 2

2. HTML Forms
 

Os formulários HTML são usados ​​para obter os dados introduzidos pelos utilizadores.

 

<form>
   ....
   form elements
   ....
</form>

 

 

Um formulário comporta vários elementos:

 

O <input>  é o elemento mais importante  de um formulário e pode ser de vários tipos: text, submit e radio.

 

 

 

 

<form name="form1" method="post" action="">

    <input type="text" name="nome" id="nome" size="40" maxlength="40">

</form>

 

 

 

 

 

<form name="form1" method="post" action="">

    <input type="submit" name="enviar" id="enviar" value="Enviar">

</form>

 

 

 

 

 

 

<form name="form1" method="post" action="">


    <input type="radio" name="RadioGroup1" value="V" id="RadioGroup1_0">
    Verdadeiro
    <br>


    <input type="radio" name="RadioGroup1" value="F" id="RadioGroup1_1">
    Falso


</form>

 

 

 

EXEMPLO:

 

 

 

 

 

 

 

 

<form name="form1" method="post" action="">
   <p>Nome 
      <label>
         <input name="nome" type="text" id="nome" size="50" maxlength="50">
      </label>
   </p>
   <p>Sexo 
      <label> <br>
         <input type="radio" name="sexo" value="F" id="sexo_0">
            Feminino

      </label>
      <br>
      <label>
         <input type="radio" name="sexo" value="M" id="sexo_1">
            Masculino

      </label>
   </p>
   <p>
      <label>
         <input type="submit" name="enviar" id="enviar" value="Enviar">
      </label>
      <br>
   </p>
</form>

 

 

 

PROPOSTA DE TRABALHO 2

 

Desenvolva uma página web, com um formulário onde seja possível preencher os seguintes elementos de um aluno. 

  • Nome completo

  • nr cartão cidadão

  • data nascimento

  • Sexo (masculino/feminino) - input type="radio"

  • Morada

  • Código Postal

  • Nome do Pai

  • Nome da Mãe

  • Contacto telefónico

  • Endereço de e-mail

  • Ciclo de escolaridade (1º Ciclo/ 2º Ciclo/ 3º Ciclo/ Secundário/ Profissional) - input type="radio"

  • Botão para ENVIAR

 

 

 

 

 

 

 

 

 

 

3. BootStrap FORMS

Ver mais informações sobre BootStrap Forms em http://www.w3schools.com/bootstrap/bootstrap_forms.asp

 

Bootstrap disponibiliza form layouts:

  • Vertical form (default)

  • Horizontal form

  • Inline form

 

 

EXEMPLO Vertical form

 

 

 

 

 

 

 

 

 

 

 

 

   <form role="form" method="post">
      <div class="form-group">
         <label for="email">Email:</label>
         <input type="email" class="form-control" id="email" name="email">
      </div>
      <div class="form-group">
         <label for="password">Password:</label>
         <input type="password" class="form-control" id="password"               

         name="password">
      </div>
      <button type="submit" class="btn btn-default">Enviar</button>
   </form>

 

 

 

 

EXEMPLO Inline form

 

 

 

 

 

<form role="form" method="post" class="form-inline">
   <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" name="email">
   </div>
   <div class="form-group">
      <label for="password">Password:</label>
      <input type="password" class="form-control" id="password"

      name="password">
   </div>
   <button type="submit" class="btn btn-default">Enviar</button>
</form>

 

 

FREE TEMPLATES

Bootstrap Login Forms: 3 Free Responsive Template
http://azmind.com/2015/04/19/bootstrap-login-forms/

 

Bootstrap Login and Register Forms in One Page: 3 Free Templates
http://azmind.com/2015/11/06/bootstrap-login-register-forms-templates/

 

 

 

PROPOSTA DE TRABALHO 3

 

  1. Desenvolva uma página Web com BootStrap Login Forms

  2. Desenvolva uma página Web com BootStrap Login and Register Forms

AULA 3

Aula 3

AVALIAÇÃO FINAL

Avaliação Final

Desenvolva um site (em grupos de 2 elementos), com um tema à vossa escolha,  onde apliquem as seguintes ferramentas Web que aprenderam:

 

- LightBox

- BootStrap

- Formulários

 

Datas:

- Desenvolvimento nas aulas dos dias 25/02(2h), 29/02(1h), 03/03(2h), 07/03(1h) e 10/03(2h)

- Entrega no dia 10/03

bottom of page