Ahora también distribuidor oficial BQ

Aplicaciones Web (VIII)

HTML5 CSS3 JS

HTML5 SVG: Scalable Vector Graphics

SVG: Scalable Vector Graphics

Formato de representación de gráficos vectoriales
Pueden cambiar de tamaño sin perdida de calidad

Recursos
Galeria Wikimedia: http://commons.wikimedia.org/wiki/Category:SVGs_by_subject
Editor SVG: http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html
Tutorial: https://developer.mozilla.org/en-US/docs/Web/SVG
Tutorial: http://www.w3schools.com/svg/

 

Ejemplo “Ajuste SVG”

“Ajuste SVG” ilustra como reescalar una imagen SVG
Las imágenes en SVG reescalan sin perder calidad porque son gráficos vectoriales
Las imágenes GIT, JPEG o PNG no reescalan bien porque tienen una resolución determinada

Esta WebApp tiene 2 botones: “+” y “

Cada vez que pulsamos uno de estos botones
el tamaño de la imagen debe aumentar o disminuir un 10%
según pulsemos “+” y “

Ver ejemplo: 01-image_adjust_svg_zepto.html y 02-image_adjust_svg_touch.html

Ejempo “Reloj SVG”

“Reloj SVG” genera un reloj sencillo con SVG
El reloj se compone de
Un círculo negro
Tres lineas para las manecillas del reloj

SVG puede animarse con javaScript
modificando la representación DOM del reloj
Versión 1: las manecillas se mueven con transform
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform
Version 2: Calcula las coordenadas de las manecillas

Se añade estilo CSS
Mejora el aspecto y adapta al tamaño de la pantalla

Versión 1: 04-clock_svg.html
Versión 2: 05-clock_svg_transform.html

Animar manecillas con coordenadas

Para animar las manecillas del reloj se incluye un script que cada segundo recalcula las coordenadas exteriores de las manecillas del reloj
El segundero tiene una longitud de 50 pixels
El minutero tiene una longitud de 40 pixels
La manecilla horaria de 30 pixels

Las coordenadas x2, y2 de las manecillas de horas, minutos y segundos se calculan con las funciones
x2(tiempo, unidades_por_vuelta, x1, radio)
 y2(tiempo, unidades_por_vuelta, y1, radio)

Ver ejemplo: 06-clock_svg_coords.html

Relojes con “estilo”

Usando CSS e imágenes se pueden hacer diversos diseños
Pequeños cambios de diseño,
cambian muy significativamente la apariencia del reloj

Analiza los códigos y apariencias de los siguientes ejemplos
09-clock_CSS.html
10_clock_CSS_a.html
10_clock_CSS_b.html
10_clock_CSS_c.html
10_clock_CSS_d.html

Objetos SVG

Los objetos SVG se pueden definir también como objetos externos en XML

Para importarlos con:
<img>, <object>, <embed>, <iframe>
Tutorial: http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Use.html

HTML5 CSS3 JS

 

HTML5 CANVAS

Mapas de bits con CANVAS

CANVAS define un mapa de bits
Se define en HTML con la marca <canvas>
Permite programar en Javascript aplicaciones interactivas, juegos, 2D, 3D, …
Esta soportado en los principales navegadores

Características
Tiene resolución fija y no reescala con calidad
<canvas id=”c1” width=”150” height=”350”> Texto alternativo </canvas>

Tutoriales
http://www.w3schools.com/html/html5_canvas.asp
http://www.w3schools.com/tags/ref_canvas.asp
https://developer.mozilla.org/En/Canvas_tutorial

Ejemplo “Reloj CANVAS”

“Reloj CANVAS” es similar al reloj programado con SVG
Pero programado en el canvas
Tiene el mismo circulo y manecillas del SVG

Canvas puede animarse con javaScript
modificando la representación DOM del reloj
tal y como se ilustra en el ejemplo siguiente

Ver ejemplo: 11-clock_canvas.html

Animar las manecillas del reloj

El script calcula cada segundo las manecillas una vez calculadas borra el canvas y vuelve a dibujar el reloj completo
secundero (50 px), minutero (40 px), hora (30 px)

Las coordenadas x2, y2 de las manecillas de horas, minutos y segundos se calculan con las funciones
x2(tiempo, unidades_por_vuelta, x1, radio)
y2(tiempo, unidades_por_vuelta, y1, radio)

myLine(…) y myCircle(…)
dibujan líneas y circulos

Ver ejemplo: 12-clock_canvas_coords.html

WebGL: Web en 3D

WebGL es una tecnología Web que trae gráficos 3D con aceleración por hardware al navegador sin la instalación adicional de software.

http://www.chromeexperiments.com/webgl

 

HTML5 CSS3 JS

Aplicaciones FirefoxOS

FirefoxOS

FirefoxOS es el nuevo SO para móviles y tabletas desarrollado por la Fundación Mozilla

Sus aplicaciones se programan en HTML5, CSS y Javascript

Recursos y tutoriales
https://marketplace.firefox.com/developers/docs/firefox_os
https://marketplace.firefox.com/developers/docs/quick_start
https://developer.mozilla.org/es/docs/Aplicaciones/Comenzando_aplicaciones
https://developer.mozilla.org/en-US/Apps/Reference

 

Apps FirefoxOS

Aplicaciones para instalar en móviles y tabletas. Funcionando con o sin conexión a Internet.

  • Construidas con tecnologías Web: URLs, HTTP, HTML, CSS, JavaScript, …
  • También pueden instalarse en PCs o navegadores

Tipos de WebApps Firefox OS

  • hosted: alojadas en un servidor
  • packaged: se descargan empaquetadas. Hay tres tipos
    • Plain: aplicaciones Web convencionales
    • Certified: con acceso a algunos elementos restringidos
    • Privileged: con acceso a todos los recursos del móvil

 

Hosted Apps

Webapps publicadas en modo ejecutable en un servidor Web

Características

  • Necesitan conexión a Internet para ser ejecutadas
  • Solo puede haber una hosted WebApp por dominio Web

Se gestionan a través del objeto predefinido navigator.mozApps

con métodos install(…) o checkInstalled(…)

Packaged WebApps

Webapps empaquetadas en un fichero ZIP

Características

  • Se pueden publicar en tiendas o en servidores
  • Solamente se pueden instalar, no se pueden ejecutar directamente en un navegador
  • Pueden ser autonomas, funcionando sin conexión a Internet

Se instalan a través del objeto predefinido navigator.mozApps

con método installPackage(…)

Firefox Marketplace

Firefox Marketplace permite crear tiendas de aplicaciones alojadas en servidores
Más info: https://developer.mozilla.org/en-US/Marketplace

Los Marketplace FirefoxOS pueden competir entre si

Serán más o menos populares dependiendo de la aceptación de los usuarios
Serán más o menos seguras dependiendo del control de la seguridad realizado

Market places con apps de Mozilla
https://marketplace.firefox.com

HTML5 CSS3 JS

 

Reloj SVG como App FirefoxOS

Reloj SVG como App

Incluiremos el reloj SVG como

 

Arrancar el simulador de FirefoxOS en Firefox

Las apps se instalan en el simulador incluido en Firefox

Firefox incluye a partir de Firefox 30.0 un simulador de FirefoxOS
Se arranca con la siguiente secuencia:

Herramientas -> Desarrollador Web -> WebIDE

Después se arranca (Seleccionar entorno de ejecución) y se selecciona la versión 1.4 (Firefox 1.4)
¡OJO! La app con el Reloj dada está probada en FirefoxOS 1.4 y 1.3 y pueden no funcionar en otras versiones

 

Instalar hosted App en simulador FirefoxOS

  1. Clicar para desplegar el navegador y poder instalar la hosted App
  2. Introducir URL del instalador en el navegador y clicar (ejecutar instalador)
    http://crisanformacion.com/hosted/
  3. Clicar en botón de instalar
  4. Clicar para confirmar instalación
  5. Clicar para volver a escrit¡orio
  6. Aplicación instalada

 

Reloj SVG: hosted App

Para crear una hosted App con “Reloj SVG” se debe añadir a la carpeta de clock.htm:

  • Iconos que se mostrarán en el escritorio
  • Instalador de la WebApp en el escritorio
  • Manifiesto con información de instalación
  • El ejemplo suministrado incluye además estilos y tipografías

manifest.webapp

Fichero en formato JSON (JavaScript Object Notation)
Con información de instalación, recursos, diseñador, …

Los URLs son relativos con path absoluto
JSON es un formato muy habitual para manifiestos


 

{
  "version": "5.0",
  "name": "Reloj_h",
  "description": "Reloj Analogico y Digital",
  "launch_path": "/hosted/clock.html",

  "icons": {
    "16":  "/hosted/ico_16.png",
    "48":  "/hosted/ico_48.png",
    "128": "/hosted/ico_128.png"
  },
  "developer": {
    "name": "CRISAN Formación",
    "url": "http://crisanformacion.com"
  }
}

 

 

install.html


 

<!DOCTYPE html>
<html>

<head>
<title>Instalador del Reloj</title>
<meta charset="UTF-8">
<script type="text/javascript" src="http://zeptojs.com/zepto.min.js" ></script>
</head>

<body>

<div id="install">Estado de la instalación del Reloj 5.0</div>

<script>

    $(document).ready(function() {

      var gManifestName = location.href.replace("install.html","") + 'manifest.webapp';

      var request = navigator.mozApps.checkInstalled(gManifestName);
      
      request.onsuccess = function() {
        if (request.result) {
          // La app ya fue instalada.
          $("#install").text("La app ya esta instalada");

        } else {

          // La app no esta instalada
          $("#install").html("<input type='button' value='Instalar'>");

          $("#install").click(function() {

              var req = navigator.mozApps.install(gManifestName);

              req.onsuccess = function(data) {
                  $("#install").text("La app ha sido instalada").unbind('click');
              }

              req.onerror = function(errObj) {
                  alert("Error de instalacion: " + this.error.name);
              }

          });
        }
      }

      request.onerror = function() {
        alert('Error comprobando estado de la instalacion: ' + 
               this.error.message);
      }
    });

</script>


</body>

</html>



 

 

Instalar packed App en simulador FirefoxOS

  1. Clicar para desplegar el navegador y poder instalar la packed App
  2. Introducir URL del instalador en el navegador y clicar (ejecutar instalador)
    http://crisanformacion.com/packed/
  3. Aceptar la autoinstalación
  4. Clicar para confirmar instalación
  5. Clicar para volver a escrit¡orio
  6. Aplicación instalada

Reloj SVG: packed App

Componentes:

  • Instalador de la WebApp en el escritorio
  • Manifiesto con información de instalación del paquete
  • App empaquetada
    • Zip con todos los ficheros de la App: los mismos ficheros de la hosted App
    • Salvo manifiesto: URLs relativos

OJO: Los ficheros deben empaquetarse sin más, sin estar en ningún directorio

 

package.manifest

Fichero en formato JSON (JavaScript Object Notation)
Con información sobre la webapp empaquetada

version, name y developer han de ser iguales al del manifest.webapp (dentro del zip)

JSON representa datos como literales de objetos JavaScript
Todos los datos están serializados en el fichero como un string


 

{
  "version": "5.0",
  "name": "Reloj",
  "package_path": "http://crisanformacion.com/packed/package.zip",
  "developer": {
    "name": "CRISAN Formacion",
    "url": "http://crisanformacion.com"
  }
}

 

 

index.html


<!DOCTYPE html>
<html>

<head>
  <title>La Tienda de CRISAN - Reloj</title>
  <meta charset="UTF-8">
</head>

<body>
    <p>Página de Auto-Instalación del Reloj 5.0</p>

    <script>
      (function() {
          var manifestUrl = location.href.replace("index.html","") +'package.manifest';

          if (! navigator.mozApps.installPackage) {
            alert("ERROR: Esta aplicación no es compatible con tu dispositivo.");
            return;
          } 

          var req = navigator.mozApps.installPackage(manifestUrl);
          req.onsuccess = function() {
            alert("Instalacion completada."+this.result.origin);
          };
          req.onerror = function() {
            alert("Error de instalación: "+this.error.name);
          };
      }
      )();
    </script>
</body>

</html>

 

 

HTML5 CSS3 JS

Comments are closed.