Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Desenvolvimento de Interfaces Responsivas

    Enviado por

    kyarakuta66
    7 visualizações14 páginas

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    7 visualizações14 páginas

    Desenvolvimento de Interfaces Responsivas

    Enviado por

    kyarakuta66

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 14

    Programação Web I

    Desenvolvimento de
    Projetos Responsivos
    Prof. Esp. Guilherme Manuel
    Construindo um projeto
    • O que é um projeto?
    • Podemos definir projeto
    como um trabalho, com
    início, meio e fim, envolvendo
    determinado escopo e
    recursos, para um resultado
    Processos
    • A construção de projetos passa pela definição dos processos.
    • Crie um processo tendo um mente:
    ❑ O que é o negócio do seu cliente;
    ❑ Porque ele precisa da solução;
    ❑ Prioridades de implementação;
    ❑ Prototipagem.
    Fundamentos de Design de Interfaces
    • É fundamental, no processo de
    prototipagem e desenvolvimento,
    pensar na experiência do usuário
    com o projeto.
    • Esse trabalho é realizado por meio
    de técnicas de UX/UI Design.
    Fundamentos de Design de Interfaces
    • Algumas questões a serem pensadas na construção de uma boa
    interface são:
    ❑ Hierarquia dos elementos, onde as cores e tamanhos estão
    organizados de forma hierárquica;
    ❑ Cor e contraste, onde as cores estão dispostas de forma legível
    para o usuário;
    ❑ Área de respiro, pensando no espaçamento entre os elementos;
    ❑ Proporção, coerência e consistência.
    Fundamentos de Design de Interfaces
    • Algumas interfaces para serem analisadas:
    • www.parceiros.ifood.com.br
    • www.apple.com/br
    • www.netflix.com/br
    • www.coca-cola.com.br
    Ferramentas para Desenvolvimento
    de Interfaces
    • Bootstrap: Framework para o desenvolvimento de interfaces
    responsivas.
    • Acesse: https://getbootstrap.com/
    Instalando o Bootstrap
    • Na documentação do framework, acesse: Getting started ->
    Download.
    • Faremos o download dos arquivos JS e CSS:
    Instalando o Bootstrap
    • Devemos organizar a estrutura do diretório do nosso projeto, onde
    criaremos uma pasta específica para colocar os arquivos do
    Bootstrap:

    Crie uma Coloque os


    pasta para o arquivos do
    Bootstrap Bootstrap
    dentro da
    pasta recém
    criada
    Instalando o Bootstrap
    • Devemos adicionar os dois códigos principais do Bootstrap do JS e do
    CSS:
    • bootstrap.min.css
    • bootstrap.bundle.min.js
    • Para isso, devemos procurá-los no diretório do Bootstrap e colocar na
    página HTML.
    Instalando o Bootstrap
    • No HTML ficará <!DOCTYPE html>
    <html lang="PT-BR">
    assim: <head>
    <meta charset="UTF-8"/>
    <title>Aprendendo Bootstrap</title>
    <link rel="stylesheet" type="text/css"
    href="bootstrap/css/bootstrap.min.css"/>
    <script type="text/javascript"
    src="bootstrap/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>

    </body>
    </html>
    Documentação do Bootstrap
    • O bootstrap facilita na implementação de suas funcionalidades por
    meio da documentação, que é dividida em diversas partes para a
    orientação de implantação de componentes de interfaces, como:
    ❑ Layout;
    ❑ Content;
    ❑ Forms;
    ❑ Components.

    Você também pode gostar