domingo, 31 de marzo de 2013

Diseño web adaptativo

El diseño web adaptativo o responsive web design consiste en un conjunto de técnicas de programación y diseño web basadas principalmente en HTML5 y CSS3, enfocadas a que un sitio web se vea correctamente en cualquier tipo de pantalla. La idea, que no es nueva pues data de 2008, es crear un diseño que haga que la web se vea bien tanto en pantallas de ordenador como en dispositivos móviles y tabletas. La popularización de smartphones y tabletas, que compiten con el PC tradicional por ser los dispositivos más utilizados para navegar por Internet, ha hecho que el diseño web adaptativo cada vez sea más importante.

Diseño web adaptativo

La ventaja primordial del diseño web adaptativo es que con una sola versión en HTML y CSS se cubren todas las resoluciones de pantalla, ya que el sitio web estará optimizado para todo tipo de dispositivos. Además nos evitamos crear una versión de la web específica para cada tipo de dispositivo o navegador. Esto mejora la experiencia de usuario.

¿Como hacer un sitio web con diseño adaptativo?

Si no se tiene experiencia previa lo mejor es usar alguno de los muchos frameworks existentes como Bootstrap, del que ya hablamos aquí. En concreto Bootstrap tiene una sección entera dedicada al responsive design.

Las líneas principales del diseño adaptativo son:

  1. Anchos proporcionales: Consiste en abandonar de una vez los anchos fijos en nuestros diseños y sustituirlos por anchos proporcionales basados en porcentajes.
    #container {
        width: 100%;
    }
    #container.element {
        width: 33%;
        float: left;
    }
    
    De esta forma todos los elementos se ajustarán automáticamente a la pantalla, independientemente de que veamos la web a través de un PC Full-HD de 24" o de un pequeño smartphone de gama media. Esto es válido tanto para contenedores y elementos como para tamaños de fuentes.

  2. Ajustar en función del medio: Consiste en usar los media queries, una técnica de CSS3 que nos permite aplicar un conjunto de estilos CSS dependiendo de las características del "medio".
    @media screen and (max-width: 480px) {
        /* Aquí van las reglas CSS necesarias */
    }
    
    En el ejemplo anterior las reglas CSS se aplicarán sólo a las pantallas con una anchura menor de 480px. Es decir un smartphone de gama media-baja. Por si no queda claro, el media query es (max-width: 480px) y se aplica siempre a un media type (en este caso screen, la pantalla).

Para profundizar más en el diseño web adaptativo recomiendo encarecidamente los artículos de Emenia Introducción al Diseño Web Adaptable y Diseño web adaptativo: mejores prácticas.

Enlaces de interés

lunes, 25 de marzo de 2013

¿Cual es el mejor smartphone?

Recuerdo que hace 10 años tenía una PDA con Windows Mobile y un teléfono Nokia con Symbian. La PDA tenía muchas más funciones que el teléfono, pero la usaba sobre todo como navegador GPS debido a la dificultad de sincronizar sus agendas y la pesadez de cargar siempre con dos dispositivos. Ya en aquella época soñaba con un terminal que lo tuviera todo, pero los fabricantes no estaban por la labor. Los smartphones no existían.

Qtek S200

La tecnología fue evolucionando y fabricantes como HTC (bajo la marca Qtek) sacaron los primeros intentos de teléfonos inteligentes basados en el sistema operativo Windows Mobile como el Qtek S200. Desgraciadamente ese sistema operativo era muy limitado y el conjunto no funcionaba demasiado bien. La propia Nokia también lo intentó evolucionando su sistema operativo Symbian, pero sin llegar nunca a conseguir resultados significativos. Los más parecido a un smarphone que había era el sistema Blackberry de la canadiense RIM, una serie de teléfonos muy populares por los ejecutivos de la época que incorporaban manejo de emails y algunas funciones avanzadas pero que no eran verdaderos teléfonos inteligente. Entonces llegó el 2007, Apple sacó el iPhone original y todo cambió. El iPhone fue el primer verdadero smartphone. La pega del iPhone era la filosofía de Apple como marca: sistemas cerrados, control absoluto de software, ausencia de Flash, etc.

iPhone original

Pocos meses después Google presentó Android un sistema operativo basado en Linux, diseñado principalmente para teléfonos inteligentes con pantalla táctil. La filosofía de Android era totalmente opuesta a la de Apple: software libre, gratuito, personalizable, etc. Los primero smartphones con sistema Android aparecieron en 2008 de la mano de HTC. De repente todo el mundo quería un smartphone

HTC Desire

Con el tiempo Android se popularizó, llegaron Nexus y los Samsung Galaxy, Apple fue sacando nuevos modelos de iPhone, Microsoft sacó Windows 7 Mobile (y más tarde windows 8 Mobile), Nokia se olvidó de Symbian, aliándose con Microsoft para sacar móviles con windows y hasta Blackberry se modernizó. Actualmente se calcula que hay más de 1.000 millones de smartphones en el mundo. Los hay de todos los precios, colores, formas y tamaños. Desde teléfonos de gama baja con características que ni soñábamos hace 10 años hasta verdaderas bestias con procesadores de 8 núcleos y pantallas full-hd. Pero... ¿Cual es el mejor smartphone actualmente?

¿Cual es el mejor smartphone actualmente?

Una pregunta harto difícil de responder. Unos te dirán que el iPhone 5; otros que el HTC One, el Samsung Galaxy S4 o el Sony Xperia Z; algunos dirán que el Blackberry Z10; e incluso habrá quien diga que el Nokia Lumia 920 (hay gente para todo).

Samsung Galaxy S3

Lo cierto es que todos ellos son buenos terminales y elegir uno u otro depende de los gustos de cada cual. Por mi parte soy partidario del sistema Android, tanto por filosofía de marca como por funcionamiento. Estoy muy contento con mi Galaxy S3 y no tengo intención de cambiarlo por ahora pero, ¿Qué características debería tener un smartphone? En mi opinión las siguientes:

Tamaño pantalla Entre 4,5" y 5". Prefiero los móviles grandes, pero no excesivos. El Galaxy Note II y demás terminales de 5,5" o más me parecen demasiado exagerados. El teléfono tiene que caber en el bolsillo del pantalón sin hacerse incómodo.
Resolución pantalla Me conformo con HD (1.280x720). No le veo grandes ventajas a la resolución Full-HD (1920x1080) que tan de moda está en los últimos tiempos. En un tablet sí que veo justificada una resolución Full-HD.
Tipo de panel ¡Que se vea bien! La verdad es que me da igual si es LCD, OLED, AMOLED, IPS, Retina o lo que sea. ¿Alguien entiende de verdad las diferencias entre ellos?
Memoria RAM Mínimo 1Gb para que soporte más de una aplicación abierta sin ralentizar el sistema. Se nota especialmente si tienes muchos widgets. Este año parece que la moda es poner 2Gb a la gama alta. Bienvenidos sean, aunque no creo que suponga una diferencia significativa respecto a 1Gb.
Memoria interna Cuanta más mejor... siempre que no encarezca demasiado el precio. Para un uso normal un tamaño de 8Gb está bien... siempre que el terminal tenga ranura de expansión para tarjeta SD. En la gama alta los fabricantes suelen sacar varias versiones del mismo smartphone con diferentes tamaños de memoria interna (como los Nexus 4 de 8Gb y 16Gb), pero la diferencia de precio entre versiones no suele justificar el gasto.
Memoria externa ¡IMPRESCINDIBLE! Esto parece que no acaban de entenderlo algunos fabricantes. Una MicroSD de 32Gb clase 10 cuesta alrededor de 20€ y te da un juego enorme para guardar canciones, películas, libros o lo que sea.
Procesador Basta con que haga que todo vaya fluido. No necesito procesadores de 8 núcleos, cuando con un quad-core ya va lo suficientemente bien. Seguramente la mejor relación calidad-precio ahora la den los dual-core que son lo bastante potentes para casi todo.
Duración batería En este aspecto casi todos los smartphones pecan. Queremos que la batería dure una semana de uso intensivo y la verdad es que apenas llegamos al final del día sin tener que cargar el teléfono.
Tipo batería Extraíble. Sobre eso tampoco hay discusión posible. Si a duras penas la batería dura un día, cuando voy de viaje necesito poder llevar una batería de repuesto.
Cámara principal En este apartado preferiría una cámara que hiciera mejores fotos que una de muchos megapixels. En este sentido el camino tomado por el HTC One probablemente sea el correcto. Por ejemplo la cámara de mi Galaxy S3 con sus 8Mpix es bastante mala comparada con la de una compacta cualquiera.
Cámara frontal Cualquiera sirve. Que tenga cámara frontal es importante para videoconferencias, pero tampoco es necesario que sirva para hacer fotos de concurso.
Conectividad Que cuente con lo habitual en estos tiempos: WiFi, Bluetooth, NFC, USB OTG, HDMI...
GPS Imprescindible. Lo habitual son los A-GPS + Glonass. Estaría bien poder tener un navegador gratuito con mapas descargables para uso off-line (sobre todo en el extranjero).
Sensores Lo normal: brújula, giroscopio, acelerómetro, luz ambiental, etc.
Sonido No tengo preferencias. Difícilmente usaré el el altavoz externo del teléfono para escuchar música. Si lleva buenos altavoces estéreo como el HTC One, mejor... pero no es imprescindible.
Sistema de carga El sistema de carga inalámbrica puede ser muy interesante, pero tampoco es imprescindible.
Carcasa Me da igual. La verdad es que me vale con una cubierta de plástico como la del Samsung Galaxy S3. Las carcasas de aluminio en un sólo bloque pueden ser muy bonitas pero encarecen el producto, se calientan más y pueden llegar a retrasar la salida (como en el HTC One). Las partes traseras de cristal como el Nexus 4 también son muy bonitas pero se rompen fácilmente, resbalan y se manchan. Además en los dos casos el diseño hace que no se pueda cambiar la batería. Prefiero un diseño clásico con trasera de plástico desmontable.
Sistema operativo Android 4.1 o superior. Cualquier sistema anterior está obsoleto. Además es importante que el fabricante sea uno de los que tiende a actualizar sus terminales durante al menos un par de años.
Precio Máximo 300€. Google con el Nexus 4 ha demostrado que es posible.

sábado, 23 de marzo de 2013

Ingeniería del software

La forma tradicional de llevar a cabo cualquier desarrollo de software en muchas empresas suele ser hablar con el cliente para tomar los requerimientos y luego ponerse a programar. En mi opinión eso es un error. Hacer un trabajo previo de ingeniería del software puede parecer una pérdida de tiempo, pero a la larga redunda siempre en beneficio para el proyecto. Da igual si se trata de un sistema nuevo, un nuevo módulo de un producto existente o una modificación de cierta importancia. Siempre hay beneficios y éstos son múltiples y variados:

  • Disponibilidad de una documentación de que hará el nuevo software y de como lo hará en fases muy tempranas del proyecto.

  • Permite la revisión y aceptación por parte del cliente o responsable antes de empezar la fase de programación; lo cual posibilita la realización de cambios en las especificaciones o el diseño antes de empezar a programar.

  • Mejora la gestión de proyectos y equipos de trabajo. Es más fácil asignar tareas concretas si se tienen preestablecidas.

  • Favorece la modularidad del software (su división en módulos manejables).

  • Facilita la sistematización del proceso de creación de software a pesar de que éste es un proceso intrínsecamente creativo.

  • Proporciona mayor control de las posibles desviaciones una vez realizada la programación.
Código fuente

¿Qué es ingeniería del software?

Según la Wikipedia:

Ingeniería de software es la aplicación de un enfoque sistemático, disciplinado y cuantificable al desarrollo, operación y mantenimiento de software, y el estudio de estos enfoques, es decir, la aplicación de la ingeniería al software

No quiero contradecir a la Wikipedia, pero en mi opinión se puede definir de forma más sencilla: Ingeniería del software es la división del proceso de desarrollo de software en fases predefinidas, aplicando metodologías conocidas y documentando el proceso.

Techado

Ciclo de vida del desarrollo de software

La ingeniería del software y el ciclo de vida del desarrollo de software son dos conceptos que están muy relacionados. Ya hemos dicho que la ingeniería del software consiste en dividir el proceso de creación de software en fases. Dichas fases son las que forman el ciclo de vida del desarrollo de software de forma que cada una de ellas tendrá sus propios objetivos y metodologías. Las que pongo a continuación son las más comunes. Eso no quiere decir que sean únicas, ni que sean las "mejores".

  1. Toma de requerimientos. Consiste en el análisis de las necesidades del usuario o cliente para responder a la pregunta: ¿Qué hay que hacer?. A través de reuniones, estudio de documentación, estudio de un sistema anterior o cualquier otra técnica, el analista determinará que debe hacer el nuevo software, obteniendo en el proceso un documento de especificaciones. En esta fase no es necesario entrar en aspectos técnicos de diseño.

  2. Diseño técnico. Esta fase debe servir para responder a la pregunta: ¿Cómo vamos a hacerlo? Estudiando el documento de especificaciones se determinará el diseño de bases de datos (modelo entidad-relación), la división en módulos, el diseño de clases, la tecnología a usar, el diseño de pantallas, el flujo de la aplicación, los formatos de salida, etc. Al final del proceso se obtiene un documento de diseño técnico que sería algo similar, salvando las distancias, a los planos de un edificio.

  3. Programación y pruebas. Consiste en la codificación usando el lenguaje de programación, base de datos y/o herramientas decididas durante las fases anteriores. De hecho si las fases de especificaciones y diseño están bien hechas, las decisiones a tomar por el programador durante esta fase serán mínimas. Esta fase puede dividirse en módulos a realizar por distintos grupos de programadores. Cada grupo tendrá que realizar pruebas individuales de su software.

  4. Pruebas integradas. Esta fase consiste en realizar pruebas complejas de los distintos módulos una vez se han integrado juntos.

  5. Puesta en marcha. A veces la puesta en marcha es tan sencilla como subir el código a un servidor web, pero otras veces puede ser muy complicado: Creación de bases de datos, migraciones de datos, distribución de ejecutables, etc. En esta fase se realizarán manuales de usuario, formaciones a los usuarios, demostraciones, ...

  6. Mantenimiento. Todo software, por bien que se haga, es susceptible de tener errores. Por lo tanto el proceso de desarrollo de software no termina con la puesta en marcha, sino que será necesario tener un equipo de programadores capaces de hacer modificaciones. Idealmente serán programadores provenientes de los equipos que hicieron la programación original, aunque esto no es obligatorio.