Tecnologia e Prototipagem by CLARA ZISMANN STREIT https://padlet.com/clarastreit/xt8idred2v0fz2gl • Pesquisa sobre protótipos e ferramentas de desenvolvimento web! Aqui você vai entender a diferença entre protótipos de baixa e alta fidelidade, além de conhecer ferramentas como Figma, HTML, CSS e VSCode. en-us 2025-04-07 10:56:08 UTC 2025-04-07 22:33:36 UTC hello@padlet.com https://padlet.net/icons/8.0/png/1f5a5.png 🟪 • Protótipos de Baixa Fidelidade clarastreit https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399501227 O que são?
Protótipos de baixa fidelidade são versões simples e rápidas de um projeto. Costumam ser feitos à mão ou com ferramentas básicas, só pra mostrar a ideia geral do layout e da navegação.

]]> 2025-04-07 21:49:47 UTC https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399501227 🟩 • Protótipos de Alta Fidelidade clarastreit https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399501599 O que são?
Protótipos de alta fidelidade são versões quase reais do produto final. Eles mostram as cores, imagens, fontes e até simulação de interações.
Feitos com ferramentas como o Figma.

]]> 2025-04-07 21:50:23 UTC https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399501599 🎨 • Elementos do Figma clarastreit https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399501741 O Figma é uma ferramenta de design de interface e prototipagem, usada para criar layouts e simular o funcionamento de sites e aplicativos. Ele funciona 100% online e permite trabalho em grupo em tempo real.
Elementos principais:

  • Frames: áreas de trabalho onde você monta suas telas

  • Shapes: formas básicas (retângulo, círculo etc.)

  • Components: elementos reutilizáveis (como botões padrão)

  • Text: inserir textos

  • Plugins: ferramentas extras que ajudam no design

]]> 2025-04-07 21:50:37 UTC https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399501741 🌐 • O que é HTML? clarastreit https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399502588 HTML (HyperText Markup Language)
É a linguagem de marcação usada pra criar a estrutura de sites. Ele organiza o conteúdo (como títulos, parágrafos, imagens, links...)

]]> 2025-04-07 21:51:50 UTC https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399502588 🖥️ • O que é VSCODE? clarastreit https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399502748 Visual Studio Code (VSCode) é um editor de código muito usado por programadores.
Ele serve pra escrever códigos em várias linguagens, como HTML, CSS, JavaScript e mais.

]]> 2025-04-07 21:52:07 UTC https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399502748 🎨 • O que é CSS? clarastreit https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399503171 CSS (Cascading Style Sheets)
É a linguagem usada pra estilizar o HTML. Com ele, você pode mudar cores, fontes, espaçamento, posicionamento dos elementos e muito mais.

]]> 2025-04-07 21:52:35 UTC https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399503171 Principais características clarastreit https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399511193

  • Simples e rápidos de fazer

    • Foco na estrutura, não no design

    • Ideais para testes iniciais

    ]]>     2025-04-07 22:05:56 UTC https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399511193     Principais características clarastreit https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399513221

  • Visualmente próximos do produto final

    • Incluem detalhes de design e navegação

    • Úteis para testes com usuários e apresentação para clientes

    ]]>     2025-04-07 22:09:34 UTC https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399513221     Principais características clarastreit https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399515356

  • Interface intuitiva e limpa

  • Baseado na nuvem (não precisa instalar)

  • Permite colaboração em tempo real

  • Tem elementos como Frames, Shapes, Components, Text, Auto Layout

  • Aceita plugins que otimizam o processo de design

  • Ideal para criar protótipos de alta fidelidade

    • ]]>     2025-04-07 22:13:18 UTC https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399515356     Principais características clarastreit https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399515616

  • Linguagem de marcação (não é programação)

    • Cria a estrutura de um site

    • Usa “tags” (como <p>, <h1>, <img>)

    • Funciona junto com CSS e JavaScript

    • Simples de aprender

    ]]>     2025-04-07 22:13:44 UTC https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399515616     Principais características clarastreit https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399516079

  • Define o design visual da página

    • Trabalha em conjunto com HTML

    • Separa o conteúdo (HTML) da aparência (CSS)

    • Permite responsividade (ajustar layout em telas pequenas)

    • Pode ser escrito em um arquivo separado (.css)

    ]]>     2025-04-07 22:14:31 UTC https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399516079     Principais características clarastreit https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399516455

  • Gratuito e leve

  • Suporta muitas linguagens de programação

  • Extensões personalizáveis (como formatação de código, terminal integrado, auto-complete)

  • Interface amigável

  • Muito usado por estudantes e profissionais

    • ]]>     2025-04-07 22:15:12 UTC https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399516455     Exemplo: clarastreit https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399516900 Desenhar em um caderno como seria a tela de login de um app, com quadradinhos indicando onde vão ficar os botões e os campos de senha.

    ]]>     2025-04-07 22:15:58 UTC https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399516900     Exemplo: clarastreit https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399517661 Usar o Figma pra criar uma tela de aplicativo com todas as cores, ícones e botões funcionando. Você pode até clicar e simular como o app funciona.

    ]]>     2025-04-07 22:17:20 UTC https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399517661     Exemplo: clarastreit https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399517817 2025-04-07 22:17:37 UTC https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399517817 Exemplo: clarastreit https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399517930 <h1>Bem-vindo ao meu site!</h1>

    <p>Esse é um parágrafo com informações importantes.</p>

    <img src="foto.jpg" alt="Minha Foto">

    ]]>     2025-04-07 22:17:53 UTC https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399517930     Exemplo: clarastreit https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399518272 Abrir o VSCode e criar um projeto com arquivos HTML, CSS e JavaScript, usando extensões como "Live Server" pra visualizar tudo ao vivo no navegador.

    ]]>     2025-04-07 22:18:32 UTC https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399518272     Exemplo: clarastreit https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399518422 body {

    background-color: #f0f0f0;

    font-family: Arial, sans-serif;

    color: #333;

    }

    ]]>     2025-04-07 22:18:45 UTC https://padlet.com/clarastreit/xt8idred2v0fz2gl/wish/3399518422