Ferramentas Web, Web 2.0 e Software Livre em EVT · desta oficina de formação. A identificação do autor deste documento é a constante desta página e constituí recurso educativo

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.

http://www.mockflow.com/



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

http://www.mockflow.com/

http://app.mockflow.com/



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”



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



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”



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.



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.



8

Figuras 15, 16 e 17 – Apresentação das páginas

Figura 15 - SiteMap

Documents

Ferramentas Web, Web 2.0 e Software Livre em EVT · desta oficina de formação. A identificação do autor deste documento é a constante desta página e constituí recurso educativo