Your SlideShare is downloading. ×
0
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Consejos principales para Android UI Cómo alcanzar la magia en los tablets
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Consejos principales para Android UI Cómo alcanzar la magia en los tablets

2,033

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,033
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
51
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Suzanne AlexandraEvangelista de la tecnología AndroidMotorola MobilityConsejos principales para Android UICómo alcanzar la magia en los tabletsMOTOROLA y el logotipo estilizado son marcas de fábrica o marcas registradas de Motorola Trademark Holdings, LLC.Todas las demás marcas comerciales son propiedad de sus respectivos dueños. © 2011 Motorola Mobility, Inc. Todoslos derechos reservados.
  • 2. Brasil - #appsum11brArgentina - #appsum11ar México - #appsum11m     developer.motorola.com   Título de presentación Versión 1.0 24.02.09
  • 3. Estamos en un espacio completamente nuevo.Traiga abordo los elementos apropiados.
  • 4. Alcance la magia01 MANTENGA EL DETALLE ERGONÓMICO02 INVOLUCRE LOS SENTIDOS03 USE UNA ESTÉTICA FABULOSA04 HÁGALO EVIDENTE
  • 5. Alcance la magia01 MANTENGA EL DETALLE ERGONÓMICO Diseños horizontales Notificaciones enriquecidas Tamaños de texto02 INVOLUCRE LOS SENTIDOS Imágenes Palpabilidad03 USE UNA ESTÉTICA FABULOSA Temas, temas, temas04 HÁGALO EVIDENTE Barras de acción Fragmentos Función arrastrar y colocar
  • 6. Haga de cuenta que sus usuariosusan la orientación horizontal
  • 7. Diseños horizontalesLos diseños horizontales por lo general requieren una distribuciónespecializada, en cualquier dispositivo.
  • 8. Diseños horizontalesMire lo que sucede en el tablet
  • 9. Diseños horizontales¿Qué salió mal?alignParentLeft alignParentRight Nada en el centro Imagen pequeña
  • 10. Diseños horizontalesDiseño para el tamaño de la pantalla Y la orientación
  • 11. Diseños horizontalesEl diseño ganador centerHorizontal="true" <RelativeLayout>layout_alignLeft layout_alignRight
  • 12. Diseños horizontalesOptimice la experiencia del usuario para pantallas panorámicas
  • 13. Diseños horizontalesEvite el efecto océano extra ancho
  • 14. Tamaños de textoEl texto pequeño (como las imágenes) no funcionará
  • 15. Tamaños de textoMejores prácticas Escala con sp 18 sp y más Asegúrese de que los verdaderos usuarios puedan leer el texto
  • 16. Notificaciones enriquecidasUn beneficio clave de Android sobre las demás plataformasmóviles Su notificación de aplicación
  • 17. Notificaciones enriquecidasEjemplos de cuándo usar notificaciones enriquecidasCuando llega contenido nuevo Cuando se reproducen medios
  • 18. Notificaciones enriquecidasEn Honeycomb, dos pantallas de notificaciónBandeja Emergente
  • 19. Notificaciones enriquecidasUse el formato Notification.BuilderNotification.Builder builder = new Notification.Builder( this );Como AlertDialog.Builder
  • 20. Notificaciones enriquecidasCree la notificación que desee builder.setSmallIcon(R.drawable.icon) .setContentTitle(título) .setContentText(texto) .setContentIntent(pintent) // Un intento pendiente .setLargeIcon(myBitmap) ;
  • 21. Notificaciones enriquecidasCodificación visual setLargeIcon() setSmallIcon() setContentTitle() setContentText()
  • 22. Notificaciones enriquecidasAlcance la magia. Cree un botón interactivo RemoteViews layout = new RemoteViews( getPackageName(), R.layout.notification); layout.setTextViewText(R.id.notification_title, getString(R.string.app_name)); layout.setOnClickPendingIntent (R.id.notification_button, getDialogPendingIntent("Tapped") ); builder.setContent(layout);
  • 23. Notificaciones enriquecidasEstrategia para compatibilidad con versiones anterioresprivate static boolean isHoneycomb = android.os.Build.VERSION.SDK_INT > 10;if (!isHoneycomb) // inicie un intento de actividadelse // inicie otra
  • 24. Alcance la magia01 MANTENGA EL DETALLE ERGONÓMICO02 INVOLUCRE LOS SENTIDOS Imágenes Palpabilidad03 USE UNA ESTÉTICA FABULOSA04 HÁGALO EVIDENTE
  • 25. La vista triunfa sobre los demás sentidos. Brain Rules Dr. John Medina
  • 26. ImágenesExpréselo visualmente, hágalo atractivo
  • 27. ImágenesLas pantallas para dispositivos distintos requieren tamaños de imágenesdiferentes
  • 28. ImágenesSeleccione una estrategia de imagen  ¿Una serie de imágenes y deje que Android gradúeautomáticamente el tamaño?  ¿Personalizar una serie de recursos según los distintos tamaños ydensidades?  ¿Captar la densidad más usada?  ¿Recuperar dinámicamente imágenes en el tiempo de ejecución y lagraduación para el dispositivo?
  • 29. ImágenesMemoria frente a tamaño de archivo: un ejemplo Ampliación automática 32 MB de memoria 324 KB de tamaño Conjuntos de imágenes 23 MB de memoria 728 KB de tamaño
  • 30. La ampliación automática consume memoria. Las configuraciones de imágenespersonalizadas aumentan el tamaño del archivo.
  • 31. ImágenesImágenes grandes de prueba en el tiempo de ejecución paraahorrar memoria BitmapFactory.Options options = new BitmapFactory.Options(); options.inJustDecodeBounds = false; options.inSampleSize = 4; options.inScaled = true; options.inTargetDensity = screenDensity; Bitmap bitmap = BitmapFactory.decodeResource( getResources(), R.drawable.clover, options);
  • 32. ImágenesDónde colocar las imágenes y los iconos Predeterminado, graduado automáticamente Iconos de alta resolución Graduadas previamente Hacer coincidir para la densidad estilo con 3.0
  • 33. PalpabilidadLas tabletas están diseñadas para el tacto
  • 34. PalpabilidadAsegúrese de poder pulsar todos los objetivos
  • 35. PalpabilidadAsegúrese de poder pulsar todos los objetivos public View getView( int position, View convertView, ViewGroup parent) { ImageView i = new ImageView(mContext); i.setImageResource(mImageIds[position]); i.setLayoutParams(new Gallery.LayoutParams( 300, 200)); i.setScaleType(ImageView.ScaleType.FIT_XY); i.setBackgroundResource( mGalleryItemBackground); return i; }
  • 36. PalpabilidadObserve cómo se transfieren las imágenes a través de losdispositivos 160 dpi - medio 16:9 relación de aspecto
  • 37. Alcance la magia01 MANTENGA EL DETALLE ERGONÓMICO02 INVOLUCRE LOS SENTIDOS03 USE UNA ESTÉTICA FABULOSA Temas, temas, temas04 HÁGALO EVIDENTE
  • 38. TemasEncuádrelos en el dispositivo o destáquelos
  • 39. TemasHoneycomb tiene dos temas holográficos nuevos Theme.Holo Theme.Holo.Light
  • 40. TemasPero requieren aceleración del hardware <application android:icon="@drawable/icon" android:label="@string/app_name" android:hardwareAccelerated="true" > Sólo disponibles con Honeycomb
  • 41. TemasPero usted podría apuntar a varias versiones Android <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="11" />
  • 42. TemasCree varios temas para las versiones Android <style … parent= "@android:style/Theme"> <style … parent= "@android:style/Theme.Holo">
  • 43. Asegúrese de que todas las llamadas de API que usafuncionen con todas las versiones de API que soporta.
  • 44. Alcance la magia01 MANTENGA EL DETALLE ERGONÓMICO02 INVOLUCRE LOS SENTIDOS03 USE UNA ESTÉTICA FABULOSA04 HÁGALO EVIDENTE Barras de acción Fragmentos Función arrastrar y soltar
  • 45. Barra de acción Apronte sus características de aplicación Diálogo deIcono de cuadroaplicación desplegable Vista de Elementos de acción acción
  • 46. Barras de acciónCódigos visuales <item android:showAsAction="true" … > onCreateOptionsMenu()android:actionLayout onOptionsItemSelected()android:actionViewClass
  • 47. Barras de acciónPaso 1. Apuntar a API nivel 11 <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="11" />
  • 48. Barras de acciónPaso 2. Colocar los elementos del menú en la barra de acción <item android:id="@+id/favorite" android:title="@string/favorite" android:icon="@drawable/ic_menu_star" android:showAsAction="ifRoom" />
  • 49. Barras de acciónPaso 3. Manejar la selección de opciones de la manera habitual@Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.favorite: // do something return true; …}
  • 50. Barras de acciónEn XOOM y smartphone
  • 51. Barras de acciónAlcance la magia, dé estilo<style name="MyTheme" parent="android:style/Theme.Holo" > <item name="android:actionBarStyle"> @style/ActionBar</item></style><style name="ActionBar" parent="android:style/Widget.Holo.ActionBar"> <item name="android:background"> @drawable/my_background</item></style>
  • 52. Barras de acciónAlcance la magia, agregue un cuadro de diálogo Use AlertDialog.Builder Cree un cuadro de diálogo personalizado en XML Use un DialogFragment
  • 53. Barras de acciónPero ejecute los elementos Honeycomb sólo en Honeycombprivate static boolean isHoneycomb = android.os.Build.VERSION.SDK_INT > 10;if (isHoneycomb) {// cree el cuadro de diálogo personalizado aquí}
  • 54. FragmentosÚselos para mostrar más contendido y características, más fluidamente
  • 55. FragmentosPuede usar varios diseños Los más comunes
  • 56. FragmentosLa distribución del fragmento inicial es el misma a lo largo de lasorientaciones
  • 57. FragmentosPero puede mostrar u ocultar vistas
  • 58. FragmentosEn su Activity principal, encuentre sus fragmentosFragment gridFrag = getFragmentManager(). findFragmentById(R.id.photogrid);Fragment photoFrag = getFragmentManager(). findFragmentById(R.id.the_frag);
  • 59. FragmentosVerifique la orientación y ajuste las vistas private boolean photoInline = false; photoInline = (photoFrag != null && getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE); if (photoInline) { // haga algo } else if ( photoFrag != null ) { getView().setVisibility(View.GONE); }
  • 60. FragmentosMejor todavía Transición animada
  • 61. FragmentosAlcance la magia: anime la pantalla del fragmento – paso 1<set> <objectAnimator xmlns:android= http://schemas.android.com/apk/res/android android:propertyName="x" android:valueType="floatType" android:valueFrom="-1280" android:valueTo="0" android:duration="500" /></set>
  • 62. FragmentosAlcance la magia: anime la pantalla del fragmento – paso 2FragmentTransaction ft = getFragmentManager().beginTransaction();ft.setCustomAnimations( R.anim.slide_in_left, R.anim.slide_out_right );DetailsFragment newFrag =DetailsFragment.newInstance();ft.replace(R.id.details_fragment_container, newFrag, "detailFragment");ft.commit();
  • 63. Arrastre y solteCrea participación física inmediata, directa
  • 64. Arrastre y solteTiene varios estados de eventos ACTION_DRAG_STARTED ACTION_DRAG_ENTERED
  • 65. Arrastre y solteTiene varios estados de eventos ACTION_DROP ACTION_DRAG_ENDED
  • 66. Arrastre y solteObserve cómo funciona a lo largo de los fragmentos
  • 67. Arrastre y soltePara comenzar, llame a startDrag()  Seleccionar un gesto que inicie un arrastre: ¿clic largo?  Crear un oyente: OnLongClickListener()  Crear objetos de ClipData y DragShadowBuilder  Iniciar el arrastrepublic boolean onLongClick(View v) { ClipData data = ClipData.newPlainText("foo","bar"); DragShadowBuilder shadowBuilder = new DragShadowBuilder(v); v.startDrag(data, shadowBuilder, v, 0); return true;}
  • 68. Arrastre y solteLuego continúe con un listener y onDrag()  Crear un listener de arrastre (implementar OnDragListener)  Sobrecargue onDrag y maneje los eventosclass BoxDragListener implements OnDragListener { public boolean onDrag(View self, DragEvent event) { if (event.getAction() == DragEvent.ACTION_DRAG_STARTED) { // haga algo } // maneje otros eventos}
  • 69. ¿Desea  formular  alguna   pregunta? Brasil - #appsum11br Argentina - #appsum11ar México - #appsum11mx community.developer.motorola.com
  • 70. gracias
  • 71. LEGALINFORMACIÓN DE LA LICENCIACon excepción de dónde se especifique, el código de fuente de muestra escrito por Motorola Mobility Inc. y a usted suministrado tiene la licencia que a continuación se describe.Copyright © 2010-2011, Motorola, Inc. Todos los derechos reservados, salvo que se indique explícitamente lo contrario.Se permite la redistribución y el uso en formas de fuente y binaria, con o sin modificación, siempre y cuando se cumpla con las siguientes condiciones:Las redistribuciones del código fuente deben conservar el aviso de derechos de autor arriba mencionado, la presente lista de condiciones y el siguiente descargo de responsabilidad.Las redistribuciones en forma binaria deben reproducir el aviso de derechos de autor arriba mencionado, la presente lista de condiciones y el siguiente descargo de responsabilidad en la documentación y/u otros materiales suministrados con la distribución.Ni el nombre de Motorola, Inc. ni los nombres de sus distribuidores pueden usarse para avalar o promover productos que deriven de este software sin previa autorización específica por escrito.EL PRESENTE SOFTWARE SE SUMINISTRA POR LOS TITULARES DE LOS DERECHOS DE AUTOR Y CONTRIBUYENTES EN EL ESTADO "EN QUE SE ENCUENTRA" Y SE RENUNCIA A TODA RESPONSABILIDAD DE GARANTÍA IMPLÍCITA O EXPLÍCITA, A TÍTULO ENUNCIATIVO, LAS GARANTÍAS IMPLÍCITAS DE COMERCIALIZACIÓN Y DE APTITUD PARA UN PROPÓSITO PARTICULAR. EN NINGÚN CASO PODRÁ EL TITULAR DE LOS DERECHOS DE AUTOR NI LOS CONTRIBUYENTES SER RESPONSABLE POR NINGÚN DAÑO Y PERJUICIO DIRECTO, INDIRECTO, INCIDENTAL, ESPECIAL, PUNITIVO, O CONSECUENCIAL (A TÍTULO ENUNCIATIVO DE ABASTECIMIENTO DE BIENES O SERVICIOS DE SUSTITUCIÓN; PÉRDIDA DE USO, DATOS O GANANCIAS O INTERRUPCIÓN DE ACTIVIDADES) INDEPENDIENTEMENTE DE SU ORIGEN Y DE TODA TEORÍA DE RESPONSABILIDAD, YA SEA EN EL CONTRATO, RESPONSABILIDAD ESTRICTA O POR LESIÓN JURÍDICA (INCLUSO NEGLIGENCIA O DE OTRO MODO) QUE SURJAN DE ALGUNA MANERA DEL USO DE ESTE SOFTWARE, INCLUSO SI SE ADVIRTIÓ DE LA POSIBILIDAD DE DICHO DAÑO.Otro código fuente mostrado en la presentación podrá ofrecerse bajo otras licencias.Apache 2.0Copyright © 2010, Proyecto Código Abierto Android. Todos los derechos reservados, salvo indicación expresa en contrario.Con licencia de Apache, Versión 2.0 (la "Licencia"); no podrá usar este archivo, salvo que cumpla con lo que establece la licencia. Puede obtener una copia de la licencia en http://www.apache.org/licenses/LICENSE-2.0.Salvo que lo exija la legislación vigente o se preste conformidad por escrito, el software se distribuye bajo licencia, "EN EL ESTADO EN QUE SE ENCUENTRA" SIN GARANTÍAS DE NINGÚN TIPO, explícitas o implícitas. Consulte la Licencia para ver los permisos y las limitaciones que rigen para la Licencia según el idioma específico.Creative Commons 3.0 Attribution LicensePartes de esta presentación se reprodujeron de un trabajo creado y compartido con Google (http://code.google.com/policies.html) y se usaron conforme a los términos descritos en Creative Commons 3.0 Attribution License (http://creativecommons.org/licenses/by/3.0/).

×