24
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.

Atividade - Desenvolvimento de interface_GeanePoteriko

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Atividade - Desenvolvimento de interface_GeanePoteriko

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.

Page 2: Atividade - Desenvolvimento de interface_GeanePoteriko

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

Page 3: Atividade - Desenvolvimento de interface_GeanePoteriko

- 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.

Page 4: Atividade - Desenvolvimento de interface_GeanePoteriko

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

Page 5: Atividade - Desenvolvimento de interface_GeanePoteriko

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

Page 6: Atividade - Desenvolvimento de interface_GeanePoteriko

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.

Page 7: Atividade - Desenvolvimento de interface_GeanePoteriko

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.

Page 8: Atividade - Desenvolvimento de interface_GeanePoteriko

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.

Page 9: Atividade - Desenvolvimento de interface_GeanePoteriko

b) Elementos computacionais (janelas, ícones, botões, menus,

caixas de texto) da ferramenta WIKI

Page 10: Atividade - Desenvolvimento de interface_GeanePoteriko
Page 11: Atividade - Desenvolvimento de interface_GeanePoteriko
Page 12: Atividade - Desenvolvimento de interface_GeanePoteriko

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!

Page 13: Atividade - Desenvolvimento de interface_GeanePoteriko

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.

Page 14: Atividade - Desenvolvimento de interface_GeanePoteriko

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:

Page 15: Atividade - Desenvolvimento de interface_GeanePoteriko

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).

Page 16: Atividade - Desenvolvimento de interface_GeanePoteriko

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

Page 17: Atividade - Desenvolvimento de interface_GeanePoteriko

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.

Page 18: Atividade - Desenvolvimento de interface_GeanePoteriko

Pronto!

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

Page 19: Atividade - Desenvolvimento de interface_GeanePoteriko

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

Page 20: Atividade - Desenvolvimento de interface_GeanePoteriko

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

Page 21: Atividade - Desenvolvimento de interface_GeanePoteriko

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.

Page 22: Atividade - Desenvolvimento de interface_GeanePoteriko
Page 23: Atividade - Desenvolvimento de interface_GeanePoteriko
Page 24: Atividade - Desenvolvimento de interface_GeanePoteriko