jueves, 5 de septiembre de 2013

Diseño web: Slideshows como ejemplo de ineficiencia

Navegando por ahí me he encontrado con un artículo que pone los slideshows como ejemplo de ineficiencia en el diseño web. El artículo me ha parecido un tanto alarmista, pero aun así bastante interesante para compartirlo. Recordemos que un slideshow es una forma de presentar el contenido mostrando imágenes una detrás de otra en intervalos regulares. El artículo viene a decir que según las estadísticas los usuarios sólo hacen click en la primera de las imágenes entre un 1% y un 3% de las veces, mientras que las demás imágenes apenas reciben ningún click.

Como decía arriba la conclusión del artículo, que es la de dejar de utilizar slideshows totalmente, me ha parecido demasiado alarmista. Como en todo lo demás, usar o no usar este tipo de estructuras dependerá de la página que estemos diseñando. A unas páginas se adaptarán mejor y a otras peor. Nosotros mismos hemos usado slideshows en numerosas ocasiones con buenos resultados. Por ejemplo en la home de nuestra página web.

lunes, 26 de agosto de 2013

Como funciona el protocolo HTTPS

Revisando mis feeds RSS (a través de Feedly, por supuesto) me acabo de encontrar con un fantástico artículo de Genbeta sobre como funciona el protocolo HTTPS. Precisamente en los últimos días he tenido que investigar sobre el protocolo HTTPS (Hyper Text Transfer Protocol Secure) y me ha parecido un artículo muy completo. Sólo hecho de menos algunos enlaces de interés.


Enlaces de Interés

martes, 6 de agosto de 2013

Esto es lo que ocurre cuando no cuidas a tus usuarios

A HTC no le salen las cuentas. Ya lo habíamos predicho allá por febrero cuando escribimos el artículo HTC One, el fracaso de un gran smartphone: La otrora líder en la fabricación de smartphones está en crisis. Su teléfono estrella de este año, el HTC One, pese a ser un gran terminal (el mejor smartphone del momento, dicen algunos análisis), no se está vendiendo como esperaban en HTC, una vez pasados los primeros meses. No lo decimos nosotros sino muchas de las publicaciones especializadas (ver referencias).

HTC One

Los motivos

Los motivos de por qué HTC está fracasando son en mi opinión variados y diversos. Por un lado el HTC One es caro, pero sus competidores (Samsung Galaxy S4, Sony Xperia Z, etc.) también lo son y se están vendiendo mejor. Y en cuanto a prestaciones en HTC está a la altura e incluso supera a sus rivales. Así que no debe ser ese el problema.

La falta de alternativas interesantes en las gamas medias y baja de HTC también pueden tener parte de culpa en el descenso de ingresos de HTC. Para arreglar un poco ese problema HTC ha presentado hace unos días el HTC One Mini, pero Samsung también tiene su S4 mini y en la gama media hay bastante competencia de Sony, LG y otros. De todas formas, aunque el HTC One Mini se venda bien no parece probable que vaya a sacar a HTC de los números rojos.

Entonces, ¿Cual es el problema de HTC? Yo lo tengo claro: el maltrato reiterado a los usuarios.

HTC siempre se ha caracterizado por la falta de evolución de sus teléfonos una vez pasados pocos meses de su salida al mercado. Los antiguos poseedores de un HTC Desire o Sensation (magníficos teléfonos por otro lado) que vieron como sus teléfonos se quedaban estancados en versiones de Android obsoletas cuando por hardware eran perfectamente capaces de evolucionar difícilmente se comprarán ahora un HTC One, por bueno que éste sea. Ni tampoco recomendarán un HTC a sus conocidos.

¿Y la solución? Pues es difícil. Una vez te has labrado tan mala reputación, cambiarlo no es fácil. Pero todo depende de la propia HTC. Desde luego saben hacer buenos smartphones. Si hacen un giro de 180º en su política de actualización de terminales, quizás dentro de unos años las cosas cambien. Quizás...


Referencias

jueves, 20 de junio de 2013

Javascript: use strict

Muchas librerías Javascript contienen un extraño código en sus entrañas: 'use strict'. No se trata de una palabra clave de Javascript pues va escrita entre comillas, pero su uso en muy importante ya que le indica al motor de ejecución de scripts que use el modo estricto. Dicho modo es más restrictivo y un poco más seguro, ya que da errores de ejecución en sentencias que normalmente pasaría. El "modo estricto" viene promovido desde la 5ª edición de la especificación del lenguaje ECMAScript, pero no todos los motores de Javascript lo usan. Para los programadores es importante su uso a la hora de desarrollar librerías Javascript y depurar errores ya que, entre otras cosas, obliga a declarar las variables. Los desarrolladores deben programar "mejor" (con más cuidado), prestando más atención a los errores que normalmente se pasan por alto debido a la flexibilidad de JavaScript en modo no estricto, con lo que el código resultante es "mejor".

El modo estricto puede definirse a nivel de módulo o restringido a un ámbito concreto. Por ejemplo puede hacerse que sólo esté activo dentro del contexto de una función. En el siguiente ejemplo 'use strict' se restringe al interior de la función:

(function(){
    'use strict';
})();

Referencias

sábado, 8 de junio de 2013

Como crear un disco de reparación de Windows en un USB

Recientemente he necesitado crear un disco de reparación de Windows para arreglar la instalación de un portátil con arranque dual (Windows 7 y Ubuntu 12.04 LTS) en el que estuve moviendo las particiones. El problema es que ese portátil tiene estropeado el lector DVD hace años. Por suerte, aunque ya tiene unos añitos, es lo bastante moderno como para que sea capaz de arrancar desde una unidad USB (pendrive). Así que me puse a investigar como crear un disco de arranque en una unidad USB y la verdad es que es bastante sencillo: Windows incorpora una utilidad e línea de comandos llamada DISKPART que es perfecta para eso.


Paso 1: Crear un disco de reparación de Windows

Lo primero es lo primero y en este caso habrá que crear un disco de reparación de Windows. Para ello sólo hay que abrir el Panel de control >> Sistema y seguridad >> Copias de seguridad y restauración >> Crear un disco de reparación del sistema. Por desgracia Windows 7 sólo permite grabar un disco de reparación en un medio físico: es decir un CD o un DVD. Así que no hya más remedio que crear el disco y luego ya lo pasaremos al pendrive.

Reparación Windows

PASO 2: Preparar el pendrive

Una vez hemos creado el disco de arranque en un CD o DVD hay que iniciar la utilidad DISKPART. Para ello basta con escribir DISKPART en el cuadro de búsqueda del menú de inicio de Windows. Una vez arrancado el programa, la secuencia de comandos para crear un disco USB arrancable es la siguiente:

list disk
select disk n
clean
create partition primary
select partition 1
active
format fs=fat32
assign
exit

En lugar de la "n" en el segundo comando hay que escribir el número del disco USB, según la lista que aparece tras escribir el primer comando. En nuestro caso era el 5, pero en cada ordenador será diferente. Ten en cuenta que la partición primaria del disco seleccionado se perderá para siempre, borrándose todos los datos allí almacenados y sin posibilidad de recuperación. Asegúrate de que no te importa perder esos datos antes de ejecutar DISKPART. Ojo: Si se selecciona un número de disco erróneo, el resultado puede ser catastrófico. Podría borrarse toda la información del disco duro principal. No nos hacemos responsables de los posibles errores cometidos tras leer este artículo.

DISKPART

PASO 3: Copiar los archivos del disco de arranque al pendrive

Ya tenemos un disco de arranque USB. Ahora sólo falta copiar todos los archivos del CD o DVD de arranque que creamos antes sobre el disco USB. Pero antes hay que hacer que los archivos de sistema sean visibles desde el explorador de archivos. Para ello hay que abrir una ventana del explorador y acceder a las opciones de carpeta. Por ejemplo Inicio >> Equipo >> Organizar >> Opciones de carpeta y búsqueda >> Ver. Luego hay que activar la opción Mostrar archivos, carpetas y unidades ocultos y desactivar la opción Ocultar archivos protegidos del sistema operativo. Ya podrás realizar la copia de la forma habitual y ya tendrás un disco de arranque USB con las utilidades de reparación de Windows. Te recomendamos que al finalizar restaures las opciones de carpeta a su estado anterior.


Bonus track: Otros comandos de DISKPART

Algunos de los comandos de DISKPART son los siguientes: (la lista detallada se encuentra aquí)

  • list disk
    Muestra la lista de discos del equipo.

  • list partition
    Muestra la lista de particiones del disco seleccionado.

  • list volume
    Muestra la lista de volúmenes del equipo.

  • select disk[=n]
    Selecciona un disco por número o bien muestra el disco seleccionado.

  • select partition[=n/l]
    Selecciona una partición por número, letra de unidad o punto de montaje o bien muestra la partición seleccionada.

  • select volume[=n/l]
    Selecciona un volumen por número, letra de unidad, punto de montaje o ruta de acceso o bien muestra el volumen seleccionado.

  • detail disk
    Muestra información detallada del disco seleccionado.

  • detail partition
    Muestra información detallada de la partición seleccionada.

  • detail volume
    Muestra información detallada del volumen seleccionado.

  • create partition primary [size=n][offset=n][id=byte/guid][noerr]
    Crea una partición primaria.

  • create partition extended [size=n][offset=n][noerr]
    Crea una partición extendida.

  • create partition logical [size=n][offset=n][noerr]
    Crea una partición lógica sobre una partición extendida.

  • delete partition [noerr][override]
    borra la partición seleccionada.

  • create volume simple [size=n][disk=n][noerr]
    Crea un volumen simple.

  • delete volume [noerr]
    Borra el volumen seleccionado.

  • assign [[letter=l]/[mount=ruta de acceso]][noerr]
    Asigna una letra de unidad o un punto de montaje a la partición seleccionada.

  • active
    Establece la partición seleccionada como activa.

  • extend [size=n][noerr]
    Extiende el volumen seleccionado con el espacio contiguo no asignado.

  • remove [[letter=l]/[mount=ruta de acceso]/[all]][noerr]
    Quita una letra de unidad o un punto de montaje de la partición seleccionada o quita todas las letras de unidad y puntos de montaje actuales.

  • help
    Muestra la ayuda.

  • exit
    Detiene el programa.

Bonus track x2: Instalar Ubuntu desde un disco USB

Curiosamente existe un método muy sencillo para preparar un disco de instalación de Ubuntu en una unidad USB. Consiste en utilizar una utilidad para Windows llamada Universal USB Installer. Podéis encontrar un tutorial Aquí. Básicamente hay que descargar la versión de Ubuntu deseada desde la página oficial que vendrá en formato ISO listo para grabar en un DVD y usar la utilidad Universal USB Installer para grabarlo en un DVD. Sencillo... ¿Ehh?

lunes, 3 de junio de 2013

Herramientas de programación web: Twig

Hoy voy a hablar un poco de Twig, una herramienta más enfocada al diseño web que a la programación que viene integrada en el framework Symfony2, pero que puede utilizarse también por separado.

Twig es un motor de plantillas para PHP similar a Smarty. Es un proyecto de código abierto (open source) ofrecido bajo licencia BSD y desarrollado por Fabien Potencier, el creador de Symfony. Por ello es lógico que Twig sea el motor de plantillas por defecto de Symfony2.

Al igual que otros motores de plantillas, Twig ayuda a separar de forma sencilla la lógica de la aplicación (código PHP) de la presentación (HTML/CSS). Es una herramienta muy potente pero a la vez muy flexible que permite diseñar plantillas de presentación muy complejas sin usar instrucciones PHP, haciendo que el código HTML/CSS final sea mucho más legible.


Ejemplo

El siguiente es un ejemplo básico de plantilla Twig:

<!DOCTYPE html>
<html>
  <head>
    <title>Client List</title>
  </head>
  <body>
    <h1>Client List</h1>
    <ul>
    {# Recorrido por la lista de clientes #}
    {% for client in clients %}
      <li>
        <a> href="/client/{{ client.id }}">
          {{ client.name }}
        </a>
      </li>
    {% else %}
      No se han encontrado clientes.
    {% endfor %}
    </ul>
  </body>
</html>

Variables, filtros y funciones

Uando Twig podemos acceder al contenido de una variable simplemente poniendo su nombre entre llaves dobles: {{ var }}. Además podemos acceder a las propiedades de un objeto usando la sintaxis {{ obj.attr }}. Este mecanismo es tan potente y flexible en Twig que buscará primero como elemento (obj['attr']); si no existe buscará como atributo (obj.attr); y por último si no existe buscará como método (obj.getAttr()). Otra característica de Twig es que podemos aplicar filtros a las variables para modificar su comportamiento. Por ejemplo para formatear una fecha antes de imprimirla en pantalla: {{ date | date('d/m/Y H:i') }}. Los filtros además pueden encadenarse de forma que se ejecuten uno detras de otro. Así {{ text | striptags | upper }} eliminaría los tags HTML del texto y lo escribiría en mayúsculas.


Estructuras de control

En Twig hay una serie de instrucciones que se escriben entre {% ... %}.

  • {% if cond1 %}...{% elseif cond2 %}...{% else %}...{% endif %}
  • {% for item in array %}...{% else %}...{% endfor %}
  • {% set var = value %}
  • Etc.

Comentarios

Los comentarios se escriben entre {# ... #}:


Referencias

Adroid Studio

Android Studio

Como la mayoría sabréis, en el pasado Google I/O se presentó un nuevo entorno de desarrollo (IDE) para programar aplicaciones para el sistema operativo Android llamado Android Studio. Se trata de una nueva herramienta de programación que sustituye al problemático Eclipse. El nuevo IDE, que tiene versiones para Windows, Linux y Mac, está basado en IntelliJ IDEA y según parece está siendo muy bien valorado por los desarrolladores a pesar de que aun no tiene una versión definitiva.

Algunas de sus características son:

  • Herramientas de construcción extensible.
  • Potente editor de código.
  • Interfaz gráfica de usuario mejorada.
  • Fácil acceso a los servicios de Google.
  • Herramientas específicas para Android.
  • Desarrollo de código abierto.

Personalmente aun no he tenido la oportunidad de probarlo pero los chicos de El Androide Libre si que lo han hecho y han publicado una mini guía en tres artículos sobre el nuevo Android Studio:


Otras referencias