Diseo e implementacin

de interfaces web con Bootstrap

0. Presentacin

Formador del curso

Un poco sobre m

Vctor Tllez

http://vtellez.es
contacto@vtellez.es

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