Plataforma de aprendizado virtual responsiva e semântica

proposta para
plataforma de ambiente
virtual de aprendizado
responsivo e semântico

A proposta para a
nova plataforma de
aprendizado
contempla além da
semântica, isto é,
acessibilidade,
também a
interatividade, onde
as novas tecnologias,
utilizadas de modo
lúdico em favor da
educação, ajudam na
ﬁxação do conteúdo
educacional

acessibilidade + interatividade

Para começar, sugerimos uma navegação estrutural
(em inglês, breadcrumb navigation, literalmente
navegação por caminho de migalhas de pão), em todo
o site, que é uma técnica usada em interfaces de
usuário para proporcionar-lhes um meio de localização
dentro da estrutura de programas, documentos e agora
muito aplicados em websites
O aluno poderá voltar à qualquer momento, como em
e-commerces famosas (Americanas/Submarino),
entendendo sua localização na plataforma
VOCÊ ESTÁ EM GRADUAÇÃO > DESIGN DE INTERFACES > AULA 10

Ao entrar no AVA, a primeira
tela seria um mural, como
em redes sociais.
O calendário sincronizaria
os eventos cadastrados na
agenda da plataforma com o
celular do aluno.
Na lateral esquerda, novas
ferramentas como Ranking
dos jogos, link para o Canal
Uninove no Youtube e
Comunidades, para unir
alunos da mesma área.
O ícone de ﬁcha, no canto
superior esquerdo,
indica alí um botão para a
sugerida aba de perfil

Novas ferramentas de navegação darão ao aluno uma visão
mais completa do andamento do curso.
Observe abaixo que o nome da disciplina na sua respectiva
tela de abertura, é acompanhado com indicadores gráﬁcos
de seu desenvolvimento no AVA
Design de Interfaces
INICIADO HÁ 3 SEMANAS
Continuar de onde parei > aula 10
Seu desenvolvimento na disciplina
50% concluído
7,6 nota média nas atividades

01
02
03
04
01
05
07
08
09
10aula
11
12
14
15
16
18
19
20
21
23
24
25
17
01
02
03
04
05
06
07
08
09
10
INDICE DAS AULAS
Roboto Regular12pt Maecenas laoret
orci id consectetur aliquam
Sed a sollicitudin tortor.
Suspendisse aliquam tellus vitae
Urna tincidunt adipiscing
Vestibm malesuada elementum felis
Nnec laoreet
Nulla orci eros
Mattis vitae augue et
Venenatis viverra nisi: Sed
vulputaterem Game of Thrones
11
12
13
14
15
16
17
18
19
20
Eee Macarena aaai Macarena Macarena
Vestibulum malesuada elem felis
Nnec laoreet
Nulla orci eros
Venenatis viverra nisi. Sed vu
Para uma experiência ainda melhor do usuário, propomos
também na tela de abertura um índice das aulas, o que ajuda
o aluno a se localizar (veja abaixo).
Outra ferramenta pesquisada foi, dentro da aula, uma “régua”
com a localização da aula que o aluno está. Assim, trabalhar
com um número flexível de aulas se tornaria possível.

No projeto das disciplinas, existem muitas maneiras de
implementarmos acessibilidade e interatividade, além das
que já estão aplicadas no ambiente de aprendizado atual.
Logo, sugerimos uma maneira do aluno ouvir a aula e de
marcar trechos do texto em um arquivo pessoal, que
poderá compartilhar com os colegas da disciplina.
Caso o professor sinta a necessidade, ele poderá também
adicionar também um podcast da disciplina
mensagem
ao professor
podcast fórum membrosatividades arquivos
Enviar para colega
Copiar em anotações
versão
para
impressão
ouvir
o texto
marcador
de texto
A+ A-Tamanho
do texto

O Iframe ﬁxo (ou div nav) proposto em cada aula, facilita o aluno
no momento que ele entra na página e consegue ir diretamente
para tópicos da aula (como por exemplo, para revisar
rapidamente para fazer um trabalho etc).
Uma idéia é ele reduzir (de 500px para 250px) quando a página
avançar, como neste site: http://festaitalianafrederick.com/
Observe o estudo na página a seguir
<h1>Nome da aula
roboto thin 60 </h1>
<objetivo>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec diam nulla, malesuada vitae
vulputate ut, sodales id enim. Sed sodales cursus libpiscing. Pellentesque mollis dui augue </objetivo>
»Subtítulo h2 ornare justo metus »Lorem ipsum dolor sit amet »consectetur
adipiscing elit »Donec diam null »malesuada vitae vulputate ut »sodales id enim.
»Sed sodales cursus
TÓPICOS DESTA AULA (fazer âncoras dos h2 no iframe abaixo)

No mouse hover, o botão
torna-se maior, aparece o
ícone e o texto referente
Aqui, o comportamento dos botões muda
de acordo com a aplicação na página:
quando a div torna-se menor, os ícones
somem e os botões viram simples círculos.

Queremos também sugerir um mini feedback de cada aula,
para nos aproximarmos cada vez mais de nosso público e
aprimorarmos a ferramenta cada vez mais
No ﬁm de cada aula, teremos a opção de adicionar tags
(palavras-chaves) para a indexação de procura na plataforma
VOCÊ GOSTOU DA AULA / FEEDBACK PARA ALUNO COM QUESTÕES
Commodo
sollicitudinCommodo
sollicitudin?
Commodo
sollicitudinCommodo
sollicitudin?
ruim médio excelentesim não
Commodo
sollicitudinCommodo
sollicitudin?
Commodo
sollicitudinCommodo
sollicitudin?
enviar
adicionar
tags
html5 css3 interatividade
interatividade
teoria das cores
teoria das cores
AI
AI
UX
html5 css3UX
usuário
usuário

O QUE VOCÊ QUER COMPARTILHAR NO MURAL?
SELECIONE O GAME ABAIXO
ranking
FAÇA PARTE NONONONONOON
comunidades
NOSSO CANAL NO YOUTUBE
lorem uninove
mural meus cursos fórum atividades membros 2
Fernando Torres
Aqui um post de um contato Nulla facilisi. Fusce non lectus vel lacus gravida laoreet
ac at lacus. Cras adipiscing arcu odio, ut tincidunt orci vulputate at. Phasellus ante
tortor, pretium ut elit eget, sollicitudin pharetra libero. Pellentesque massa orci, sus-
cipit et eros vel, rhoncus feugiat eante ipsum primis in faucibus orci luctus et ultrices
posuere cubrhoncus feugiat eante ipsum primis in faucibus orci luctus vel, rhoncus
feugiat eante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae
2 minutos Comentar Compartilhar Gostei
online
Maria Aparecida Callas
Maecenas eu tortor bibendum, sodales lacus ac, pulvinar
felis. Vestibulum ante ipsum primis in faucibus orci
Documentário sobre a
vida e obra de Vicent
de Van Gogh
offline
D
7
14
21
29
S
1
8
15
22
30
T
2
9
16
23
31
Q
3
10
17
24
Q
4
11
18
25
S
5
12
19
26
outubro'13
Prova Bimestral
Estatística
Vivamus et sodales
Apresentação de
Seminário da disciplina
Lorem ipsum
Tira Dúvidas com Prof.
Carlos
Seminário UX
Palestra Google
Nullam rhoncus orci
quis diam commodo
sollicitudin
04
10
12
15
20
27
30
SEUS COMPROMISSOS
PUBLICIDADE

perﬁl
Claudia Silva
Barbosa
PONTOS UNINOVE
12058
configurar
quem está online
faltas
montar
meu avatar
últimas aulas
notas
anotações
live edu
tour pelo ava
Fernando Torres
online
de Van Gogh
Nome da Disciplina
nonon
Aula 10
Vivamus onoonoet
sodales
Aula 05
Lorem ipsum
Aula 07
Nullam rhoncus rci
quis diam
Aula 09
Nome da Disciplina
com mouse hover
Aula 08
D
7
14
21
29
S
1
8
15
22
30
T
2
9
16
23
31
Q
3
10
17
24
Q
4
11
18
25
S
5
12
19
26
outubro'13
Prova Bimestral
Estatística
Vivamus et sodales
Apresentação de
Lorem ipsum
Carlos
Seminário UX
Palestra Google
Nullam rhoncus orci
quis diam commodo
sollicitudin
04
10
12
15
20
27
30
SEUS COMPROMISSOS
PUBLICIDADE

perﬁl O QUE VOCÊ QUER COMPARTILHAR NO MURAL?
de Van Gogh
Claudia Silva
Barbosa
PONTOS UNINOVE
12058
configurar
quem está online
faltas
montar
meu avatar
últimas aulas
notas
anotações
live edu
tour pelo ava
offline
online
D
7
14
21
29
S
1
8
15
22
30
T
2
9
16
23
31
Q
3
10
17
24
Q
4
11
18
25
S
5
12
19
26
outubro'13
Prova Bimestral
Estatística
Vivamus et sodales
Apresentação de
Lorem ipsum
Carlos
Seminário UX
Palestra Google
Nullam rhoncus orci
quis diam commodo
sollicitudin
04
10
12
15
20
27
30
SEUS COMPROMISSOS
PUBLICIDADE
incluir nova imagem

GRADUAÇÃO
CURSOS DE CAPACITAÇÃO
DISCIPLINAS FINALIZADAS
DESIGN DE INTERFACES
LOREM IPSUM DOLOR
LOREM IPSUM DOLOR
LOREM IPSUM DOLOR
LOREM IPSUM DOLOR
LOREM IPSUM DOLOR
Fernando Torres
online
de Van Gogh
offline
D
7
14
21
29
S
1
8
15
22
30
T
2
9
16
23
31
Q
3
10
17
24
Q
4
11
18
25
S
5
12
19
26
outubro'13
Prova Bimestral
Estatística
Vivamus et sodales
Apresentação de
Lorem ipsum
Carlos
Seminário UX
Palestra Google
Nullam rhoncus orci
quis diam commodo
sollicitudin
04
10
12
15
20
27
30
SEUS COMPROMISSOS
PUBLICIDADE
ranking
comunidades
lorem uninove

01
02
03
04
05
06
07
08
09
10
Design de Interfaces
INICIADO HÁ 3 SEMANAS
Continuar de onde parei > aula 10
Seu desenvolvimento na disciplina
50% concluído
7,6 nota média
INDICE DAS AULAS
VOCÊ ESTÁ EM GRADUAÇÃO > DESIGN DE INTERFACES
mensagem
ao professor
podcast fórum membros arquivosatividades
Roboto Regular12pt Maecenas laoret
Vestibm malesuada elementum felis
Nnec laoreet
Nulla orci eros
Venenatis viverra nisi: Sed
vulputaterem Game of Thrones
11
12
13
14
15
16
17
18
19
20
Eee Macarena aaai Macarena Macarena
Vestibulum malesuada elem felis
Nnec laoreet
Nulla orci eros
Venenatis viverra nisi. Sed vu
ranking
comunidades
lorem uninove
D
7
14
21
29
S
1
8
15
22
30
T
2
9
16
23
31
Q
3
10
17
24
Q
4
11
18
25
S
5
12
19
26
outubro'13
Prova Bimestral
Estatística
Vivamus et sodales
Apresentação de
Lorem ipsum
Carlos
Seminário UX
Palestra Google
Nullam rhoncus orci
quis diam commodo
sollicitudin
04
10
12
15
20
27
30
SEUS COMPROMISSOS
PUBLICIDADE
Sugestão:
após 40% concluído, que
tal colocarmos anúncios
pertinentes à disciplina?
Por exemplo: Você que
estuda Design de Inter-
faces, já pensou em fazer
um de nossos cursos
extras de xxxxx?

<h1>Nome da aula
roboto thin 60 </h1>
Subtítulo h2 ornare justo metus
“Citação aqui 3 módulos para desktop. Light Italic. malesuada tristique sit
amet ac nulla. Sed ornare justo metus, quis faucibus nulla feugiat eu. Sed
laoreet eros id risus vestibulum, ac mollis velit faucibus. Sed ultricies
dapibus porta. Nulla facilisi. Fusce non lectus vel lacus gravida laoreet ac at
lacus. Cras adipiscing arcu odio, ut tincidunt orci vulputate at. Phasellus
ante tortor, pretium ut elit eget, sollicitudin pharetra libero. ultrice cubilrae;”
CITACAO DE AUTOR
Sugestão de
legenda com css
de Roboto Italic
no <em>, 1 módulo
<p>Parágrafo em 5 módulos , com uma imagem ao lado
de exemplo Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Morbi nulla magna, hendrerit at
maurondimentum orci. Morbi cursus ac felis un fringilla
placerat, orci quam convallis odio, vel ullamcorper magna
purus quis enim.</p>
Duis in risus vel orci malesuada tristique sit amet ac
nulla. Sed ornare justo metus, quis faucibus nulla feugiat
eu. Nulla facilisi. hasellus ante tortor, pretium ut elit eget,
<objetivo>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec diam nulla, malesuada vitae
vulputate ut, sodales id enim. Sed sodales cursus libpiscing. Pellentesque mollis dui augue </objetivo>
01
02
03
04
01
05
07
08
09
10aula
11
12
14
15
16
18
19
20
21
23
24
25
17
<p>Parágrafo simples de e exemplo roboto regular. Ocupa 8 módulos no projeto responsivo
para desktop.Texto 16pts Não usar justificada e sim um texto mais fluido e organico à
esquerda. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nulla magna,
hendrerit at mauris at, posuere dignissim diam. Sed in mattis sapien, et condimentum orci.
Morbi cursus ac felis ut tincidunt. Sed sem enim, mollis in libero vitae, condimentum feugiat
sapien. Ut in erat tempor nulla elementum porta nec sed sapien. Sed dolor velit, malesuada
pulvinar tortor a, dignissim imperdiet tellus. Nunc malesuada dolor nec arcu aliquet, lac.</p>
VOCÊ ESTÁ EM GRADUAÇÃO > DESIGN DE INTERFACES > AULA 10
TÓPICOS DESTA AULA (fazer âncoras dos h2 no iframe abaixo)
versão
para
impressão
ouvir
o texto
marcador
de texto
A+ A-Tamanho
do texto
Enviar para colega
Copiar em anotações
podcast

podcast
VOCÊ GOSTOU DA AULA / FEEDBACK PARA ALUNO COM QUESTÕES
Commodo
sollicitudinCommodo
sollicitudin?
Commodo
sollicitudinCommodo
sollicitudin?
Commodo
sollicitudinCommodo
sollicitudin?
Commodo
sollicitudinCommodo
sollicitudin?
enviar
<h1>Nome da aula roboto thin 30 </h1>
Referências
KRUG, Steve. Não me faça pensar: uma abordagem de bom senso à usabilidade na web. Rio
de Janeiro: Alta Books, 2008.
adicionar
tags
html5 css3interatividade
media queries
semântica
teoria das cores flat design arquitetura de informação
acessibilidadeweb design responsivo AI
UX
usuário
javascript jquery
01
02
03
04
01
05
07
08
09
10aula
11
12
14
15
16
18
19
20
21
23
24
25
17
versão para impressãoVOCÊ ESTÁ EM GRADUAÇÃO > DESIGN DE INTERFACES > AULA 10
A+ A-Tamanho
do texto

01
02
03
04
01
05
07
08
09
10aula
11
12
14
15
16
18
19
20
21
23
24
25
17
Fórum da aula10
<topico>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec diam
nulla, malesuada vitae vulputate ut, sodales id enim. Sed sodales cursus
libpiscing. Sed sodales cursus libpiscing. Sed culentesq augue Sed sodales
cursus libpiscing. Sed sodales cursus libpiscingalaalalalalalalalala. </topico>
O que você quer falar?
Aqui um post de um contato Nulla facilisi. Fusce non lectus vel lacus gravida laoreet ac at lacus. Cras adipiscing
arcu odio, ut tincidunt orci vulputate at. Phasellus ante tortor, pretium ut elit eget, sollicitudin pharetra libero. Pellen-
tesque massa orci, suscipit et eros vel, rhoncus feugiat eante ipsum primis in faucibus orci luctus et ultrices posu-
ere cubrhoncus feugiat eante ipsum primis in faucibus orci luctus vel, rhoncus feugiat eante ipsum primis in fauci-
bus orci luctus et ultrices posuere cubiliasum primis in faucibus orci luctus et ultrices posuere cubilia ucibus orci
luctus vel, rhoncus feugiat eante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae
2 minutos Comentar Compartilhar
Aqui um post de um contato Nulla facilisi. Fusce non lectus vel lacus gravida laoreet ac at lacus. :
1 - tesque massa orci, suscipit et eros vel, rhoncus feugiat;
2 - eante ipsum primis in faucibus orci luctus et ultrices; posuere cubrhoncus feugiat eante ipsum primis in fauci
3 - bus orci luctus vl, rhoncus feugiat eante ipsum;
4 - primis in faucibus orci luctus et ultrices posuere cubilia Curae
5 - primis in faucibus orci luctus et ultrices posuere cubilia Curae
Fulano de tal Lorem
Aqui um post de um contato Nulla facilisi:
offline
digite aqui
Fernando Torres
online
offline
podcast
VOCÊ ESTÁ EM GRADUAÇÃO > DESIGN DE INTERFACES > AULA 10 > FORUM
A+ A-Tamanho
do texto

Plataforma de aprendizado virtual responsiva e semântica

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Plataforma de aprendizado virtual responsiva e semântica

Semelhante a Plataforma de aprendizado virtual responsiva e semântica (20)

Mais de Vivian Torres

Mais de Vivian Torres (7)

Plataforma de aprendizado virtual responsiva e semântica