WEBDESIGN | UFPE

1. Professor 

Prof. Dr. Guilherme Ranoya

2. Oferta 

Prevista para  
 

3. Resumo 

Esta disciplina tem a função de ensinar sobre os materiais e processos envolvidos na construção de websites. Ela trabalhará com os aspectos e conceitos técnicos de infra-estrutura, transporte de dados pela internet, princípios de programação, princípios de produção e construção de código HTML/CSS.

Todos estes assuntos serão abordados de forma introdutória. A disciplina não tem a missão de formar programadores ou desenvolvedores web, e mesmo dentro do escopo de design, são necessários bem mais do que 6 meses de aulas para que um profissional seja plenamente capaz de assumir projetos voltados para web, considerando que as tecnologias e as técnicas mudam constante e rapidamente.

O intuito deste grupo de estudo é envolver gradualmente o aluno no mundo do design para web, e habilitá-lo para que possa utilizar esta mídia para o desenvolvimento de seus trabalhos em outras disciplinas, e projetos pessoais.

4. O que você efetivamente aprenderá na disciplina? 

Habilidades

Programação com código HTML
Programação com código CSS

Competências

Construção de websites

5. Recomendações e encaminhamento 

Recomenda-se aos alunos que se interessarem na área de design para mídias digitais que cursem, após a cadeira de Webdesign, as demais disciplinas como apresentadas no diagrama abaixo. Esta trajetória não se configura como algo obrigatório ou necessário, mas uma recomendação para que o aproveitamento formativo seja integral.

6. Quem deve cursar esta disciplina?

Alunos de graduação que desejam iniciar seu aprendizado sobre programação
Alunos de graduação que desejam entender como é o processo de construção daquilo que vemos e usamos nos navegadores web

7. Quem NÃO deve cursar esta disciplina?

Alunos que já tenham conhecimento ou prática com o assunto, uma vez que o conteúdo abordado pelo grupo de estudo é introdutório;
Alunos interessados em design de interfaces, arquitetura de informação, experiência de uso, e outros assuntos relacionados com a web, mas que cabem ao eixo de estética, não o de tecnologia.

8. Ementa 

Eixo de tecnologia
nível básico

Estudo dos processos e materiais utilizados para construção de artefatos de informação em suporte digital, mais especificamente, cujo suporte são os navegadores web, contemplando os aspectos técnicos da mídia computacional, das convenções e peculiaridades da linguagem, e dos conceitos envolvidos para a viabilidade de sua produção.

9. Objetivos 

A proposta deste componente curricular é preparar o aluno para as atividades, as práticas e o raciocínio envolvidos na construção de um formato específico das mídias digitais, o website. Apesar de comum, este tipo de projeto exige detalhismo técnico e envolve conhecimento de particularidades sobre os materiais empregados (a confecção de códigos do tipo script), as tecnologias e a organização produtiva. Neste escopo, o presente grupo de estudo visa desenvolver a competência construtiva dentro do contexto digital (ainda que em um espectro reduzido das inúmeras formas e formatos desta mídia), com o intuito de habilitar o estudante a utilizá-la em seus próprios projetos, ou trabalhar com ela de forma consciente sobre o que é possível e o que é viável nela, e/ou como as soluções que elabora podem ser executadas nela.

10. Metodologia 

Aulas expositivas para apresentação e discussão de conceitos e questões envolvidas na infra-estrutura tecnologica da mídia digital, e aulas práticas para experimentação e entendimento dos elementos construtivos do artefato website.

11. Conteúdo Programático 

  1. Arquitetura da mídia e fundamentos

    Introdução ao funcionamento da web
    Ambiente: o navegador e os diferentes navegadores
    Características do material (código computacional e tecnologia) que opera nos navegadores
    Limites técnicos da mídia computacional
    Etapas do processo de criação de um website
    Processo de construção de um website
    Morfologia dos códigos processados no navegador
  2. Hypertext Markup Language | HTML

    Universal resource locator (URL)
    Estrutura de diretórios/arquivos no sistema operacional
    Características dos arquivos
    Sintaxe do código HTML
    Estrutura/organização básica do código HTML
    Cabeçalho e definições do documento HTML
    Elementos de conteudo/inline
    Elementos de bloco
    Formulários
  3. Cascade Style Sheets | CSS

    Aplicação style, tag, class e id
    Sintaxe e filtros de aplicação de CSS
    Cores
    Dimensionamento, dimensões e elementos do dimensionamento (box model)
    Posicionamento
    Background
    Tipografia e fontes
    Detalhes
    Transições
  4. Design Responsivo

    Spearação de código
    Variáveis de CSS
    Mobile First
    Breakpoints
    Media Query
    SVG
    Grid
  5. Tecnologias Correlatas

    AMP Stories
    Facebook Instant Articles
    Frameworks
    Ferramentas de produtividade

Documentação de aula

Plano de aula


12. Sistema de avaliação e critérios 

A avaliação será realizada através da solução de 6 puzzles presentes no material da disciplina, e da entrega de 1 exercício final:

Os 6 puzzles correspondem a 60% da composição da nota, e o último exercício a 30% da composição final da nota.

, sua avaliação em
, sua avaliação em

Estes são os critérios para avaliação das atividades:

  • 50% Funcionamento;
    Avaliado o domínio do material (código) de trabalho e a competência em fazê-lo funcionar
  • 30% Documentação (explicações claras e legíveis das soluções adotadas);
    Avaliada a capacidade de entendimento teórico-prático e raciocínio sobre o conhecimento
  • 20% Precisão
    Avaliada o cuidado e dedicação ao trabalho
  • 3,0 2,0 1,0 2,0 1,5 0,5
    Puzzles 6,0 Exercício Final 4,0 10,0

13. Bibliografia 

14. Resultados e contribuições 

Esta disciplina contribui ao contexto social em que estamos inseridos preparando profissionais de design para que pensem, projetem, produzam e aperfeiçõem websites, mídia cuja ênfase são as informações públicas sobre empresas, negócios, produtos, serviços dentre uma grande variedade de outras atividades para as quais a web serve como suporte informacional.

Ela também contribui com o processo formativo do designer, em conjunto às demais disciplinas oferecidas no curso de Bacharelado em Design da Universidade Federal de Pernambuco, introduzindo o aluno aos artefatos digitais e ao design construído através do código computacional, e inicia o desenvolvimento da competência de se projetar para mídias complexas, como pode ser obervado nos trabalhos desenvolvidos na disciplina:

 

15. Histórico 

 
COPYRIGHT © 2019
PROF. DR. GUILHERME RANOYA, dDESIGN | UFPE