Unidad 5

Web Mvil

Actividad para evaluar el Saber de la

materia de Desarrollo de aplicaciones web

Ingeniera
En

Tecnologas de la Informacin

Elaborado por:
Jessica Guadalupe Rodrguez Rojas

Maestro:
Mara Azucena Vallejo Casas

Ramos Arizpe, Coahuila

1
SABER I. Introduccin a web mvil
Definir las tecnologas y patrones de diseo para web mvil.
WML
Al igual que los navegadores web usan HTML para la estructura de contenido, los
navegadores antiguos de dispositivos mviles usan WML. Est basado en XML (un
vocabulario de XML como XHTML y MathML). Un archivo WML puede tener varias
pginas o tarjetas contenidas en l.
Fue diseado para pantallas muy pequeas y dispositivos de baja resolucin. Los
navegadores WML antiguos no son compatibles con formatos de imagen ms
extendidos como GIF y JPEG. El formato de imagen correspondiente, WBMP, solo
admite un esquema de color en blanco y negro y es difcil crear WBMP ya que no
son fcilmente compatibles con las herramientas modernas de manipulacin de
imgenes.

HTML compacto

CHTML significa HTML compacto y es un subconjunto de las primeras versiones de

HTML de finales de los noventa. Se puede ver en navegadores de escritorio
normales.

El uso de HTML compacto ha quedado relegado a la historia, pero fue una

demostracin perfecta del pensamiento innovador de sus creadores al seguir la
filosofa de One Web.

Perfil mvil XHTML

XHTML-MP es un subconjunto del marcado XHTML, que es muy similar al HTML

normal.

Tienen ms restricciones que el estndar HTML. Esto evita que los dispositivos
mviles tengan que admitir grandes cantidades de cdigo y procesamiento que solo
se usan en una pequea cantidad de sitios.

XHTML

La idea detrs de esto es optimizar el cdigo en el navegador para que los

navegadores mviles ya menos poderosos no tengan que lidiar con elementos
incorrectamente anidados y otros errores comunes de marcado que pueden causar
errores y aumentar la cantidad de potencia de procesamiento necesaria para
procesar el Pgina web.

2
HTML5 Responsive

Permite disear aplicaciones web que se adaptan a las capacidades de

visualizacin de los dispositivos, reorganizando los elementos de pantalla para que
puedan ser accedidos desde cualquier dispositivo. Se desarrolla un nico sitio web
que es accedido a travs del navegador.

HTML5

A travs de esta tecnologa se disean sitios web especficos para dispositivos

mviles, redirigiendo las peticiones a una URL diferente a la del sitio web tradicional.
El sitio web mvil es diseado de acuerdo a las caractersticas de los dispositivos,
enfocando su construccin a la usabilidad de los contenidos, y los dispositivos
acceden mediante el navegador web.

Aplicacin web mvil con HTML5

Se empaqueta una aplicacin nativa para los Markets que se basa en la inclusin
un marco de navegacin que accede al sitio web mvil.

Aplicacin nativa con HTML5

Estas tecnologas permiten desarrollar una nica vez y distribuir la aplicacin para
los diferentes sistemas operativos (Android, iOS). Asimismo, ponen a disposicin
del desarrollador algunas de las caractersticas especficas de los dispositivos que
no eran alcanzables en las alternativas anteriores.

Aplicacin nativa

Las aplicaciones nativas se construyen empleando los propios entornos de

desarrollo facilitados por los fabricantes del sistema operativo (SDK de Android,
SDK de iOS) y se programa en el lenguaje especfico del dispositivo (Java,
Objective-C). Estas aplicaciones pueden ejecutarse en diferentes versiones del
sistema operativo.

3
PATRONES DE DISEO

Mobil patterns: Inspiracin mvil

Ofrece una coleccin de capturas de pantalla de aplicaciones mviles. Estn

divididas por sistema operativo (Android o iPhone). Tambin se pueden hacer
bsquedas por categoras como login, listas, mapas, galeras, navegacin.

Mockuphone: nos ayuda a visualizar el diseo web mvil que estamos

creando

Gracias a este recurso podemos visualizar cmo queda el boceto de nuestro diseo
mvil en diferentes dispositivos y desde distintos ngulos. Es una herramienta muy
til para presentar propuestas y para hacer modificaciones antes de crear el diseo
final.

Lovelyui: la ayuda para diseo mvil ms wiki

Lovely UI es un blog que ofrece una coleccin de elementos de interfaz para

dispositivos mviles y donde, adems, podemos subir nuestras propias capturas
para ayudar a otros. Se pueden elegir vistas de por categoras: botn, listas, mapas,
bsquedas.

Pttrns: inspiracin para webs mviles apta para todas las categorias

Otra interesante y completa galera de diseos de interfaz de usuario para mviles.

Se pueden buscar los diseos utilizando su amplio listado de categoras
(calendarios, mapas, listas). Estn clasificados por tipo de dispositivo (iPhone,
iPad, Android, Apple Watch) lo que facilita enormemente encontrar lo que
necesitamos. Adems, en muchos casos se puede ver la secuencia de pantallas, lo
que resulta muy til para comprobar el funcionamiento global de una app.

Inspired ui: encuentra interesantes recursos para web mvil

Esta fuente de recursos ofrece un amplio listado de ejemplos de app divididos en

tres categoras: iPhone, iPad y Android. Podemos buscar ejemplos de navegacin,
pop-ups, notificaciones Adems, se puede ver la secuencia de pantallas de
navegacin lo que nos permite tener una visin de conjunto del diseo.

Androidux: cul es la tendencia?

Como su propio nombre menciona, en esta web solo se muestran ejemplos para
sistema operativo Android. En su mayora corresponden a la versin Lollipop, con
lo que encontramos ejemplos muy actuales que nos ayudan a saber qu es
tendencia. Una utilidad muy prctica es el apartado Before/After, donde podemos
ver diversos ejemplos de rediseo de aplicaciones.

4
Ios patterns: ejemplos multiples para ios

Al contrario que en el caso anterior, en iOs Patterns solamente se recopilan

ejemplos de pantallas para aplicaciones que funcionan con sistema operativo iOs.
Como en el caso de otros recursos que os hemos presentado aqu, tambin ofrece
secuencias de pantallas, lo que es muy til para tener una visin global de la app.

SABER II. Cuestionarios Hojas de estilos para mvil.

1. Definir los elementos y tipos de hojas de estilo.
Media Query
Consisten en instrucciones CSS3, que contienen una o ms expresiones, orientadas
a un dispositivo que cumple unas ciertas normas. El resultado ser visible siempre
que se cumplan esos requisitos especficos. De esta forma, sobreescribiremos
todas las dems instrucciones antes declaradas. Puede tener las siguientes
estructuras:

CSS3
viene con interesantes novedades que permitirn hacer webs ms elaboradas y ms
dinmicas, con mayor separacin entre estilos y contenidos. Dar soporte a muchas
necesidades de las webs actuales, sin tener que recurrir a trucos de diseadores o
lenguajes de programacin. Las principales propiedades nuevas en CSS3 son:

Selectores de atributos y propiedades

Nuevas pseudo-clases
Formatos de color: colores HSL, colores HSLA, colores RGBA, Opacidad
Bordes: border-color, border-image, border-radius, box-shadow
Fondos: background-origin, background-clip, background-size, capas con
mltiples imgenes de fondo
Texto: text-shadow, text-overflow, rotura de palabras largas, Web Fonts,
creacin de mltiples columnas de texto
Modelo de caja bsico: overflow
Transiciones y transformaciones

5
HTML 5

A diferencia de otras versiones de HTML, los cambios en HTML5 comienzan

aadiendo semntica y accesibilidad implcita. Establece una serie de nuevos
elementos y atributos que reflejan el uso tpico de los sitios web modernos. Algunos
de ellos son tcnicamente similares a las etiquetas <div> y <span>, pero tienen un
significado semntico, como por ejemplo <nav> (bloque de navegacin del sitio
web) o <footer>. Otros elementos proporcionan nuevas funcionalidades a travs de
una interfaz estandarizada, como los elementos <audio> y <video>.

Algunos elementos de HTML 4.01 han quedado obsoletos, incluyendo elementos

puramente de presentacin, como <font> y <center>, cuyos efectos se deben de
realizar utilizando CSS. Tambin hay un renovado nfasis en la importancia del
scripting DOM para el comportamiento de la web.
http://www.jtech.ua.es/dadm/restringido/web/sesion01-apuntes.html#HTML+5

3. Definir uso y la aplicacin de las hojas de estilo en XML.

SABER III Cuestionario XHTML.
4. Describir la estructura e instrucciones del lenguaje de programacin
XHTML para dispositivos mviles.