×
×

Error de autenticación

Ha habido un problema a la hora de conectarse a la red social. Por favor intentalo de nuevo

Si el problema persiste, nos lo puedes decir AQUÍ

×
0
Posición en el Ranking
0
Usuarios seguidores
Sus noticias
RSS
  • Visitas
    30.729
  • Publicadas
    39
  • Puntos
    0
Veces compartidas
0
¡Consigue las insignias!
Trimestrales
Recientes
Visitas a noticias
21/06/2016

<?xml version="1.0"?> image

Uno de los principales inconvenientes con los que nos enfrentamos cuando realizamos una aplicación es que esta se vea bien en distintos dispositivos con distintas dimensiones de pantallas, densidades de píxeles, etc.

El Diseño adaptable o responsive design es un concepto que en el mundo web lleva ya triunfando varios años y es algo también deseable en cuanto hablamos de aplicaciones móviles.

En el Curso de Desarrollo de aplicaciones con App Inventor surgió una consulta de un estudiante que deseaba conseguir este efecto. Me pareció muy interesante y necesaria por lo que me gustaría compartir una posible solución con todos vosotros.

Independientemente de que estéis desarrollando una app de productividad o un videojuego es muy probable que queráis distribuirla y enfrentaros por tanto a la cuestión de qué dimensiones poner en cada elemento y cómo mostrarlos...

En la siguiente aplicación, que NO hace nada más que mostrar unos botones, pretendo ilustrar lo que sería la adaptación a la pantalla de estos componentes que deseo que mantengan sus proporciones.

La idea reside en mantener la relación de aspecto (ancho x alto) utilizando para ello unas simples cuentas matemáticas.

Calculos matemáticos image

Comentando que mi prioridad era adaptar la proporción de los botones y sabiendo que estos tenían una dimensión real de 300x75 (anchoXalto en píxeles) obtuve mediante una simple división que el "no deformarlos" consistía simplemente en conseguir que el ancho de los mismos siempre fuera 4 veces más que el alto. Por otro lado, considerando que independientemente del tamaño de la pantalla u orientación que tuviera, yo deseaba que su alto ocupase un 12% de la altura creé un procedimiento de nombre ajustaDimensionesBotones y otro denominado ajustaDimensiones que hiciera el trabajo de realizar esos cálculos y establecer las dimensiones acorde a los píxeles de la pantalla del usuario.

Comparto con vosotros el enlace a la aplicación en Gallery para que aprovechéis la idea en vuestras propias apps:

Esta es una forma de hacerlo pero no es la única. Podíamos haber conseguido algo similar basándonos en la posibilidad que tenemos en la nueva versión de App Inventor de establecer el tamaño de los botones en base a porcentajes... pero esto será motivo de otro artículo ;-)

Todas las opciones y más información en la referencia oficial

Happy inventing!

Jose Luis Núñez

@twajoseluis

Más recientes de Tuappinventor

Taller de Aplicaciones Móviles con MIT App Inventor en la Universidad de Pablo de Olavide

Taller de Aplicaciones Móviles con MIT App Inventor en la Universidad de Pablo de Olavide

El pasado viernes 2 de diciembre impartimos un Taller de Creación de Aplicaciones Móviles en el Máster de Profesorado de Enseñanza Secundaria y Bachillerato, FP y Enseñanza de Idiomas en la Universidad Pablo de Olavide de Sevilla 03/12/2016

Remember Me Nueva App creada con App Inventor 2

"Remember Me" La App de los jóvenes enamorados. ¿Que es Remember ME? Es una nueva App dedicada a jóvenes enamorados y no tan jóvenes y para todo tipo de parejas, heterosexuales, homosexuales, lesbianas... Demuestra día a día lo que te acuerdas de tu pareja 19/10/2016

Eventos y funciones de callback(retrollamada) en App Inventor

Eventos y funciones de callback(retrollamada) en App Inventor

Cuando definimos mediante los bloques el comportamiento de nuestra app con App Inventor le estamos diciendo al sistema cómo se comportará cuando reciba algún tipo de estímulo del usuario.. 23/08/2016

Comunidad Hispana de App Inventor. Canal Slack

Cuando empezamos a desarrollar aplicaciones muchas veces nos encontramos con dificultades que no sabemos como afrontar. Otras veces necesitamos una orientación o simplemente queremos compartir información con personas que tienen nuestras mismas inquietudes 14/08/2016

¡Nueva actualización del Curso de App Inventor!

¡Nueva actualización del Curso de App Inventor!

Coincidiendo con la nueva release de App Inventor que os anuncié vía Facebook(nb150b) he sacado una nueva actualización del Curso de Desarrollo de Aplicaciones Móviles con App Inventor 28/07/2016

Mostrando: 1-5 de 39