Firefox Developer Edition e Introducción a BackboneJS

Firefox Developer Edition e Introducción a BackboneJS

Firefox Developer Edition!

Aplicación a desarrollar

Chamilo Messaging
  • Conectarse a cualquier plataforma Chamilo LMS
  • Obtener mensajes no leídos
  • Leer mensajes con o sin conexión
Chamilo Messaging

HTML5 + Bootstrap
Underscore.js +
Backbone.js +
Require.js

Backbone.JS

Modelo

  • Organizar los datos y la lógica del negocio
  • Cargar y guardar los datos en el servidor
  • Emitir eventos cuando los datos del modelo cambian

Vista

  • Escuchar eventos y renderiza la vista
  • Manejar el ingreso de datos e interactividad del usuario
  • Enviar los datos ingresados al modelo

Modelos y Vistas

Modelos y vistas Backbonejs.org

Modelo

          var MessageModel = Backbone.Model.extend({
              defaults: { },
              save: function (attributes) {
                  var deferred = $.Deferred();
                  return deferred.promise();
              },
              delete: function () {
                  var deferred = $.Deferred();
                  return deferred.promise();
              }
          });
        

Vista

          var MessageTemplate = '

<%= subject %>

' +
'
<%= content %>
';
var MessageView = Backbone.View.extend({ el: 'body', template: _.template(MessageTemplate), render: function () { this.el.innerHTML = this.template(this.model.toJSON()); return this; } });

Colección

  • Grupo de modelos
  • Cargar y guardar nuevos modelos
  • Escucha eventos de cualquier modelo

Colecciones, modelos, vistas

Colecciones Backbonejs.org

Colección

          var MessagesCollection = Backbone.Collection.extend({
              model: MessageModel,
              create: function (attributes) {
                  var deferred = $.Deferred();
                  return deferred.promise();
              },
              fetch: function () {
                  var deferred = $.Deferred();
                  return deferred.promise();
              }
          });
        

Router

Rutas Backbonejs.org

Router

          var Router = Backbone.Router.extend({
              routes: {
                  '': 'showIndex',
                  'message/:id': 'showMessage',
                  'logout': 'showLogout'
              }
          });
          var router = new Router;
          router.on('route:showIndex', function (){ });
          router.on('route:showMessage', function (messageId){ });
          router.on('route:showLogout', function (){ });
          Backbone.history.start();
        

Developer Edition

Herramientas del desarrollador de Web

  1. Borrador
  2. Editor de estilos
  3. Editor de sombreadores
  4. Audio Web
  5. Inspector de página
  6. Consola Web
  7. Depurador
  8. Monitor de red
  9. Inspector de Almacenamiento
  10. Barra de
    herramientas
  11. Capturar color
  12. Seleccionar iframes
  13. Ver código fuente
  14. WebIDE
  15. Depuración remota
  16. Vista de diseño adaptable
  17. Herramientas de rendimiento

Borrador

Firefox OS phones https://developer.mozilla.org/es/docs/Herramientas/Borrador

Borrador

  • Editar JavaScript en vivo
  • Prototipado
  • Ejecutar código
  • Inspeccionar objetos
  • Guardar scripts

Editor de estilos

Firefox OS phones https://developer.mozilla.org/es/docs/Tools/Editor_Estilo

Editor de estilos

  • Editar, depurar y crear nuevas hojas de estilos
  • Cambios reflejados automáticamente
  • Ejecutar código
  • Guardar cambios
  • Importar archivos
  • Panel de hojas de estilo
  • Panel de edición
  • Barra lateral de media queries

Monitor de red

Firefox OS phones https://developer.mozilla.org/es/docs/Tools/Monitor_de_Red

Inspector de almacenamiento

Firefox OS phones https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector

Inspector de página

Firefox OS phones https://developer.mozilla.org/es/docs/Tools/Page_Inspector

Consola

Firefox OS phones https://developer.mozilla.org/es/docs/Tools/Web_Console

Consola

  • Información asociada a la página web
  • Advertencias CSS/JavaScript
  • Errores CSS/JavaScript
  • Seguridad
  • Peticiones de red
  • Barra de herramientas
  • Línea de comandos
  • Panel de mensajes

Depurador

Firefox OS phones https://developer.mozilla.org/es/docs/Tools/Debugger

Depurador

  • Depuración
  • Refinación
  • Vigilancia de expresiones
  • Alcance de variables
  • Puntos de ruptura
  • Avance, salto de pasos
  • Cambiar valores de variables

Vista de diseño adaptable

Firefox OS phones https://developer.mozilla.org/es/docs/Tools/Responsive_Design_View

Vista de diseño adaptable

  • Diseños en diferentes tamaño de pantalla
  • Cambiar tamaño
  • Cambiar orientación
  • Capturar pantalla
  • Eventos de toque

Gracias