Diseño e implementación de interfaces web con Bootstrap
0. Presentación
0. Presentación
Formador del curso Un poco sobre mí
Víctor Téllez http://vtellez.es
[email protected]
Bootstrap 3 FORPAS 2015
Orientación Perfil y orientación del curso
Este curso es interesante para… Personas con un perfil técnico interesadas en el desarrollo de proyectos web Desarrolladores con conocimientos básicos en HTML, CSS y Javascript
Bootstrap 3 FORPAS 2015
Temario Programa del curso
Situación y contexto Diseño adaptativo y responsitivo Interfaces Empezando con Bootstrap Estructuración GRID Framework CSS Bootstrap 3 FORPAS 2015
Temario Programa del curso
Componentes Framework Javascript Themes Templates Otros plugins y recursos Proyecto - Cuestiones avanzadas
Bootstrap 3 FORPAS 2015
Objetivos del curso Al finalizar f inalizar este curso sabrás…
Valorar qué elegir para tus proyectos Desarrollar Desarrol lar una App para las principales pr incipales plataformas del mercado Crear una App nativa con HTML5 capaz de leer QRs. Subir tu App a las principales stores de apps y como mantenerlas actualizadas
Bootstrap 3 FORPAS 2015
1. Situación y contexto
Situación actual Panorama software a considerar como desarrolladores
Diversidad Software Acceso a nuestra aplicación a través de navegadores web de escritorio y móviles. Acceso a través de sistemas operativos móviles
Bootstrap 3 FORPAS 2015
Situación actual Panorama hardware a considerar como desarrolladores
Diversidad Hardware Acceso a una misma aplicación desde: - Ordenadores de sobremesa - Ordenadores portátiles - Smartphones - Tablets - Smartwatches - Wereables
Bootstrap 3 FORPAS 2015
Navegación y uso Análisis de tendencia Clientes móviles
2008
Uso de clientes móviles El siguiente gráfico muestra una relación de la evolución en el uso de clientes móviles para la utilización de distintos servicios y aplicativos en internet.
2010
2012
2014 0
25
50
75
100
Bootstrap 3 FORPAS 2015
2. Diseño adaptativo y responsitivo
Web adaptativas Introducción
Bootstrap 3 FORPAS 2015
Web adaptativas Presentación
Diseño responsitivo •
• •
•
Adaptables según la resolución del dispositivo Un único código Limitación de funcionalidad de hardware del cliente Navegador integrado Bootstrap 3 FORPAS 2015
Web adaptativas Ventajas e inconvenientes
Pros
Contras
Código único
Acceso web (solo online)
Independiente de plataformas
Limitación hardware
Versión única
Dependiente de navegador web Bootstrap 3 FORPAS 2015
Webapps Presentación
Webs con vista standalone •
•
•
Dependiente del sistema operativo Sigue siendo una aplicación web. Parte offline. Navegador oculto Bootstrap 3 FORPAS 2015
Webapps Ventajas e inconvenientes
Pros
Contras
Código único
Dependiente del OS
No requiere especialización
Limitación hardware
Versión única
Poco intuitivo Bootstrap 3 FORPAS 2015
Webapps Ejemplo
• • • •
Ocultación del navegador Pantalla de carga Barra de estado Llamadas a terceros
http://blog.teamtreehouse.com/optimizing-mobile-web-apps-ios
Bootstrap 3 FORPAS 2015
Apps híbridas Introducción
Bootstrap 3 FORPAS 2015
Apps híbridas Presentación
Características: • • • • •
Un único código Acceso a recursos hardware Código nativo y web. Rendimiento limitado. Instalable. Bootstrap 3 FORPAS 2015
Apps híbridas Ventajas e inconvenientes
Pros
Contras
Código único
No compilado. Optimización baja
Acceso hardware nativo
Bajo rendimiento con respecto a apps nativas
No requiere especialización Bootstrap 3 FORPAS 2015
Apps nativas Introducción
Bootstrap 3 FORPAS 2015
Apps nativas Presentación
Características: •
• •
Compiladas a partir de código especializado Sin limitaciones hardware Basado en APIs (no web) Bootstrap 3 FORPAS 2015
Apps nativas Ventajas e inconvenientes
Pros
Contras
Optimización nativa
Requiere especialización
Acceso total al hardware
Código dependiente de OS
Interfaz intutitiva
Múltiple versiones Bootstrap 3 FORPAS 2015
Comparativa Tipos de Apps
Bootstrap 3 FORPAS 2015
3. Interfaces - UI
Interfaces de usuario Algunas alternativas
Quer Mobile
Lungo JS
Bootstra
Bootstrap 3 FORPAS 2015
jQuery Mobile Presentación
Framework JS • •
• •
https://jquerymobile.com/
Basado en jQuery Compatible con browsers móviles y escritorio Control de histórico Fundamentado bajo AJAX Bootstrap 3 FORPAS 2015
LungoJS Presentación
Framework HTML5 • • • • •
http://lungo.tapquo.com/
Extremadamente ligero Basado en quo.js Unificación de interfaz Control histórico Framework completo JS Bootstrap 3 FORPAS 2015
Bootstrap Presentación
Framework HTML • •
• •
Legado de twitter El más popular actualmente Responsitivo, adaptativo Licencia MIT Bootstrap 3 FORPAS 2015
4. Empezando con bootstrap
Bootstrap Presentación
http://getbootstrap.com/getting-started/
Bootstrap 3 FORPAS 2015
Bootstrap Presentación
CDN y minificación Dependencias Estructura
Bootstrap 3 FORPAS 2015
Sublime Text Editor de textos
http://www.sublimetext.com/
Bootstrap 3 FORPAS 2015
Google Chrome Developers tools
Bootstrap 3 FORPAS 2015
5. Estructuración GRID
Estructuración GRID Presentación
Bootstrap 3 FORPAS 2015
Estructuración GRID Presentación
Basado en contenedores responsitivos. Admite diferentes disposiciones en función de la resolución del dispositivo cliente. Visibilidad y ocultación.
Bootstrap 3 FORPAS 2015
Estructuración Estructura ción GRID Presentación
col-lg col-md col-sm col-xs Bootstrap 3 FORPAS 2015
Ejemplo GRID Presentación
Bootstrap 3 FORPAS 2015
Ejemplo GRID Presentación
Bootstrap 3 FORPAS 2015
6. Framework CSS
Librería CSS Presentación
Mobile First Elementos CSS Desactivando el diseño responsive
https://getbootstrap.com/examples/non-responsive/ Maquetación CSS responsive Bootstrap 3 FORPAS 2015
Librería CSS Presentación
Tipografías Código Tablas Formularios Botones Imágenes Helpers
Bootstrap 3 FORPAS 2015
Librería CSS Presentación
Helpers de visibilidad responsitiva Helpers para versión imprimible LESS y SASS
Bootstrap 3 FORPAS 2015
7. Componentes
Componentes de bootstrap Presentación
Más de una docena de recursos para nuestro proyecto: Navegación Maquetación de contenido Presentación En principio sin funcionalidad (necesitaran atributos data junto con jQuery).
Bootstrap 3 FORPAS 2015
8. Javascript
Javascript Presentación
Dependencia con jQuery No requiere conocimiento de jQuery Utilización de atributo data y role de HTML Bootstrap 3 FORPAS 2015
Javascript Presentación
Carga masiva o por módulos de componentes javascript API “clásica” de jQuery también disponible Bootstrap 3 FORPAS 2015
Diseño e implementación de interfaces web con Bootstrap
DÍA 2
9. Themes y templates BS
Starter templates Recursos para bootstrap
Bootstrap 3 FORPAS 2015
Bootstrap Expo Recursos para bootstrap
http://themes.getbootstrap.com/ http://expo.getbootstrap.com/ Bootstrap 3 FORPAS 2015
10. Componentes de terceros
Bootswatch Recursos para bootstrap
https://bootswatch.com/ Bootstrap 3 FORPAS 2015
Bootsnips Recursos para bootstrap
http://bootsnipp.com/
Bootstrap 3 FORPAS 2015
Creative tim Recursos para bootstrap
http://www.creative-tim.com/
Bootstrap 3 FORPAS 2015
Wrapbootstrap Recursos para bootstrap
https://wrapbootstrap.com/ Bootstrap 3 FORPAS 2015
Envato - Themeforest Recursos para bootstrap
http://themeforest.net/ Bootstrap 3 FORPAS 2015
Designers y editores online Recursos para bootstrap
http://www.layoutit.com/ https://bootstrapbay.com/blog/bootstrap-editors/ Bootstrap 3 FORPAS 2015
Varios Recursos para bootstrap
http://www.iconshock.com/flat-icons/ http://fortawesome.github.io/Font-Awesome/ https://icons8.com/ http://builtwithbootstrap.com/
Bootstrap 3 FORPAS 2015
11. Proyecto I
Proyecto para este curso Descripción
Apliquemos nuestros conocimientos para crear una web dedicada a un evento público: Maquetación web con Bootstrap GRID para distintas resoluciones Themes y componentes de terceros Bootstrap 3 FORPAS 2015
12. Cuestiones avanzadas
Animate.css
Animate.css Descripción
Mejorando la experiencia de nuestros usuarios:
https://daneden.github.io/animate.css/ Bootstrap 3 FORPAS 2015
Custom data html5 attributes
Custom data attr Descripción
Trabajemos un poco con jQuery y BS: Cargar automáticamente el contenido de un modal por AJAX utilizando sólo atributos data
Bootstrap 3 FORPAS 2015
Custom data attr Descripción
Requisitos Utilizaremos nuestro propio fichero:
app.js Necesitaremos un div modal vacío en nuestro fichero html Bootstrap 3 FORPAS 2015
Custom data attr Descripción function modals_handler() { $(‘body').on('click','a[data-toggle="modal"]',function(e) { var action = $(this).attr('data-href'); $.ajax({ url : action, type: "GET", beforeSend : function (data) { $(‘#’+modal).empty(); $('#content'+modal).addClass("loading-big"); $('#'+modal).modal({ show:'show', backdrop: 'static', keyboard: true }); }, success: function(response) { $('#'+modal).html(response); },
}
error: function (xhr, ajaxOptions, thrownError) { console.log(xhr.status); } }); });
Bootstrap 3 FORPAS 2015
Phonegap
Phonegap Concepto
Bootstrap 3 FORPAS 2015
Phonegap Características
Javascript SDK •
• • •
Convierte llamadas de su API JS en llamadas nativas en función del OS destino. Soporte para plugins Soporta las principales plataformas conocidas Gran comunidad de usuarios y soporte http://phonegap.com/ Bootstrap 3 FORPAS 2015
Phonegap Flujo de trabajo
http://phonegap.com/ Bootstrap 3 FORPAS 2015
Compilación Phonegap Flujo de trabajo
Bootstrap 3 FORPAS 2015
Phonegap Build
Phonegap Build Características
Compilación de Phonegap en la nube •
• •
Servicio freemium • Limitación de visibilidad • Limitación de tamaño Simplifica el uso de plugins Integrado con github
https://build.phonegap.com/ Bootstrap 3 FORPAS 2015
Phonegap Build Flujo de trabajo
https://build.phonegap.com/
Bootstrap 3 FORPAS 2015
Phonegap Build Dashboard
Bootstrap 3 FORPAS 2015
Manifiesto de nuestra app Fichero de definición para Phonegap
config.xml • • • • •
Manifiesto de nuestra app Control de versiones Definición de plataformas compatibles Configuración específica para cada plataforma Zona de declaración de plugins http://docs.build.phonegap.com/
Bootstrap 3 FORPAS 2015
Diseño e implementación de interfaces web con Bootstrap
DÍA 3
Nuestra primera APP con Bootstrap
Desarrollamos nuestra App App propia para eventos como por ejemplo un congreso
Interfaz de Usuario Utilizaremos el framework Bootstrap 3
Mejoras a desarrollar Mejorar la navegación móvil con navbar fijo y footer fijo para navegación entre secciones
Plataformas Compatibles Compilaremos con Phonegap Build para: - Android - iOS - Windows Phone
Bootstrap 3 FORPAS 2015
Google developer
Proceso de certificación Certificación como desarrolladores en Google Play
Para poder subir apps a Google Play… •
• •
Compra de licencia como desarrollador (Un único pago de 25E, derecho de por vida) Necesitaremos una cuenta de google Un único certificado para todas nuestras Apps
https://support.google.com/googleplay/android-developer Bootstrap 3 FORPAS 2015
Primera subida de nuestra App Creación de nuestra app en Google Play
PROCESO CERTIFICACIÓN
PREPARACIÓN APK
PUESTA EN PRODUCCIÓN
APP DISPONIBLE PÚBLICAMENTE APP
• •
Importancia de las capturas de nuestra APP Configuración de la vista de perfil
• •
Definición de dispositivos incompatibles Indicadores y valoraciones Bootstrap 3 FORPAS 2015
Mantenimiento en Google Play Ciclo de vida de nuestra App
3 sencillos pasos El proceso de actualización en Google Play es sencillo:
1 CICLO DE VIDA
2 1
Subida de binario (.apk) El proceso de subida incluye la preparación del apk y sus metadatos, así como la configuración y localización
2
Publicación La nueva versión estará disponible públicamente en un plazo no superior a 24 horas.
3
3
Desarollo Incluye desarrollo de nuevas funcionalidades, mejoras y corrección de bugs en nuestra app
https://play.google.com Bootstrap 3 FORPAS 2015
Google Play Ventajas e inconvenientes
Pros
Contras
Comodidad para desarrolladores
Seguridad para el usuario
Actualizaciones rápidas. Corrección de bugs
Parque de dispositivos
Generación de certificado
Múltiple versiones Bootstrap 3 FORPAS 2015
iOS developer
Proceso de certificación Certificación como desarrolladores en App Store
Para poder subir apps a App Store… • • • •
Licencia anual para desarrollador iOS (80E) Necesitaremos una cuenta de apple Certificado generado único para cada app Necesitaremos aplicación de apple para gestionar los binarios https://developer.apple.com/register/index.action Bootstrap 3 FORPAS 2015
Primera subida de nuestra App Creación de nuestra app en App Store
PROCESO DE CERTIFICACIÓN
• •
PREPARACIÓN DE BINARIOS
Importancia de las capturas de nuestra APP Video de utilización (nuevo)
REVISIÓN DE APPLE
PUESTA EN PRODUCCIÓN
• •
Definición de dispositivos incompatibles Indicadores y valoraciones Bootstrap 3 FORPAS 2015
Mantenimiento en App Store Ciclo de vida de nuestra App
El ciclo de vida de nuestra app con apple será el siguiente … SUBIDA DE BINARIO (.ipa) El proceso de subida incluye la preparación del binario y sus metadatos, así como la configuración y localización
REVISIÓN DE APPLE 1
2
Proceso de revisión de Apple. Pueden requerir información. Media de 7 a 10 días de duración
CICLO DE VIDA
DESARROLLO Incluye desarrollo de nuevas funcionalidades, mejoras y corrección de bugs en nuestra app
4
PUBLICACIÓN 3
La nueva versión estará disponible públicamente en un plazo no superior a 24 -48 horas.
https://itunesconnect.apple.com/
Bootstrap 3 FORPAS 2015
App Store Ventajas e inconvenientes
Pros
Contras
Seguridad para el usuario
Tiempo de reacción. Vulnerabilidad temporal.
Diagnóstico de fallos
Certificados únicos por app Múltiple versiones Bootstrap 3 FORPAS 2015
Diseño e implementación de interfaces web con Bootstrap
DÍA 4
13. Proyecto II
Proyecto II para este curso Descripción
Trabajaremos con un ejemplo algo más complejo en maquetación CSS con BS Frontend para un dashboard de administración Debe ser responsitivo Uso de data-attributes para uso de plugins Reescritura CSS de Bootstrap Bootstrap 3 FORPAS 2015
Proyecto II para este curso Descripción
Bootstrap 3 FORPAS 2015