CREACIN DE WEBAPPS

MIGUEL MORERA
QU SON LAS WEBAPPS?
PGINAS WEB
APLICACIONES
BASADAS EN LA WEB
Sitios online que tienen una funcionalidad.
Aplicacin Web
WEB MVIL
El smartphone o el tablet es ahora nuestro ordenador.
En los ltimos 2 aos se ha duplicado el tiempo que
utilizamos los dispositivos mviles para navegar por internet.
El 68% de los espaoles se conectan a internet
a travs de un smartphone.
POR QU?
Es cmodo
Es ms barato (relativamente)
Se puede acceder desde cualquier sitio
POR QU?
Y QU HAY DE LAS NATIVAS?
EXPLOTAN AL MXIMO LAS PRESTACIONES
INTEGRADAS EN LOS DISPOSITIVOS
(GPS, acelermetro, captura de imgenes)
CANAL DE DISTRIBUCIN DE GRAN ALCANCE
App Store & Play Store
ENVO DE NOTIFICACIONES PUSH
MUCHAS PERMITEN FUNCIONAMIENTO OFFLINE
Las aplicaciones nativas estn bien pero
molan ms las WebApps.
SON MS LIGERAS
SON MULTIPLATAFORMA
VERSIN REDUCIDA Y ADAPTADA
DE UNA WEB DE ESCRITORIO
NO NECESITAS PASAR POR
APP STORE O PLAY STORE
LA TECNOLOGA PARA DESARROLLARLAS
ES MS SENCILLA
TIPOS DE APLICACIONES:
- INFORMATIVAS
- INTERACTIVAS
SERVICIO WEB
QUE RECOPILA DATOS Y LOS ENVA
A GRANDES RASGOS
Es como si Facebook hubiese hecho un navegador
propio para navegar por su web.
Y esto es una WebApp
UN SERVICIO WEB CON ASPECTO
DE APLICACIN NATIVA
DISEO DE WEBAPPS
COSAS A TENER EN CUENTA
SIMPLICIDAD
ALGO MUY COMPLEJO PUEDE HACER
QUE UN USUARIO DEJE DE UTILIZAR TU APP
LAS LEYES DE LA SIMPLICIDAD
John Maeda
REDUCIR
Si tienes dudas sobre la inclusin de alguna idea, elimnala
ORGANIZAR
La organizacin permite que un sistema complejo,
parezca ms sencillo
TIEMPO
Ahorrar tiempo simplica las cosas
APRENDIZAJE
El conocimiento lo simplica todo
COMPLEJIDAD
La simplicidad y la complejidad se necesitan entre s
CONTEXTO
Lo que est al lmite de la simplicidad
tambin es importante
EMOCIN
Es preferible que haya ms emociones
a que haya menos
CONFIANZA
Conamos en la simplicidad
FRACASO
En algunos casos no es posible
alcanzar la simplicidad
LA NICA
La simplicidad consiste en sustraer lo obvio
y aadir lo especco
RESPONSIVE DESIGN
CON TODO ESTO EN MENTE
vamos a ver la tendencia de moda
QU ES
RESPONSIVE DESIGN?
ES UNA SERIE DE PRCTICAS APLICADAS AL
DISEO WEB QUE PERMITEN AL USUARIO
ACCEDER A UN SITIO WEB DESDE
DIFERENTES DISPOSITIVOS
DISEO FLUIDO
Medidas porcentuales
Abandonamos los anchos jos y recibimos
con los brazos abiertos a los anchos proporcionales
Si utilizis un ancho jo mejor utilizar valores enteros no?
1000px = 100%
TIPOGRAFA
Medidas relativas
TRUCO
body { font-size: 62.5%; }
De este modo:
16px = 1.6em
Y qu hacemos con las imgenes?
Tambin tienen anchos jos...
img { max-width: 100%; height: auto; }
MEDIA QUERIES
Aplicar un estilo CSS segn
el dispositivo en base a medidas
VIEWPORT
<meta name="viewport" content="width=device-width, initial-scale=1">
Con width=device-width, denimos que el ancho de nuestro
sitio es como mximo el ancho del dispositivo
donde estamos visualizando dicha web.
Con el parmetro initial-scale=1, denimos el escalado inicial de
la web en el dispositivo. Normalmente signica que 1 px de
CSS equivale a uno del viewport.
@media only screen and (min-device-width : 320px) and (max-device-width :
480px) {
}
@media only screen and (min-width : 321px) {
}
@media only screen and (max-width : 320px) {
}
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
max-device-width es siempre la medida en portrait.
As que para evitar problemas es mejor utilizar siempre
max-width
max-device-width or max-width?
BREAKPOINTS
El sitio tiene que verse bien sea cual sea el dispositivo.
Se tienen en cuenta las medidas estndar de los dispositivos
ms populares, pero se dejan de lado los productos menores.
Android tiene distintas versiones de su sistema operativo en
diferentes dispositivos y cada uno renderiza las fuentes o
representa los pxeles en pantallla de una manera.
HAY QUE TENERLOS EN CUENTA
MEDIA QUERIES STYLESHEET
Una buena prctica es tener una hoja de estilos
para las media queries.
Normalmente se recomienda un slo archivo CSS para
realizar menos peticiones al servidor, pero en
denitiva hay muchos dispositivos que
descargan media queries que no necesitan.
<link rel=stylesheet type=text/css href=mobile.css
media=only screen and (min-width: 320px) />
SIEMPRE HAY QUE INVESTIGAR SI VALE LA PENA
MS COSAS
A TENER EN CUENTA
Diseo de WebApps
MOBILE FIRST
SI DISEAS UN SITIO RESPONSIVE
AL EMPEZAR DESDE LO BSICO
TIENDES A SER MS ESPECFICO
CONTENT FIRST
POR TANTO
Diseo sin contenido es solamente decoracin.
Disear sin contenido es una tarea complicada.
El contenido puede cambiar radicalmente el diseo.
Las decisiones que se toman se tienen
que realizar segn el contenido.
MUCHAS GRACIAS