top of page

AULA 1

Aula 1
CSS e JS

(a) fullpage.js

http://alvarotrigo.com/fullPage/

 

EXEMPLO 1 - Criar uma página com scroll para as secções

 

 

1º Escolher uma página modelo

2º Copiar todos os .css e .js da página modelo para a pasta da nova página:

 

 

 

 

Ficheiros CSS

examples.css

jquery.fullPage.css

 

 

 

 

 

 

 

 

 

 

 

Ficheiros JS

examples.js

jquery.fullPage.js

jquery.min.js

jquery.slimscroll.min.js

jquery-ui.min.js

3º Copiar a página modelo para a pasta e renomear para index.html

4º Editar a página e proceder às alterações:

5º Acrescentar as âncoras para as novas secções:

http://html-color-codes.info/

6º Completar o menu de opções:

7º Criar/Acrescentar as secções:

8º Adicionar os conteúdos e personalizar

AULA 2

Aula 2
jQuery

O jQuery é um framework de Javascript.

 

Um framework é uma coleção de funções e métodos prontos para serem utilizados, amplamente testados e que devem ser usados de forma pré-definida.

 

Em alguns casos um framework chega a ser um estilo completamente novo de programar numa certa linguagem, no caso do Javascript, o jQuery é, sem dúvida, um estilo novo, atrativo, fácil e interessantíssimo de programar.

 

Para poder utlizar o jQuery tem que o inserir no HTML.

O JavaScript é uma linguagem de programação do lado cliente, ou seja, é processada pelo próprio browser.

 

Com o JavaScript podemos criar efeitos especiais nas páginas Web, além de podermos proporcionar uma maior interatividade com os utilizadores. O JavaScript é uma linguagem orientada a objetos, ou seja, trata todos os elementos da página como objetos distintos, fascilitando a tarefa da programação.

 

Resumindo, o JavaScript é uma poderosa linguagem que deve ser dominada por quem deseja criar páginas Web dinâmicas e interativas.

LIGHTBOX
Exercício Prático
Implementar uma LightBox

1º Construir um Layout com base em 

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_divs

 

2º Proceder ao download de lightbox.css

 

3º Proceder ao download de lightbox-plus-jquery.min.js

 

4º Adicionar à página o link para o ficheiro lightbox.css, dentro do <head>

5º Adicionar à página o script para o ficheiro lightbox-plux-jquery.min.js:

6º Criar a hiperligação para a imagem que vai abrir na lightbox:

     (este exemplo é apenas para uma imagem)

7º Copiar para a pasta da página a pasta images com os botoes da lightbox (proceder aqui ao download)

    Botão CLOSE               Botão PREVIOUS          Botão NEXT              Botão LOADING

8º Verificar pasta de trabalho se tem todos os ficheiros nas pastas corretas

ver exemplo demonstração

FICHA DE AVALIAÇÃO

Ficha Avaliação 1

Segue-se uma página promocional de um bar. A página apresenta os snacks e uma imagem do interior bem como informação do contacto e da localização (através do Google Maps) . 

A cada categoria de snack está associada uma lightbox que mostra um catálogo da categoria. 

Desenvolva uma página similar que sirva para promover um Snack Bar.

 

Seja criativo e confira qualidade à página em termos de imagem e composição.

 

Ao clicar na localização deverá mostrar no Goggle Maps.

 

Implemente de forma pertinente a lightbox. 

AULA 3

Aula 3
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 

 

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 4

Aula 4
4. 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 
           <input name="nome" type="text" id="nome" size="50" maxlength="50">
     </p>
     <p>Sexo <br>
           <input type="radio" name="sexo" value="F" id="sexo_0">
           Feminino  <br>

           <input type="radio" name="sexo" value="M" id="sexo_1">
           Masculino
     </p>
     <p>
           <input type="submit" name="enviar" id="enviar" value="Enviar">
     </p>
</form>

 

 

 

PROPOSTA DE TRABALHO "Forms1"

 

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

 

 

 

 

 

4.1 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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2º 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 "Forms2"

 

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

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

Avaliaçao Final

AVALIAÇÃO FINAL

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

 

- LightBox

- BootStrap

- Formulários

 

Datas:

- Desenvolvimento nas aulas dos dias 22/02(1hr), 24/02(2hr), 29/02(1hr) e 02/03(2hr)

- Entrega no dia 02/03

bottom of page