Introducción a la creación de apps móviles híbridas con tecnologías web

(HTML5 + CSS3 + JavaScript)

Objetivos

  • Introducción
  • HTML + ejercicio
  • CSS + ejercicio
  • JS + ejercicio
  • HTTP & JSON
  • SPA + ejercicio
  • Extras
  • Recursos

Introducción

¿Cómo están ustedes?

  • ¿Quién tiene conocimientos de programación?
  • ¿Y de programación web?
  • ¿Quién navega por páginas web?

Nuestra historia: la evolución de la informática (1/2)

  • 1938: 1ª computadora => “Z1”,  cinta perforada

  • 1964: Programma 101 de Olivetti (primera computadora personal, sin pantalla)

  • 1973: Xerox Alto (añadió el ratón, la metáfora de escritorio y GUI)

  • 1977: Apple 2 (computador personal)

  • 1981: IBM PC (computador personal que definió estándares como x86)

  • 1983: ARPANET se separa de la red militar que la originó, pasa a ser civil y se convierte en el origen de Internet

  • 1985: Windows 1.0

  • 1990: Tim Berners-Lee crea el lenguaje HTML y el servicio WWW sobre la red Internet

  • 1991: Linux por Linus Torvalds (es un S.O. basado en Unix)

Nuestra historia: la evolución de la informática (2/2)

  • 1992: Windows 3.1

  • 1995: Windows 95

  • 1996: Palm OS 1.0

  • 1996: Windows CE 1.0 (para sistemas embebidos)

  • 2000: Pocket PC 2000 (de Microsoft, basado en Windows CE; competencia de Palm OS)

  • 2003: Windows Mobile 2003 (orientado al mercado empresarial, sucesor de Pocket PC 2002)

  • 2007: iPhone

  • 2008: iPhone 3G + App Store (iOS está basado en Unix)

  • 2008: Android 1.6 en el HTC Dream (Android está basado en Linux)

  • 2010: Windows Phone 7 (orientado al mercado de consumo)

Contexto actual

  • 4 SOs mayoritarios: Windows, OS X/iOS, Android, Linux
  • Problema a solucionar: “Quiero desarrollar una aplicación que funcione en todos los SOs”
    => app multiplataforma => app x-platform
  • Solución antigua: Java VM (Java SE, Applets…)
  • Solución mayoritaria actual: “Desarrollo de apps híbridas native-web”
    • Concepto básico de lenguaje nativo + WebViews
    • Motivo 1: ahora los dispositivos son más potentes
    • Motivo 2: ahora las tecnologías web son más eficientes y además permiten acceso a ciertas funcionalidades nativas
    • Concepto de Cordova/Phonegap+Web

Tecnologías web

  • Gestionadas por W3C y WHATWG
  • Problema: Especificación vs Implementación
    • Cada fabricante de navegador implementa las especificaciones cuando quiere y como quiere.
    • Para ser profesional hay que leer las especificaciones o fuentes fiables.
    • Vitales páginas webs comparativas de funcionalidades en todos los navegadores. IE5 y 6 reventaban los estándares.
    • Actualmente los navegadores más conocidos tienen webs para mostrar su status de desarrollo
  • Herramientas de desarrollo: (IDE) + (Servidor web) + Navegador
    • Aunque los navegadores hoy en día sirven de IDE también

Preparación entorno de trabajo

HTML

(HyperText Markup Language)

HTML (HyperText Markup Language)

  • HTML mínimo
  • Tags < HTML5 https://jsfiddle.net/AlexMM/77n2dm4e/
  • Tags HTML5 y su valor semántico https://jsfiddle.net/AlexMM/gLgdtcbe/
  • Friends de HTML5
    • Conectividad: WebSockets, Server-sent events, WebRTC
    • Almacenamiento: Application Cache, Web Storage, IndexedDB
    • Multimedia: <audio>, <video>, Camera API
    • Gráficos: SVG, WebGL (ejemplo: https://www.cl3ver.com)
    • Rendimiento: Web Workers, XHR2, History API...
    • Acceso al dispositivo: GPS, orientación de la pantalla…
    • Estilos: mejoras de CSS, bordes redondeados, animaciones, fuentes propias…
  • Ejercicio 1: maquetar una web-app de una tienda online.

CSS

(Cascading Style Sheets)

CSS (Cascading Style Sheets)

  • Cómo definir estilos: https://jsfiddle.net/AlexMM/tb3a0ejb/
  • Sistema de cajas: margin, border, padding
  • Layouts: flex (Flexible Box) https://jsfiddle.net/AlexMM/jLzak9hh/
  • Cómo declarar estilos en un HTML:
    <link rel="stylesheet" href="css/index.css">
  • Ejercicio 2: remaquetar la web con flex y darle más estilos
  • Comentar concepto de media queries sobre el resultado del ejercicio.

JS

(JavaScript)

JS (JavaScript) [1/5]

JS (JavaScript) [2/5]

  • Cómo declarar JavaScript en un HTML y su significado:
    • <script src="js/index.js"></script>
    • <script>console.log(“Hello”);</script>
    • Permitido en <head> y <body>
  • BOM (Browser Object Model)
    • Permite acceder a funcionalidades del navegador
    • Objeto global window
    • window.location.href = "https://www.google.es"
    • window.navigator.onLine
    • LocalStorage (window.localStorage): https://jsfiddle.net/AlexMM/x8y0zmvg/

JS (JavaScript) [3/5]

  • DOM (Document Object Model)
    • Permite manipular los elementos HTML dinámicamente
    • window.document
    • document.body.bgColor = "orange";
    • Obtener elementos del DOM
      • document.getElementById('my-id');
      • document.getElementsByClassName('my-class'); //also element.get...
      • document.getElementsByTagName('div'); //also element.get...

JS (JavaScript) [4/5]

  • DOM (Document Object Model)
    • Manipular un elemento
      • element.id
      • element.classList
      • element.innerHTML
      • element.innerText
      • element.attributes
      • element.setAttribute(name, value)
      • element.parentElement
      • element.children

JS (JavaScript) [5/5]

  • DOM (Document Object Model)
    • Crear un elemento:
      • ​document.createElement('div')
    • ​Clonar un elemento:
      • ​node.cloneNode(true) //true para clonar también sus hijos
    • Insertar un elemento:
      • parentElement.appendChild(newElement) //lo añade al final
      • parentElement.insertBefore(newElement, referenceElement)
  • Ejercicio 3: incorporar JavaScript a la app

HTTP & JSON

Comunicación HTTP + JSON

SPA

(Single Page Application)

SPA (Single Page Application)

  • Arquitectura de software de una app multi-page
    • MPA
    • MPA + AJAX
  • Arquitectura de una SPA (Single Page Application)
  • Ejercicio 4: crear una web-app incorporando técnicas modernas
    • JS - Crear HTML dinámicamente
    • JS - Cargar en el HTML los datos de una petición AJAX.
    • JS - Usar localStorage para almacenar los items del carrito y comprobar q al refrescar no se pierden
  • Explicar cómo instalarla en el escritorio del teléfono Android/iOS
  • Explicar que muchas cosas de las que hemos hecho en los ejercicios, las hacen ya los frameworks.

Extras

Extras

  • Diseño:
    • Explicar concepto de SASS/LESS
    • Diseño mobile first
    • Snippets CSS:
      • Sombras y bordes redondeados
      • Para ajustar automáticamente una imagen recortándola si hace falta
      • Añadir fuentes propias
      • Ellipsis
      • Degradado
      • Animaciones
  • Frameworks JS-HTML5
  • Otras soluciones x-platform

Recursos

Documentación

Calidad

Maquetación

Formateadores

The End

webapps

By Alex Moros Marco

Made with Slides.com

webapps

  • 810

More from Alex Moros Marco