• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Libra Movilidad - Betabeers Pontevedra
 

Libra Movilidad - Betabeers Pontevedra

on

  • 533 views

Libra es un ERP basado en Oracle desarrollado por la empresa EDISA. ...

Libra es un ERP basado en Oracle desarrollado por la empresa EDISA.
El módulo de movilidad es un desarrollo HTML5 que permite consultar información del ERP y ejecutar determinados procesos desde dispositivos móviles.
Presentamos el módulo y explicamos algunas de las técnicas de optimización aplicadas para mejorar la experiencia de usuario.

Statistics

Views

Total Views
533
Views on SlideShare
428
Embed Views
105

Actions

Likes
0
Downloads
5
Comments
0

3 Embeds 105

http://blog.marcosesperon.es 90
https://twitter.com 13
http://plus.url.google.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Libra Movilidad - Betabeers Pontevedra Libra Movilidad - Betabeers Pontevedra Presentation Transcript

    • @marcosesperon Libra ERP Módulo Movilidad Betabeers Pontevedra 04 julio 2013
    • @marcosesperon ¿Quién soy? MARCOS ESPERÓN Oracle & Web Developer en EDISA @marcosesperon es.linkedin.com/in/marcosesperon/
    • @marcosesperon LIBRA MOVILIDAD Pero primero… ¿qué es Libra?
    • @marcosesperon Libra Libra es un ERP desarrollado por EDISA con tecnologías Oracle. ERP son las siglas de Enterprise Resource Planning (planificación de recursos empresariales). Sistema integrado que combina los procesos bajo un mismo esquema que beneficia a la organización.
    • @marcosesperon Libra •  Optimización de los procesos empresariales. •  Acceso a toda la información con integridad de datos. •  Compartir información entre todos los componentes de la organización. •  Reducir operaciones innecesarias. •  Análisis global de la información. Características de un ERP
    • @marcosesperon Libra ERP
    • @marcosesperon Libra ERP El punto fuerte de Libra es la personalización
    • @marcosesperon Libra ERP http://www.atlaslibra.com
    • @marcosesperon LIBRA MOVILIDAD Ahora que ya conocemos Libra…
    • @marcosesperon Libra Movilidad Necesitábamos consultar información y realizar determinados procesos de Libra desde los dispositivos móviles.
    • @marcosesperon Libra Movilidad Objective-C Java C# Plataformas disponibles al comenzar el proyecto (2011)
    • @marcosesperon Libra Movilidad El módulo se ejecutará en cualquier dispositivo con navegador web: equipos de sobremesa, smartphones, tablets, PDAs, televisiones… Plataformas disponibles al comenzar el proyecto (2011)
    • @marcosesperon Esquema del módulo LIBRA B2B APACHE PHP JS
    • @marcosesperon Estructura de la aplicación mwl.js assets/lov.js assets/ob/lista.js ... modulo.js app
    • @marcosesperon Libra Movilidad Escritorio: menú inicial
    • @marcosesperon Libra Movilidad Apariencia general de un módulo
    • @marcosesperon Libra Movilidad Menú Lateral
    • @marcosesperon Libra Movilidad Consultas
    • @marcosesperon DEMO Vista previa del módulo
    • @marcosesperon OPTIMIZANDO EL MÓDULO Vamos a la parte interesante…
    • @marcosesperon Responder rápido a las peticiones
    • @marcosesperon Mantener conexiones abiertas HTTP Response HTTP/1.1 200 OK Content-Type: application/javascript Connection: close KeepAlive On KeepAliveTimeout 15 MaxKeepAliveRequest 1000 * Fundamental para redes 3G. Respuesta Apache
    • @marcosesperon Evitar peticiones a recursos externos •  Imágenes •  Frameworks y plugins de javascript •  Fuentes * Si es necesario, usar preferentemente CDN’s (Content Distribution Networks). Almacenar los recursos en nuestro servidor
    • @marcosesperon Comprimir las peticiones con GZIP Minimizar los bytes descargados GET / HTTP/1.1 Accept-Encoding: gzip, deflate Petición HTTP/1.1 200 OK Content-Encoding: gzip Respuesta AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE application/javascript Apache: mod_deflate $HTTP_ACCEPT_ENCODING; ob_start("ob_gzhandler"); PHP: ob_gzhandler
    • @marcosesperon Ofrecer contenido cacheable Minimizar los bytes descargados $_SERVER['HTTP_IF_MODIFIED_SINCE'] ... $mtime = filemtime($_SERVER['SCRIPT_FILENAME']); $gmdate_mod = gmdate('D, d M Y H:i:s', $mtime) . ' GMT'; if ($if_modified_since == $gmdate_mod) { header("HTTP/1.0 304 Not Modified"); exit; } header("Last-Modified: $gmdate_mod"); header('Content-type: text/css'); header('Expires: ' . date('D, d M Y H:i:s', time() + (60*60*24*45)) . ' GMT');
    • @marcosesperon CSS y JS empaquetado Minimizar los bytes descargados <!doctype html> <html> <head> <title>EDISA</title> <link rel="stylesheet" href=”css.php?p=menu" /> </head> <body> … ... <script src=”js.php?p=menu"></script> </body> </html> Una única llamada por CSS y JS que devuelve lo necesario para cada módulo. En ocasiones solamente se utiliza el 10% del código CSS
    • @marcosesperon Cachear los recursos en el cliente APP CACHE SERVIDORHTTP Minimizar los bytes descargados CACHE MANIFEST # v.130704-1 CACHE: img/logo.png img/menu/bg.png css/fonts/fontawesome-webfont.eot css/fonts/fontawesome-webfont.svg css/fonts/fontawesome-webfont.ttf css/fonts/fontawesome-webfont.woff js/jquery.js FALLBACK: / utils/offline.html NETWORK: * offline.manifest
    • @marcosesperon Estandarizar el código Minimizar los bytes descargados <img src="botoncerrar.png" alt="Cerrar" /> <img src="botonCerrar.png" alt="Cerrar" /> <img src=”BotonCerrar.png" alt="Cerrar" /> botoncerrar.png * Si nuestro servidor es Windows,
    • @marcosesperon Las cookies son kilos de más Minimizar los bytes descargados Puede que sean texto plano de pocos bytes, pero cada vez que se hace una petición el navegador envía la información de las cookies que coincida con el dominio solicitante. SERVIDOR HTTP •  Eliminar cookies que no sean necesarias •  Reducir el tamaño de las cookies al mínimo posible
    • @marcosesperon Controlar los elementos del DOM Generar un etiquetado eficiente DOC HTML BODY ELEM ELEM ELEM ELEM ELEM ELEM Es recomendable no superar los 1.000 elementos en el DOM document.getElementsByTagName('*').length
    • @marcosesperon Declarar el CSS en el head Generar un etiquetado eficiente <!doctype html> <html> <head> <title>EDISA</title> <link rel="stylesheet" href="style.css" /> </head> <body> ... </body> <html> El pintado de la página se bloquea hasta que se procesa el CSS. Evitar los estilos en línea en el HTML.
    • @marcosesperon Declarar el JS al final del body Generar un etiquetado eficiente <!doctype html> <html> <head> <title>EDISA</title> </head> <body> … <script src="app.js"></script> </body> </html> En el HEAD bloquea la petición hasta que procesa el JS. Evitar los scripts en línea en el HTML.
    • @marcosesperon Usar sprites para las imágenes menu-libra.png menu-libra-1.png menu-libra-2.png menu-libra-3.png menu-libra-4.png … 16 imágenes 16 conexiones 143 KB 1 imagen 1 conexión 30 KB Optimizar los recursos utilizados
    • @marcosesperon Usar webfonts para los iconos Optimizar los recursos utilizados http://fortawesome.github.io/Font-Awesome/
    • @marcosesperon Reemplazar imágenes por CSS3 Optimizar los recursos utilizados linear-gradient(to bottom, #feccb1 0%,#f17432 41%,#ea5507 65%,#fb955e 100%)
    • @marcosesperon DataURI’s para imágenes de poco peso Optimizar los recursos utilizados data:image/ png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbW FnZVJlYWR5ccllPAAAA1RJREFUeNq8V0tIVGEU/ u6d0ZlrDxxdWPSgpNC0B5YLh7CCDIKoNkatetHLjYFthIIKSmdhEq20jSaRGkptqk1ElCCKlkqZUKmp1Fg6M2rN6z7+zj93HK3V3 MG5Fw73cf57/u8/5zvnP7/AGEM8lyAIi19TLrgaBxgTcnUdhu5XntpOj/LiQXHZ5oPikX8mr24cau8YZDMqY9NBxppf9bGL1Q +GuM6obRHGrzQIYs5e5xZ0jyno +DKHgq35IIg5zkMn1hg1lgiAVO6Pga4e1NfcxuScjEBYhbTcgc5nLQEeESPGrAkAELjrCp2FKF2Rh9k5PxyShdypxTyfbA/ w4EJWAE1VI3GU1cQmTxgAzwiN/hSsqWTBCllDwldiHhBF9HS9R2tDPVSbA2EQEEE0DwAjnuU6C/ Dk82WUPRSQFhwBEywmAqBIh+getOg0DmkpYDDRA5wDKqIJRxYUVYmUQ1MBvHnRGwu7QtkgmEpCikHRwV2Uh/ orT0dzs4AirigLSa9qChJ1QWIAeB3gP0cnVRSTPcA58Lzlpc47gQNQ6CaYy4GSYyWxEGg8BGZ6QK// C5VfUTWzQyBGXD8fAlWRza0DIrGvpa5Vjzp5QTW7Dsi0Fx8+fRxqmF5IQkE/ paJmCoCUc1UNffmb12NHBmC71gycf4yCnbuxaW0mSNf/f1+4lE2p5eyNupq7ba +Zlz50UTPqL1vJmMvBvo4OMg994zoac4ePTUZTarfapCtH9hej8zsgtV+FlDFL5PMi +OEROieAo6Sz2qUKPjYZIZDs9lTMqCJmPAHkPq1C6DfVAD+Q138LU9SO+kgH3VtSMppSTn588yiUdiS0eC1NX4FI0/ FMHPPIVJ4FQwszRMJQWMavKQ8CgoT+A+WwTtIK3MC77HJoIRk/ p7y0RRvjtREPaF73RNPwp76T2duK0LvHhe59tZFiaKV8TJUDIB287vEmxDbqOHv8ODegZXTbeMnV8DY9c3X6qg35sNp0r imhINyjH+Gb/ uGrqzxTTJ9GSP7EY9sIAJ5aGRxEafnNiqx12cdFiyXWkEyOD7e23bteG53cw9uEpQaAaJFJJ8kicfBjWlTNa6KXhFgB3/ wpORkAEC0y9miqzTOOx5yfC4N85UaO538FGACcGdhVhFsFYQAAAABJRU5ErkJggg==
    • @marcosesperon Obtener el JS bajo demanda Optimizar los recursos utilizados if(typeof calculadora == 'undefined') { load('calculadora.js').thenRun(function () { var c = new app.calculadora(); }); } else { var c = new app.calculadora(); }; https://github.com/chriso/load.js
    • @marcosesperon Optimizar nuestro Javascript Reducir interacciones con el DOM for(i = 0; i < array.length; i++) { document.getElementById('test').innerHTML += array[i]; }; v_arts = document.querySelectorAll('.articulo'); Cachear elementos del DOM var f = $('.filas'); var f = document.querySelectorAll('.filas'); Usar métodos nativos No quedarse en jQuery
    • @marcosesperon Resultado final Inspector de red del menú inicial
    • @marcosesperon PREGUNTAS Dudas, sugerencias…
    • @marcosesperon GRACIAS