Guiao Widget v2 0

ietc.eun.
org
Guio de apoio criao e uso de Widgets
verso 2.0
3 de maro 2014
Ficha Tcnica
Guio de apoio criao de Widgets Direo-Geral da Educao Equipa de Recursos e Tecnologias Educativas Coordenador tcnico nacional do projeto iTEC Fernando Rui Campos Professora participante do Projeto iTEC Ana Paula Alves
iTEC - Designing the future classroom - Guio de apoio criao e uso de Widgets | 2
ndice
1. 2. 3. 4. 5. 6. 7. 8. 9. Introduo....................................................................................... 4 Conceito - Widget ........................................................................... 5 Criar um Widget na Widget Store ................................................... 6 Criar um Widget a partir de um cdigo embebido ........................... 7 Criar um Widget a partir de um endereo de pgina ..................... 10 Criar um Widget a partir de um ficheiro Flash ............................... 14 Embutir um Widget numa pgina HTML ....................................... 15 Criar um Widget W3C ................................................................... 15 Criar um Widget a partir de um stio Web ..................................... 19
10. Criao de Widgets GoogleDrive .................................................. 20 11. Criao de Widgets de apresentaes modelo Prezi .................... 26 12. Criao de Widgets a partir de documentos ................................. 26 13. Criao de Widget Geogebra ....................................................... 29 14. Criao de Widgets em linha de stios que no permitem a abertura de iframe............................................................................................. 32 15. Navegar e pesquisar a Widget Store ............................................ 36 16. Adicionar um Widget como Favorito ............................................. 42 17. Incluso da Widget Store em plataformas de aprendizagem ........ 43 18. Widget LRE .................................................................................. 44 19. Aceder atravs da plataforma Moodle .......................................... 46 20. Possibilidades e limitaes de Widgets e Widget Store ................ 47
1. Introduo
O presente guio, tem como objetivo apoiar a utilizao e criao de Widgets, na prtica de sala de aula enquadrados pelo princpios pedaggicos das Atividades de Aprendizagem do projeto iTEC, partindo do desenvolvimento realizado pela Universidade de Bolton do Reino Unido. Este guio foi realizado a partir da experincia adquirida durante o ano de 2013, pelos professores e professoras portuguesas e pela coordenao tcnica e pedaggica do projeto iTEC, tendo por base a verso 1.2 do Manual de apoio criao e uso de Widgets, relizada durante o ciclo 4 de pilotagem. Nesta nova verso, realizada para o ciclo 5 de pilotagem do projeto iTEC, existem novas formas de visualizar e gerir os Widgets, nomeadamente: A possibilidade dos Widgets permanecerem apenas disponveis para o seu criador; Classificao e categorizao dos Widgets, de forma a facilitar, a pesquisa por outros professores; Nova forma de visualizao dos recursos criados pelos professores; Atualizada a forma como se pesquisa a informao, na Widget Store, assim como a possibilidade de incluso de stios web a partir de uma pasta comprimida, utilizando a opo webfolder; Suporte na opo webfolder de stios com vrios ficheiros HTML na pasta raiz sendo apenas necessrio a escolha do respetivo ficheiro de arranque do ministio ou recurso. Foi ainda retirada a opo de Widgetbox que se encontrava na verso 1.2 do manual por este servio estar a terminar, no sendo assim aconselhado o seu uso. Embora existam exemplos de Widgets a partir de fontes diversificadas, como recursos nos sistemas locais e na web, existem no entanto limitaes. Assim foi reformulada a seco onde se explanam algumas dessas limitaes. De referir a existncia sobre esta mesma temtica, de um Blogue com o endereo: http://itecWidgetsportugal.blogspot.pt/p/apresentacao.html, que inclui exemplos de aplicao em contexto educativo, realizado atravs da participao de vrios professores e professoras participantes no projeto iTEC.
2. Conceito - Widget
Os Widgets so pequenas aplicaes que se incorporam nas pginas Web, blogues, ambientes de trabalho dos computadores pessoais, quadros interativos ou dispositivos mveis (smartphones, iPads e tablet) e que funcionam de forma independente nesses ambientes. So exemplos comuns, os aplicativos de previso do tempo, blocos de notas ou as calculadoras. No projeto iTEC um Widget uma aplicao que exibe um recurso que potencialmente pode contribuir para a aprendizagem (por exemplo, uma animao em Flash). O Team Up um exemplo de um Widget iTEC que permite, neste caso, a formao de equipas para a realizao de trabalho de grupo. Existem outros Widgets, que permitem a colaborao entre alunos e pesquisa de recursos em repositrios, como por exemplo o Learning Resource Exchange (LRE). O Widget LRE funciona como um repositrio de Widgets educacionais que podem ser utilizadas por alunos e por professores.
Faz parte do mbito do projeto iTEC, enriquecer o repositrio de Widgets educacionais proporcionando uma boa fonte de recursos destes aplicativos que so fceis de instalar e requerem conhecimentos tcnicos que estaro ao alcance dos professores. No projeto iTEC podemos usar pelo menos duas formas de criar e encontrar Widgets. Uma das formas atuais de pesquisa de Widgets atravs da Widget Store, ferramenta que foi especificamente criada para o projeto iTEC, onde se integram os Widgets de vrias origens ou fontes de recursos digitais.
3. Criar um Widget na Widget Store

De forma a ficar disponvel a toda a comunidade de professores e professoras que utilizam os Widgets atravs da opo Widget Store, necessrio o envio destes atravs de uma plataforma especfica. necessrio ter em ateno que existe mais que uma forma de aceder Widget Store com possibilidade de envio de Widgets. Uma das formas, no implica registo e a outra implica um registo prvio acedendo atravs de um Login. No caso de pretenderem enviar os Widgets necessrio o registo prvio, por exemplo atravs da conta do Facebook ou OpenID (cada uma cria um perfil especifico e independente). A outra forma de aceder sem necessidade de insero de credenciais permite aceder aos Widgets atravs da Widget Store, mas no o envio para o sistema. Para aceder Widget Store com registo de credenciais, deveremos aceder atravs do endereo http://wookie.eun.org/Store/ , na opo Login (canto superior direito) .
Existe neste caso vrias opes de Login. Uma destas a utilizao da conta de OpenID, que j foi realizada para o acesso comunidade iTEC ou a outra comunidade que utilize a tecnologia OpenID da EUN.. Este login com as credenciais do professor, permite ter o controlo dos Widgets que foram enviadas para a Widget Store, por parte do/a professor/a e tambm possibilita o envio de recursos para serem transformados em Widgets. Outra das possveis opes de acesso Widget Store aceder atravs da plataforma Moodle, se j tiver registado anteriormente e permita acesso aos cursos.
4. Criar um Widget a partir de um cdigo embebido
A partir da introduo com sucesso das credenciais do/a professor/a possvel a introduo dos recursos na Widget Store de forma personalizada. Os procedimentos so neste caso os seguintes: 1. Aceder ao Widget Store do iTEC http://wookie.eun.org/Store/ 2. O/A professor/a deve estar registado/a na Cloud iTEC para aceder Widget Store.
3. Exemplo - Obter o cdigo embed, por exemplo, de um vdeo do YouTube: <iframe width="480" height="360" src="http://www.youtube.com/embed/XmTDm4ipp_U" frameborder="0" allowfullscreen></iframe>
Dimenses do vdeo: Pode alterar a dimenso do vdeo (width="480" height="360") 560 x 315 ;640 x 360;853 x 480;1280 x 720 Outra 4. Clicar em Creator para criar uma nova Widget a partir do cdigo embed fornecido
Ou em alternativa em New Widget, tal como o indicado a partir da opo My Widgets.
5. Preencher os campos de envio colocando o cdigo embed, o nome dado Widget, dimenses (800 x 600)
6. Aps o envio (Submit) do ficheiro possvel visualizar o Widget (opo view) e obter o cdigo embed para incorporar na pgina ou ambiente pretendido. 7. Atravs da opo My Widgets ento possvel visualizar de forma muito aproximada o Widget que foi criado, atravs da seleo da opo view como mostra o exemplo.
Sendo que para o cdigo utilizado no exemplo dever abrir a seguinte pgina.
Um outro exemplo tpico a criao de Widgets para a visualizao do vdeo na pgina numa determinada pgina Web. Neste exemplo possvel visualizar um clip de vdeo, com exemplo de explicao sobre extremos e quartis.
5. Criar um Widget a partir de um endereo de pgina
1.
Exemplo Conhecer o endereo do stio da aplicao que pretende, por exemplo:
http://www.alea.pt/html/statofic/html/dossier/doc/ActivAlea20/diagrama.html
2.
Converter para cdigo embed, para isso necessrio incluir cdigo HTML com a
dimenso da janela: width="480" height="360" , incluso da palavra <iframe e src= e a </iframe>, resultando o seguinte cdigo de embeber: <iframe width="480" height="360" src="http://www.alea.pt/html/statofic/html/dossier/doc/ActivAlea20/diagrama.html" frameborder="0" allowfullscreen></iframe>
3.
Dimenses da aplicao: Pode alterar a dimenso do ecr da aplicao usar as
palavras de comando (width="480" height="360") para 560 x 315; 640 x 360; 853 x 480;1280 x 720; Outra 4. Clicar em Upload New Widgets para criar o Widget a partir do novo cdigo embed
5.
Preencher os campos de envio conforme a imagem documenta
6.
Para todas os Widgets construdos podemos escolher as funcionalidades e as etiquetas
existentes ou criar outras (opo Or create one) e ainda elaborar uma pequena descrio. A criao da descrio dever ter no mnimo duas a trs linhas e ser relevante do ponto de vista de alguns aspetos referentes ao uso do Widget. Dever ser includo, por exemplo, quais os temas para a qual o Widget apropriado, qual a idade dos alunos e o contexto em que pode ser aplicado na sala de aula.
Obter o cdigo embebido (embed) para incorporar na pgina ou ambiente pretendido
7.
Exemplo da utilizao deste Widget num ambiente de aprendizagem:
8.
Resumo das alteraes necessrias para a criao de cdigo de embeber a 8.1 Exemplo de pgina HTML 5
<!DOCTYPE HTML> <html> <head> </head> <body>      <iframe width="480" height="360" src="http://cardosolopes.net/Alunos/Disciplinas/ET/Geral/energia/energia_1.htm" frameborder="1" allowfullscreen></iframe> </body> </html>
partir de uma pgina web em HTML
8.2- Detalhe e visualizao dos carateres adicionais a inserir ao cdigo do stio
6. Criar um Widget a partir de um ficheiro Flash
A criao de Widgets permite a criao dos mesmos a partir de aplicaes em Flash. Nesse caso necessrio a aplicao que se quer colocar na Widget Store. 1. Exemplo Ter o ficheiro que tem no seu nome a extenso swf armazenado num dispositivo de massa (disco local, Pen drive,).
2. Exemplo Informao de um Widget criado a partir de um ficheiro Flash
7. Embutir um Widget numa pgina HTML

Para introduzir um Widget numa pgina HTML dever: 1. Copiar Cdigo da Widget (copiar o cdigo embed)
<iframe src="http://wookie.eun.org:80/wookie/wservices/wookie.apache.org/Widgets/embed/Ener gias/index.html?idkey=0XK21k2MQzURD87rVRycI4stIII.eq.&proxy=http://wookie.eun.org: 80/wookie/proxy&st=" width="801" height="601"></iframe>
2. Colar na pgina Web (Moodle, Blog, ) no editor HTML. No exemplo temos uma pgina HTML, em que se v o cdigo fonte da mesma.
8. Criar um Widget W3C
Tambm se pode facilmente criar um widget com contedo especfico completamente a partir do zero. Se, por exemplo, tivermos alguma imagem que se deseja transformar em um widget, ou num pequeno slideshow de fotos, pode-se transformar esse contedo num widget. Podemos ainda realizar a concatenao de Widgets atravs de cdigo HTML e que eventualmente necessitemos de transformar num s ou adicionar algum contedo que consideremos importante. Vamos dar o exemplo muito simples em como criar um Widget a partir de uma pgina HTML. Primeiro necessrio separar os ficheiros numa pasta especfica, com os diferentes arquivos a utilizar. No nosso caso que apenas a insero da palavra Recursos Travel
Well no Widget LRE apenas sero necessrios 3 ficheiros. O prximo passo criar uma pgina HTML com o que se pretende inserir como Widget. No nosso caso iremos criar uma pgina HTML 5 com o cdigo minmo, incluindo o cdigo do Widget.: Este ficheiro ter o nome index.html
<!DOCTYPE HTML> <html> <body>

<div>Recursos <b>"<i>Travel Well</i>"</b></div> <iframe width="450" height="360" style="border: medium none;" src="http://wookie.eun.org:80/wookie/wservices/wookie.apache.org/Widgets/lrewidptTW/widget.htm?i dkey=a6.pl.ZfHVslZZCMYSKGcsw9nTL38Y.eq.&proxy=http://wookie.eun.org:80/wookie/proxy&st=" ></iframe> </body> </html>
O prximo passo criar o arquivo de configurao que ir transformar este documento HTML num Widget. O arquivo de configurao tem a designao de config.xml. No exemplo a seguir encontram-se os detalhes de cdigo mnimos que so necessrios para a criao do Widget, na plataforma Widget Store. Exemplo de cdigo:
<widget xmlns="http://www.w3.org/ns/Widgets" id="http://wookie.apache.org/Widgets/LRE Travel Well PT" version="0.1" width="630" height="580" > <name>LRE Travel Well Portugal</name> <description>Widget LRE Travel Well</description> <content src="index.html"/> <icon src="icon.png"/> <author>Fernando Campos</author> </widget>
O ficheiro de configurao a criar config.xml inclu a identificao do Widget (tem de ser um nome que no exista no contedo existente na Widget Store) e ainda informao sobre a largura e altura no ecr do Widget (width="630" height="580") em pixel. ainda necessrio indicar a descrio do Widget (Widget LRE Travel Well) e criar previamente o cone que dever aparecer, quando se faz a pesquisa da Widget (imagen de icon.png). A pasta onde se armazenam os ficheiros contm todos os arquivos e as informaes necessrias para criar o Widget:
Aps a criao dos ficheiros necessrios implementao dos Widgets W3C necessrio criar um arquivo zip usando Winzip ou uma aplicao similar. Depois de criado o ficheiro Zip (que dever conter os ficheiros config.xml, icon.png, ndex.html) necessrio renomear o nome da extenso para wgt e s de seguida enviar para a Widget Store. Teremos ento um mnimo de trs ficheiros para a criao de um Widget W3C. Um ficheiro com o cdigo HTML (ndex.html), um segundo com o cdigo de configurao necessrio para os atributos da Widget Store (config.xml)e um terceiro ficheiro, com o cone a utilizar como representao do Widget (icon.png). Se realizado com sucesso o envio do ficheiro ndex.wgt dever surgir o cone e a indicao do Widget enviado, seguido de um ecr com os detalhes do Widget.
A seguir devero ser colocadas as etiquetas, e funcionalidades ou crticas. O resultado obtido atravs da opo View dever ser algo semelhante imagem e texto seguinte.
A partir do momento em que a plataforma da Widget Store armazena o recurso (transformado em Widget) este estar pronto para ser usado em qualquer plataforma como Moodle, dotLRN ou qualquer outra plataforma que permite a incorporao de Widgets, como o SMART Notebook ou Promethean ActivInspire.
9. Criar um Widget a partir de um stio Web
Com a atualizao da Widget Store ocorrida a partir do dia 3 de maio 2013, passou a ser possvel incluir recursos que estejam em formato de stio Web. Esses recursos tm de estar disponveis no disco local e podem incluir imagens, vdeo e outras atividades. Existem no entanto algumas regras que tm de ser seguidas de forma a colocar em funcionamento este tipo de Widget. Na figura abaixo mostra-se uma vista parcial de um recurso relacionado com a ecologia e que inclu uma estrutura que incluem imagens, ficheiro CSS com a configurao do aspeto do stio e ainda scripts na linguagem Javascript para alm de ficheiros em formato Flash (do fabricante Adobe).
Por um lado necessrio que o ponto de entrada do ficheiro do stio/Widget, tenha o nome index.html ou index.htm. Por outro lado necessrio criar um ficheiro compactado do tipo zip que inclua no s os ficheiros da pasta raz, como as vrias subpastas existentes e respetivos ficheiros. O ficheiro a enviar ser ento o ficheiro zip, que no nosso caso ser ecoeuropa.zip , que ser inserido na Widget Store selecionando a opo Web Folder. Na criao do Widget ser necessrio incluir o nome do Widget, um cone dos que esto disponveis (de acordo com o significado), uma descrio do Widget e a dimenso do mesmo no ecr (Widget Width e Widget Height).
Cdigo resultante: <iframe width="930" height="800" src="http://wookie.eun.org:80/wookie/wservices/incubator.apache.org/wookie/generated/F7 716F01-4A05-44DD-A99FC1B361CA25C5/index.html?idkey=ZlXXCXIkkiLLm.sl.p2c37kM.pl.PgrDE.eq.&proxy=http: //wookie.eun.org:80/wookie/proxy&st="></iframe>
10. Criao de Widgets GoogleDrive
Como exemplo vamos criar um Widget a partir de um Google drive Para usar esta opo necessita obrigatoriamente de ter uma conta de correio eletrnico ativa no Google. Podemos criar um Widget a partir de um ficheiro Google drive(folha de texto, folha de clculo, folha de apresentaes, etc.), seguindo os seguintes passos:
1- Partilhar o documento que est na Google Drive documento a partilhar, seguido da opo Share).
(2 boto do rato em cima do
2- Adquirir a hiperligao do documento a partilhar (com a configurao de partilha e acesso).
Na opo de acesso definida a forma de disponibilizao do documento. Existem presentemente 3 opes: pblico na internet, qualquer pessoa com o link ou privado. Dever escolher a opo que mais se adequa tendo em conta as questes de privacidade e de legislao em vigor, tendo em conta os tipos de dados envolvidos.
3- Converter para cdigo embed, copiando e colocando o endereo no seguinte formato:
<iframe width="480" height="360" src=" https://docs.google.com/presentation/d/1fU4sZ6pWT-b2-IpXI03KrBd_wkRNG32E6yI1vCHRMg/edit?usp=sharing" frameborder="0" allowfullscreen=true></iframe>
4 - Ajustar a dimenso no ecr atravs dos parmetros (width="480" height="360") ou seja 480x360 px, para 560x315 px; 640 x 360 px; 853x480 px;1280x720 px; outra dimenso
5 - Enviar para a Widget Store, fazendo Upload New Widgets para criar a Widget a partir do novo cdigo embed .
6- Preencher os campos de envio conforme o descrito. 6.1 -Copiar o cdigo obtido : <iframe width="480" height="360" src=" https://docs.google.com/presentation/d/1fU4sZ6pWT-b2-IpXI03KrBd_wkRNG32E6yI1vCHRMg/edit?usp=sharing" frameborder="0" allowfullscreen></iframe> 6.2-Adicionar o nome (ateno que o nome deve ser distinto do j existente na Widget Store) e a dimenso do ecr Widget Width e Widget Height.
6.3 Aps a seleo do Submit a widget integrada nos Widgets do utilizador.
6.4-No final dever ser gerado o cdigo de embeber a incluir na Shell (plataforma Moodle, Blogue, etc.).
7- Os Widgets a seguir reunidos, revelam vrios tipos de documentos (folha de clculo, folha de edio documental, folha de apresentao) que permitem ser editados pelos utilizadores da forma previamente definida na partilha (opo share) de acordo com as opes de visibilidade (ver pag. 22). Os tipos de documentos partilhados esto de acordo com o definido anteriormente, atravs dos vrios tipos de documentos do Google Docs existente no Google Drive. Exemplo de Folha de clculo disponvel em http://itecWidgetsportugal.blogspot.pt/search/label/Matem%C3%A1tica
Exemplo de Folha de texto e de apresentao disponvel em: 1- http://itecWidgetsportugal.blogspot.pt/search/label/Geral
2- Exemplo de Folha de apresentao
11. Criao de Widgets de apresentaes modelo Prezi

Relativamente ao servio Prezi possvel obter cdigo de embeber sem ter de realizar tarefas complexas. Para isso no possvel utilizar o endereo do stio, antes as opes Share e depois Embebed.
A partir da opo do cdigo Embed, deve ser copiado o cdigo gerado pelo prprio ambiente de armazenamento do Prezi. A partir deste cdigo inserir diretamente na plataforma Moodle se no se pretender usar a Widget Store ou ento atravs da opo embebd da Widget Store.
12. Criao de Widgets a partir de documentos
Existe mais do que uma forma de criao de Widget a partir de documentos. Uma das propostas a utilizao da Tecnologia Google Drive. Nesse caso, deve ser seguido o procedimento descrito para a utilizao dessa tecnologia. Outra das propostas, passa por um processo de converso de ficheiros, nomeadamente de ficheiros em formato pdf para swf. Para a realizao desse processo converso de formato e neste exemplo utilizaremos a
ferramenta disponvel de forma gratuita SWFTools, em : http://www.swftools.org/download.html . Aps a instalao da aplicao necessrio abrir o ficheiro previamente gravado em formato pdf.
Dever ser confirmado qual a forma de converso em termos de qualidade. Maior qualidade exige maior dimenso do recurso. Esta aplicao de converso permite ainda na sua configurao incluir um ficheiro HTML.
Existindo o ficheiro HTML, assim possvel criar Widgets W3C, no entanto isso implica a criao dos ficheiros de configurao config.xml e da imagem icon.png e a alterao do nome para ndex.html. A forma mais simples de criao de Widget a partir do documento passa pela insero na Widget Store atravs da opo Imports.
A partir da converso do ficheiro o sistema gera automaticamente o ficheiro HTML se necessrio (Widget W3C)
No caso corrente iremos utilizar o processo de importao do ficheiro Flash criao da respetiva Widget.
swf e
O aspeto final do visualizador do documento depende da configurao realizada atravs da ferramenta swftools. A partir do cdigo de embeber este deve ser inserido na Shell, que no caso atravs de uma Plataforma Moodle, na opo de adicionar recurso, escrever pgina Web.
A navegao ser feita atravs da pginas sendo possvel a navegao e Zoom utilizando o controlo visual da pgina.
13. Criao de Widget Geogebra
A tcnica de criao de Widget Geogebra depende fundamentalmente da existncia de ficheiro original ggb ou a obteno da simulao em geogebra a partir da utilizao na Web, obtida atravs de uma hiperligao a um stio onde se encontrem residentes os respetivos ficheiros. No caso de existncia do ficheiro fonte ggb, poder utilizar-se um servio especfico do Geogebra e que permite a obteno do cdigo de embeber, com a designao de GeogebraTube. Se existir o ficheiro geogebra fonte (ggb)e pretendemos criar um Widget, podemos obter um Widget pelo menos atravs de duas formas. Uma o envio do ficheiro original para o GeogebraTube (http://www.geogebratube.org/?lang=pt_PT) e a partir dessa plataforma obter o cdigo de embeber diretamente deste servio do Geogebra. A segunda forma a criao de uma Widget W3C atravs da Widget Store.
No caso da obteno do cdigo de embeber a colocar na Shell (Moodle) de ver ser selecionado a opo Embed.
Essa opo ir gerar um bloco de cdigo que inclui a dimenso de janela a mostrar no ecr com o recurso e que dado pelos parmetros with (625px) e height (456px) .
A partir do bloco de cdigo gerado assim possvel copiar para a memria (Clipboard) e incluir por exemplo : 1 Na Widget Store atravs da opo Embebed; 2-Na plataforma Moodle, introduzindo numa pgina Web; 3-Num blogue ou pgina HTML.
Estas trs hipteses de integrao de Widgets em Shell (designao iTEC) encontram-se j descritas no presente guio. No caso de pretender criar um Widget W3C na Widget Store, devero ser realizados os seguintes procedimentos:
1-Descarregar o ficheiro HTML atravs da opo Download Offline Worksheet
2-Descarregar o ficheiro zip e descompactar o ficheiro HTML, contido neste. No exemplo foi descarregado o ficheiro de nome material-36201.html. 3-Criar uma pasta para a criao do Widget W3C, alterando o nome para index.html .
Atravs deste processo gerado cdigo de Applet no ficheiro HTML, que permite com Internet o acesso ao recurso. Para a criao dos Widgets 3C implica que dever ser obtida uma imagem [icon.png] e um ficheiro de configurao [config.xml] . O ficheiro index.wgt obtido atravs da agregao em formato Zip dos trs ficheiros aps alterao do nome de extenso.
No caso de uso de ficheiros geogebra, assim como de outros repositrios que incluem recursos que utilizam a tecnologia JAVA (p.ex. PHet) necessrio previamente verificar se o dispositivo tem instalado esse componente, por exemplo acedendo ao endereo:
http://www.java.com/verify. Dever ser instalada a ltima verso disponvel de JAVA Run Time [JRe]. Por uma questo de segurana pedido autorizao para ser executado o programa. Esta verificao usada para os recursos que utilizem esta tecnologia.
14. Criao de Widgets em linha de stios que no permitem a abertura de iframe

Neste exemplo iremos descrever como se pode criar uma Widget que utilize por exemplo stios da web que contenham internamente mecanismos que no permitam a insero de cdigo embebido. Isto , a criao e colocao de cdigo embebido a partir do endereo de internet que no seja autorizado pelo prprio stio. Um desses exemplos o stio de alojamento de apresentaes com a designao de Prezi. Embora este stio permita a criao, atravs dos procedimentos para a criao de cdigo embebido, no permite a utilizao da sua hiperligao de forma direta utilizando o endereo URL. A colocao direta de cdigo embebido embora seja aceite pela Shell (Moodle), quando selecionada provoca (por imposio da tecnologia utilizada) a no abertura do recurso criado na aplicao Prezi. Uma das formas de conseguir ultrapassar esta dificuldade criar um Widget do tipo W3C, mas com um ficheiro de index.html especfico. Por exemplo para o endereo de internet: http://prezi.com/qfft0kc-jqt0/construir-um-guiao-para-uma-filmagem/ iremos criar cdigo que inclua no ficheiro esse endereo.
Nos Widget do tipo W3C, necessrio ter trs ficheiros: index.html [ficheiro com as configuraes de arranque], config.xml [configurao na Widget Store] e icon.png [imagem do Widget na Widget Store]. Estes ficheiros que seguem a organizao e contedo de acordo com as regras definidas para os Widget W3C. A especificidade deste index.html que o mesmo deve conter comandos para abrir especificamente numa janela completa o respetivo recurso. Ficheiro: index.html <html> <head> <script> function open_win(){ window.document.write (" A abrir pgina..."); window.open(href="http://prezi.com/qfft0kc-jqt0/construir-um-guiao-para-umafilmagem/") ; } </script></head> <body onload="open_win()"> </body> </html>
No caso da imagem [icon.png] de exemplo:
No caso do ficheiro config.xml <widget xmlns="http://www.w3.org/ns/Widgets" id="http://wookie.apache.org/Widgets/Guio criar Vdeo" version="0.1" width="930" height="780" > <name>Guio criao vdeo </name> <description>Widget com apresentao guio vdeo</description> <content src="index.html"/> <icon src="icon.png"/> <author>Carla Jesus widget: Fernando Campos</author> </widget>
A pasta de onde se ir criar o ficheiro com extenso .wgt ser obtida a partir dos ficheiros config.xml, icon.png e index.html, comprimidos com a aplicao Zip e alterado a extenso para wgt.
Aps a obteno do ficheiro (index.wgt) ser ento enviado para a Widget Store, atravs da opo W3C.
No exemplo o bloco de cdigo obtido foi na Widget Store:

<iframe width="930" height="780" src="http://wookie.eun.org:80/wookie/wservices/incubator.apache.org/wookie/generated/05785942A5EF-F787-A386AE6DAD8B6CB2/index.html?idkey=dxneWzYieDjQRBtr.sl.n8ssnq5kUY.eq.&proxy=http://wookie.eun.or g:80/wookie/proxy&st="></iframe>
Este bloco de cdigo depois introduzido na Shell iTEC, no nosso caso na Plataforma Moodle, ou ento no Blogue.
15. Navegar e pesquisar a Widget Store
A Widget Store permite que o/a professor/a pesquise Widgets organizadas em categorias, percorrendo facilmente as mesmas e possibilitando a anlise com mais detalhes de um Widget especfico, a partir da seleo da ferramenta para incluso direta numa shell. A primeira pgina o ponto de entrada para a Widget Store e contm a maioria das ferramentas que o/a professor/a precisa para procurar Widgets. Esta pgina dividida em trs sees principais: pesquisa navegao por categorias ou marcas Favoritos viso sumria dos Widgets. A figura abaixo mostra as seces, existentes aps a introduo das credenciais do professor/a.
No caso de navegao por categorias possvel encontrar Widgets de acordo com critrios definidos.
Ter em ateno que este mtodo de pesquisa apenas permite encontrar os recursos que esto j inseridos na Widget Store com categorias. No caso da pesquisa por favoritos possvel conhecer os favoritos de cada um dos utilizadores da Widget Store, inicialmente numa lista global.
Para conhecer em detalhe os favoritos de um utilizador especfico, basta selecionar, o utilizador da Widget Store.
No canto superior direito a caixa de pesquisa, que permite pesquisar Widgets baseados no ttulo do Widget ou descrio. esquerda, esto as categorias e etiquetas. As categorias contm as seguintes opes: My Favourites; Featured Widgets; Most Recent; All Widgets.
Se clicar numa das categorias, a aplicao ir mostrar uma lista de Widgets que esto associados a essa categoria, de acordo com a sua ordenao e critrio de filtragem. Relativamente pesquisa, se por exemplo quisermos encontrar os Widgets desenvolvidos para o LRE, deveremos nos campos de pesquisa escrever LRE, que o sistema pesquisa pela palavra escolhida.
Surgem as quatro opes atualmente existentes de Widgets para o LRE (3 na imagem), nomeadamente a verso em lngua inglesa, verso em lngua portuguesa e verso em lngua portuguesa de pesquisa exclusiva de recursos com caractersticas do tipo bons viajantes (LRE Portuguese Travel Well) e ainda LRE Travel Well Portugal.
Neste caso, estes Widgets foram criadas por outro utilizador o que permite comentar 0 Widget mas no apagar o mesmo.
Se por exemplo no campo de pesquisa escrever conversao, surge a Widget especfica que comea por esse nome. o caso da Widget criada para a converso de anos em sculos. De referir que quando do envio do contedo para a criao de Widgets, no devem ser usados nomes com carateres portugueses, isto nomes com acentuao em qualquer das letras.
Na opo My Widgets, surgem apenas os Widgets que foram enviadas pelo/a professor/a, para a Widget Store, como o exemplo de seguida indica.
Quando se seleciona a opo My Widgets o professor/a fica com acesso a um conjunto alargado de funes, relativo gesto dos seus Widgets. Atravs desta opo possvel apagar os Widgets, publicar ou no os Widgets, ou seja permitir que os Widgets criados fiquem pblicos, visualizar o widget atravs da opo ciew e ainda editar o widget no caso de o mesmo ter sido introduzido atravs da opo embebed. Na opo view, surge a seguinte janela:
nvel
das
categorias
incluir
enquanto
caracterstica
previsvel
do
Widget,
relativamente ao possvel impacto nos alunos, e para que nvel de escolaridade.
Informaes do Widget
Se for escolhido um determinado Widget enviado pelo professor/a para a Widget Store possvel alterar as informaes acerca do Widget, no caso de Widgets enviados atravs da
opo embed, permitindo alterar o cdigo de embeber e a dimenso da janela do navegador de internet.
Aps a ligao Widget Store possvel editar a lista de funcionalidades do Widget. Atravs da edio dos campos Funcionalities e Select an existing tag ainda possvel realizar um comentrio sobre a utilizao da Widget no campo de review.
Para o seguinte cdigo, no caso do vdeo: <iframe width="640" height="360" src="http://www.youtube.com/embed/U4djIDBYOBA?rel=0" frameborder="0" allowfullscreen></iframe>
16. Adicionar um Widget como Favorito
Para adicionar Widgets aos Favoritos pessoais (My Widgets) necessrio, numa primeira fase identificar a Widget, na segunda fase selecionar a opo View e na terceira fase selecionar a opo Favourite. Fase 1 Identificar e selecionar o Widget
Fase II selecionar e ver o Widget atravs da opo View
Fase III Selecionar o Widget como favorito
17. Incluso da Widget Store em plataformas de aprendizagem
Existem vrias formas de incluir a Widget Store em mais do que uma plataforma de aprendizagem. Em Portugal e no quinto ciclo de pilotagem iTEC, a Widget Store pode ser includa atravs de cdigo embebido. Esse cdigo pode ser incorporado em qualquer pgina ou plataforma como Blogues, que tenham a possibilidade de suportar cdigo de embeber. Exemplo de cdigo de embeber: <iframe src="http://wookie.eun.org:80/wookie/wservices/wookie.apache.org/Widgets/Widgetstore/index. html?idkey=T6wVpFy92idmHUawCqYZ3FSpTNI.eq.&proxy=http://wookie.eun.org:80/wookie/p roxy&st=" width="1024" height="640"></iframe> Nesse caso surge o seguinte menu.
Temos assim diferentes formas de aceder Widget Store utilizando trs mecanismos diferentes. O primeiro atravs do uso da plataforma Moodle, um segundo atravs da hiperligao http://wookie.eun.org/StoreClient/ e em terceiro atravs da Widget que foi criado para a Widget Store (ver cdigo de embeber nesta pgina).
18. Widget LRE
Uma das potencialidades da Widget do LRE e especificamente do LRE Portuguese Travel Well a possibilidade de se poder atravs de uma interface simplificada proceder pesquisa de um conjunto de mais de 30 000 recursos que foram previamente classificados com a categoria de bons viajantes, ou Travel Well (TW). Segundo estes critrios (ver detalhes em http://eqnet.dge.mec.pt/files/2012/11/brochura_travellwell_pt.pdf ) os recursos que forem classificados de acordo com este critrio, podero potencialmente possibilitar aos professores e aluno/as utilizarem recursos numa lngua diferente da sua lngua materna. Para isso foram construdos Widgets especficos, que tm includa a designao LRE no seu nome.
Este Widget de pesquisa do LRE que se encontra na Widget Store, tem como cdigo embebido o seguinte:
<iframe src="http://wookie.eun.org:80/wookie/wservices/wookie.apache.org/Widgets/lrewidpt/widget.htm?idkey= b.pl.Zk07EnbZuqBOFGiKEvH3p1fe0.eq.&proxy=http://wookie.eun.org:80/wookie/proxy&st=" width="450" height="360"></iframe>
No caso do Widget que pesquisa recursos bons viajantes ou Travel Well (TW), verso Portuguesa o cdigo embebido a utilizar :
<iframe src="http://wookie.eun.org:80/wookie/wservices/wookie.apache.org/Widgets/lrewidptTW/widget.htm?idk ey=ScfiF5UBsS9SIvHU0aAEgTSsC0I.eq.&proxy=http://wookie.eun.org:80/wookie/proxy&st=" width="450" height="360"></iframe>
Do ponto de vista de utilizao do Widget para pesquisar recursos se por exemplo se pretender pesquisar recursos para disciplina de Matemtica, 2 e 3 ciclo, s temos de escolher dois dos campos de pesquisa.
No final da seleo escolher a opo pesquisa
, de modo Widget em conjunto com
o portal LRE realizar a pesquisa e mostrar os recursos existentes. No caso da pesquisa referida (Matemtica, 2. e 3. ciclo) foi obtido o seguinte conjunto de recursos.
As imagens que so visualizadas no Widget dependem dos recursos existentes no Learning Resource Exchange (LRE) e podem alterar-se em funo do contedo existente no LRE. No caso de pretender por exemplo pesquisar por um determinado tema (alterar no campo pesquisa LRE o nome do tema) disciplina e intervalo de idades, ter de se preencher os campos de pesquisa disponveis.
A ttulo de exemplo se o tema a escolher for energia, na disciplina de Fsica, para o 2. E 3. ciclos de escolaridade o nmero de recursos considerados bons viajantes consideravelmente inferior a todos os recursos existentes. Enquanto num caso o nmero de recursos encontrados foi de 319, no caso em que se aplicaram os critrios de Bons viajantes o nmero de recursos de 160.
19. Aceder atravs da plataforma Moodle
Para o ciclo de pilotagens 4 do projeto iTEC, foi criada uma disciplina com acesso pblico Com a designao Widget iTEC - alunos e que se encontra no endereo http://moodle.crie.min-edu.pt/course/view.php?id=585 .
A partir desta duas opes de acesso a recursos na disciplina Moodle, possvel aceder aos dois Widgets do LRE. O primeiro que corresponde ao Widget do LRE e que pesquisa por todos os recursos identificados no portal, independentemente de estarem classificados de acordo com os critrios Travel Well e o segundo s faz a pesquisa aos recursos que esto identificados como tendo critrios de Travell Well. No caso do Widget obtido atravs da plataforma Moodle na disciplina Widget iTEC - alunos o cdigo da pgina inclu a indicao de Recursos Travel Well.
20. Possibilidades e limitaes de Widgets e Widget Store

Do descrito ao longo deste documento parece evidente, a possibilidade de criao de Widgets a partir de recursos j existentes ou a criao de novos, assim como da integrao dos mesmos em plataformas de aprendizagem, de forma a promover a sua utilizao com fins educativos. No entanto tem de se ter em considerao algumas questes, nomeadamente algumas questes da rea tcnica. No atual estdio de desenvolvimento existem Widgets em que os formatos de ficheiro (Flash, ficheiros HTML, Javascript,) e respetivo suporte (web 2.0, stio web) so mais adequados integrao nesta tecnologia, do que outros (aplicaes do tipo office). No o caso no entanto dos ficheiros de texto ou folha de clculo (doc, excel,..) j que estes necessitam de uma aplicao instalada "normalmente word ou excel" que tem de existir no computador local, no possibilitando a sua fcil converso em Widget. Para realizar Atividades de Aprendizagem utilizando ferramentas equivalentes, atravs dos Widget, existe a possibilidade de optar por aplicaes do tipo Google Drive ou servio equivalente, de fornecedores/fabricantes, que tem uma estratgia de partilha baseada na cloud. O tipo de estratgia de criao de Widgets est assim muito ligada ao formato do ficheiro e tipo de servio suportado (p.ex. servios web 2.0). Do ponto de vista de criao de recursos e criao do respetivo Widget, temos de considerar algumas condies de uso ou criao:
Condio 1 - A Widget Store no suporta Frameset em HTML, pelo que se deve evitar essa tcnica de realizao de recursos quando se pretende utilizar a WidgetS Store. Condio 2- Caso de stios da Web que no suportam a utilizao de cdigo de embeber, necessrio a criao de cdigo em HTML com abertura da pgina via javascript, para a incluso de cdigo de embeber, antes da criao da Widget W3C. Consegue-se contornar mas exige trabalho e orientao. Condio 3 - Existncia de ficheiros swf. Este talvez o caso mais simples e basta fazer o envio para a Widget Store, atravs da opo Imports. possvel a converso em Widgets de documentos desde que os mesmos estejam em formato pdf utilizando uma ferramenta de converso para Flash (swftools: http://www.swftools.org) e seguida do uso da opo Imports da Widget Store. Condio 4 - No usar ficheiros do tipo doc/excel/... (com abertura de aplicao externa direta). Estes no so os formatos mais adequados para Widget, em vez disso utilizar uma aplicao Web 2.0 do tipo Google Drive ou equivalente. Condio 5 - Existncia de uma estrutura do tipo Web (sem frameset), como por exemplo um ministio especfico (exemplo de WebQuest em HTML) e que dever ser feito o envio atravs da opo "Web folder". Para isso necessrio comprimir e agregar num s ficheiro "ZIP" o HTML e restantes pastas, sendo necessrio o conhecimento do nome do ficheiro de arranque do mni stio. Nesta verso no se torna necessrio que o nome do ficheiro HTML seja ndex.htm ou ndex.html. Condio 6 - Nos casos "normais" de stio em que no seja necessrio a integrao na Widget Store utilizar a opo de cdigo de embeber. opo Embed. Depende no entanto da tecnologia do stio e poder existir alguma necessidade especfica. Em testes realizados foi possvel integrar recursos educativos digitais que tinham na sua estruturas vdeos e imagens, para alm de atividades interativas. S permite no entanto cones disponibilizados pela Widget Store. Condio 7 - Criao de Widget W3C. a forma mais trabalhosa de criar um Widget mas permite uma flexibilidade adequada para os diferentes formatos desde que os mesmos se adequem Web e existam os contedos originais. Em testes realizados foi possvel integrar
recursos educativos digitais que tinham na sua estruturas vdeos e imagens, para alm de atividades interativas. Nesta opo possvel ter o maior grau de personalizao do Widget, nomeadamente atravs da incluso de um cone especfico.
Alguns Stios de Interesse
http://itec.dge.mec.pt/tecdigitais/ http://www.youtube.com/watch?v=U4djIDBYOBA http://itecWidgetsportugal.blogspot.pt/p/apresentacao.html http://moodle.crie.min-edu.pt/course/view.php?id=585 http://wookie.eun.org/Store/ http://lreforschools.eun.org http://phet.colorado.edu/pt/ http://www.java.com/verify http://www.swftools.org/download.html

Guiao Widget v2 0

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Guiao Widget v2 0

Enviado por

Direitos autorais:

Formatos disponíveis

ietc.eun.

Guio de apoio criao e uso de Widgets

3. Criar um Widget na Widget Store

4. Criar um Widget a partir de um cdigo embebido

Ou em alternativa em New Widget, tal como o indicado a partir da opo My Widgets.

5. Criar um Widget a partir de um endereo de pgina

Exemplo Conhecer o endereo do stio da aplicao que pretende, por exemplo:

Dimenses da aplicao: Pode alterar a dimenso do ecr da aplicao usar as

Preencher os campos de envio conforme a imagem documenta

Para todas os Widgets construdos podemos escolher as funcionalidades e as etiquetas

Obter o cdigo embebido (embed) para incorporar na pgina ou ambiente pretendido

Exemplo da utilizao deste Widget num ambiente de aprendizagem:

partir de uma pgina web em HTML

8.2- Detalhe e visualizao dos carateres adicionais a inserir ao cdigo do stio

6. Criar um Widget a partir de um ficheiro Flash

2. Exemplo Informao de um Widget criado a partir de um ficheiro Flash

7. Embutir um Widget numa pgina HTML

8. Criar um Widget W3C

<!DOCTYPE HTML> <html> <body>

9. Criar um Widget a partir de um stio Web

Cdigo resultante: <iframe width="930" height="800" src="http://wookie.eun.org:80/wookie/wservices/incubator.apache.org/wookie/generated/F7 716F01-4A05-44DD-A99FC1B361CA25C5/index.html?idkey=ZlXXCXIkkiLLm.sl.p2c37kM.pl.PgrDE.eq.&proxy=http: //wookie.eun.org:80/wookie/proxy&st="></iframe>

10. Criao de Widgets GoogleDrive

(2 boto do rato em cima do

2- Adquirir a hiperligao do documento a partilhar (com a configurao de partilha e acesso).

3- Converter para cdigo embed, copiando e colocando o endereo no seguinte formato:

<iframe width="480" height="360" src=" https://docs.google.com/presentation/d/1fU4sZ6pWT-b2-IpXI03KrBd_wkRNG32E6yI1vCHRMg/edit?usp=sharing" frameborder="0" allowfullscreen=true></iframe>

6.3 Aps a seleo do Submit a widget integrada nos Widgets do utilizador.

Exemplo de Folha de texto e de apresentao disponvel em: 1- http://itecWidgetsportugal.blogspot.pt/search/label/Geral

2- Exemplo de Folha de apresentao

11. Criao de Widgets de apresentaes modelo Prezi

12. Criao de Widgets a partir de documentos

13. Criao de Widget Geogebra

1-Descarregar o ficheiro HTML atravs da opo Download Offline Worksheet

14. Criao de Widgets em linha de stios que no permitem a abertura de iframe

No caso da imagem [icon.png] de exemplo:

No exemplo o bloco de cdigo obtido foi na Widget Store:

15. Navegar e pesquisar a Widget Store

relativamente ao possvel impacto nos alunos, e para que nvel de escolaridade.

16. Adicionar um Widget como Favorito

Fase II selecionar e ver o Widget atravs da opo View

Fase III Selecionar o Widget como favorito

17. Incluso da Widget Store em plataformas de aprendizagem

18. Widget LRE

No final da seleo escolher a opo pesquisa

, de modo Widget em conjunto com

19. Aceder atravs da plataforma Moodle

20. Possibilidades e limitaes de Widgets e Widget Store

Alguns Stios de Interesse

Você também pode gostar