Diferencia entre revisiones de «29/Moodle Mobile»

De MoodleDocs
({{Actualizar}})
(tidy up)
Línea 1: Línea 1:
{{Frequently updated page translation
|devpagetitle = Moodle Mobile
}}
{{Pendiente de traducir}}
{{Pendiente de traducir}}
{{Actualizar}}
{{Mobile}}
<p class="note">For user documentation see '''[[:en:Mobile app|Mobile app]]'''.</p>
{{Pendiente de traducir}}
{{Moodle Mobile}}
== Características==
See [https://docs.moodle.org/dev/Moodle_Mobile https://docs.moodle.org/dev/Moodle_Mobile] for the original English language DEV documentation.
 
 
 
== General Overview ==
 
MM (Moodle Mobile) is the official mobile app for Moodle. MM is an HTML5 app that uses common web technologies.
 
Basically, is a Web Services client that uses REST as protocol to obtain and send information to your Moodle installation/s.
 
The layout is created using HTML5 and CSS3, interaction with the phone and packaging is done using Phonegap.
 
For calling the Web Services, manipulating the DOM and interacting with Phonegap, we use jQuery as our Javascript framework.
 
This app is a replacement of the old [[Mobile app]], see the discussion [https://moodle.org/mod/forum/discuss.php?d=206736 Change in our Moodle mobile app strategy] for details.
 
== Features ==
 
The features are going to be the same that the old [[Mobile app]] plus:
 
* PUSH Notifications (only iOs in first version)
* Mobile and tablet version (Responsive design)
* Support for contrib plugins
* Support for external settings: Extra CSS
* New development and debugging features
 
Features for future versions:
 
* Calendar sync
* Offline browsing and posting in forums
* Offline grading
 
== Requirements ==
 
* Moodle 2.4
 
Future versions will require the last minor versions if Web Services are not backported.
 
== Technologies used ==
 
* HTML5 http://www.w3.org/TR/2011/WD-html5-20110525/
 
* CSS3 http://www.w3.org/Style/CSS/
 
* Media queries for screen width and height http://www.w3.org/TR/css3-mediaqueries/
 
* Phonegap http://wiki.phonegap.com/w/page/16494772/FrontPage
 
* jQuery http://jquery.com/
 
* jQuery UI http://jqueryui.com/
 
* jQuery touchSwipe http://labs.skinkers.com/touchSwipe/
 
* matchMedia https://github.com/paulirish/matchMedia.js/
 
* Backbone and Underscore http://backbonejs.org/
 
* RequireJS requirejs.org
 
* jsdoc http://code.google.com/p/jsdoc-toolkit/
 
* Google Javascript Style Guide http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml
 
* Google Closure Lint http://code.google.com/p/closure-linter/
 
=== Phonegap ===
 
MM uses Phonegap for using Moodle hardware/software features like Camera, Audio/video recorder, access to the file system, etc.
Phonegap is loaded in the index page of the app (jQuery, the main lib of the app are also loaded in the index page).
 
=== jQuery ===
 
For DOM manipulation and some helper functions, is a requirement of others libraries listed below.
 
=== jQuery UI ===


Dialogs and also for enhancing forms elements (buttons, checkboxes, etc...)
Moodle Mobile es la aplicación oficial móvil de Moodle para Android, iOS, y Windows Phone y 8.1. Está disponible en [https://play.google.com/store Google Play], en [http://store.apple.com/us la tienda de Apple] y en las tiendas de Apps de Windows


=== jQuery touchSwipe ===
[[{{ns:file}}:moodlemobile_features.png|thumb|300px]]


For detecting mouse gestures
* Diseño responsivo para teléfonos y tabletas
* Suba una imagen a su área de archivos privados
* Grabe un archivo de audio y súbalo a su área de archivos privados
* Grabe un video y súbalo a su área de archivos privados
* Mande un mensaje privado a un participante del curso (puede hacerse fuera-de-línea)
* Tome una nota personal acerca de un participante de curso (puede hacerse fuera-de-línea)
* Añada un participante de curso a sus contactos del teléfono
* LLame a un participante de curso al tocar su número de teléfono
* Localize  la dirección de un participante de curso en Google map
* Descargue y vea algunos recursos del curso
* Acceso rápido a sus contenidos del curso
* Vea eventos del calendario
* Recordatorio de notificaciones para eventos del calendario
* Notificaciones Mobile Push
* Personalización remota de diseño/estilo (vea abajo)
* Vea todas sus notificaciones y mensajes privados anteriores
* Ojear y descargar sus archivos privados y archivos del curso
* Vea discusiones del foro
* Mensajería privada entre usuarios
* Integración al calendario con recordatorio de advertencias como notificaciones locales
* Suba cualquier tipo de archivo desde su dispositivo móvil hacia su área de archivos privados de Moodle
* * Soporte para sitios que usan CAS o Shibboleth como métodos para [[Autenticación|autenticación]]
* * Vea sus calificaciones de actividad y las calificaciones totales del curso en un curso


=== matchMedia ===


Javascript detection of media queries


=== Backbone and Underscore ===


For storage (Models and Collections), Underscore templates, and URL Routing
Nota: Todas las características señaladas con asterisco (*) requieren que esté instalado el plugin de [[Características adicionales de Moodle Mobile]].


=== RequireJS ===
Tome nota de que '' Moodle Mobile '' no es un remplazo para el tema gráfico de '' MyMobile '' ([[Tema Mi Teléfono Móvil]]) o Arranque/Simple (''Bootstrap/Simple''). ''Moodle Mobile'' ofrece contenidos fuera-de-línea, características de cámara y audio y notificaciones Push conectadas a las preferencias de [[Mensajería]] del usuario.
Usted puede usar la App ''Moodle Mobile'' en combinación con un tema para dispositivos móviles; por ejemplo, con el [[Tema Mi Teléfono Móvil]].


For handling modules dependencies and loading plugins


== Structure of the app (only main directories) ==
=== Pantallazos===


css/ - App main layout and styles
'''Teléfono''' (vista de retrato)
img/ - App images
lang/ - Default lang
lib/ - Main libraries
plugins/ - Plugins
test/ - Test data when developing in Test mode
config.json - Main app configuration file (presets)
index.html - Index page of the app


== Getting and sending information to Moodle ==
{|
| [[File:LoggedInList.png|thumb|Vista inicial]]
| [[File:CourseView.png|thumb|Vista de contenidos del curso]]
| [[File:CameraUpload.png|thumb|Subida de foto]]
|}
{|
|[[File:ParticipantView.png|thumb|Vista de participante individual]]
| [[File:ListParticipants.png|thumb|Vista de lista de participantes]]
|[[File:moodleinstantmessage.png|thumb|Notificaciones]]
|}
No


MM uses standard Moodle Web Services for getting and sending information to Moodle.
AJAX (jQuery) and REST + JSON are the technologies used.


Notice that mobile HTML5 apps doesn’t have cross domain restrictions so you can make AJAX calls to any domain.


== External settings ==
'''Tableta'''  (vista de paisaje)
{|
|[[File:tabletparticipants.png|thumb|600px|Vista de participante]]
|}
{|
|[[File:tabletlandscape.png|thumb|600px|Vista de contenido del curso]]
|}


In your Moodle installation you can specify an extra CSS file for customizing the app remotely.


This CSS is downloaded and stored in the device database for further use.
=== Notificaciones ===


The app can receive notifications from your Moodle site,  vea [[Mobile app Notificaciones Push]] for detailed information.


== Storage ==
=== Personalización del estilo ===


We use HTML5 localStorage that is cross browser implemented and there are libraries that can work of top of it.
The app can also retrieve your custom styles from your Moodle site. Since the app is a HTML5 app, you can apply safely any CSS, CSS2 and CSS3 style.


We use Backbone Models and Collections as a wrapper for localStorage.
In your Moodle installation go to Plugins / Web services / Mobile and enter in the mobilecssurl field a valid URL pointing to a CSS file containing your custom styles.  


Note that localStorage has some limitations like a 5MB max size in some devices and also is considers "Temporal data" for some devices like the new iPhones.
The CSS should be placed inside your Moodle installation (in your custom theme or inside a local plugin)


== Internationalization ==
Once the user is logged in the app, there is a periodical process that retrieves your remote CSS files for applying your custom styles.


The app includes a language file in JSON (English as the default language).
Notice that on the first time a user opens the app, he will see the default "orange" style. Your custom styles will be applied once the user has added a site in the app.


Other language packs are available, full list here:
See https://docs.moodle.org/dev/Moodle_Mobile_Themes for documentation.


https://github.com/moodlehq/moodlemobile/tree/master/lang
=== Idiomas===


For translating the app to your language, you can use the [http://lang.moodle.org AMOS tool] Translations from this tool are periodically synchronized with new versions in the app
Idiomas soportados actualmente:


== Plugins ==
* Arabic
* Basque
* Catalan
* Chinese
* Czech
* Dutch
* English
* French
* German
* Hebrew
* Hungarian
* Italian
* Japanese
* [[Español de México]]
* Portuguese
* Russian
* [[Español internacional]]
* Swedish


=== Overview ===
==Los sitios Moodle deben habilitarse para que la App pueda acceder a ellos==


Plugins allow developers to extend the app functionalities.
Moodle 2.4 o o superior es obligatorio.
A plugin it’s a subdirectory that implements a set of required functionalities.


=== Types of plugins ===
The administrator of your Moodle site must enable mobile access as follows:


* General: Interactions over the global app, such as the Notifications, Upload, Help and Web
* In ''Administration > Site administration > Plugins > Web services > Mobile'' tick the 'Enable web services for mobile devices' checkbox, then click the button to save changes.
* Course: Interactions over a course, such as course contents or participants
* User: Interactions over an user, such as send a message, add as a contact, write a private note
* Settings: Additional settings for the app


=== Development ===
If your site uses a SSL certificate it must be a trusted certificate. For security reasons the app doesn't work with self-signed certificates.


See [https://docs.moodle.org/dev/Moodle_Mobile_Plugins_Development Moodle Mobile Plugins Development].
This presentation is a good guide for creating a Moodle Mobile ready course/site: [http://es.slideshare.net/juanleyva/tips-for-creating-moodle-mobile-friendly-courses-sites-moodlemoot-spain-2014 Tips for creating Moodle Mobile friendly courses sites - MoodleMoot Spain 2014]


There are a couple of tutorials with two sample plugins (grades and forums plugins)
==Instalación de la App de Moodle Mobile==


See [https://docs.moodle.org/dev/Moodle_Mobile_Developing_a_plugin_tutorial Moodle Mobile Developing a plugin tutorial] and [https://docs.moodle.org/dev/Moodle_Mobile_Developing_a_plugin_tutorial_part_2 Moodle Mobile Developing a plugin tutorial part 2]
The Moodle Mobile app is available in Google Play, Apple Store, and the Windows Phone Store. See [https://download.moodle.org/mobile/ Moodle Mobile] for links.


Source code:
You can also install the app directly from your mobile device by searching for "Moodle Mobile" with author/owner "Moodle Pty Ltd".


* https://github.com/moodlehq/moodlemobile
==Prueba de la App en un sitio demo==
In the login screen, type "teacher" or "student" in the Username field and click the Add button. You will be logged automatically to the Mount Orange Moodle School demo site You can use the Moodle School demo site - http://school.demo.moodle.net/ for  testing the app.


== Creating your custom app ==
== Cache ==
If you connect to your Moodle site and update/create/delete anything, and then go to your mobile app, the content will not be displayed. You will have to wait a couple of minutes. The cache time for the app is currently 5 minutes.


See [https://docs.moodle.org/dev/Moodle_Mobile_Customization Moodle Mobile Customization].
You can refresh the contents of the Mobile app using the refresh button (top right in the left orange menu)


== Limitations and disadvantages of HTML5 apps ==
There are developer options for purging the cache at any time (Settings -> Development)


* Less speed and smoothness
==Cómo reportar un problema==


* Limited to the Mobile functionalities provided from Phonegap
# Log in to the Moodle Mobile tracker  [https://tracker.moodle.org/browse/MOBILE https://tracker.moodle.org/browse/MOBILE] (you'll need to [http://tracker.moodle.org/secure/Signup%21default.jspa create a tracker account] if you've not done so previously)
# ''Check whether the issue has already been reported by [https://tracker.moodle.org/issues/?jql=project%20%3D%20MOBILE searching all the issues]''
# If not, report the bug by clicking the 'Create Issue' link at the top right of the page, selecting 'Moodle Mobile' as the project
# Add a detailed description then click the Create button
# Attach the following files to the issue by selecting 'Attach Files' in the 'More actions' dropdown menu:
#* 'Device information' - this can be found in the app (Settings -> Development -> Device info, you can send yourself this information by email using the e-mail button at the bottom)
#* App Log (''Settings -> Development -> Show Log'', again you can send yourself this information by email)


== FAQ ==
== Ayuda y soporte ==
=== Is the app a replacement of the MyMobile theme? ===
No, see http://moodle.org/mod/forum/discuss.php?d=206736#p901751


=== What is the difference between a native app and a Mobile specific theme or responsive theme? ===
* [https://moodle.org/mod/forum/view.php?id=7798 Moodle Mobile forum]
* [https://twitter.com/moodlemobileapp Twitter: @moodlemobileapp]


See http://moodle.org/mod/forum/discuss.php?d=206736#p901475


Also http://moodle.org/mod/forum/discuss.php?d=206736#p901751
== Vea también==


* [http://es.slideshare.net/juanleyva/tips-for-creating-moodle-mobile-friendly-courses-sites-moodlemoot-spain-2014 Tips for creating Moodle Mobile friendly courses sites - MoodleMoot Spain 2014]
* [[:dev:Moodle Mobile|Moodle Mobile developer docs]]
* [[Servicios web móviles]]


* [[Personalización de Moodle Mobile]]
* [[Desarrollo de Plugins para Moodle Mobile]]
* [[Moodle Mobile Construyendo la app para Android]]
* [[Moodle Mobile Construyendo la app para iOS]]




[[en: Development:Moodle Mobile]]
[[en:Moodle Mobile]]

Revisión del 17:08 3 ago 2015

Nota: Pendiente de Traducir. ¡Anímese a traducir esta página!.     ( y otras páginas pendientes)

Nota: Pendiente de Traducir. ¡Anímese a traducir esta página!.     ( y otras páginas pendientes)

Características

Moodle Mobile es la aplicación oficial móvil de Moodle para Android, iOS, y Windows Phone y 8.1. Está disponible en Google Play, en la tienda de Apple y en las tiendas de Apps de Windows

moodlemobile features.png
  • Diseño responsivo para teléfonos y tabletas
  • Suba una imagen a su área de archivos privados
  • Grabe un archivo de audio y súbalo a su área de archivos privados
  • Grabe un video y súbalo a su área de archivos privados
  • Mande un mensaje privado a un participante del curso (puede hacerse fuera-de-línea)
  • Tome una nota personal acerca de un participante de curso (puede hacerse fuera-de-línea)
  • Añada un participante de curso a sus contactos del teléfono
  • LLame a un participante de curso al tocar su número de teléfono
  • Localize la dirección de un participante de curso en Google map
  • Descargue y vea algunos recursos del curso
  • Acceso rápido a sus contenidos del curso
  • Vea eventos del calendario
  • Recordatorio de notificaciones para eventos del calendario
  • Notificaciones Mobile Push
  • Personalización remota de diseño/estilo (vea abajo)
  • Vea todas sus notificaciones y mensajes privados anteriores
  • Ojear y descargar sus archivos privados y archivos del curso
  • Vea discusiones del foro
  • Mensajería privada entre usuarios
  • Integración al calendario con recordatorio de advertencias como notificaciones locales
  • Suba cualquier tipo de archivo desde su dispositivo móvil hacia su área de archivos privados de Moodle
  • * Soporte para sitios que usan CAS o Shibboleth como métodos para autenticación
  • * Vea sus calificaciones de actividad y las calificaciones totales del curso en un curso



Nota: Todas las características señaladas con asterisco (*) requieren que esté instalado el plugin de Características adicionales de Moodle Mobile.

Tome nota de que Moodle Mobile no es un remplazo para el tema gráfico de MyMobile (Tema Mi Teléfono Móvil) o Arranque/Simple (Bootstrap/Simple). Moodle Mobile ofrece contenidos fuera-de-línea, características de cámara y audio y notificaciones Push conectadas a las preferencias de Mensajería del usuario. Usted puede usar la App Moodle Mobile en combinación con un tema para dispositivos móviles; por ejemplo, con el Tema Mi Teléfono Móvil.


Pantallazos

Teléfono (vista de retrato)

Vista inicial
Vista de contenidos del curso
Subida de foto
Vista de participante individual
Vista de lista de participantes
Notificaciones

No


Tableta (vista de paisaje)

Vista de participante
Vista de contenido del curso


Notificaciones

The app can receive notifications from your Moodle site, vea Mobile app Notificaciones Push for detailed information.

Personalización del estilo

The app can also retrieve your custom styles from your Moodle site. Since the app is a HTML5 app, you can apply safely any CSS, CSS2 and CSS3 style.

In your Moodle installation go to Plugins / Web services / Mobile and enter in the mobilecssurl field a valid URL pointing to a CSS file containing your custom styles.

The CSS should be placed inside your Moodle installation (in your custom theme or inside a local plugin)

Once the user is logged in the app, there is a periodical process that retrieves your remote CSS files for applying your custom styles.

Notice that on the first time a user opens the app, he will see the default "orange" style. Your custom styles will be applied once the user has added a site in the app.

See https://docs.moodle.org/dev/Moodle_Mobile_Themes for documentation.

Idiomas

Idiomas soportados actualmente:

Los sitios Moodle deben habilitarse para que la App pueda acceder a ellos

Moodle 2.4 o o superior es obligatorio.

The administrator of your Moodle site must enable mobile access as follows:

  • In Administration > Site administration > Plugins > Web services > Mobile tick the 'Enable web services for mobile devices' checkbox, then click the button to save changes.

If your site uses a SSL certificate it must be a trusted certificate. For security reasons the app doesn't work with self-signed certificates.

This presentation is a good guide for creating a Moodle Mobile ready course/site: Tips for creating Moodle Mobile friendly courses sites - MoodleMoot Spain 2014

Instalación de la App de Moodle Mobile

The Moodle Mobile app is available in Google Play, Apple Store, and the Windows Phone Store. See Moodle Mobile for links.

You can also install the app directly from your mobile device by searching for "Moodle Mobile" with author/owner "Moodle Pty Ltd".

Prueba de la App en un sitio demo

In the login screen, type "teacher" or "student" in the Username field and click the Add button. You will be logged automatically to the Mount Orange Moodle School demo site You can use the Moodle School demo site - http://school.demo.moodle.net/ for testing the app.

Cache

If you connect to your Moodle site and update/create/delete anything, and then go to your mobile app, the content will not be displayed. You will have to wait a couple of minutes. The cache time for the app is currently 5 minutes.

You can refresh the contents of the Mobile app using the refresh button (top right in the left orange menu)

There are developer options for purging the cache at any time (Settings -> Development)

Cómo reportar un problema

  1. Log in to the Moodle Mobile tracker https://tracker.moodle.org/browse/MOBILE (you'll need to create a tracker account if you've not done so previously)
  2. Check whether the issue has already been reported by searching all the issues
  3. If not, report the bug by clicking the 'Create Issue' link at the top right of the page, selecting 'Moodle Mobile' as the project
  4. Add a detailed description then click the Create button
  5. Attach the following files to the issue by selecting 'Attach Files' in the 'More actions' dropdown menu:
    • 'Device information' - this can be found in the app (Settings -> Development -> Device info, you can send yourself this information by email using the e-mail button at the bottom)
    • App Log (Settings -> Development -> Show Log, again you can send yourself this information by email)

Ayuda y soporte


Vea también