Design de Comunicação Multimédia 2

Sumários

Data para entrega de melhoramentos de propostas: terça-feira, 28 de janeiro, até às 23:59.
Colocar melhorias ou propostas em atraso no servidor ~ tilde.pt ~ e enviar email a indicar (incluir links!).
Não é necessário manter versões anteriores das propostas (basta substituir pela versão melhorada).

Aula 15 — Apresentação da proposta 07 e conclusões 23-01-2020

Aula 14 — Aula de compensação 17-01-2020

Aula 13 — Narrativa, wikis e recursos para design na web 16-01-2020

Aula 11 — Layout web 19-12-2019

  • Continuação da apresentação do site desenvolvido na proposta 04 e 05
  • Há uma versão nova do Estrugido HTML5 . O que está diferente:
    • A <head> integra agora mais elementos meta, entre eles, descrição, imagem de preview, favicon e ícones.
    • Favicon novo, diferente do anterior (que vinha do HTML5 Boilerplate).
    • main.css documentado em português.
  • Layout com HTML e CSS: fazer uso da semântica, cuidar a acessibilidade, técnicas de layout para situações comumns.
    • Imagens em formato de círculo. Duas situações com imagens que estão no HTML: imagens que já tem formato quadrado; imagens com formato diferente do quadrado.
    • Vídeo embed numa iframe de largura fluída. Aqui vemos como dar uma largura flexível à iframe sem distorcer as proporções do conteúdo que lá é carregado.
    • Hero com altura 100%, para perceber como funciona a altura em percentagem (sempre relativa ao elemento pai). Este exemplo serve como referência para qualquer situação onde queremos ocupar 100% da altura da janela do browser.
  • No exemplo da iframe responsiva usamos um vídeo embed do Invidious, um front-end alternativo ao Youtube, criado com objetivo de proteger a nossa privacidade enquanto utlizadores. Podes ler mais sobre o Invidious aqui.
  • Para casa: lê o texto I had a couple drinks and woke up with 1,000 nerds, sobre como surgiu o tilde.club.

Aula 10 — Design responsivo (parte 2) e estilos para impressão 12-12-2019

  • Apresentação do site desenvolvido na proposta 04 e 05
  • Design responsivo, com media queries:
    • Elemento <meta> que deve constar na <head> do HTML, para garantir que, em aparelhos móveis, a página não será redimensionada (zoom out que faça encaixar o layout previsto para desktop na largura disponível) uma vez que temos um layout móvel:
    • Pontos de quebra do layout: larguras a partir das quais queremos alterar o layout, para que esteja adaptado a tamanhos de ecrã diferentes.
    • Indicar que os estilos dados na media query são para aplicar em ecrã, com screen
    • Layout flexível, layout com recurso a medidas flexíveis: percentagens, frações, medidas viewport (vh e vw, relativas à altura e largura da janela, respetivamente)
    • mediaqueri.es, um site que coleciona exemplos de sites com layout responsivo
    • Artigo Using media queries, no MDN
    • Exemplos:
  • Estilos de impressão, com @media print {}
  • Proposta 06: Layout para impressão

Aula 09 — Design responsivo (parte 1) 5-12-2019

  • Design responsivo: pensar o layout e interface de forma fluída, que se adapta e funciona em vários contextos (ou seja, aparelhos com tamanhos de ecrã distintos).
  • CSS media queries: uma forma de escrever condições nos nossos estilos para pudermos dar características diferentes à página de acordo com vários parâmetros.
  • Sintaxe base da media query
    @media (/* condição */) {
      /* estilos a aplicar se a condição se verificar */
    }
  • Exemplos de media queries para aplicarmos estilos diferentes, consoante a dimensão do ecrã:
  • Recursos para trabalhar com media queries:
  • Proposta 05: Layout responsivo
  • Decisão da data para a aula de compensação:
    sexta-feira, 17 de janeiro de 2020, das 14:00 - 18:00

Aula 08 — Elementos meta, favicon & ícones e validadores de HTML e CSS 28-11-2019

  • Aula de compensação: preenche neste calendário a tua disponibilidade para cada data proposta. (até à próxima aula; indica nome e número de aluno no calendário).
  • Os elementos na <head> do HTML:
    • Indicar a língua do conteúdo com <lang="pt">
    • Encoding da página com <meta charset="utf-8">
    • Metadados para incluir nome do site, descrição, autor, url base, palavras-chave
    • Metadados com Open Graph Protocol, um protocolo que nos permite incluir a informação sobre a página — título, descrição, URL e imagem — que é mostrada quando o link é partilhado nas redes sociais (Facebook, Twitter, Linkedin, etc).
    • Favicon e ícones: o que são e como os incluir na página. O favicon e ícones são elementos usados pelo browser quando a nossa página é aberta; quando é guardada como bookmark ou guardada como marcador num aparelho (computador, telemóvel, tablet, etc); ou quando é o link é partilhado.
    • Exemplo: ficheiro de HTML com os elementos do head que vimos na aula preenchidos.
  • Validadores de HTML e CSS, para que servem e como usar. (Vê mais ferramentas na secção de recursos.)
  • Continuação do trabalho na proposta 04.
  • Receitas de CSS

Aula 07 — Sites de uma página: layout e padrões de interface 21-11-2019

Aula 06 — Cartazes em CSS com a grelha 14-11-2019

  • Apresentação da proposta 03: cartaz CSS
  • Revisão da grelha, com dois dos cartazes da proposta:
  • Swiss in CSS, versões CSS animadas de cartazes de Josef Müller-Brockmann
  • Recursos para aprender mais sobre a grelha de CSS:
    • Layout Land, canal da designer e developer Jens Simmons, dedicado ao tema do layout para a web. Na playlist sobre a grelha de CSS, Simmons explica em detalhe a terminologia, conceitos base, propriedades e exemplos práticos da grelha.
    • Grid Garden, um jogo para aprender a grelha de CSS.
    • Início da Proposta 04:
      desenhar um mini site para um festival de música, com base no cartaz da proposta anterior. Nesta aula vamos criar os documentos base para o site e trabalhar nos conteúdos.

Aula 05 — Estilo Suíço, layout com a grelha CSS (parte 2) e transformações 07-11-2019

Estilo Suíço

  • Influências: Suprematismo, Construtivismo, De Stijl, Bauhaus
  • Princípios
  • Designers: Josef Müller-Brockmann e Armin Hofmann
  • Helvetica, Akzidenz Grotesk, Univers
  • Slides

Box-sizing, calc(), z-index e propriedades para manipular de texto

Layout com a grelha CSS e transformações

Fontes livres próximas da Helvetica e Akzidenz (proposta 03):
Inter, Libre Franklin, Accidenz Commons (só um peso)

Aula 04 — Layout com a grelha CSS (parte 1) 31-10-2019

Aula 03 — @font-face, continuação da proposta 02 24-10-2019

  • Introdução ao editor de código Atom
    • Personalização do do tema
    • Instalação de extras: package ftp-remote-edit
    • Configuração do ftp-remote-edit para ligar ao servidor: edição de ficheiros no servidor e upload
    • Tutorial completo de Atom
  • Manipulação de texto com CSS
    • Coleções de fontes livres
      • The League of Moveable Type, foundry onde podemos fazer download das fontes em formato webfont e já com CSS @font-face
      • Fontain, coleção de fontes livres onde podemos fazer download das fontes em vários formatos e também com o CSS
      • Use Modify, coleção de fontes livres (dá-nos o link para o site onde podemos fazer download da fonte)
      • Google Fonts, coleção de fontes livres da Google
    • Formatos das fontes:
      • WOFF e WOFF2, formato mais leve para uso web
      • TTF e OTF, formatos com suporte geral
      • EOT, formato suportado por Internet Explorer 8 e
      • SVG, formato suportado em sistemas mobile iPhone e Android mais antigos
    • Alojamento de fontes no servidor: fonte e ficheiro de texto da licença - idealmente licença OFL
    • Font Squirrel, gerador de vários formatos da fonte para uso web
  • Sintaxe @font-face
    • Sintaxe base:
      @font-face {
          /* Nome da família */
          font-family: 'Oswald';
          /* Peso da fonte (light, normal, bold) */
          font-weight: normal;
          /* Estilo (normal, italic, oblique) */
          font-style: normal;
          /* URL para o ficheiro da fonte e formato */
          src: url('fonts/Oswald-Regular.ttf') format('truetype');
          }
    • Sintaxe à prova de bala, proposta por Paul Irish:
      @font-face {
          font-family: 'Oswald';
          font-weight: normal;
          font-style: normal;
           /* Regra específica para a versão da fonte em IE */
          src: url('fonts/Oswald-Regular.eot');
          /* Vários formatos que vão ser usados pelo browser de acordo com o suporte */
          src: url('fonts/Oswald-Regular.eot?#iefix') format('embedded-opentype'),
                 url('fonts/Oswald-Regular.woff2') format('woff2'),
                 url('fonts/Oswald-Regular.woff') format('woff'),
                 url('fonts/Oswald-Regular.ttf') format('truetype'),
                 url('fonts/Oswald-Regular.svg#Oswald-Regular') format('svg');
      
          }
          
    • Algumas propriedades CSS para texto
      • text-transform: none | lowercase | uppercase | capitalize | full-width
      • letter-spacing: valor
      • text-decoration: none | underline | overline | line-through suporta os três valores, exemplo text-decoration: underline overline purple; suporta tipos de linha e cores, exemplo text-decoration: underline purple dashed;
      • text-align: center | left | right | justify O texto justificado cria alguns problemas com espaçamento entre palavras. Para compensar podemos usar hifenização com propriedade hyphens: none | manual | auto (atenção! com hifenização é necessário definir a língua da página no HTML). Podemos também usar a propriedade text-justify: inter-character; /* inter-word vs inter-character */ para definir que também queremos espaçar os caracteres (assim distribuímos o espaço entre letras e evitamos espaçamentos excessivos apenas entre palavras).
      • text-align-last: auto | start | end | left | right | center | justify Esta propriedade alinha a última linha de texto de um bloco/elemento
      • writing-mode: horizontal-tb | vertical-rl | vertical-lr
      • text-orientation: mixed | upright | sideways-right | sideways | use-glyph-orientation Esta propriedade funciona quando o writing-mode não é horizontal.
      • text-shadow: offset-x | offset-y | blur-radius | color Podemos atribuir várias sombras ao mesmo texto
    • Pseudo classes ::first-letter e ::first-line, para selecionar a primeira letra e primeira linha de um elemento, respetivamente
  • Proposta 02: referências, dúvidas e feeback
    • Pippin Barr, artista que trabalha na área dos jogos (game design, game concepts)
    • Livros Serrote com estética pixel:
    • Dribbble, recurso de cultura visual sobretudo nas áreas de interface e ilustração digital. Formato snapshot de um trabalho em curso.

Aula 02 — GUI's & Pixel art 17-10-2019

  • Transferir ficheiros para o servidor via FTP
    • Instalar Cyberduck (Mac OS, Windows)
    • Aprender a criar uma ligação, neste caso ao Tilde.pt
    • Criar pastas no servidor e transferir ficheiros
  • Ponto de situação da proposta 01
    • Dúvidas de HTML & CSS
    • Entrega até às 23:59 de hoje
  • Os primeiros GUI's
    • Da linha de comando ao interface gráfico
    • Os primeiros PC's
    • A metáfora da secretária (Desktop)
    • Manifestação das características do hardware — resolução do ecrã, capacidade do disco, etc — e os inputs disponíveis— teclado, rato, touchscreen... — no interface
  • Susan Kare
    • Designer dos ícones e fontes do primeiro Mac OS
    • Estética pixel: inspirada noutras formas artísticas que usam grelha regular (mosaico, ponto de cruz, ASCII...)
    • Princípios para os ícones: economia de meios; menos ilustrativos e mais metafóricos
    • Happy Mac: dimensão humana e afetiva
    • Clarus, o cãovaca, e o Jardim de Ícones da Apple
  • Pixel art e as primeiras consolas de jogos
    • Grelha regular
    • Paleta de cores limitada
    • Estratégias gráficas para simular tridimensionalidade num espaço 2D
  • Proposta 02: Teaser de um jogo fictício
  • Slides

Aula 01 — Desenhar para a web: da semântica ao servidor 10-10-2019

Bibliografia

(em progresso)

Recursos

HTML & CSS

Documentação, validadores e bases para começar projectos web.

Imagens, ícones, padrões e mais, segundo licenças livres

  • The Noun Project, conjuntos de ícones com licenças Creative Commons (exige registo para download)