NOMBRE DE LA ASIGNATURA: DISEÑO Y DESARROLLO DE APLICACIONES

MÓVILES
CICLO O ÁREA: 9º CUATRIMESTRE CLAVE: 0943

TEMAS Y SUBTEMAS:

UNIDAD II. PLANEACIÓN DE UNA APLICACIÓN

2.1 Conociendo los móviles - PP. 17

2.2 Arquitectura de la información - PP. 19

2.3 Usabilidad y accesibilidad de los móviles - PP. 20

2.4 Definición de la navegabilidad dentro de la Web App - PP. 28

2.5 Mejora progresiva de los modelos móviles - PP 30

5/6/2020 Web Design and Applications - W3C

Web Design and Applications

On this page → technology topics • news • upcoming events and talks

Web Design and Applications involve the standards for building and Rendering Web pages, including HTML, CSS, SVG, device APIs, and
other technologies for Web Applications (“WebApps”). This section also includes information on how to make pages accessible to people
with disabilities (WCAG), to internationalize them, and make them work on mobile devices.

HTML & CSS

HTML and CSS are the fundamental technologies for building Web pages: HTML (html and xhtml) for structure, CSS for style and
layout, including WebFonts. Find resources for good Web page design as well as helpful tools.

JavaScript Web APIs

Standard APIs for client-side Web Application development include those for Geolocation, XMLHttpRequest, and mobile widgets.
W3C standards for document models (the “DOM”) and technologies such as XBL allow content providers to create interactive
documents through scripting.

Graphics
W3C is the home of the widely deployed PNG raster format, SVG vector format, and the Canvas API. WebCGM is a more
specialized format used, for example, in the fields of automotive engineering, aeronautics.

Audio and Video

Some of the W3C formats that enable authoring audio and video presentations include HTML, SVG, and SMIL (for synchronization).
W3C is also working on a timed text format for captioning and other applications.

Accessibility
W3C’s Web Accessibility Initiative (WAI) has published Web Content Accessibility Guidelines (WCAG) to help authors create content
that is accessible to people with disabilities. WAI-ARIA gives authors more tools to create accessible Web Applications by providing
additional semantics about widgets and behaviors.

Internationalization
W3C has a mission to design technology that works across cultures and languages. W3C standards such as HTML and XML are
built on Unicode, for instance. In addition, W3C has published guidance for authors related to language tags bi-directional (bidi) text,
and more.

Mobile Web
W3C promotes “One Web” that is available on any device. W3C’s Mobile Web Best Practices help authors understand how to create
content that provides a reasonable experience on a wide variety of devices, contexts, and locations.

Privacy
The Web is a powerful tool for communications and transactions of all sorts. It is important to consider privacy and security
implications of the Web as part of technology design. Learn more about tracking and Web App security.

Math on the Web

Mathematics and formula are used on the Web for business reports, education materials and scientific research. W3C’s MathML
enables mathematics to be served, received, and processed on the World Wide Web, just as HTML has enabled this functionality for
other types of content.

https://www.w3.org/standards/webdesign/ 1/11
5/6/2020 Apple Design Resources - Apple Developer

Discover Design Develop Distribute Support Account

Apple Design Resources

Design apps quickly and accurately by using Sketch,
Photoshop, and XD templates, guides, and other resources.

SF Symbols
With over 1,500 configurable symbols, SF Symbols is Download SF Symbols 
October 29, 2019
designed to integrate seamlessly with San Francisco, the macOS 10.14.4 or later (55.4 MB)
system font for Apple platforms. SF Symbols comes in a

https://developer.apple.com/design/resources/ 1/6
5/6/2020 Apple Design Resources - Apple Developer

wide range of weights and scales, perfectly aligns to text

labels, and supports Dynamic Type and the Bold Text
accessibility feature. You can also design custom symbols
with the same design characteristics and accessibility
features.

View the SF Symbols design guidelines 

iOS
Apple Design Resources for iOS include Sketch, Photoshop, Add iOS Sketch Library 
February 14, 2020 (v33)
and Adobe XD templates, along with comprehensive UI iOS 13 (Requires Sketch 58 or greater)
resources that depict the full range of controls, views, and
glyphs available to developers using the iOS SDK. These Download for Sketch 
February 14, 2020
resources help you design apps that match the iOS design iOS 13 (58.6 MB)

language. Icon and glyph production files are preconfigured

Download for Photoshop 
to automate asset production using Sketch slices or February 14, 2020
Adobe Generator for Photoshop CC. Color swatches, iOS 13 (505.8 MB)

dynamic type tables, and fonts are also included.

Download for Adobe XD 
February 14, 2020
View the iOS design guidelines  iOS 13 (81.5 MB)

Download for Keynote 

May 25, 2020
iOS 13 (9.7 MB)

To download iOS device frames for use when marketing your

app, see App Store Marketing Guidelines.

macOS
Apple Design Resources for macOS include Sketch and Add macOS Sketch Library 
June 3, 2019
Photoshop templates for Touch Bar glyphs. macOS 10.15 (Requires Sketch 51 or greater)

View the macOS design guidelines  Download for Sketch 

June 3, 2019
macOS 10.15 (2.3 MB)

Download for Photoshop 

June 3, 2019
macOS 10.15 (3.9 MB)

Download for Adobe XD 

June 3, 2019
macOS 10.15 (3.2 MB)

https://developer.apple.com/design/resources/ 2/6
5/6/2020 Apple Design Resources - Apple Developer

watchOS
Apple Design Resources for watchOS include Sketch and Add watchOS Sketch Library 
February 19, 2019
Photoshop dynamic type guides, layout specifications, app watchOS 5 10.14 (Requires Sketch 51 or greater)
templates, Apple Watch bezels, and other UI materials. An
installer for SF Compact, the system typeface for watchOS, Download for Sketch 
February 19, 2019
is also included. watchOS 5 (3.9 MB)

View the watchOS design guidelines  Download for Photoshop 

February 19, 2019
watchOS 5 (39.7 MB)

Download for Adobe XD 

May 9, 2019
watchOS 5 (3.4 MB)

To download watchOS device frames for use when

marketing your app, see App Store Marketing Guidelines.

tvOS
Apple Design Resources for tvOS include icon and image Download for Sketch 
March 21, 2018 (60 KB)
templates, as well as tools for previewing layered image files
and the parallax effect.
Download for Photoshop 
October 25, 2018 (310 KB)
View the tvOS design guidelines 

To download tvOS product imagery for use when marketing

your app, see App Store Marketing Guidelines.

Parallax Previewer App for macOS

Use Parallax Previewer to preview layered Photoshop files, Download for macOS 
Parallax Previewer requires macOS 10.10.5 or later.
assemble individual image layers from PNG files and preview
the parallax effect, or preview layered images exported by
the Parallax Exporter plug-in.

View Parallax Previewer User Guide 

https://developer.apple.com/design/resources/ 3/6
5/6/2020 Apple Design Resources - Apple Developer

Parallax Exporter Plug-In for Adobe Photoshop

Use the Parallax Exporter plug-in to preview a layered image Download for macOS 
Requires Adobe Photoshop CC 2015.5 or later and macOS 10.9.0 or later.
while working in Adobe Photoshop.

Download for Windows 

Requires Adobe Photoshop CC 2015.5 or later and Microsoft Windows 7 with
Service Pack 1 or later.

Technologies

AirPlay

Use the AirPlay glyph when referring to AirPlay in setup or Download 

instructional text within your app. June 4, 2018 (199.8 KB)

View the AirPlay design guidelines 

ARKit

Use the AR glyph and AR badges to indicate and launch AR Download 

June 4, 2018 (176 KB)
experiences in your appʼs UI.

View the Augmented Reality design guidelines 

Human Interface Guidelines Overview Resources Videos What's New

CarPlay

The Apple Design Resources for CarPlay apps include Download for Sketch 
May 25, 2020 (1.1 MB)
Sketch and Photoshop type tables, as well as fonts.

View the CarPlay design guidelines  Download for Photoshop 

May 25, 2020 (211 KB)

HealthKit

Use the Apple Health icon in your app that supports Download 
HealthKit. April 17, 2020 (123.8 KB)

View the HealthKit design guidelines 

https://developer.apple.com/design/resources/ 4/6
5/6/2020 Apple Design Resources - Apple Developer

HomeKit

Use the HomeKit glyph when referring to HomeKit in setup Download 

or instructional text within your app. June 29, 2018 (236 KB)

View the HomeKit design guidelines 

Sign in with Apple

Use the provided Apple logos to design Sign in with Apple Download 
buttons that use left-aligned logos or that display a logo February 14, 2020 (137.9 KB)

only.

View the Sign in with Apple design guidelines 

Marketing Imagery
A variety of imagery is available for use when marketing your
app. Follow all usage guidelines.

iOS, macOS, tvOS, watchOS Music, iTunes, and Podcasts

App Store Badges Listen on Apple Music Badge

Apple Product Images Listen on Apple Music Lockup

Includes device frames.

Apple Music Icon

Apple News
Apple Podcasts Badge
Follow on Apple News Badges
iTunes Badge
Read it on Apple News Badges
Wallet
Apple Pay
Add to Apple Wallet Badge
Apple Pay Mark
Other

Licensing and Trademark Imagery

Includes device and technology icons.

 Design Resources

Discover Design Develop Distribute Support

macOS Human Interface Guidelines Xcode Developer Program Articles

iOS Resources Swift App Store Developer Forums

https://developer.apple.com/design/resources/ 5/6
5/6/2020 Apple Design Resources - Apple Developer
watchOS Videos Swift Playgrounds App Review Feedback & Bug Reporting

tvOS Apple Design Awards TestFlight Mac Software System Status

Safari and Web Fonts Documentation Apps for Business Contact Us

Games Accessibility Videos Safari Extensions

Account
Business Localization Downloads Marketing Resources
Certificates, Identifiers &
Education Accessories Trademark Licensing Profiles
WWDC App Store Connect

To view the latest developer news, visit News and Updates.

Copyright © 2020 Apple Inc. All rights reserved. Terms of Use Privacy Policy License Agreements

https://developer.apple.com/design/resources/ 6/6
5/6/2020 Human Interface Guidelines - Design - Apple Developer

Discover Design Develop Distribute Support Account

Human Interface Guidelines Overview Resources Videos What's New

Human Interface Guidelines

Get in-depth information and UI resources for designing great apps that integrate
seamlessly with Apple platforms.

macOS  iOS 

watchOS  tvOS 

Technologies

https://developer.apple.com/design/human-interface-guidelines/ 1/2
5/6/2020 Themes - iOS - Human Interface Guidelines - Apple Developer

iOS Design Themes

As an app designer, you have the opportunity to deliver an extraordinary product
that rises to the top of the App Store charts. To do so, you'll need to meet high
expectations for quality and functionality.

Three primary themes differentiate iOS from other platforms:

Clarity. Throughout the system, text is legible at every size, icons are precise
and lucid, adornments are subtle and appropriate, and a sharpened focus on
functionality motivates the design. Negative space, color, fonts, graphics, and
interface elements subtly highlight important content and convey interactivity.

Deference. Fluid motion and a crisp, beautiful interface help people understand
and interact with content while never competing with it. Content typically fills the
entire screen, while translucency and blurring often hint at more. Minimal use of
bezels, gradients, and drop shadows keep the interface light and airy, while
ensuring that content is paramount.
Human Interface Guidelines Overview Resources Videos What's New
Depth. Distinct visual layers and realistic motion convey hierarchy, impart vitality,
and facilitate understanding. Touch and discoverability heighten delight and
enable access to functionality and additional content without losing context.
Transitions provide a sense of depth as you navigate through content.

https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/ 1/3
5/6/2020 Themes - iOS - Human Interface Guidelines - Apple Developer

Design Principles
To maximize impact and reach, keep the following principles in mind as you imagine
your appʼs identity.

Aesthetic Integrity Consistency

Aesthetic integrity represents how well an A consistent app implements familiar
appʼs appearance and behavior integrate standards and paradigms by using
with its function. For example, an app system-provided interface elements,
that helps people perform a serious task well-known icons, standard text styles,
can keep them focused by using subtle, and uniform terminology. The app
unobtrusive graphics, standard controls, incorporates features and behaviors in
and predictable behaviors. On the other ways people expect.
hand, an immersive app, such as a game,
can deliver a captivating appearance that
promises fun and excitement, while
encouraging discovery.

Direct Manipulation Feedback

The direct manipulation of onscreen Feedback acknowledges actions and
content engages people and facilitates shows results to keep people informed.
understanding. Users experience direct The built-in iOS apps provide perceptible
manipulation when they rotate the device feedback in response to every user
or use gestures to affect onscreen action. Interactive elements are
content. Through direct manipulation, highlighted briefly when tapped, progress
they can see the immediate, visible indicators communicate the status of
results of their actions. long-running operations, and animation
and sound help clarify the results of
actions.

Metaphors User Control

People learn more quickly when an appʼs Throughout iOS, people—not apps—are
virtual objects and actions are metaphors in control. An app can suggest a course
for familiar experiences—whether rooted of action or warn about dangerous
in the real or digital world. Metaphors consequences, but itʼs usually a mistake
work well in iOS because people for the app to take over the decision-
physically interact with the screen. They making. The best apps find the correct
move views out of the way to expose balance between enabling users and
content beneath. They drag and swipe avoiding unwanted outcomes. An app can
content. They toggle switches, move make people feel like theyʼre in control by
sliders, and scroll through picker values. keeping interactive elements familiar and
predictable, confirming destructive

https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/ 2/3
5/6/2020 Themes - iOS - Human Interface Guidelines - Apple Developer

They even flick through pages of books actions, and making it easy to cancel
and magazines. operations, even when theyʼre already
underway.

 Design Human Interface Guidelines iOS Themes

Discover Design Develop Distribute Support

macOS Human Interface Guidelines Xcode Developer Program Articles

iOS Resources Swift App Store Developer Forums

watchOS Videos Swift Playgrounds App Review Feedback & Bug Reporting

tvOS Apple Design Awards TestFlight Mac Software System Status

Safari and Web Fonts Documentation Apps for Business Contact Us

Games Accessibility Videos Safari Extensions

Account
Business Localization Downloads Marketing Resources
Certificates, Identifiers &
Education Accessories Trademark Licensing Profiles
WWDC App Store Connect

To view the latest developer news, visit News and Updates.

Copyright © 2020 Apple Inc. All rights reserved. Terms of Use Privacy Policy License Agreements

https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/ 3/3
5/6/2020 Descripción general de la compatibilidad de pantalla

Descripción general de la compatibilidad de pantalla

Android se ejecuta en diferentes dispositivos con diferentes tamaños y densidades de píxeles de pantalla. El
sistema realiza escalamiento y modificación de tamaño básicos para adaptar tu interfaz de usuario a
diferentes pantallas, pero aún hay trabajo por hacer a fin de garantizar que tu IU se adapte correctamente a
cada tipo de pantalla.

En esta página, se proporciona una descripción general de estos temas y las funciones disponibles en Android
a fin de ayudarte a adaptar tu app de forma adecuada. Si quieres acceder a instrucciones más específicas
sobre la manera de compilar tu app para esas variaciones de pantalla, consulta estas páginas:

Cómo admitir diferentes tamaños de pantalla

 (https://developer.android.com/training/multiscreen/screensizes?hl=es-419)

Cómo admitir diferentes densidades de píxeles

 (https://developer.android.com/training/multiscreen/screendensities?hl=es-419)

Tamaños de pantalla

https://developer.android.com/guide/practices/screens_support?hl=es-419 1/5
5/6/2020 Descripción general de la compatibilidad de pantalla

El tamaño de la pantalla es el espacio visible proporcionado por la IU de tu app. El tamaño de la pantalla, como
tu app lo reconoce, no es el tamaño real de la pantalla del dispositivo; considera la orientación de la pantalla,
las decoraciones del sistema (por ejemplo, la barra de navegación) y los cambios en la configuración de las
ventanas (por ejemplo, la habilitación del modo de ventanas múltiples
 (https://developer.android.com/guide/topics/ui/multi-window?hl=es-419) por parte del usuario).

Diseños flexibles

De forma predeterminada, Android modifica el tamaño del diseño de tu app para ajustarlo a la pantalla actual.
Para garantizar que el tamaño de tu diseño se modifique bien incluso para las variaciones de tamaños de
pantalla más pequeñas, debes implementar tu diseño pensando en la flexibilidad. El principio central que debes
seguir es evitar codificar la posición y el tamaño de los componentes de tu IU. En su lugar, permite ampliar los
tamaños de las vistas y especificar posiciones para estas en relación con la vista principal o secundaria, de
modo que el orden deseado y los tamaños relativos se mantengan sin modificaciones a medida que se
expande el diseño.

Más información sobre diseños flexibles

 (https://developer.android.com/training/multiscreen/screensizes?hl=es-419#flexible-layout).

Diseños alternativos

Un diseño alternativo es muy importante, pero también debes crear diferentes diseños que optimicen la
experiencia del usuario para el espacio disponible en distintos dispositivos, como teléfonos y tablets. Android
te permite proporcionar archivos de diseño alternativos que el sistema aplica durante el tiempo de ejecución en
función del tamaño de pantalla actual del dispositivo.

Figura 1: La misma app usa un diseño diferente para distintos tamaños de pantalla

Aprende a crear diseños alternativos

 (https://developer.android.com/training/multiscreen/screensizes?hl=es-419#alternative-layouts).

https://developer.android.com/guide/practices/screens_support?hl=es-419 2/5
5/6/2020 Descripción general de la compatibilidad de pantalla

Imágenes expandibles

Debido a que tu diseño debe ampliarse para ajustarse al tamaño actual de la pantalla, lo mismo debe ocurrir
con los mapas de bits que adjuntas a cualquiera de tus vistas de diseño. No obstante, expandir un mapa de
bits común en direcciones arbitrarias puede generar alteraciones extrañas en el escalamiento e imágenes
distorsionadas.

Para resolver esto, Android admite mapas de bits 9-patch en los que se especifican pequeñas regiones de
píxeles que son expandibles (el resto de la imagen se mantiene sin escalar).

Más información sobre mapas de bits 9-patch

 (https://developer.android.com/training/multiscreen/screensizes?hl=es-419#TaskUse9Patch).

Densidades de píxeles

La densidad de píxeles es la cantidad de píxeles presentes en un área física de la pantalla y se conoce como
ppp (puntos por pulgada). Esto se diferencia de la resolución, que es la cantidad total de píxeles en una
pantalla.

Figura 2: Exageración de dos dispositivos del mismo tamaño y densidades de píxeles diferentes

Independencia de la densidad

Tu app alcanza la "independencia de la densidad" si preserva el tamaño físico (desde la perspectiva del
usuario) del diseño de la IU cuando se muestra en pantallas con densidades de píxeles diferentes (como se
muestra en la figura 2). Mantener la independencia de la densidad es importante porque, sin ella, un elemento
de la IU (como un botón) podría parecer más grande en una pantalla de baja densidad y más pequeño en una
de alta densidad (ya que, cuando los píxeles son más grandes, como se muestra en la figura 2, una pequeña
cantidad de estos puede tener un alto impacto).

https://developer.android.com/guide/practices/screens_support?hl=es-419 3/5
5/6/2020 Descripción general de la compatibilidad de pantalla

El sistema Android te ayuda a alcanzar la independencia de la densidad proporcionando los píxeles

independientes de la densidad (dp o dip) como la unidad de medición que debes usar en lugar de los píxeles
(px).

Obtén más información sobre los píxeles independientes de la densidad

 (https://developer.android.com/training/multiscreen/screendensities?hl=es-419#TaskUseDP).

Mapas de bits alternativos

A fin de garantizar que tus imágenes se muestren de la mejor manera posible en todas las pantallas, debes
proporcionar mapas de bits alternativos para la densidad de cada pantalla. Por ejemplo, si tu app proporciona
mapas de bits solo para pantallas de densidad media (mdpi), Android les aplica ajuste de escalamiento cuando
se muestran en una pantalla de alta densidad, de modo que la imagen ocupe el mismo espacio físico en la
pantalla. Esto puede provocar alteraciones de escalamiento visibles en los mapas de bits. Por lo tanto, tu app
debe incluir mapas de bits alternativos a mayores resoluciones.

Más información sobre cómo proporcionar mapas de bits alternativos

 (https://developer.android.com/training/multiscreen/screendensities?hl=es-419#TaskProvideAltBmp).

Gráficos vectoriales

Para tipos de imágenes simples (normalmente, íconos), puedes evitar crear imágenes independientes para
cada densidad usando gráficos vectoriales. Debido a que los gráficos vectoriales definen la ilustración con
trazados de líneas geométricas en lugar de píxeles, se pueden diseñar de cualquier tamaño sin alteraciones de
escalamiento.

Obtén más información sobre el uso de gráficos vectoriales

 (https://developer.android.com/training/multiscreen/screendensities?hl=es-419#use_vector_graphics_instead).

Wear OS, TV, Auto y Sistema operativo Chrome

Las recomendaciones anteriores se aplican a todos los factores de forma de Android, pero, si quieres compilar
una app para dispositivos con Wear OS, Android TV, Android Auto o el Sistema operativo Chrome, debes
trabajar un poco más.

Cada uno de esos dispositivos tiene su modelo propio de interacción con el usuario y tu app debe incorporar
esos modelos. En algunos casos, como el de Wear OS, debes volver a concebir la experiencia del usuario de tu
app y compilar una app específica para el dispositivo en cuestión. Para admitir dispositivos con el
Sistema operativo Chrome (como Google Pixelbook), puede ser necesario que apliques solo unas simples
modificaciones a tu app existente para que admita la interacción de teclado y mouse, y una pantalla mucho
más grande.

Si deseas admitir estos dispositivos, consulta las siguientes guías para desarrolladores:

https://developer.android.com/guide/practices/screens_support?hl=es-419 4/5
5/6/2020 Descripción general de la compatibilidad de pantalla

Compilar apps para Wear OS (https://developer.android.com/training/building-wearables?hl=es-419)

Compilar apps para Android TV (https://developer.android.com/training/tv?hl=es-419)

Compilar apps para Android Auto (https://developer.android.com/training/auto?hl=es-419)

Compilar apps para el Sistema operativo Chrome (https://developer.android.com/chrome-os/intro?hl=es-419)

Incompatibilidad de pantalla

Si bien el marco de trabajo y las herramientas de Android te proporcionan todo lo que necesitas a fin de que
una app esté disponible para todas las configuraciones de pantalla, es posible que igual decidas que tu app no
esté disponible en algunas configuraciones de pantalla por algún tipo de incompatibilidad.

En ese caso, puedes declarar que tu app admite solo pantallas específicas
 (https://developer.android.com/guide/practices/screens-distribution?hl=es-419).

Anterior

 Descripción general  (https://developer.android.com/guide/practices/compatibility?hl=es-419)

Siguiente
Cómo brindar compatibilidad con diferentes tamaños de pantalla 
 (https://developer.android.com/training/multiscreen/screensizes?hl=es-419)

Content and code samples on this page are subject to the licenses described in the Content License
 (https://developer.android.com/license?hl=es-419). Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2019-12-27.

https://developer.android.com/guide/practices/screens_support?hl=es-419 5/5