Diseo e implementacin
de interfaces web con Bootstrap
0. Presentacin
Formador del curso
Un poco sobre m
Vctor Tllez
http://vtellez.es
[email protected]
Bootstrap 3
FORPAS 2015
Orientacin
Perfil y orientacin del curso
Este curso es interesante para
Personas con un perfil tcnico interesadas en
el desarrollo de proyectos web
Desarrolladores con conocimientos bsicos
en HTML, CSS y Javascript
Bootstrap 3
FORPAS 2015
Temario
Programa del curso
Situacin y contexto
Diseo adaptativo y responsitivo
Interfaces
Empezando con Bootstrap
Estructuracin 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 este curso sabrs
Valorar qu elegir para tus proyectos
Desarrollar una App para las principales
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. Situacin y
contexto
Situacin actual
Panorama software a considerar como desarrolladores
Diversidad Software
Acceso a nuestra aplicacin a travs de
navegadores web de escritorio y mviles.
Acceso a travs de sistemas operativos mviles
Bootstrap 3
FORPAS 2015
Situacin actual
Panorama hardware a considerar como desarrolladores
Diversidad Hardware
Acceso a una misma aplicacin desde:
- Ordenadores de sobremesa
- Ordenadores porttiles
- Smartphones
- Tablets
- Smartwatches
- Wereables
Bootstrap 3
FORPAS 2015
Navegacin y uso
Anlisis de tendencia
Clientes mviles
2008
Uso de clientes
mviles
El siguiente grfico muestra una
relacin de la evolucin en el uso de
clientes mviles para la utilizacin de
distintos servicios y aplicativos en
internet.
2010
2012
2014
0
25
50
75
100
Bootstrap 3
FORPAS 2015
2. Diseo adaptativo
y responsitivo
Web adaptativas
Introduccin
Bootstrap 3
FORPAS 2015
Web adaptativas
Presentacin
Diseo responsitivo
Adaptables segn la
resolucin del dispositivo
Un nico cdigo
Limitacin de funcionalidad
de hardware del cliente
Navegador integrado
Bootstrap 3
FORPAS 2015
Web adaptativas
Ventajas e inconvenientes
Pros
Contras
Cdigo nico
Acceso web (solo online)
Independiente de
plataformas
Limitacin hardware
Versin nica
Dependiente de navegador
web
Bootstrap 3
FORPAS 2015
16
Webapps
Presentacin
Webs con vista standalone
Dependiente del sistema
operativo
Sigue siendo una aplicacin
web. Parte offline.
Navegador oculto
Bootstrap 3
FORPAS 2015
Webapps
Ventajas e inconvenientes
Pros
Contras
Cdigo nico
Dependiente del OS
No requiere
especializacin
Limitacin hardware
Versin nica
Poco intuitivo
Bootstrap 3
FORPAS 2015
Webapps
Ejemplo
Ocultacin 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 hbridas
Introduccin
Bootstrap 3
FORPAS 2015
Apps hbridas
Presentacin
Caractersticas:
Un nico cdigo
Acceso a recursos hardware
Cdigo nativo y web.
Rendimiento limitado.
Instalable.
Bootstrap 3
FORPAS 2015
Apps hbridas
Ventajas e inconvenientes
Pros
Contras
Cdigo nico
No compilado.
Optimizacin baja
Acceso hardware nativo
Bajo rendimiento con
respecto a apps nativas
No requiere
especializacin
Bootstrap 3
FORPAS 2015
Apps nativas
Introduccin
Bootstrap 3
FORPAS 2015
Apps nativas
Presentacin
Caractersticas:
Compiladas a partir de
cdigo especializado
Sin limitaciones hardware
Basado en APIs (no web)
Bootstrap 3
FORPAS 2015
Apps nativas
Ventajas e inconvenientes
Pros
Contras
Optimizacin nativa
Requiere especializacin
Acceso total al hardware
Cdigo dependiente de OS
Interfaz intutitiva
Mltiple versiones
Bootstrap 3
FORPAS 2015
Comparativa
Tipos de Apps
Bootstrap 3
FORPAS 2015
3. Interfaces - UI
Interfaces de usuario
Algunas alternativas
jQuery Mobile
Lungo JS
Bootstrap
Bootstrap 3
FORPAS 2015
jQuery Mobile
Presentacin
Framework JS
https://jquerymobile.com/
Basado en jQuery
Compatible con browsers
mviles y escritorio
Control de histrico
Fundamentado bajo
AJAX
Bootstrap 3
FORPAS 2015
LungoJS
Presentacin
Framework HTML5
http://lungo.tapquo.com/
Extremadamente ligero
Basado en quo.js
Unificacin de interfaz
Control histrico
Framework completo JS
Bootstrap 3
FORPAS 2015
Bootstrap
Presentacin
Framework HTML
Legado de twitter
El ms popular
actualmente
Responsitivo, adaptativo
Licencia MIT
Bootstrap 3
FORPAS 2015
4. Empezando con
bootstrap
Bootstrap
Presentacin
http://getbootstrap.com/getting-started/
Bootstrap 3
FORPAS 2015
Bootstrap
Presentacin
CDN y minificacin
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. Estructuracin
GRID
Estructuracin GRID
Presentacin
Bootstrap 3
FORPAS 2015
Estructuracin GRID
Presentacin
Basado en contenedores responsitivos.
Admite diferentes disposiciones en funcin de
la resolucin del dispositivo cliente.
Visibilidad y ocultacin.
Bootstrap 3
FORPAS 2015
Estructuracin GRID
Presentacin
col-lg
col-md
col-sm
col-xs
Bootstrap 3
FORPAS 2015
Ejemplo GRID
Presentacin
Bootstrap 3
FORPAS 2015
Ejemplo GRID
Presentacin
Bootstrap 3
FORPAS 2015
6. Framework CSS
Librera CSS
Presentacin
Mobile First
Elementos CSS
Desactivando el diseo responsive
https://getbootstrap.com/examples/non-responsive/
Maquetacin CSS responsive
Bootstrap 3
FORPAS 2015
Librera CSS
Presentacin
Tipografas
Cdigo
Tablas
Formularios
Botones
Imgenes
Helpers
Bootstrap 3
FORPAS 2015
Librera CSS
Presentacin
Helpers de visibilidad responsitiva
Helpers para versin imprimible
LESS y SASS
Bootstrap 3
FORPAS 2015
7. Componentes
Componentes de bootstrap
Presentacin
Ms de una docena de recursos para nuestro
proyecto:
Navegacin
Maquetacin de contenido
Presentacin
En principio sin funcionalidad (necesitaran
atributos data junto con jQuery).
Bootstrap 3
FORPAS 2015
8. Javascript
Javascript
Presentacin
Dependencia con jQuery
No requiere conocimiento de jQuery
Utilizacin de atributo data y role de HTML
Bootstrap 3
FORPAS 2015
Javascript
Presentacin
Carga masiva o por mdulos de componentes
javascript
API clsica de jQuery tambin disponible
Bootstrap 3
FORPAS 2015
Diseo e implementacin de
interfaces web con Bootstrap
DA 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
Descripcin
Apliquemos nuestros conocimientos para crear
una web dedicada a un evento pblico:
Maquetacin web con Bootstrap
GRID para distintas resoluciones
Themes y componentes de terceros
Bootstrap 3
FORPAS 2015
12. Cuestiones
avanzadas
Animate.css
Animate.css
Descripcin
Mejorando la experiencia de nuestros usuarios:
https://daneden.github.io/animate.css/
Bootstrap 3
FORPAS 2015
Custom data
html5 attributes
Custom data attr
Descripcin
Trabajemos un poco con jQuery y BS:
Cargar automticamente el contenido de un
modal por AJAX utilizando slo atributos data
Bootstrap 3
FORPAS 2015
Custom data attr
Descripcin
Requisitos
Utilizaremos nuestro propio fichero:
app.js
Necesitaremos un div modal vaco en nuestro
fichero html
Bootstrap 3
FORPAS 2015
Custom data attr
Descripcin
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
Caractersticas
Javascript SDK
Convierte llamadas de su API JS en llamadas
nativas en funcin 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
Compilacin Phonegap
Flujo de trabajo
Bootstrap 3
FORPAS 2015
Phonegap Build
Phonegap Build
Caractersticas
Compilacin de Phonegap en la nube
Servicio freemium
Limitacin de visibilidad
Limitacin de tamao
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 definicin para Phonegap
config.xml
Manifiesto de nuestra app
Control de versiones
Definicin de plataformas compatibles
Configuracin especfica para cada plataforma
Zona de declaracin de plugins
http://docs.build.phonegap.com/
Bootstrap 3
FORPAS 2015
Diseo e implementacin de
interfaces web con Bootstrap
DA 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 navegacin mvil con navbar
fijo y footer fijo para navegacin entre
secciones
Plataformas Compatibles
Compilaremos con Phonegap Build para:
- Android
- iOS
- Windows Phone
Bootstrap 3
FORPAS 2015
Google developer
Proceso de certificacin
Certificacin 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
Creacin de nuestra app en Google Play
PROCESO
CERTIFICACIN
PREPARACIN
APK
PUESTA EN
PRODUCCIN
APP DISPONIBLE
PBLICAMENTE
APP
Importancia de las capturas de
nuestra APP
Configuracin de la vista de perfil
Definicin 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 actualizacin en Google Play es sencillo:
1
CICLO
DE VIDA
https://play.google.com
Subida de binario (.apk)
Publicacin
Desarollo
El proceso de subida incluye la preparacin del apk y sus
metadatos, as como la configuracin y localizacin
La nueva versin estar disponible pblicamente en un
plazo no superior a 24 horas.
Incluye desarrollo de nuevas funcionalidades, mejoras y
correccin de bugs en nuestra app
Bootstrap 3
FORPAS 2015
Google Play
Ventajas e inconvenientes
Pros
Contras
Comodidad para
desarrolladores
Seguridad para el usuario
Actualizaciones rpidas.
Correccin de bugs
Parque de dispositivos
Generacin de certificado
Mltiple versiones
Bootstrap 3
FORPAS 2015
iOS developer
Proceso de certificacin
Certificacin 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 aplicacin de apple para gestionar
los binarios
https://developer.apple.com/register/index.action
Bootstrap 3
FORPAS 2015
Primera subida de nuestra App
Creacin de nuestra app en App Store
PROCESO DE
CERTIFICACIN
PREPARACIN
DE BINARIOS
Importancia de las capturas de
nuestra APP
Video de utilizacin (nuevo)
REVISIN
DE APPLE
PUESTA EN
PRODUCCIN
Definicin 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
preparacin del binario y sus
metadatos, as como la
configuracin y localizacin
REVISIN DE APPLE
1
Proceso de revisin de Apple.
Pueden requerir informacin.
Media de 7 a 10 das de duracin
CICLO
DE VIDA
DESARROLLO
Incluye desarrollo de nuevas
funcionalidades, mejoras y
correccin de bugs en nuestra
app
PUBLICACIN
3
La nueva versin estar
disponible pblicamente 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 reaccin.
Vulnerabilidad temporal.
Diagnstico de fallos
Certificados nicos por
app
Mltiple versiones
Bootstrap 3
FORPAS 2015
Diseo e implementacin de
interfaces web con Bootstrap
DA 4
13. Proyecto II
Proyecto II para este curso
Descripcin
Trabajaremos con un ejemplo algo ms
complejo en maquetacin CSS con BS
Frontend para un dashboard de administracin
Debe ser responsitivo
Uso de data-attributes para uso de plugins
Reescritura CSS de Bootstrap
Bootstrap 3
FORPAS 2015
Proyecto II para este curso
Descripcin
Bootstrap 3
FORPAS 2015
Proyecto II para este curso
Componentes que utilizaremos
GRID y visibilidad responsitiva
Dropdown para notificaciones
Collapse para el sidebar
Alert para bienvenida
nav tabs, stacked, bar
Modal para preferencias de usuario
Libreras jQuery de grficas HTML5
Bootstrap 3
FORPAS 2015
