Skip to main content

TESP 2026

Menu
Facebook Youtube Instagram

Brief para avaliação

TESP TECNOLOGIAS PARA A WEB

PROJECTO

Enunciado projecto individual de site

01. BRIEF e ESTRUTURA

O brief do projeto deve ser escrito e deve conter:

  • Identificação da empresa
  • Propósito do site
    O que se propõe fazer, por exemplo: “Mostrar o portfólio e dar a conhecer trabalho multifacetado, e …”
  • Objectivos do site
    Descrição dos objectivos, por exemplo: “Criar notoriedade dentro do meio do design, de forma a angariar novos clientes, dar a conhecer os meus conhecimentos técnicos…”
  • Publico alvo –
  • Conceito gráfico
    Descreve o qual a estratégia gráfica, por exemplo: “O site gráficamente é minimalista para que….” ou “O grafismo do site deve ser colorido e dinâmico, com animações, para que…”
  • Estrutura de páginas do site
  • Exemplos de sites da concorrência
    3 exemplos, de sites que sejam concorrencia directa.

INSPIRAÇÃO

LINKS

Escolha de sites pelo design apresentado:

ESTRUTURA

Fase de estrutura.
Cria uma estrutura para um site tendo em conta os pontos obrigatórios e o teu Brief.
A representação da estrutura deve ser sumária e representada por bullet points, numérica, ou em diagrama:

  • Header (cabeçalho)
    Logo e menu
  • Footer (rodapé)
    Segundo menu para Footer, Contactos e redes sociais
  • Home
    Slide-show com os três últimos trabalhos de portfólio
    Secção com resumo de sobre
    Grelha com as três últimas publicações de blog
    Secção com estudo de caso
    (A home não tem de ter esta estrutura, e caso tenha outra, então estes pontos devem passar para a página de demonstrações obrigatórias.)
  • Sobre
    Secção com informação sobre mim
    Secção com CV
  • Portfólio
    Grelha de publicações de portfólio (no mínimo 4 publicações)
  • Página individual de portfólio
    Secção com informação (Nome do projecto, ano, propósito, cliente)
    Secção com imagens / galeria de imagens / video / audio
    Secção de partilha para redes sociais
  • Blog ou outro Custom Post Type
    Secção com grelha de publicações (no mínimo 4 publicações)
  • Página individual de Blog
    Secção com imagem principal e titulo
    Secção com texto de entrada
    Secção de conteúdo
    Secção de partilha para redes sociais
  • Página de demonstrações obrigatórias TeSP
    Menu diferente do resto do site
    Página com estrutura diferente do resto do site
    Demonstração de tipografia utilizada e cores globais
    Secção com demonstração de icones com Webfont
    Exercícios em aula
  • Contactos
    Secção com morada
    Secção com botões para email e telefone
    Formulário de contacto
    Secção com mapa

2. LAYOUTS e DESIGN

  1. Fase de esboço.
    • Representa em papel os esboços de layouts da estrutura definida.
  2. Fase de Wireframe, Mockup/Arte-finalização.
    • Quando os Wireframes estiverem concluídos, duplica este ficheiro e começa a detalhar e arte-finalizar os layouts em Illustrator prontos para arte-final.
    • Definição da tipografia a utilizar e os Headers (H1, H2, …) e texto de parágrafo – Utilizar tipografia do Google Fonts (https://fonts.google.com/)
    • Preparação dos ícones vectoriais com exportação no formatos .SVG e criação de uma Webfont na IcoMoon App (https://icomoon.io/) .
  3. Definição do documento do Illustrator com medidas em pixéis (px), cor em RGB, definição com 72dpi, formato de ecrã a ter em conta:1366x768px, e a área boxed de 1140px de largura
  4. Tem em conta a fold-line

Outros elementos para avaliação:

  • Comunicação acima da Fold-Line (primeiro ecrã) e caso utilize várias secções deve ter em conta a estratégia de recuperação de atenção.
  • Página em layout Full-width
  • Página em layout Boxed
  • Organização de conteúdo em 1, 2, 3 e 4 colunas, fundos com imagem e cor.
  • Definir tipografia e mostrar uma secção com a organização de texto: Headers (Títulos e subtítulos) H1, H2, H3, H4, H5, H6 e definir o texto de Parágrafo (body).
  • Páginas com grelhas de publicação:
    Utilizando o widget para criar grelhas de publicações, criar grelha de notícias ou “posts” de blog, deve conter imagem, titulo, parágrafo, e/ou botão de “ver-mais”.
    Posts: criar no mínimo 2 templates com layouts diferentes para os posts.
    As publicações devem conter imagens/slide-show/vídeo/som.
  • Criar um mínimo de 4 publicações para cada tipo de publicação, 4 em Elementor e 4 em Gutenberg.
  • Criação de pelo menos um Custom Post Type para organização de blogue ou notícias, portfólio, etc.
  • Utilização de fundos de secção ou colunas com imagens e outros com cor.
  • Criar uma página diferente de todas as outras, por exemplo um Header diferente do utilizado em todas as outras páginas, etc.

3. FASE de PROTÓTIPO

  • Instale o WAMP no computador
  • Com base no “Mockup” desenvolvido em “Illustrator”, constrói o website
  • Instalação do WordPress(.org) e plugins.
  • Utilização do tema HELLO.
  • Instalação de pugins e page builder Elementor.
  • Quando o site estiver pronto, migrar para o servidor com o domínio e alojamento fornecido: https://tesp.esadcr.pt/mmwebdev/nome-sobrenome.

Ter em conta:

  • Exportar os vários elementos para o WordPress nos formatos .PNG (Imagens com transparência) e .JPG (imagens sem transparência)
  • Os layouts do site devem corresponder exactamente aos representados no Illustrator na fase de Mockup.
    Nos conteúdos pode ser utilizado texto simulado Lorem Ipsum (https://lipsum.com/feed/html)
  • Utilização de slide-shows com pelo menos três slides com a utilização de layers (camadas) com Imagem, vídeo, texto, botão. Pelo menos um slide com vídeo em background e layer de texto.
  • Custom CSS.
  • Partilha de página de publicação para uma rede social, utilizando o widget “Sassy”.
  • Botões criados com CSS, com a utilização de ícones em Webfont (utilizar o IcoMoon) e CSS.
  • Utilização dos widgets: Grelha de imagens, Carrosel de imagens e Carrosel de publicações.

DOCUMENTOS PARA CONSULTA

Documentos de apoio

LINKS

UX vs UI:

Instalações

Instalar o WordPress no computador (Localhost)
WAMP (Windows, Apache, MySQL, e PHP)
MAMP (Macintosh, Apache, MySQL, e PHP)

Windows

Mac OS

XAMPP – Windows + Mac OS

WORDPRESS

WordPress – Plugins gratuitos

WordPress – Temas gratuitos

WordPress – Temas e Plugins pagos

Migrar o site de um servidor para outro

1- Manualmente

2- Migrar o site usando o plugin Duplicator

3- Migrar o site com o plugin All In One Migration Tool. É a forma mais simples, mas a versão gratuita é limitada em tamanho, mas a versão paga é ilimitada. Nos links em baixo, o segundo é com um plugin para desbloquear o All In One Migration Tool para os 512MB.