Computacin MvilTema: Desarrollo Web Mvil

Ing. Luis A. Guevara Alcalde

Por qu debe interesarnos la Web Mvil?

El auge de los mviles

Google prioriza a partir del 21 de abril de 2015 aquellos sitios que se adapten a los mviles,http://googlewebmastercentral.blogspot.com/2015/04/rolling-out-mobile-friendly-update.html

Proporciona herramientas que se pueden utilizar para comprobar su web. https://www.google.com/webmasters/tools/mobile-friendly/http://developers.google.com/speed/pagespeed/insights/

Y muchas ms herramientashttp://validator.w3.org/mobile-alpha/

El poderoso Google

https://developers.google.com/web/fundamentals/

Recursos desde Google

Preprese para mobile: 5 pasos hacia un diseo optimizado

Mobile: el mundo digital ya no es el mismo

El problema - Plataformas mviles

La Solucin

Fuentes

1. 7.412.919 sitios web estn utilizando el HTML5 DocType http://trends.builtwith.com/docinfo/HTML5-DocType

2. Para el ao 2016, ms del 50% de Mobile Apps ser hbridohttp://www.gartner.com/newsroom/id/2324917

3. El 75% de Amrica del Norte usuarios de Internet utilizan navegadores que son en su mayora HTML5 compatible, por encima del 57% en 2011 http://www.getelastic.com/html5-infographic/

4. Alrededor del 63% de los desarrolladores de mviles estn "muy interesados" en Utilizacin de HTML5 para construir sus aplicaciones a partir de 2012 4 Trimestrehttp://readwrite.com/2012/12/26/5-trends-in-html5-in-

2012

5. 79% de Mobile App Desarrolladores plan para integrar HTML5 en las aplicaciones que se lanzar en el futurohttp://www.factbrowser.com/facts/7731/

La Solucin

Si alguien os pide desarrollar una aplicacin mvil, decidle que una aplicacin web abierta puede ser igual de buena e igual de sexy. Si se utiliza HTML5, no es necesario escribir una aplicacin para cada sistema.

Tim Berners-Lee

Qu es una Web Mvil?

Qu es una Web Mvil? Es un site cuyo diseo, navegacin, contenidos y servicios estn

optimizados para ser accedidos y consumidos a travs de un dispositivo mvil. (mviles tradicionales, Smartphones, tablets, e-readers y otros que puedan surgir en el futuro).

No se debe pensar en una web mvil como una versin distinta o reducida de la versin web clsica.

Tener en cuenta las caractersticas del dispositivo con el que se accede para adaptar la informacin y servicios aprovechando las ventajas de la movilidad (posibilidad de servicios de localizacin, por ejemplo).

Ejemplos

https://www.spotify.com/pe/http://www.barackobama.comhttp://www.jw.orgwww.mediaqueri.es

Simplicidad de codificacin. HTML5, CSS3 y Javascript. Ahorro en costos de desarrollo y mantenimiento. Una sola versin de nuestro sitio.

Mercado de Internet mvil mucho mayor que los mercados de aplicaciones nativas. trabajar a travs de mltiples dispositivos sin la necesidad de atender a los sistemas operativos individuales. Funcionan hasta en SmarTvs.

Los motores de bsqueda - Contenido dentro de la aplicacin web para mviles pueden ser indexados por los motores de bsqueda, lo que garantiza que el contenido puede ser descubierta por miles de millones de consumidores. Evita penalizaciones por contenidos duplicados, antes se tena dos sitios uno para el desktop y otro para mvil.

Mejora experiencia del usuario.

Ventajas de una aplicacin web mvil

No hay barreras de entrada - Pueden interactuar con una aplicacin sin necesidad de descargar o instalar la aplicacin.

Pueden ser vendidos en tiendas de aplicaciones como Chrome Web Store, App Store, Android Market o Blackberry App World, despus de ser colocado en un simple "contenedor nativo" de la aplicacin de shell.

La Web es una plataforma abierta. Los desarrolladores no tienen que pasar semanas en una nica aplicacin para ver que se rechaz su aplicacin por razones cada vez ms extraas. (No se puede censurar a la Web como lo hace Apple), y no hay que esperar que las aplicaciones sean aprobadas.

Ventajas de una aplicacin web mvil

web design = responsive web design

Responsive Web Design

Cales son los problemas de crear una web para escritorio y una web

para mvil?

Estructura de una Web Mvil

Desarrollo web normal+

Consideraciones clave adicionales

+Apis adicionales

Desarrollo web Mvil =

Desarrollo Web Normal

Consideraciones claveLa etiqueta meta Viewporthttp://goo.gl/HYnXIH

Responsive Web Design Rejilla flexible. Un

diseo flexible basado en grid.

Imgenes flexibles Mediaqueries

Otros aspectos:

Tiempo y dinero Browsers antiguos Performance Content Website vs. Web App Frameworks Mobile First Best Practices

La etiqueta Meta Viewport

Viewport Units

Viewport Units Unidades Css relativas al tamao de la ventana del navegador. Los valores vw, vh, vmax, vmin relativos al tamao de la ventana.

Valores que forman parte de la especificacin CSS3 Values & Units Module.

Definicin del consorcio W3CLas longitudes "viewport-percentage" son relativas al tamao del bloque de contencin inicial. Cuando la altura o anchura de la ventana cambia, se escalan en consecuencia.

Viewport Units: vw y vh

Viewport Units: vmin y vmax

Otro ejemplo, si un viewport o ventana grafica es equivalente a una resolucin de 800px * 600px el vmax seria la longitud mayor, que seria 800px y el vmin la longitud mnima que seria la de 600px.Otro: Si la vista es 1000px por 700px, entonces 100vmax sera equivalente a 1000px.

vw, vh representan porcentajes sobre la anchura y altura del 'viewport' respectvamente. Ejm:

1vw = 1/100 de la anchura de la ventana. Es el 1% del ancho de ella. 15vh = 15/100 de la altura de la ventana. Es el 15% de el alto de ella.

NO es lo mismo que las medidas en porcentajes. Esta correlaciona el tamao de un elemento con el tamao de su contenedor. No es exacta.

vw y vh (Viewport width y Viewport height)

vmin y vmax vmin selecciona como referente el eje (x y) que sea el ms pequeo de los dos y

vmax al mayor. El vmin tomar el valor ms bajo, y el vmax el ms alto. Si la ventana del navegador se encuentra apaisada (ms ancha que alta), entonces

vmin=vh y vmax = vw. Si, la ventana se encuentra en modo portaretrato (ms alta que ancha), el vmin =

vw y el vmax = vh. Esto es especialmente til en diseo para dispositivos mviles, en los que rotamos

el aparato y cambiamos de una vista de portaretrato a otra apaisada.vw: Igual a 1% de la anchura del bloque de contencin inicial.vh: Igual a 1% de la altura del bloque de contencin inicial.vmin: Igual al valor ms pequeo de "vw" o "vh".vmax: Igual al valor ms grande de "vw" o "vh".

EjemplosSuponga que su ventana del navegador est ajustado a 1000 x 1200 pxeles:

1.5vw = 15px tamao de la fuente1.5vh = 18px tamao de la fuente1.5vmin = min (1.5vw, 1.5vh) = 15px tamao de la fuente1.5vmax = max (1.5vw, 1.5vh) = 18px tamao de la fuente

Mediaqueries

Media types: La hoja de estilo correcta para el medio correcto

CSS2 usa el atributo media que permite definir una hoja de estilos especfica para el medio en que se muestra.

El problema No todos los navegadores la aplican de la misma manera: algunos leen solamente la hoja

de estilos asignada a Handheld, otros solo la de Screen otros ninguna. No toma en cuenta el tamao del equipo. No importa el equipo desde el que se ingresa,

sea antiguo o nuevo, pequeo o grande, si el fabricante los etiqueta como handheld usa la misma hoja de estilos para todos.

MediaQueries al rescate Las pginas web de la era mvil deben ser inteligentes y adaptarse al

medio en que se desplieguen. CSS3 incluye los Media Queries, una serie de condiciones y requisitos que

nos permiten seleccionar una hoja de estilos especfica segn las capacidades especficas de cada dispositivo.

Tiene parmetros ms inteligentes para mostrar las hojas de estilo como el ancho y alto del navegador o del equipo, la orientacin actual de la pantalla (horizontal o vertical) y hasta la resolucin.

MediaQueries: Ejemplo

Ejemplos de su aplicacin:http://mediaqueri.es/

MediaQueries: Ejemplo

/* si la ventana tiene un ancho de 600px o menos */

@media (max-width: 600px) {

.facet_sidebar {

display: none;

}

}

/* si la ventana tiene un ancho de 700px o ms y la pantalla esta en formato horizontal. */

@media (min-width: 700px) and (orientation: landscape) { ..

}

Los breakpoints para crear tus MediaQueries no deben orientarse a tamaos de pantalla estndar, sino deben ser algo especfico para nuestro propio diseo web. Sin embargo, a modo orientativo, podemos revisar cdigo para dispositvos estndar.https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Nota: No es recomendable trabajar as. Solo se muestra esto, si por alguna razn especial alguien desea obtener los breakpoints exactos para dispositivos estndar.

MediaQueries: Para dispositivos estndar

Novedades en @media queries Css@media (min-width: 600px) and (max-width: 1000px) { /* conjunto de reglas*/ }

Segn la ltima especificacin Media Queries Level 4http://www.w3.org/TR/mediaqueries-4/ Ahora puede hacerse esto:@media (600px < width < 1000px) { /* conjunto de reglas*/ }

Novedades en @media queries CssLa regla @media light-level para el control del contraste de la web en funcin de la luz ambiente.

dimEl dispositivo se utiliza en un entorno de luz tenue. Por ejemplo: durante la noche, o un ambiente interior tnuemente iluminado.normalEl dispositivo se utiliza en un entorno con un nivel de luz en el rango ideal para la pantalla, y que no requiere ningn ajuste especial.washedEl dispositivo se utiliza en un entorno excepcionalmente brillante, haciendo que la pantalla sea difcil de ver.

EJEMPLO:

@media (light-level: normal) { p { background: url("texture.jpg"); color: #333; font-weight: 300;}}@media (light-level: dim) { p { background: #222; color: #ccc; font-weight: 700;}}@media (light-level: washed) { p { background: #fff; color: #000; font-size: 2em; font-weight: 900;}}

Apis HTML5 adicionalesAPI SelectorsAPI StorageAPI Indexed DatabaseAPI de geolocalizacinAPI Offline API HistoryAPI Drag & DropAPI WebSocket. Conexin bidireccional permanente entre el cliente y el servidorAPI Canvas y SVG.Web Workers. Scripts en segundo plano o modo desatendidoFormularios en HTML5

Otras APISBattery Status Event SpecificationEsta especificacin define un nuevo tipo de evento DOM que proporciona informacin sobre el estado de la batera de la unidad de alojamiento y de los dispositivos auxiliares asociadosMessaging APIEste API permitir acceder a las funcionalidades de mensajera electrnica, incluidos los SMS, MMS y correos electrnicos.Filesystem APIOrganizar un sistema de directorios y archivos como en las aplicaciones de escritorio. Se podrn crear, leer y eliminar directorios y archivos. Tambin se puede copiar, renombrar y duplicar los directorios y archivos de este sistema.

Otras APISNotifications WebUn API para visualizar las notificaciones sencillas que se expiden al usuario fuera de la pgina actual, como la llegada de nuevos correos electrnicos o informacin procedente de una agenda.Clipboard API and EventsEste API est destinado a la gestin del portapapeles, como copiar, cortar y pegar en las aplicaciones Web.DeviceOrientation APIEsta especificacin define diferentes tipos nuevos de eventos DOM, que ofrecen informacin sobre la orientacin fsica y el movimiento de un perifrico. Este API est dirigido claramente a los perifricos de Web Mvil.API VibrationPara utilizar el vibrador del mvil

Otras APISWebRTCPara permitir a las aplicaciones del navegador realizar llamadas de voz, chat de vdeo y uso compartido de archivos P2P sin plugins.Ambient Light EventsProporciona informacin de los niveles de luz del ambiente. Util para ajustar el brillo de la pantalla en funcin del nivel de luz del ambiente actual con el fin de ahorrar energa o proporcionar una mejor legibilidad.Proximity APIProporcionan informacin sobre la distancia entre un dispositivo y un objeto , tal como se mide por un sensor de proximidad. Ejms: Al colocar el telfono inteligente cerca del odo, la pantalla se apaga. Si un objeto (la mano en este caso) est cerca del dispositivo, el reproductor de audio se pausa. (til al conducir y escucha msica desde un servicio web)Speech Synthesis APIProporciona la capacidad de brindar informacin a los usuarios mediante la lectura de texto. Esto es especialmente til para las personas ciegas y, en general, las personas con discapacidad visual.Web Speech APIProporciona el reconocimiento de voz. Ejm: Usuarios pueden navegar por pginas o rellenar campos de formulario utilizando su voz. Los usuarios tambin pueden interactuar con una pgina mientras se conduce.

Otras APISCatlogo detallado de APIS Javascript HTML5http://dret.typepad.com/dretblog/html5-api-overview.html

Herramientas

Herramientas desarrollador Chrome/Firefox

Extensiones/Plugin: Web Developer, Firebug

Chrome DevToolshttp://discover-devtools.codeschool.com/

HerramientasWebflow.comBootstraphttp://foundation.zurb.com/https://webflow.com/Skeletonhttps://html5boilerplate.com/http://modernizr.com/Responsive Images

...Y mucho mshttp://designinstruct.com/roundups/html5-frameworks/

Ejemplos de Web Mviles

http://m.oldnavy.gap.com/http://m.bestbuy.com/http://www.audi.com/index.htmlhttp://4w.honda.com.pe/?autos=1http://www.jw.org/es/http://kubrick.be/about-us

Referenciashttp://updates.html5rocks.com/2014/12/fundamental-of-web-devhttps://developers.google.com/web/fundamentals/http://www.themobileplaybook.com/es-latam/http://bradfrost.github.io/this-is-responsive/http://webdesign.tutsplus.com/articles/designing-for-a-responsive-web--webdesign-3850