Este recurso é visivel apenas no modo desktop, no mobile será necessario clicar sobre os personagens pela trilha de aprendizagem para saber mais sobre a sua história.

Briefing

Briefing é o conjunto de instruções do cliente reunidas em um documento que servirá de guia para o desenvolvimento de um projeto. Nele devem ser descritas detalhadamente todas as ideias e orientações do cliente.

A reunião de briefing é a etapa mais importante do projeto. Quanto mais informações e detalhes forem captados, menor será a probabilidade de alterações posteriores. Porém, nem sempre o cliente sabe descrever o que quer, podendo se equivocar. É preciso ter uma visão geral do projeto e ter sensibilidade (feeling) para entender as reais necessidades do cliente, para conseguir distinguir o que é desejo pessoal e o que é necessário para solucionar o problema (a demanda).

Guia de perguntas?

  • Histórico do cliente - é importante conhecer a história da empresa seus feitos e dificuldades;
  • Qual o objetivo do projeto? Definição do problema, necessidades do cliente ou público-alvo;
  • Qual o público-alvo? Faixa etária, nível de instrução (grau de escolaridade), classe social, gênero (masculino, feminino, lgbtqia+), profissão, hábitos, necessidades específicas, gostos pessoais, hobbies;
  • Tipos de ilustrações - se haverá um personagem apresentador, se os personagens precisam de expressão facial, se haverá cenários, se serão usados mais ícones, etc;
  • Veiculação (web, mídia impressa, TV)
  • Qual tom? formal, sério, despojado, moderno, antigo, retrô
  • Isso serve de guia para escolhermos as cores (sóbrias, vibrantes), estilo de ilustração (proporção cartoon ou realista), técnicas (flat, detalhado)
  • O cliente viu alguma referência?
  • Quantidade de ilustrações
  • Prazo
  • Orçamento
  • Haverá animação?

Tipografia

Título 1

Título 2

Subtítulo nível 1

Subtítulo nível 2

Subtítulo nível 3

A – B – C – D – E – F – G – H – I – J – K – L – M – N – O – P – Q – R – S – T – U – V – W – X – Y – Z

A – B – C – D – E – F – G – H – I – J – K – L – M – N – O – P – Q – R – S – T – U – V – W – X – Y – Z

1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 0

Este é um parágrafo inicial. Destaca-se dos parágrafos regulares.

Você pode usar a marca de marcação para destacar o texto.

Esta linha de texto deve ser tratada como texto excluído.

Esta linha de texto deve ser tratada como não precisa.

Esta linha de texto deve ser tratada como um acréscimo ao documento.

Esta linha de texto será renderizada como sublinhada.

Esta linha de texto deve ser tratada como letras miúdas.

Esta linha renderizada como texto em negrito.

Esta linha renderizada como texto em itálico.

Essa é renderizada como codificação.

Uma citação bem conhecida, contida em um elemento blockquote.

Alguém famoso emFonte Título
  • Esta é uma lista.
  • Parece completamente sem estilo.
  • Estruturalmente, ainda é uma lista.
  • No entanto, esse estilo só se aplica a elementos filhos imediatos.
  • Listas aninhadas:
    • não são afetados por este estilo
    • ainda vai mostrar um bullet(ponto a esquerda)
    • e ter margem esquerda apropriada
  • Lista dotted:
      • não são afetados por este estilo
      • ainda vai mostrar um bullet(ponto a esquerda)
      • e ter margem esquerda apropriada
  • Listas numeradas:
    1. não são afetados por este estilo
    2. ainda vai mostrar um bullet(ponto a esquerda)
    3. e ter margem esquerda apropriada

Dicas da Paulinha

Accordion border | Accordion list | Accordion plus

O componente Accordion pode ser utilizado de diversas formas. Mesmo possuindo limitações em relações a caracteres, pode ser possível utiliza-lo de forma unica ou em conjunto.

Veja abaixo alguns exemplos dos modelos disponíveis e da forma de utilizar:

Este é o corpo do accordion. Está escondido por padrão, até que seja inserido a classe de recolhimento. Essas classes controlam a aparência geral, bem como o que é apresentado ou ocultado, através de transições usando CSS. Você pode modificar qualquer um deles com CSS personalizado ou substituindo nossas variáveis padrão. Também vale a pena notar que praticamente qualquer HTML pode ir dentro o .accordion-body, embora a transição limite transbordar.

Sempre ao utilizar esse modelo se atentar a perceber os aspectos de quantidade de caracteres, caso queira algum recurso que ultrapasse as limitações abaixo teremos sempre um indicativo de recursos que possam possibilitar esse recurso.

Para utilizar um recurso com a possibilidade de mais caracteres e que possua uma disponibilidade tanto mobile quanto desktop recomendamos a utilização de um card

Clique na marcação para ir até o card.

Esse tipo de accordion e mais utilizado como definição de lista, onde é mais simples e harmoniza com a utilização de recursos mais dinâmicos como o design line, dessa maneira sendo utilizado com linhas.

Esse recurso também possui suas limitações como as demais, pensando nesse recurso como uma lista, pode ser utilizado para apresentar imagens menores e textos dinâmicos.

Para substituir esse recurso, aconselhamos utilizar um recurso mais prático dependendo da quantidade de caracteres e do assunto abordado, colocando em enfase a prática de utilizar sempre pensando no mobile, atualmente sendo disponivel o recurso de card.
  • Accordion plus - Como usar

    Este é o corpo do accordion, nele há a possibilidade de acrescentar imagens e textos, pensando na limitação de caracteres informado nos accordions anteriores.

  • Accordion plus - Limitações

    As limitações desse recurso variam, como ele não possui uma limitação como o lista ou o border, há a possibilidade de utilizar mais caracteres, sendo disponivel 1000 caracteres e uma imagem.

  • Accordion plus - Recurso substituto

    Para substituir esse recurso, como ele possui uma maior acessibilidade tanto em mobilequanto em desktop podemos colocar um comparativo com o card. Mesmo assim é bom se atentar aos demais recusos e seus comportamentos distintos dentro do mobile

Dicas da Paulinha

Audio | Transcrição

O componente Audio e Trasncrição devem ser compostos juntos, para que seja elaborado um desenvolvimento claro tanto visual quanto audio visual dando sentido a acessibilidade e melhor entendimento.

Ao clicar no icone será feito o download do arquivo da transcrição em pdf, podendo assim ser armazenado e lido posteriormente na hora que desejar.

Dicas da Paulinha

Botão | Botão Preenchido | Botão Vazado

A utilização deste recurso deve ser feita de acordo com a situação sendo ele feito para interagir dentro ou fora de boxes ou imagens, dessa forma trazendo um contexto mais claro mostrando que há uma interação a ser feita.





Sugestões da Paula


Box | Box title | Box Importante | Box saiba mais | Box dica | Box você sabia | Box pdf

O recurso Box, é utilizado para dar destaque, isolar um assunto, enfatizar um assunto, dar foco a uma reflexão ou até mesmo algo de grande importância. Pensando nisso preparamos algumas das boxes mais utilizadas.

Importante tomar cuidado com a quantidade de caracteres ao se utilizar a box, pensando nisso sugerimos no máximo 1000 por box.

Box

Duas cabeças pensam melhor do que uma, certo?

Fique atento ao fato de, nesse momento do projeto, as ideias não poderem ser criticadas e/ou julgadas, para não interferir no processo criativo dos participantes.

Box Title

Essa box enfatiza o titulo

Esse tipo de box precisa ser pensado devido o tamanho do titulo, para melhorar estamos disponibilizando uma quantidade de caracteres fixos sendo eles 40 caracteres máximos.

Importante!

A box Importante!destaca assuntos importantes que precisam de fato serem lidos.

Saiba mais...

Essa box auxilia o assunto trazendo um pouco mais dele, aprofundando assim um assunto, tema para que te ajude.

Dica

Essa box trás uma dica simples, ou até mesmo aprofundada sobre o assunto ou imagem. Podendo ser algo simples ou bem complexo.

Você sabia?

Essa box gera uma dúvida e te mantém atualizado com uma nova informação, explicação ou até mesmo um novo tema.

PDF

Essa box, trás com ela uma nova informação e em um arquivo em pdf, podendo ser feito download do arquivo, ou visualizado dentro da pagina.


Card | Card top | Card bottom | Card left | Card right | Card fast | Card focus | Card slim

O componente Card pode ser utilizado de diversas formas. Mesmo com a limitação de largura X altura, ele pode ser adaptado para diversas posições assim contemplando da melhor forma possivel a imagem e criando uma harmonia através do texto e da imagem. Onde possibilita uma maior harmonia no design como as imagens abaixo.

Card Top

Esse card também possibilita uma imagem acima do texto, nesse caso a imagem fica em destaque e o texto fica centralizado também.


Card Bottom

Esse card também possibilita uma imagem abaixo do texto, nesse caso a imagem fica em destaque e o texto fica centralizado também.



Card Left

Esse card também possibilita uma imagem a esquerda do texto, nesse caso a imagem fica em destaque e o texto fica centralizado também.

Devemos ficar atentos a essa recurso, a imagem a esquerda no mobile irá desaparecer, a imagem precisa estar na proporção vertical, e a quantidade de texto deve ser limitada.

Card Right

Esse card também possibilita uma imagem a direita do texto, nesse caso a imagem fica em destaque e o texto fica centralizado também.

Devemos ficar atentos a essa recurso, a imagem a direita no mobile irá desaparecer, a imagem precisa estar na proporção vertical, e a quantidade de texto deve ser limitada.

...

Card fast

Para um conteudo relativo explicando uma imagem ou relacionando a mesma.

Card focus
Card subtitle

Algum texto de exemplo rápido para criar no título do card e compor a maior parte do conteúdo do card. content.

Nesse card é possivel colocar dois links.

Card link Another link
Card slim
Esse card possui uma estrutura mais fina

Nele encontramos uma estrutura isolada que pode ser definida apenas por linhas

Botão

Paulinha explica

Comment Light | Comment Dark

O Comment é mais utilizado em referências bibliográficas para fazer uma grande referência e mostrar seu autor com imagem e data, para poder melhorar o acompanhamento e atualização do mesmo.

Sugestões da Paula


Collapse show | Collapse animation | Collapse left

O collapse é um recurso que pode estar dentro de um botão, dessa forma ele pode apresentar ou ocultar um card, um texto, um bloco ou até mesmo uma imagem.

Elemento um utilizando uma simples animação superior, a quantidade de caracteres varia de acordo com a necessidade do recurso.

Sugestões da Paula


Exercicios | Combobox | Single choice | Multiple choice | True or false

Os exercicios são recursos de interação que possibilitam testar seu conhecimento, nesse tipo de recurso temos diversos modelos para cada tipo de situação diferente.

1. Exemplo de exercicio combobox
a. Quantos caracteres são ideais para colocar dentro do campo de seleção do combobox?

b. Qual o ideal de caracteres para a pergunta de cada combobox

c. Quantos comboboxposso ter por aula?

d. Coleta de dados ou informações iniciais, realizada com o cliente e que será a base para o desenvolvimento inicial do projeto.

e. A técnica para coleta de dados de usuários de um produto, serviço ou sistema para identificação de problemas, a partir de observações apresentadas pelos usuários.
Atenção!
Selecione todas as alternativas do exercício.

Parabéns! Resposta correta.

Você fez a correspondência correta das técnicas que são aplicadas para facilitar e determinar quais serão as condições que o produto final deverá contemplar.

Ops! Tente novamente.

Retorne ao conteúdo e estude com atenção as 7 técnicas de levantamento de requisitos que podem ser aplicadas para determinar as características de um produto ou serviço.

Resposta incorreta.

As respostas corretas são:
a. Questionário
b. Prototipagem
c. Brainstorm
d. Briefing
e. Entrevista
Examine a correspondência correta das técnicas que são aplicadas para facilitar e determinar quais serão as condições que o produto final deverá contemplar.

2. Como utilizar o exercicio Single choice ?
Parabéns! Resposta correta.

Strings são os tipos mais comuns de dados que se processam no dia a dia, seja nome de pessoas ou de lugares, sejam descrições de produtos ou códigos de produtos; enfim, trata-se de um processo que lidamos no dia a dia.

Ops! Tente novamente.

Lembre-se de que as strings de texto são muito populares. Tente outra vez!

Resposta incorreta.

A resposta correta é a A. Strings são os tipos mais comuns de dados que se processam no dia a dia, seja nome de pessoas ou de lugares, sejam descrições de produtos, códigos de produtos; enfim, trata-se de um processo que lidamos no dia a dia. Revise o tópico Biblioteca RE.

3. Teste de exercicio, multipla escolha:
Atenção!

Selecione todas as alternativas do exercício.

Parabéns! Resposta correta.

Isso mesmo! A herança possibilita que as classes compartilhem seus atributos, métodos e outros membros da classe entre si. Para a ligação entre as classes, a herança adota um relacionamento esquematizado hierarquicamente.

Resposta incorreta.

Ops! Tente outra vez! Volte ao tópico sobre Relacionamento de objetos.

Resposta incorreta.

As respostas corretas são:
a. Questionário
b. Prototipagem
c. Brainstorm
d. Briefing
e. Entrevista
Examine a correspondência correta das técnicas que são aplicadas para facilitar e determinar quais serão as condições que o produto final deverá contemplar.

4. Verdadeiro ou falso pode ter mais de uma tentativa ?

Parabéns! Resposta correta.

Você fez a correspondência correta das técnicas que são aplicadas para facilitar e determinar quais serão as condições que o produto final deverá contemplar.

Resposta incorreta.

As respostas corretas são:
a. Questionário
b. Prototipagem
c. Brainstorm
d. Briefing
e. Entrevista
Examine a correspondência correta das técnicas que são aplicadas para facilitar e determinar quais serão as condições que o produto final deverá contemplar.

5. Considerando as operações fundamentais da matemática, temos algumas regras básicas de programação em Python. Classifique cada afirmativa como verdadeira ou falsa:
A. Toda operação com números inteiros gera números inteiros (por exemplo: uma soma ou subtração).


B. Nem toda operação com números flutuantes gera números flutuantes.

C. Toda operação com números inteiros e números flutuantes gera números flutuantes.

Atenção!

Selecione todas as alternativas do exercício.

check_circle_outline Parabéns! Respostas corretas.

Você classificou corretamente todas as afirmativas.

unpublished Resposta incorreta.

Tente outra vez! Procure relembrar as caracteerísticas das operações matemáticas estudadas neste desafio.

unpublished Resposta incorreta.

Apenas a afirmativa B é falsa, pois toda operação com números flutuantes gera números flutuantes. Reveja o tópico Fundamentos da linguagem Python.


Graphic Bar | Graphic Pizza | Graphic Radial

O Grafic é um recurso que pode estar dentro de um botão, dessa forma ele pode apresentar ou ocultar um card, um texto, um bloco ou até mesmo uma imagem.

Paulinha novidades

Highlight img | Highlight code

O recurso highlight tem por sua vez focar em algo ou apresentar algo. Dessa forma o hightlight de imagem apresenta um foco ou destaque em cima da imagem ao fundo, o highlight de código possui foco em apresentar o código inserido e dois botões informativos um de cópia e o outro de qual linguagem presente no código.

                                
                                <div class="row">
                                    <div class="col-lg-6 mx-auto">
                                        <div id="highlight-img" class="highlight-dark" name="highlight-img">

                                            <a href="#" id="item-spot1" class="highlight-spot rounded-circle"
                                            style="width: 25%; height: 38%;" data-bs-toggle="modal"
                                            uk-toggle="target: #modal-highlight-img-1"></a>

                                            <a href="#" id="item-spot2" class="highlight-spot rounded-circle"
                                            style="width: 17%; height: 26%;" data-bs-toggle="modal"
                                            uk-toggle="target: #modal-highlight-img-1"></a>

                                            <img src="img/1.png" class="img-fluid" alt="">
                                            
                                        </div>
                                    </div>
                                </div>
                                
                            

Dicas da Paulinha

Paulinha descomplica.

Paulinha descomplica.

Parallax - Titulo superior | Parallax - Titulo de encaixe | Parallax - Motion

O desenvolvimento Parallax foi desenvolvido para harmonizar tanto a parte visual quanto descritivo de um assunto ou citação sendo possivel criar um ambiente de destaque com uma imagem de fundo fixo ou movimentação.

Parallax - Titulo superior

Esse recurso deve ser composto por uma imagem com no maximo 1920x1080px com exportação para web 72dpi, de preferencia em formato .jpg

Parallax - Titulo de encaixe

Essa utilização deve ser feita pensando no contexto de leitura, com uma imagem bem pensada e elaborada para questionamento devido a coloração do texto em si. Lembrando de como deve ser utilizado o texto e a imagem, no formato altura e exportação adequada.

Parallax - Move

Esse estilo de Parallax é mais utilizado para realizar um efeito de movimentação em imagem, tendo como foco a imagem em si. Esse precisa ser bem pensado para que caso haja uma composição grande com um ponto de foco na imagem não cortar a imagem.

Parallax - Texto

Para melhorar o desenvolvimento de foco em textos descritivos menores, esse recurso é o mais adequado.

Como usar?

Pensando pelo no ambiente mobile e desktop, temos que criar e desenvolver o habito de pensar no tipo de leitura via scroll. Que da o sentido de descer para ler, já que possui um efeito atrelado ao efeito de scroll.

Contras

Devido o tamanho, temos que nos limitar a quantidade de caracteres, não podendo ser textos muito longos, nem atividade ou imagens dentro desse recurso, assim evitando recursos dentro de recursos que impossibilita a visão dinamica do mobile.

Paulinha Explica


Slider | Slider Cover | Slider Box | Slider Vertical | Slider Three

O Slider nome mais comum para esse recurso pode ser utilizado de diversas formas dependendo da situação, lembrando sempre de como deve ser aplicado deviado a orientação da imagem, como nos exemplos a baixo. Podendo ser utilizado um ou mais de um na mesma tela, respeitando a respectiva necessidade da orientação adequada devido a responsividade.

  • Slider

  • Coca Cola

  • Kung fu Panda

    • Slider Cover

      • Slider Box - 1

        Esse slider, compoe a disposição de imagens e textos com o mesmo tamanho e altura.

      • Slider Box - 2

        Para uma exibição mais harmonica que não afete a imagem, para alinhar melhor os textos e as imagens precisam ter o mesmo tamanho e largura.

      • Slider Box - 3

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

      • Slider Box - 4

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

      • Slider Box - 5

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

        • Slider Vertical

        • 2

        • 3

        • 4

        • Slider Three

        • 2

        • 3

        • 4

        • 5

        • 6

        • 7

        • 8

        • 9

        • 10

        Paulinha indica.

        Timeline Horizontal | Timeline Vertical

        O Timeline deve ser utilizado para comparativo de datas, tempo, situações por etapas e sera reposicionado no mobile no formato de cards

        1. Coleta de dados ou informações iniciais, realizada com o cliente, que será a base para o desenvolvimento inicial do projeto. Essa coleta ocorre em uma reunião com o cliente, chamada reunião de briefing.
        2. Técnica utilizada para levantar sugestões e ideias, a fim de solucionar problemas no desenvolvimento de produtos e serviços.
        3. Lista de perguntas sobre os requisitos do projeto. Diferentemente do briefing, que coleta dados sobre o produto ou serviço a ser desenvolvido, o design, a empresa etc., o questionário contém perguntas sobre a implementação do produto ou serviço no mercado.
        4. Técnica utilizada para analisar requisitos sociais e culturais das tarefas desempenhadas numa organização.
        5. Reunião feita com a equipe de analistas da empresa contratada para o desenvolvimento do produto ou serviço e com representantes do cliente, a fim de especificar as necessidades do projeto.
        6. Reunião feita com a equipe de analistas da empresa contratada para o desenvolvimento do produto ou serviço e com representantes do cliente, a fim de especificar as necessidades do projeto.
        7. Modelo preliminar ou inicial do produto que apresenta algumas funcionalidades que ele terá.
        Inicio

        When I orbited the Earth in a spaceship, I saw for the first time how beautiful our planet is. Mankind, let us preserve and increase this beauty, and not destroy it!

        John Doe

        When I orbited the Earth in a spaceship, I saw for the first time how beautiful our planet is.

        John Doe
        18 APR

        When I orbited the Earth in a spaceship, I saw for the first time how beautiful our planet is. Mankind, let us preserve and increase this beauty, and not destroy it!

        John Doe

        When I orbited the Earth in a spaceship, I saw for the first time how beautiful our planet is.

        John Doe
        18 APR

        When I orbited the Earth in a spaceship, I saw for the first time how beautiful our planet is. Mankind, let us preserve and increase this beauty, and not destroy it!

        John Doe

        When I orbited the Earth in a spaceship, I saw for the first time how beautiful our planet is.

        John Doe
        18 APR
        Fim

        Paulinha indica.

        Tooltip | Popover Button

        A utilização deste recurso deve ser feita de acordo com a situação sendo ele feito para interagir dentro ou fora de boxes ou imagens, dessa forma trazendo um contexto mais claro mostrando que há uma interação a ser feita.

        Paulinha Explica

        Video | Video Caps | Video Youtube

        O desenvolvimento video caps foi desenvolvido para criar capitulos onde são de grande importancia ou destaque, para pooder enfatizar uma parte do video, podendo criar um link com arquivos, recursos, imagens até mesmo exercicios se for bem utilizado.

        !

        Recursos Visuais