Este recurso foi produzido no âmbito da formação contínua de professores e faz parte integrante da investigação do trabalho de
doutoramento em Multimédia em Educação, pela Universidade de Aveiro do professor José Alberto Rodrigues, com o mesmo nome
desta oficina de formação. A identificação do autor deste documento é a constante desta página e constituí recurso educativo em EVT.
Ferramentas Web, Web 2.0 e Software Livre em EVT E s t u d o s o b r e a i n t e g r a ç ã o d e f e r r a m e n t a s d i g i t a i s n o c u r r í c u l o
d a d i s c i p l i n a d e E d u c a ç ã o V i s u a l e T e c n o l ó g i c a
MockFlow M a n u a l e G u i a d e e x p l o r a ç ã o d o M o c k F l o w p a r a u t i l i z a ç ã o
e m c o n t e x t o d e E d u c a ç ã o V i s u a l e T e c n o l ó g i c a c u r r í c u l o
Tiago Carvalho
Ferramentas Web, Web 2.0 e Software Livre em EVT
Estudo sobre a integração de ferramentas digitais no currículo da disciplina de Educação Visual e Tecnológica
1
Caracterização e Ficha Técnica do MockFlow ©
Nome MockFlow
Tipo de ferramenta Web 2.0
Autores e/ou Criadores A Produle Systems (P) Limited ©
Versão Versão 1
Tipo de versão Gratuita, necessidade de um registo gratuito (existe uma versão Premium que é paga)
URL’s http://www.mockflow.com/
Língua(s) Inglês
Tipo de funções Design de layout para websites de dispositivos móveis, paginação e outro tipo de aplicações
Recursos necessários Computador com ligação à Internet e browser (não é preciso ligação à internet se fizermos o download do programa que funciona através do Adobe Air em versão Desktop)
Breve descrição O MockFlow é uma ferramenta que permite a criação de layouts de páginas (websites e outras ferramentas da web). Permite inclusive que este trabalho seja partilhado em equipa e que seja construído colaborativamente. Permite, para além da criação de páginas e publicações para dispositivos móveis, criar outras aplicações para este tipo de dispositivos.
Ferramentas Web, Web 2.0 e Software Livre em EVT
Estudo sobre a integração de ferramentas digitais no currículo da disciplina de Educação Visual e Tecnológica
2
Caracterização e Ficha Técnica do MockFlow ©
1. Para acedermos a esta ferramenta, devemos, no browser da Internet, digitar o seguinte
endereço: http://www.mockflow.com/. No caso de já termos criado uma conta de utilizador,
podemos entrar directamente na interface através deste endereço: http://app.mockflow.com.
2. A primeira página permite perceber quais as funcionalidades desta ferramenta.
Figura 1 – Página inicial
3. Para iniciarmos o trabalho precisamos de fazer um registo inicial, para isso devemos
carregar em “Signup”. Vamos então para uma página com formulário para preencher.
Figura 2 – Formulário
Ferramentas Web, Web 2.0 e Software Livre em EVT
Estudo sobre a integração de ferramentas digitais no currículo da disciplina de Educação Visual e Tecnológica
3
4. Após registo e respectiva confirmação acedemos a uma interface com tudo sobre a
nossa conta podendo alterar dados: em “My Mockups” podemos encontrar os nossos
layouts e algumas mensagens importantes em “App News”; em “My Account” poderá
mudar dados pessoais (nome da conta, e-mail, palavra passe); em “My Team” permite
adicionar pessoas à equipa de trabalho (atenção que a conta gratuita só permite 2
elementos na equipa) e gerir o trabalho de equipa.
Figura 3 – Separador do “My Mockups”
Figura 4 – Separador do “My Account”
Figura 5 – Separador do “My Team”
Ferramentas Web, Web 2.0 e Software Livre em EVT
Estudo sobre a integração de ferramentas digitais no currículo da disciplina de Educação Visual e Tecnológica
4
5. Para iniciarmos o nosso trabalho em “My Mockups” vamos carregar em “Create New” e
escolhemos o tipo de objecto que queremos fazer. Podemos sempre usar os
Templates que existem (figura 7).
Figura 6 – Create New
Figura 7 – Templates
Figura 8 – utilização de um template
Ferramentas Web, Web 2.0 e Software Livre em EVT
Estudo sobre a integração de ferramentas digitais no currículo da disciplina de Educação Visual e Tecnológica
5
6. Para iniciarmos uma página sem irmos aos Templates temos que carregar em “Create
New” e “From Scratch” (Figura 6). Teremos que colocar o nome do documento/site e
carregar no botão ““Create new”.
Figura 9 – Create new
7. Um interface de fácil utilização. Começamos por trabalhar na página inicial do nosso site
onde podemos arrastar os objectos/elementos para lá.
Figura 10 – Interface de trabalho com a página inicial
8. Devemos começar com a introdução de um “Layout Builder” pois este é um definidor da
estrutura do site, podemos alterar os tamanhos e configurações se carregarmos duas
vezes seguidas com o cursor sobre o Layout.
Figura 11 – Forma do “Layout Builder”
Ferramentas Web, Web 2.0 e Software Livre em EVT
Estudo sobre a integração de ferramentas digitais no currículo da disciplina de Educação Visual e Tecnológica
6
Figura 12 – Edição do “Layout Builder”
9. Qualquer dos objectos/elementos que arrastarmos para o nosso site, pode ser editável,
basta para isso carregar duas vezes para que se faça a edição.
Figura 13 – Edição do texto
10. Podemos ainda criar as Ligações entre páginas, para isso é necessário criar outras
páginas. No lado direito selecciona “Pages” podendo acrescentar páginas e edita-las.
Para tornar possível a navegação é necessário editar as ligações, através de botão ou
outros elementos que possibilitam a edição de ligações.
Ferramentas Web, Web 2.0 e Software Livre em EVT
Estudo sobre a integração de ferramentas digitais no currículo da disciplina de Educação Visual e Tecnológica
7
Figura 14 – Edição de páginas
Figura 14 – Editor de Ligações (Links) do objecto/elemento “Bullet List”
11. Por fim podemos ver apresentação da página no botão “Present” e mostra-nos como
seria a nossa página. Podemos ainda visualizar o SiteMap. É possível depois publicar
a aplicação criada, seja para telemóvel com Sistema Operativo Android, iPhone,
Aplicação do Facebook, entre outras.
Ferramentas Web, Web 2.0 e Software Livre em EVT
Estudo sobre a integração de ferramentas digitais no currículo da disciplina de Educação Visual e Tecnológica
8
Figuras 15, 16 e 17 – Apresentação das páginas
Figura 15 - SiteMap
Recommended