Curso de Pós-Graduação Lato Sensu em Mídias Integradas na Educação / UAB - Universidade Aberta do Brasil e UFPR - Universidade Federal do Paraná. Exemplo de Atividade: Disciplina "DESIGN E USABILIDADE" Atividade 2 - Desenvolvimento de interface

1. Universidade Federal do Paraná - UFPR
Setor de Educação Profissional e Tecnológica – SEPT
Curso de Pós-Graduação lato sensu em Mídias na Educação –
Turma 2012/2013
CURSO DE ESPECIALIZAÇÃO MÍDIAS INTEGRADAS NA EDUCAÇÃO - 2012/2013
Nome da aluna: GEANE APARECIDA POTERIKO DA SILVA
Disciplina: DESIGN E USABILIDADE
Data: 30/09/2012
Atividade: Desenvolvimento de Interface
PLANO DE AULA
A1) Perfis de usuário
- Série: 1º Ano do Ensino Médio
- Idade padrão: de 15 a 19 anos
Os alunos em questão estudam no período matutino do Colégio Estadual
Estadual Tancredo de Almeida Neves, localizado no bairro Santa Tereza, município
de Colombo. Trata-se de uma turma bastante motivada, a maioria dos alunos
estão na faixa etária adequada à série com perfil marcado pela criticidade,
participação ativa e interesse em atividades diversificadas em sala de aula,
principalmente com temas relacionados ao seu dia a dia.
Considerando isso, e percebendo que, apesar de todos os esforços da
direção, equipe pedagógica e o empenho dos próprios alunos, várias pichações
estão aparecendo de forma gradativa nos muros, paredes e portas do prédio
escolar, chamando a atenção de todos. O problema se evidencia mais ao ressaltar
que o colégio desenvolveu inúmeras campanhas e atividades voltadas à
preservação e ao bom funcionamento de sua estrutura física, dentre estes mutirões
para pintura do prédio e grafitagem nos muros e paredes. Assim, ao ver todo o
esforço feito nos anos anteriores sendo desperdiçado, os próprios alunos da turma
sugeriram o tema para ser trabalhado nas aulas, iniciando assim uma Campanha
de Conscientização contra a pichação.

2. Desse modo, a mobilização dos alunos da turma com esta atividade foi
voltada à divulgação desta ideia por meio da análise e criação de propagandas
sobre a Campanha contra a Pichação.
b) Objetivos da atividade a ser conduzida via sistema computacional
- Analisar e debater os problemas que a pichação traz para a sociedade e
para o ambiente escolar e sua caracterização de crime com punição para os
autores.
- Diferenciar pichação e grafite.
- Analisar propagandas, comerciais e anúncios publicitários veiculados nos
meios de comunicação, a fim de estabelecer relação com a Campanha de
Conscientização iniciada com a atividade proposta.
- Compreender a linguagem publicitária e sua intenção de persuasão sobre o
público-alvo.
- Produzir material específico para a “Campanha contra a Pichação”, no
formato de propaganda, elaborada no Laboratório de Informática do colégio no
Ambiente Virtual de Aprendizagem Wiki: http://gepoteriko.pbworks.com.
- Conhecer o funcionamento e as ferramentas da Ambiente Virtual de
aprendizagem Wiki para a produção e veiculação de trabalhos;
c) Estratégias de ensino-aprendizagem
1ª etapa (2 aulas): Serão expostos na TV Multimídia o material inicial a
partir de vídeos sobre os temas “pichação” e “grafite”, sendo:
- Música “Vacilando”, rap sobre o cuidado e respeito às instalações dos
colégios públicos. Disponível em http://youtu.be/RZXC72s6hfI
- Reportagem de telejornal sobre a punição aos atos de pichação. Disponível
em: http://www.youtube.com/watch?v=_eP68deRD7w

3. - Imagens de alguns trabalhos de arte dos irmãos gêmeos que embelezam
ruas e muros de São Paulo com a arte do grafite. Disponível em:
http://www.youtube.com/watch?v=hwyor0qwqZw
Após assistirem aos vídeos, os alunos debaterão os seguintes aspectos:
- Quais seriam os motivos pelos quais se picham as instalações do colégio?
(Diversão/ trazer adrenalina; por ser um desafio; em sinal de protesto ou rebeldia;
para chamar a atenção; por ser proibido?)
- Os pichadores que estão poluindo o ambiente visual da escola
possivelmente são alunos, ex-alunos, moradoress do bairro? Qual é o pefil?
- Qual é a opinião da turma sobre escola cheia de pichações?
- Quais seriam as maneiras para combater a pichação no colégio?
Em seguida, a partir do conhecimento e da visão de mundo dos alunos,
serão discutidos outros tópicos sobre o tema “Pichação”. Dentre eles, destacam-se:
- Prejuízos que estes atos de vandalismo trazem à escola e os problemas
que a pichação remete à sociedade em geral, principalmente nos espaços públicos.
- Importância de denunciar para a direção escolar e autoridades locais as
pessoas que praticam pichação, punindo os responsáveis por estes delitos.
- Diferenciação entre “pichação” (crime, de acordo com o artigo 65 da Lei
9.605/98) e “grafite” (tipo de arte – street art).
Após, serão trabalhados os textos e imagens contidas no “Material de Apoio”
(em anexo neste projeto), sendo:
- Definições: Pichação e Grafite.
- Artigo 65 da Lei n. 9.605, de 12 de fevereiro de 1998.
- Artigo 63 da Lei contra Danos.
- Slides sobre sites referentes ao assunto, disponível em:
http://gepoteriko.pbworks.com/w/page/54423914/PROPAGANDAS%20-
%20MATERIAL%20DE%20APOIO
- Fotos das atuais pichações do Colégio.

4. 2ª etapa (3 aulas): Concluídas as atividades introdutórias sobre o assunto
Pichação, serão iniciados neste momento os trabalhos específicos sobre os
gêneros Propagandas e Campanhas Publicitárias.
Nesse momento, serão expostos na TV Multimídia campanhas publicitárias,
imagens de propagandas e vídeos com comerciais, a fim de situar os alunos no
contexto geral do ambiente midiático e apresentar os elementos e características
do gênero “propaganda”, relacionando-os posteriormente ao tema da “Campanha
contra a Pichação”.
Serão apresentados os seguintes materiais de apoio, disponíveis em:
 http://gepoteriko.pbworks.com/w/page/54456966/PROPAGANDAS%20-
%20MATERIAL%20DE%20APOIO%202
 http://gepoteriko.pbworks.com/w/page/54457033/PROPAGANDAS%20-
%20MATERIAL%20DE%20APOIO%203
 http://gepoteriko.pbworks.com/w/page/54457093/PROPAGANDAS%20-
%20MATERIAL%20DE%20APOIO%204
a) Propagandas em vídeo:
- Cola-Cola; Cola-Cola x Pepsi
- Campanha de empresa espanhola para o Dia das Mães
- Campanha Fila: Primeiros passos
- Comerciais de Cervejas: Skoll, Bramma, Kaiser
- Kia Motors: Campanha “Like it” versão Facebook e “Rio”
- Campanha Honda: Propaganda Inteligente
- Campanha Novo Uno
- Campanha Nike Football
- Campanha Eleitoral - “Tiririca”
- Comerciais engraçados
- Comerciais criativos
- Comerciais que marcaram época

5. b) Anúncios e Campanhas Publicitárias
- Campanha Anti-Fumo (Inglês)
- Propaganda Trident
- Propaganda Dicionário Aurélio
- Campanha “Bombril”
- Propaganda Cheetos
- Propaganda Dove Anti-Frizz
- Campanha “Stomp it Out” (Exército americano)
- Campanha Dpto. Americano Segurança
- Campanha Americana contra Nazismo
- Campanha Americana Tio Sam (Exército)
- Propaganda Advogado x Juiz
- Dia Mundial da Propaganda
- Propaganda da Empresa Parizzi Designs
- Propaganda Volkswagem
- Propaganda Honda
- Propaganda Turma da Mônica
- Propaganda Marinha Americana/ Ministério da Defesa
- Campanha “Wake up America”
- Campanha “Submarine Service”
- Propaganda Game X Box 360
Este material será apresentado juntamente a questionamentos e propostas
de discussão sobre seus conteúdos, intencionalidade e contexto de produção,
focalizando a Linguagem Apelativa característica das propagandas.
Além disso, serão analisados os recursos empregados pelo anunciante para
alcançar o público-alvo, dentre eles:
- Imagens
- Cores
- Títulos
- Subtítulos
- Slogans

6. Como atividade, os alunos se organizarão em grupos de 4 alunos, deverão
escolher uma propaganda ou comercial assistido e fazer uma análise escrita
contendo os itens acima mencionados.
4ª etapa (1 aula): Na aula seguinte, os grupos irão expor verbalmente suas
análises.
Depois, criar um slogan, um logo (imagem) e um breve texto posicionando-
se contra a pichação no colégio.
5ª etapa (2 aulas): A continuidade da atividade será realizada no
Laboratório de Informática, onde os grupos deverão usar seu slogan, logo e texto
criando uma propaganda direcionada à Campanha contra a Pichação.
A propaganda deverá ser publicada no site wiki:
http://gepoteriko.pbworks.com, seguindo as explicações da professora sobre o uso
das ferramentas disponíveis neste ambiente virtual.
EXECUÇÃO DA ATIVIDADE
a) Itens informacionais integrantes às telas associadas
Para se iniciar a criação da propaganda na wiki, referente à temática
“pichação” e conscientização contra as pichações no colégio, os alunos
deverão digitalizar o logo (desenho ou imagem) ou selecionar uma imagem
relacionada ao slogan e texto criados pelo grupo.
Depois, entrar no site: http://gepoteriko.pbworks.com.
Cada aluno receberá uma senha para acesso e login.

7. Após fazer o login, escolher a opção:
- CREATE A PAGE.
Então, deverá ser colocado o nome da página que foi escolhido pelo
grupo, devendo ser o título da propaganda.

8. Nesse momento, o texto da propaganda deverá ser digitado no espaço
de edição, que segue o estilo padrão de digitação e edição de textos: escolher
fonte, cor, tamanho, efeitos etc.
O slogan deverá estar em destaque.
Depois, inserir a imagem ou logo, clicando em:
- Opção “Images and Files”, depois “Upload Files”.
- Selecionar o arquivo.
- Abrir.
Posicionar a imagem no local desejado e salvar a página clicando em:
- SAVE ou SAVE
AND CONTINUE.

9. b) Elementos computacionais (janelas, ícones, botões, menus,
caixas de texto) da ferramenta WIKI

12. c) Interface dos itens informacionais e elementos computacionais
d) Orientação para o aluno sobre o software
OLÁ GALERA!
Estamos mobilizando o colégio para esta Campanha de Conscientização
contra a Pichação. Para isso, precisamos divulgar nossas ideias e convencer a
todos de que a Pichação não leva a nada, devemos conservar nosso prédio escolar
e praticar o grafite.
Para isso, vamos usar um Ambiente Virtual de Aprendizagem chamado
WIKI.
Vamos ver como se usa esta ferramenta?
É muito fácil, basta ficar atento e...
mãos à obra!

13. COMO UTILIZAR A PÁGINA WIKI
O SITE WIKI é um Ambiente Virtual de Aprendizagem (AVA) com amplas
possibilidades de uso. A wiki http://gepoteriko.pbworks.com está sendo utilizada
para registrar as atividades do Colégio Estadual Jardim Tancredo de Almeida
Neves. Outras wikis podem ser criadas com novos endereços. Este tutorial orienta
sobre o uso das ferramentas deste AVA para a divulgação da CAMPANHA
CONTRA A PICHAÇÃO.
Para acessar, basta digitar o endereço e fazer LOGIN.

14. Digite seu
username
(nome
registrado
previamente
pela
administradora
do site, que é a
professora
Geane) ou e-
mail, e a senha
que você
recebeu.
Caso ainda não seja um membro, escolha a opção “Request Access” para
solicitar a chave de acesso à wiki. Só podem interagir e participar da wiki aqueles
que forem cadastrados pela professora.
1) PARA CRIAR UMA PÁGINA NA WIKI:
Você e seu grupo deverão criar sua propaganda em uma página específica,
criada por vocês. Escolha a opção “Create a Page”.
Na tela seguinte, digite o nome da página: “Name your Page”, ative a opção
“Blank Page” e selecione o folder (pasta).
As opções são:

15. Depois, clique em “Create a Page”.
Abaixo, segue a tela para criação de páginas na Wiki.
Completada esta etapa, aparecerá uma página pronta para ser editada, no
formato padrão de um site. Deve-se selecionar a parte que será editada e os
comandos (ÍCONES) apresentam:
 Configurações das letras: B = Negrito U = Sublinhado I = Itálico
 Format = Definição de títulos. Exemplo:
Título principal = Heading1 Subtítulo= Heading2 ... etc
Texto = Normal
 X2
= Sobrescrito (na abreviação da palavra número: no
, por exemplo).
 X2 = Subscrito (em fórmulas).
 Formatação de: Marcadores, Numeração, Espaço de Recuos etc (como no
programa Word).

16.  Mudança da cor da fonte (letra) e de seu tamanho.
 Texto: Localizado à Direita, Centralizado ou à Esquerda.
 Comandos:
- Copiar: CTRL + C - Colar: CTRL + V - Recorttar: CTRL + X
 Ícone para fazer e editar tabelas.
RECURSOS DE EDIÇÃO DA PÁGINA
WIKI

17. 2) PARA INSERIR IMAGENS
O logo que você e seu grupo criaram deverá ser colocada na página.
a) Escolha a opção “Images and Files”, depois “Upload Files”.
b) Aparecerá uma janela para selecionar arquivos. Selecione as imagens
desejadas, pode-se selecionar mais de uma por vez (o recomendável é 6
para cada upload, para não ficar muito demorado).
c) Escolha “Abrir”.
d) A imagem será carregada e ficará disponível no canto direito. Basca clicar
sobre ela.
IMPORTANTE: Atenção ao tamanho da imagem. O recomendável é a
dimensão para “web pequena”, no tamanho de 448 x 336 pixels (ou
similares), pois imagens com maiores resoluções demoram muito a carregar
e deixam a página lenta. Pode-se utilizar a edição de imagens do Programa
Padrão do Windows, por exemplo, o Microsoft Office Picture Manager.

18. Pronto!
Imagem postada. Se quiser adicionar mais fotos, basta repetir o procedimento.

19. 3) PARA INSERIR VÍDEOS
Se vocês quiserem poderão incluir na propaganda algum vídeo. Para isso:
a) Escolha a opção “Insert”, depois “Vídeo” e selecione “YouTube”.
b) Vá até a página do vídeo que você quer adicionar, copie (CTRL + C) o
endereço da URL (link).
Exemplo:
http://www.youtube.com/watch?v=8dwtSuVTBpY&feature=topvideos_mp
c) Na tela seguinte, cole (CTRL + V) o link (URL) do vídeo. Clique em “Next”.
d) O plug irá aparecer, escolha “Insert Plugin”.
COLAR AQUI
Plug do vídeo

20. OK! O vídeo estará disponível! Basta clicar em: “Save”
Se vocês quiserem fazer uma entrevista com alguém, filmar o colégio ou
registrar as pichações que estão poluindo o ambiente escolar, façam o vídeo e
coloque-o no canal you tube, para despois postar na wiki.
Estejam à vontade. Usem a criatividade!
A PROPAGANDA É DE VOCÊS!
Encerre então sua página e salve.
Cada vez que se cria uma página, deve-se acrescentar seu link na SideBar
(BARRA LATERAL), onde ficam organizadas todas as páginas. Se você quiser
editar páginas de outros usuários, basta clicar em EDIT e colaborar como quiser!
Afinal, a WIKI é um “Ambiente Virtual de Aprendizagem”, para escrita colaborativa,
ou seja, entre grupos.
E ASSIM CONCLUIMOS NOSSO TRABALHO.
É mais um aprendizado que podemos utilizar em outras ocasiões.
BOM TRABALHO! Professora Geane Poteriko

21. REFERÊNCIAS:
Lei contra a Pichação. Disponível em:
http://www.youtube.com/watch?v=_eP68deRD7w Acessado em 10/09/2012
Arte dos irmãos gêmeos grafiteiros. Disponível em:
http://www.youtube.com/watch?v=hwyor0qwqZw Acessado em 10/09/2012
NEAD, UFPR. Material Didático do Curso de Pós Graduação Lato Senso em
Mídias integradas na Educação. Design e Usabilidade. Disponível em: <
http://www.cursos.nead.ufpr.br/mod/assignment/view.php?id=125630> Acesso em
20/09/2012
Vacilando. Disponível em http://youtu.be/RZXC72s6hfI Acessado em 10/09/2012
www.gepoteriko.pbworks.com
TUTORA VANESSA,
TERMINEI O TRABALHO NO DIA 30/09, PRAZO FINAL, A NOITE, APÓS AS 23H.
NO ENTANTO, NÃO CONSEGUI ACESSAR O MOODLE PARA POSTAR O
TRABALHO ANTES DE ENCERRAR O DIA 30/09.
ABAIXO, CAPTUREI AS TELAS INDICANDO O ERRO NO LOGIN AO SITE.
A SEQUENCIA DE TELAS INDICA OS HORÁRIOS FINAIS.
SÓ CONSEGUI ACESSAR MINUTOS DEPOIS.