¡¡Android es cool!!

31
¡¡Android es muy cool!! Fernando Souto Gonzalez Correo: [email protected] Twitter: @ficiverson

Transcript of ¡¡Android es cool!!

Page 1: ¡¡Android es cool!!

¡¡Android es muy cool!!Fernando Souto GonzalezCorreo: [email protected]: @ficiverson

Page 2: ¡¡Android es cool!!

Quién soyExperimentando con Android desde 2009 (htc magic )

Fundador de Appeiros

Geek a tiempo parcial

“Mi android lleva Cyanogenmod nightly-20130408”

Page 3: ¡¡Android es cool!!

Hoy hablaremos de...

La revolución de Android 4.0

Patrones de diseño

Mola y no mola

DIY

Page 4: ¡¡Android es cool!!

La revolución de Android 4.0

Smartphone y tablet

Page 5: ¡¡Android es cool!!

Cambios Android 4.0

Desaparece el incómodo botón menú

El botón atrás se ve reforzado

Botón para abrir las apps recientes

Todo se resume en Action Bar

Page 6: ¡¡Android es cool!!

Ejemplo de interfaz

Action Bar: el cuadro de mando.

Spinner menu: cambios de vista.

Contenido (swipeable?)

Split action bar: otras acciones

Page 7: ¡¡Android es cool!!

¿Cómo hago para dar compatiblidad?

Page 8: ¡¡Android es cool!!

LibreríasNo vamos a reinventar la rueda

Aprovehcar al máximo la comunidad

Support package de Google

SerlockActionBar

http://actionbarsherlock.com/

ViewPagerIndicator

http://viewpagerindicator.com/

Page 9: ¡¡Android es cool!!

Pratones de diseñoHaz que tu app sea genial pero que sea

¡¡pure Android!!

Page 10: ¡¡Android es cool!!

Principios básicos

Haz una interfaz consistente con el ecosistema

Cuida los patrones de diseño móvil

Simplifica mi vida

Haz que sólo se vea lo que necesito

Haz tu app responsive

Page 11: ¡¡Android es cool!!

Cuida de tus hermanos pequeños

ldpi mdpi hdpi xhdpi

small

normal

large

xlarge

1.7% 1.0%

0.4% 11% 50.1% 25.1%

0.1% 2.4% 3.6%

4.6%

750 millones * 2% = 15 milones de dispositivos

Page 12: ¡¡Android es cool!!

Portrait vs Landscape Tú decides como quieres que se vea tu app

Dar soporte de giro no es rotar la interfaz

En general sólo hace falta Portrait

Page 13: ¡¡Android es cool!!

“El diseño no es sólo como se ve. El diseño es

como funciona”lo dijo un gurú

Page 14: ¡¡Android es cool!!

Usa los patrones

Action Bar

Multi-pane Layout

View pager - Scrollable Tabs

Quick Actions

Drawer

Un patrón de diseño es una solución general reusable para problemas recurrentes

Page 15: ¡¡Android es cool!!

Action Bar

Substituye a la fea barra gris

Persistente en la app

Hace que las acciones frecuentes sean accesibles

Aconsejable para búsquedas y menus

Incluye el icono y navegación

Librería: ActionBarSherlock

Page 16: ¡¡Android es cool!!

Multi-pane Layout (I)

Permite tener un único apk para smartphone y tablet

Representa una porción de una Activity

Conseguiremos código modular y reusable

Se contruye a través de bloques llamados Fragments

Page 17: ¡¡Android es cool!!

Multi-pane Layout (II)

Tiene ciclo de vida muy similar al de una Activity

Exiten varios tipos:

Dialog Fragment

List Fragment

Preference Fragment

Page 18: ¡¡Android es cool!!

Multi-pane Layout (yIII)<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="horizontal"    android:layout_width="match_parent"    android:layout_height="match_parent">    <fragment android:name="com.example.news.ArticleListFragment"            android:id="@+id/list"            android:layout_weight="1"            android:layout_width="0dp"            android:layout_height="match_parent" /></LinearLayout>

Page 19: ¡¡Android es cool!!

Scrollable tabs - View Pager

Permiten navegar horizontalmente entre las diferentes “pestañas” de la aplciación

Permiten tener sólo lo necesario en pantalla

Existe una librería llamada ViewPagerIndicator que nos facilita mucho la labor

Tiene compatibilidad total con HOLO tema de Android 4.0

Page 20: ¡¡Android es cool!!

Scrollable tabs - View Pager

Page 21: ¡¡Android es cool!!

Quick Actions

Menu contextual que no cubre la vista que lo lanza

Fácil acceso a funcionalidades contextuales extra del elemento

Útil también para ampliar información al estilo tooltip

Page 22: ¡¡Android es cool!!

DrawerEs un estándar desde que lo usó facebook

Aprovecha la pantalla al 100%

Es probablemente la manera más intuitiva de tener un menu

@Override el botón menú

https://github.com/jfeinstein10/

Page 23: ¡¡Android es cool!!

Recomendación

Page 24: ¡¡Android es cool!!

Mola y no molaGuía de buenas prácticas

Page 25: ¡¡Android es cool!!

Algunos consejos

Iconos grandes y espaciados

Utilizar dpi

Crear versiones de los recursos

Controlar el giro convenientemente

Usar iconos de otras plataformas

Usar Bottom tab bar

Mostrar el botón back en pantalla

Mostrar flechas para introducir contenido

Mola No Mola

Page 26: ¡¡Android es cool!!

Algunos consejos

Seguir los patrones de diseño

Manejar el ciclo de vida de la Activity

Usar iconos nativos

Trabajar con un diseñador ASAP(As Soon As Possible)

LLenar la app de modal windows

Letra pequeña

Override botón atrás

Reinventar la rueda

Utilizar siempre el mismo teclado

Mola No Mola

Page 27: ¡¡Android es cool!!

Mola

Page 28: ¡¡Android es cool!!

DIY(Do It Yourself)Vamos a construír la app que cambiará el mundo

Page 29: ¡¡Android es cool!!

Ecosistema (I)Más de 1.300.000 nuevos usuarios al día

Aportar valor al ecosistema

Pocos desarrolladores individuales utilizan los patrones de diseño de Android

Muchas apps con poca calidad

Margen de mejora muy grande

Page 30: ¡¡Android es cool!!

Ecosistema (yII)

Los usuarios perciben la baja calidad por eso no están dispuestos a pagar

La barrera del pago se romperá gracias a apps como Whatsapp

y tú, ¿Qué vas a hacer?

Page 31: ¡¡Android es cool!!

Gracias :)Si no hay preguntas, ahora ¡¡os toca a vosotros!!