Archivo de la etiqueta: Hola mundo

Tutorial Material Design en Android #5

Crear un RecyclerView para Android

Hola lectores, ha pasado un tiempo desde que publique la última entrega del tutorial de Material Design en Android en donde aprendimos a crear un Navigation Drawer, continuamos con los tutoriales y en esta ocasión les enseñare a crear un RecyclerView.

Pero antes, ¿Que es un RecyclerView?, seguramente muchos lo abran visto ya en acción, este tipo de componente es cada vez más y más popular y ha venido remplazando a las antiguas ListViews, se trata de un componente que nos permite crear listas de contenedores que a su vez pueden tener dentro otros componentes (TextView, EditText, ImageView, etc.). El RecyclerView tiene la particularidad de haber sido diseñado con la eficiencia en mente, como su nombre lo indica los objetos que son visible en la pantalla son los que se dibujan en pantalla y una vez que desaparecen (el usuario hace scroll) estos remplazan su contenido (se reciclan) para mostrar otro tipo de información.

Imaginemos una lista de 100 contactos, en la pantalla de nuestro teléfono solo podemos renderizar 5 contactos a la vez, en lugar de renderizar los 100 desde un inicio solo vamos remplazando la información en las filas de nuestro RecyclerView conforme lo vamos necesitando, cabe decir que este es un proceso automático.

list_mail

Pero el RecyclerView es mucho más que eso, a diferencia de su predecesor con este nuevo componente podemos crear listas con diferentes tipos de layouts

20150415193645985

images

EAF-MD3

Retomamos nuestro proyecto, como les comentaba en la publicación pasada he subido el código realizado hasta el momento en el siguiente repositorio https://github.com/Alevsk/Material-design-en-Android.

Lo primero que vamos a hacer sera agregar la dependencia a nuestro proyecto en el archivo de gradle, abrimos el archivo build.gradle que se encuentra en MaterialdesignApp (proyecto)> app > build.gradle y en la parte de abajo en el apartado de dependencias agregaremos
compile ‘com.android.support:recyclerview-v7:+’ quedando de la siguiente forma

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.2.0'
    compile 'com.android.support:recyclerview-v7:22.2.0'
}

Sincronizamos gradle para descargar las dependencias (o también podemos dar re build al proyecto) y una vez tenemos la dependencia vamos a comenzar a utilizar el componente, vamos a nuestro archivo fragment_navigation_drawer.xml (aquí vamos a crear el menú), si no recuerdan donde está el archivo se encuentra en MaterialdesignApp > app > src > main > res > layout > fragment_navigation_drawer.xml

Por el momento tenemos esto, un simple texto ¿bastante simple cierto?

Capture

drawer_navigation

Al final de nuestro tutorial vamos aprender a crear algo como esto :), pues manos a la obra, o mejor dicho al codigo XD

16170261501_9b7ce86ca7_b

En nuestro archivo XML (fragment_navigation_drawer.xml) vamos a crear nuestro RecyclerView con el siguiente código, si se fijan elimine el TextView que teníamos porque ya no lo necesitamos.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/grayPanel"
    tools:context="com.alevsk.materialdesignapp.fragments.NavigationDrawerFragment">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/drawerList"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </android.support.v7.widget.RecyclerView>

</RelativeLayout>

Una vez añadido el componente en nuestra vista xml vamos a nuestro controller NavigationDrawerFragment.java (MaterialdesignApp > app > src > main > java > com.alevsk.materialdesignapp > fragments > NavigationDrawerFragment.java) y definimos una nueva variable tipo RecyclerView como propiedad de la clase

public class NavigationDrawerFragment extends Fragment {

    private RecyclerView mRecyclerView;
    private ActionBarDrawerToggle mDrawerToggle;
    private DrawerLayout mDrawerLayout;
    private Toolbar mToolbar;
    ....
    ..

Una vez creado nuestro RecyclerView vamos a agregar la referencia hacia su objeto xml, para eso en el método onCreateView, vamos a modificar un poco el código, actualmente tenemos algo como esto

Capture

Lo remplazamos por esto, sencillo, a estas alturas del tutorial ya deberían saber que estamos obteniendo el elemento mediante el id (layout.findViewById(R.id.drawerList)) que definimos, estamos haciendo un cast (RecyclerView) y lo estamos asignando a la variable mRecyclerView, por ultimo retornamos el layout (View) que es con el que trabajara la aplicacion.

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View layout = inflater.inflate(R.layout.fragment_navigation_drawer, container, false);
        mRecyclerView = (RecyclerView) layout.findViewById(R.id.drawerList);
        return layout;
    }

Pero no tan rápido, antes de correr nuestra aplicación nos falta crear un par de componentes más, un Adapter (un manejador lógico para los elementos de nuestra lista), ViewHolders y un modelo (representación de un elemento en la lista)

Pero antes, para tener todo más organizado, vamos a crear dos nuevos Package en nuestro proyecto, uno llamado adapters y otro models

Capture

Vamos a comenzar a pensar en MVC (Model View Controller), si bien no existe un estándar totalmente definido para utilizar MVC en Android podemos tomar el concepto y definir lo siguiente:

  • Model: Qué vamos a renderizar en la aplicación (objetos principales utilizados en los controladores)
  • View: Como lo vamos a renderizar (xml)
  • Controller: Eventos del ciclo de vida de las pantallas, manejar las entradas de usuario, definición de componentes de Android como el RecyclerView, etc.

Creando un Modelo en Android

Teniendo lo anterior como premisa al momento de definir nuestro menú lo que necesitamos es una imagen que sirva como icono y un texto que sirva como título, procedemos a crear nuestra clase Menu.java en el Package models que definimos previamente

Quicktip: en nuestra clase primero definimos las propiedades de nuestro objeto (int icon, String title) y después para generar nuestros gets y sets usamos el shortcut “alt + insert” lo que desplegara un menú en donde elegimos getters and settters y marcamos todas las propiedades (variables) de nuestra clase.

Capture

public class Menu {
    private int icon;
    private String title;

    public int getIcon() {
        return icon;
    }

    public void setIcon(int icon) {
        this.icon = icon;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }
}

Creando un Adapter personalizado para el RecyclerView

Ahora en el Package adapters creamos una clase llamada MenuAdapter que extenderá o heredara sus metodos de RecyclerView.Adapter, el código inicialmente queda así.

package com.alevsk.materialdesignapp.adapters;

import android.support.v7.widget.RecyclerView;
import android.view.ViewGroup;

/**
 * Created by Alevskey on 23/01/2016.
 */
public class MenuAdapter extends RecyclerView.Adapter {
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return null;
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {

    }

    @Override
    public int getItemCount() {
        return 0;
    }
}

Creando un ViewHolder personalizado

Ademas de eso también vamos a crear un ViewHolder, podemos definir la clase como una subclase de nuestro MenuAdapter, como siempre aquí tienen más documentación respecto a lo que vamos a utilizar http://developer.android.com/reference/android/support/v7/widget/RecyclerView.ViewHolder.html

Quedando el codigo final de la siguiente forma

Capture

Continuamos, Si leyeron la documentación acerca del comportamiento de los Adapter sabrán que por default manejan el tipo de objeto ViewHolder, pero nosotros acabamos de definir uno llamado MenuViewHolder que será el encargado de “contener” elementos como TextView, ImageView y todo lo que necesitemos para personalizar nuestro elemento de menú, sabiendo eso necesitamos realizar algunos cambios en nuestra clase, para empezar en la definición de nuestra clase vamos a definir (valga la redundancia) explícitamente que queremos utilizar MenuViewHolder

public class MenuAdapter extends RecyclerView.Adapter<MenuAdapter.MenuViewHolder> {
...
..
.

Ahora tenemos un montón de errores en la clase y esto es porque tenemos que modificar el tipo de objeto que retorna la función onCreateViewHolder de RecyclerView.ViewHolder a MenuViewHolder, también deberemos definir otra función llamada OnBindViewHolder, una vez realizados los cambios tenemos lo siguiente.

public class MenuAdapter extends RecyclerView.Adapter<MenuAdapter.MenuViewHolder> {
    @Override
    public MenuViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return null;
    }

    @Override
    public void onBindViewHolder(MenuViewHolder holder, int position) {

    }

    @Override
    public int getItemCount() {
        return 0;
    }

    class MenuViewHolder extends RecyclerView.ViewHolder {

        public MenuViewHolder(View itemView) {
            super(itemView);
        }
    }
}

Ahora vamos a crear la vista xml de nuestro item de Menu, en la carpeta layout creamos un archivo llamado viewholder_menu.xml que contendrá dos cosas, un ImageView y un TextView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/listIcon"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:padding="8dp"
        android:layout_gravity="center_vertical"
        android:src="@drawable/dummy" />

    <TextView
        android:id="@+id/listText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:layout_gravity="center_vertical"
        android:text="@string/dummy_text" />

</LinearLayout>

La imagen @drawable/dummy es una imagen de ejemplo que yo utilice, ustedes pueden usar la que más les guste.

Regresamos a nuestro MenuAdapter.java y vamos a comenzar a utilizar los métodos que creamos anteriormente, primero vamos a crear un constructor para nuestro adapter, el cual recibirá un Context que nos servirá para hacer el binding de los elementos xml en nuestro ViewHolder, y una lista (de objetos Menu) que será la información con la cual llenaremos el RecyclerView después de eso vamos a realizar ese binding en el método onCreateView, tambien modificamos la función getItemCount para retornar el tamaño actual de la lista.

    private LayoutInflater mInflater;
    private List<Menu> data = Collections.emptyList();

    public MenuAdapter(Context context, List<Menu> data) {
        mInflater = LayoutInflater.from(context);
        this.data = data;
    }

    @Override
    public MenuViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = mInflater.inflate(R.layout.viewholder_menu, parent, false);
        MenuViewHolder holder = new MenuViewHolder(view);
        return holder;
    }

    @Override
    public int getItemCount() {
        return data.size();
    }

Ahora en la subclase MenuViewHolder vamos a definir el ImageView y TextView

    class MenuViewHolder extends RecyclerView.ViewHolder {
        ImageView icon;
        TextView title;
        public MenuViewHolder(View itemView) {
            super(itemView);
            title = (TextView) itemView.findViewById(R.id.listText);
            icon = (ImageView) itemView.findViewById(R.id.listIcon);
        }
    }

Ahora en el método onBindViewHolder es donde se realiza la acción de asignar los valores a las variables del MenuHolder (imágenes, textos, etc).

    public void onBindViewHolder(MenuViewHolder holder, int position) {
        holder.title.setText(data.get(position).getTitle());
        holder.icon.setImageResource(data.get(position).getIcon());
    }

Lo que hace nuestro método es recibir un holder, y una posición int, entonces con esa información de nuestra Lista de objetos Menu extraemos el titulo y el id de recurso de imagen que contiene el objeto Menu en la posición indicada de la lista, por ultimo hacemos set de esa información al TextView e ImageView del holder.

Venga ya falta poco, casi terminamos!!!

Me di cuenta que aún no hemos definido el tema de la app, lo he estado pensando y me gustaría enfocarla a un pequeño catálogo de anime que consuma la api opensource de hummingbird, desarrollando un catálogo les poder enseñar a utilizar muchos más componentes que el ecosistema de Android nos ofrece, así como a consumir Apis e interactuar con las mismas, algo muy común en la industria de desarrollo de aplicaciones hoy en día.

Teniendo claro lo anterior las opciones de nuestro menú serán:

  • Buscar (buscador de anime)
  • Lo que estoy viendo (anime que el usuario ve actualmente)
  • Para más tarde (anime que el usuario tiene en la categoría de plan-to-watch)
  • Completado (series que el usuario ha terminado de ver)
  • Mi cuenta (información del usuario y anime favorito)

De ahí hay 3 opciones que solo pueden ser utilizados una vez el usuario haya sido autenticado en nuestra aplicación, pero eso lo dejaremos para más tarde, por ahora nos centraremos en desarrollar el menú.

Primero vamos a nuestro archivo strings.xml que se encuentra en MaterialdesignApp > app > src > main > res > values > strings.xml y ahi vamos a crear una lista de items que contendrá los elementos del menú

    <string-array name="menu_list">
        <item>Buscar</item>
        <item>Lo que estoy viendo</item>
        <item>Para mas tarde</item>
        <item>Mi cuenta</item>
    </string-array>

Buscamos en Internet algún set de iconos gratuitos y los incluimos a los recursos de nuestro proyecto en la carpeta res > drawable pues los necesitamos para el menu

    <array name="menu_icons">
        <item>@drawable/ic_search</item>
        <item>@drawable/ic_eye</item>
        <item>@drawable/ic_ticket</item>
        <item>@drawable/ic_account</item>
    </array>

Cargando los datos al RecyclerView

En nuestro archivo NavigationDrawerFragment.java vamos a crear una nueva función llamada getData(), esta función será la encargada de leer la información estática que definimos en nuestro archivo strings.xml

    public List<Menu> getData() {
        List<Menu> menu = new ArrayList<Menu>();
        TypedArray icons = getResources().obtainTypedArray(R.array.menu_icons);
        String[] labels = getResources().getStringArray(R.array.menu_list);

        for(int i = 0; i < labels.length; i++) {
            Menu item = new Menu();
            item.setTitle(labels[i]);
            item.setIcon(icons.getResourceId(i,-1));
            menu.add(item);
        }

        return menu;
    }

Lo que estamos haciendo en nuestra función es leer los títulos e imágenes (ids de recurso) y con ello estamos instanciando objetos Menu que a su vez agregamos a una lista que será devuelta por el método.

Finalmente en nuestra función onCreateView vamos a crear una nueva instancia de nuestro Adapter personalizado y se lo vamos a pasar al RecyclerView, también definiremos un objeto llamado LayoutManager para nuestro RecyclerView (asegúrate de definir el Adapter como una propiedad de tu clase)

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View layout = inflater.inflate(R.layout.fragment_navigation_drawer, container, false);
        mRecyclerView = (RecyclerView) layout.findViewById(R.id.drawerList);
        mAdapter = new MenuAdapter(getActivity(),getData());
        mRecyclerView.setAdapter(mAdapter);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));

        return layout;
    }

Corremos la aplicación en nuestro emulador o teléfono físico, abrimos el NavigationDrawer y vemos nuestro menú 🙂

recyclerview

Eso es todo por ahora lectores, en el siguiente tutorial aprenderemos a aplicar color a los iconos utilizando filtros y a definir las acciones una vez que el usuario da Tap en un elemento del menú. Recuerden que el código de lo trabajado durante este tutorial lo pueden encontrar en el repositorio https://github.com/Alevsk/Material-design-en-Android
salu2

BurpSuite para desarrolladores

BurpSuite es una herramienta muy popular en el mundo de la seguridad informática, se trata de una completa suite para hacer auditoria y explotación de aplicaciones web, entre sus muchas funcionalidades se encuentra el proxy, el escáner de vulnerabilidades y un repetidor de peticiones, entre muchas otras mas.

Una versión gratuita puede ser descargada del siguiente enlace
http://portswigger.net/burp/download.html.

¿Y ahora que? ¿Que tiene que ver una herramienta de seguridad informática en un trabajo de desarrollo de software?

Lo mejor de ambos mundos

Muchas veces cuando estamos desarrollando aplicaciones móviles complejas, es decir que requieren de algún mecanismo de comunicación con servicios web podemos llegar a retrasarnos y tener problemas debido a que no tenemos una manera clara y eficiente de saber que es lo que esta enviando y recibiendo en la app, el debugger de Android Studio siempre funciona y es de bastante utilidad pero no es una herramienta especializada para interceptar paquetes de red.

Lo que vamos a hacer es, una vez que hayamos instalado BurpSuit, ya sea para Windows, Linux o Mac, lo ejecutamos, como el ejecutable es un .jar requerimos Java para correrlo por lo que si no lo tenemos deberíamos también descargarlo e instalarlo.

burp_2

Ya en BurpSuite la opción que nos interesa es la de proxy, así que hacemos clic en la pestaña y después nos vamos a opciones, tendremos una interfaz similar a la siguiente.

burp_1

Por default BurpSuite solo esta escuchando conexiones de localhost (127.0.0.1) por lo que para interceptar peticiones de otros usuarios de nuestra red debemos agregar un nuevo listener, hacemos clic en el botón que dice Add y seleccionamos All interfaces, finalmente escribimos un puerto diferente al 8080 asignado por default al primer listener, por ejemplo 8085.

burp_3

Damos clic en el botón de OK y en la pestaña de Alerts, en los Logs BurpSuite nos indicara que el nuevo listener ya esta corriendo.

burp_4

Lo siguiente será obtener la dirección de ip asignada a nuestra maquina, eso depende de que sistema operativo estemos usando y no es difícil encontrarla, utilicen Google para investigar mas al respecto.

burp_5

Tomamos esa dirección y la guardamos, 192.168.43.204, ya que mas tarde la necesitaremos.

Ahora en nuestro dispositivo, para este ejemplo yo utilizo Android, pero hoy en dia cualquier Smartphone, ya sea Android, iOS, Windows Phone o BlackBerry tienen una opción para configurar proxy, en ese apartado debemos colocar la ip de nuestro servidor proxy junto con el puerto en el que escucha.

burp_8

Esperamos un par de segundos y comenzamos a interactuar con nuestra aplicación en desarrollo, si todo quedo bien configurado deberíamos comenzar a interceptar las peticiones de nuestra aplicación en BurpSuite.

burp_6

Ahora podemos ver los las cabeceras y los parámetros que estamos enviando y revisar que es lo que esta fallando en nuestra aplicación de manera mas cómoda.

burp_7

Para interceptar comunicaciones seguras con SSL en BurpSuite hacen falta un par de pasos de configuración extra, pero nada del otro mundo, se los dejo de tarea o tal vez publique un tutorial al respecto en un post futuro.

Nota: No olvides quitar la configuración del proxy en tu Smartphone una vez que termines las pruebas, ya que si apagas tu computadora te quedaras sin acceso a internet.

@Chopapp para compartir código fuente

Después de un largo descanso …. Chop es una curiosa herramienta desarrollada por ZURB que te permite compartir snippets (trozos de código fuente) y recibir retro alimentación, si quieren saber por que esta app es bastante interesante les recomiendo seguir leyendo :).

chop

La idea es bastante simple y divertida, en el caso de querer mostrar nuestro codigo a alguna otra persona (similar a otros servicios como copypastecode o pastebin) y recibir algun tipo de retroalimentación tan solo tenemos que copiarlo en el formulario, elegir el lenguaje de programación adecuado y usar el botón de Chop It!, ejemplo:

chop_example1

Una vez hecho esto la aplicación nos pedirá un nombre de usuario y a continuación nos dará un link con el cual nuestros amigos podrán ver y opinar sobre nuestro código :), lo mas interesante de esta aplicación a diferencia de muchas otras que existen en el mercado es que nos permite realizar comentarios sobre el código línea por línea y no un comentario general, desde mi punto de vista es una forma bastante interesante de innovar y mejorar respecto a servicios ya existentes. El resultado final es algo como esto:

chop_example_2

Si quieren mantenerse informados sobre el desarrollo de esta aplicación pueden seguir a @chopapp

Crear app universal para iPhone y iPad

En este sencillo tutorial aprenderás a crear una app universal desde cero, las apps universales son aquellas que funcionan tanto en iPhone / iPod como en iPad.

Requisitos:

  • Sistema Operativo: Mac OSX 10.7.4
  • IDE: Xcode 4.2.1
  • Conocimientos de Objective-c: básicos, recomiendo leer esta guia de apple para tener nociones básicas sobre conceptos del lenguaje y la estructura de las apps Your First iOS App

Ok, lo primero que tenemos que hacer es abrir Xcode y crear un nuevo proyecto, nos vamos a File > New > New Project (como se muestra en la siguiente imagen)

Nos aparecerá un menú en donde se nos pedirá elegir el tipo de aplicación que deseamos crear, elegimos Empty Application

Aquí el proceso es bastante intuitivo, damos clic en siguiente y nos pedira un nombre para nuestra aplicación, yo le he puesto universal, en la opcion que dice Device Family asegurate de seleccionar Universal y de desmarcar las 3 opciones de abajo ya que en esta tutorial no las necesitamos.

Nos preguntara en que lugar deseamos guardar el proyecto y listo, ahora si podemos comenzar a escribir código :).

Por default tenemos 2 archivo creados, AppDelegate.h y AppDelegate.m, lo primero que tenemos que hacer es abrir AppDelegate.h y añadir una nueva propiedad, un UiViewController, lo hacemos con el siguiente código.

@property (strong, nonatomic) UIViewController * viewController;

Ten en cuenta que el código anterior lo debes de agregar entre @interface y @end quedando como resultado

@interface AppDelegate : UIResponder <UIApplicationDelegate>

@property (strong, nonatomic) UIWindow *window;
@property (strong, nonatomic) UIViewController * viewController;

@end

Después tenemos que sintetizar los métodos accesores de nuestra propiedad, para ello vamos al AppDelegate.m y agregamos el siguiente código debajo de

@synthesize window = _window;

El resultado final es

@synthesize window = _window;
@synthesize viewController = _viewController;

Una vez hecho lo anterior ahora tenemos que crear una sub clase de UiViewController, para eso podemos dar clic derecho sobre nuestro proyecto y seleccionar New File o también en el menú de arriba nos vamos a File > New File, Xcode nos abrirá una ventana en donde tenemos que elegir del lado izquierdo (en la categoría de IOS
) Cocoa Touch y seleccionar UiViewController subClass tal y como se muestra en la siguiente imagen.

Después en la siguiente pantalla ponemos un nombre a la clase, yo he puesto ScreenViewController, nos aseguramos que sea una sub clase de UIViewController y por ultimo desmarcamos la opción de With XIB for user interface. Mas adelante verán el por que.

Clic en Next después Save y listo. Ahora tenemos 2 nuevos archivos ScreenViewController.h y ScreenViewController.m, estos son los controladores de las vistas (las apps están basadas en MVC), ahora tenemos que crear las View, para eso de igual manera vamos a File > New File; del lado derecho en la categoria de iOS elegimos User Interface y seleccionamos View, como se muestra en la siguiente imagen.

En la siguiente pantalla seleccionamos iPhone en la opción de Device Family, damos clic en Next, y pondremos como nombre de archivo el siguiente ScreenViewController_iPhone (el nombre tiene que ir así por convención), finalmente clic en Create.

Repetimos este ultimo paso pero ahora seleccionando iPad en la opción de Device Family y ponemos como nombre correspondiente al archivo ScreenViewController_iPad. Al final deberías tener los siguientes archivos en tu proyecto.

Ahora tenemos que indicar el controlador de las vistas que acabamos de crear (los archivo XIB), para hacer eso damos clic primero en ScreenViewController_iPhone, seleccionamos en la categoría de los Placeholders el File’s Owner y del lado derecho en el identity inspector nos vamos a la categoría de Custom Class y ponemos como clase ScreenViewController

Después nos vamos al Connection inspector (la ultima opción de los Inspector) y “linkeamos” la view haciendo clic en el circulito de la derecha y arrastrando la línea azul (en la categoría de Outlets) con el view que esta en la categoría de Objects :), si lo hiciste bien debes de tener algo como lo siguiente.

Hacemos exactamente lo mismo pero ahora con el archivo ScreenViewController_iPad

Ahora para poner algo de contenido de ejemplo creamos un Label centrado en cada una de las Views que contenga como texto el nombre del dispositivo desde donde se esta ejecutando la app, Hacemos clic en ScreenViewController_iPhone, elegimos Label de la lista de objetos (esquina inferior derecha) lo arrastramos al centro de la pantalla del dispositivo, damos doble clic y escribimos iPhone, exactamente lo mismo con ScreenViewController_iPad pero escribimos iPad en el objeto Label. Debemos de tener algo como esto.

Listo hemos terminado con estos 2 archivos, ahora tenemos que regresar al AppDelegate.m y agregar una condicional donde se evalué el tipo de dispositivo desde donde estamos ejecutando la app y en base a eso cargar el XIB correspondiente, localizamos la siguiente clase en el archivo

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];
    // Override point for customization after application launch.
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
    return YES;
}

Y agregamos las siguientes líneas justo debajo del comentario de // Override … bla bla bla

    if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone) {
        _viewController = [[UIViewController alloc] initWithNibName:@"ScreenViewController_iPhone" bundle:nil];
    } else {
        _viewController = [[UIViewController alloc] initWithNibName:@"ScreenViewController_iPad" bundle:nil];
    }
    self.window.rootViewController = self.viewController;

Al final nuestra función debe de verse así.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];
    // Override point for customization after application launch.
    if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone) {
        _viewController = [[[UIViewController alloc] initWithNibName:@"ScreenViewController_iPhone" bundle:nil] autorelease];
    } else {
        _viewController = [[[UIViewController alloc] initWithNibName:@"ScreenViewController_iPad" bundle:nil] autorelease];
    }
    self.window.rootViewController = self.viewController;
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
    return YES;
}

Por ultimo corremos la app ya sea en los simuladores o en dispositivos físicos para ver los resultados :)!

Y listo, espero haya quedado claro una de las tantas técnicas que existen para programar apps universales en iOS, esta vez solo utilizamos un Label que muestra un texto diferente dependiendo de si ejecutamos la aplicación en un iPhone o en un iPad, pero las posibilidades son infinitas y las ideas a desarrollar tan complejas como nosotros queramos :), incluso podrías programar una app que mostrara una interfaz diferente para cada día de la semana :p. Como siempre lo he dicho cualquier duda escríbanla en los comentarios y yo la responderé.

salu2

Puedes encontrar más guías y trucos sobre iPhone 5 en: www.iPhone5ya.com

Comenzando a desarrollar apps para Windows Phone 7

Aquí el texto…Windows Phone 7 es el nuevo sistema operativo para dispositivos móviles que Microsoft ha desarrollado, en este post aprenderás a montar las herramientas que conformaran tu entorno de trabajo para que puedas comenzar a desarrollar fantásticas aplicaciones para esta plataforma, los pasos son bastante sencillos.

La SDK de Windows Phone nos incluye:

  • Microsoft Visual Studio 2010 Express for Windows Phone
  • Windows Phone Emulator
  • Windows Phone SDK 7.1 Assemblies
  • Silverlight 4 SDK and DRT
  • Windows Phone SDK 7.1 Extensions for XNA Game Studio 4.0
  • Microsoft Expression Blend SDK for Windows Phone 7
  • Microsoft Expression Blend SDK for Windows Phone OS 7.1
  • WCF Data Services Client for Window Phone
  • Microsoft Advertising SDK for Windows Phone

Una vez que hayas instalado todo lo necesario podrás comenzar a desarrollar apps para Windows Phone 7 (lo cual sera explicado y detallado en los siguientes tutoriales)