martes, 18 de septiembre de 2012

Tip para usar Windows 7 y 8 a toda velocidad


En nuestro trabajo, es un escenario típico trabajar codo con codo con usuarios de todo tipo, la mayoría en Windows, y de estos afortunadamente en un gran porcentaje utilizan Windows 7.
Digo afortunadamente porque es un sistema con un montón de dinero y tiempo invertidos en usabilidad y que hacen su uso especialmente cómodo y rápido… si sabes usarlo.

El caso es que para abrir una aplicación, documento u opción de sistema que no tengamos anclada a la barra de tareas o asociada a alguna combinación de teclas (usuarios avanzados), lo más rápido con diferencia, es pulsar la tecla de Windows y escribir.

Sí, una tecla y escribir es todo lo que necesitamos. El sistema se encarga de devolvernos categorizados una serie de resultados a velocidad de vértigo. Y con pulsar Enter nos abrirá el primer resultado, que suele ser el primero (sobre todo cuando el sistema “aprende” nuestras preferencias), aunque también podemos seleccionar otro resultado (con teclado o ratón) o cambiar la búsqueda de manera instantánea.

Hemos visto usuarios que, hartos de pinchar con el ratón en los menús infernales para alcanzar sus aplicaciones y documentos, recibían este tip con mucho interés, así que esperamos que os sea también útil.



Windows 8


El caso de Windows 8 es un poco más particular que Windows 7. Aunque el sistema responde de igual manera que 7, el menú de búsqueda es de estilo Metro (o Modern UI, como se llama el interfaz ahora), lo que permite mostrar más resultados, de una manera más cómoda y ordenada. Es esta una mejora del nuevo Windows 8, pero no la única, ya que las búsquedas son más rápidas y son contextuales… aunque eso es otra historia.


Usabilidad en Visual Studio 2012


Puede que muchos de los desarrolladores de Visual Studio esteis bastante al día con el nuevo Visual Studio 2012, pero nunca está de más recordar al menos una de sus mejoras: la ventana de Quick Launch.

Gracias a esta ventanita, localizar una de esas opciones de menú escondidas en el decimoséptimo nivel del menu de los forlayos de 2008 y 2010 se vuelve pan comido. Y por supuesto esta nueva funcionalidad, “recuerda” nuestras búsquedas anteriores, por lo que es un acceso rápido, muy rápido a cualquier acción. Y eso, la concentración del desarrollador, lo agradece.






martes, 7 de agosto de 2012

Utilizar lenguaje de servidor en CSS

La personalización de los estilos es una característica cada vez más usada en la actualidad. Cada usuario quiere escoger las imágenes y colores que aparecen en su interfaz y por ello, el desarrollo se debe ajustar a esas necesidades. Huyendo de ineficientes estilos en línea, esta vez vamos a introducir lenguaje de servidor (PHP) en las hojas de estilo CSS para lo cual se requieren varios pasos:

1.- Cambiar la extensión de nuestra hoja de estilo (*.css a *.php) y modificar nuestras referencias a ese script en nuestras páginas.

<link rel='stylesheet' type='text/css' href='css/estilos.php' />

2.- En la parte superior de la hoja de estilo indicamos que se trata de un script CSS.

<?php 
    header("Content-type: text/css; charset: UTF-8"); 
?>

3.- Incluir código de servidor en la hoja de estilo ya es posible.

....
<?php
   $colorBordes = "#D69924"; 
?>

#header {float:right; position:relative; width:766px; border: 1px solid <?php echo($colorBordes);?>;}
...

Aparte de la posibilidad de personalizar la apariencia para el usuario, este consejo nos permite generar interfaces en varios idiomas sin tener que duplicar el código, facilitanto la actualización de nuestra aplicación.

miércoles, 1 de agosto de 2012

¿Cómo optimizar tus scripts de PHP?


Mejorar el rendimiento de tu código es una de las responsabilidades de un programador. Cada decisión a la hora de elaborarlo es importante para optimizar el tiempo de carga y el rendimiento de la aplicación, clave para la satisfacción del usuario, por lo que, en esta ocasión, vamos a recopilar una serie de consejos para mejorar el rendimiento de tus scripts de PHP.

Declara correctamente tus variables: puedes condensar líneas de código fácilmente.

$var1 = "";
$var2 = "";
$var3 = true;
$var4 = true;
$var1 = $var2 = "";$var3 = $var3 = true;




Olvida setName() y getName(): asignar y leer una propiedad directamente es el doble de rápido.


$usuario = nuevo usuario();
$usuario->setName('juan');
echo $usuario->getName();
$usuario = nuevo usuario();
$usuario->name = 'juan';
echo $usuario->name;

No declares variables sin sentido: de nada sirve copiar variables predefinidas para hacer el código más fácil. Ralentizará tu código.


$descripcion = strip_tags($_POST['descripcion ']);
echo $descripcion;


Optimiza tus sentencias if(): puedes condensar líneas de código fácilmente.


if ($variable == 1) {
$valor = true;
} else {
$valor = false;
$valor = ($variable == 1) ? true:false;




Evita las consultas dentro de un bucle: reorganiza tu código para hacer una única consulta.

($i=0; $x < count($array); $i++) {
       ...
}
Evita usar funciones dentro de un bucle: si son evitables, están mejor fuera del bucle. Es mejor implementar una variable que se vaya acumulando.

foreach ($user in $list) {
    $query = 'INSERT INTO users...';
    mysql_query($query);
}
Utiliza funciones eficientes:
  • $_SERVER['REQUEST_TIME'] es más rápida que time().
  • strtr()es cuatro veces más rápida que str_replace(), ambas son más rápidas que preg_replace().
  • $reg['id'] es casi ocho veces más rápido que $reg[id].
  • checkdnsrr()es la mejor opción para validar direcciones de correo electrónico.
  • $var === "" es más rápido que empty(), ambos son más rápidos que $var == "".

 Curiosidades a tener en cuenta:
  • Modificar una variable global es dos veces más lento que hacerlo con una local mientras que odificar una propiedad de un objeto es tres veces más lento. 
  • Las cadenas con comilla simple (') son más rápidas que con comilla doble (") en versiones previas a PHP 5.0. Es más rápido mostrar cadenas concatenándolas con comas (,) que con puntos (.).
  • En las sentencias switch() ordena las opciones de frecuente a menos frecuente. El bucle for es más rápido que do-while, que a su vez es más rápido que while.
  • Compilar comentarios en una línea o eliminarlos no afecta a la velocidad de ejecución del código.
  • Conectar con direcciones IP es más rápido que hacerlo con nombres de dominio.

miércoles, 4 de julio de 2012

Bootstrap, el framework fácil

Bootstrap es uno de los frameworks de moda de la industria y se está asentando como base para que los desarrolladores poco acostumbrados a lidiar con CSS y Javascript puedan crear interfaces de usuario adaptadas a cualquier resolución, con componentes dinámicos, un diseño atractivo y muy reconocible para los amantes de mandar mensajes con menos de 140 caracteres ya que ha sido desarrollado por los administradores de Twitter.

Ventajas

  • Interfaces adaptables a distintos dispositivos / resoluciones.
  • Layout general configurable de manera sencilla.
  • Genera un código adaptado a estándares como HTML5.
  • Compatibilidad con todos los navegadores.
  • Facilidad para el uso de JQuery mediante componentes webs predefinidos (menús, botones, autosugerencias, carruseles, ventanas modales).

 

Configurable y limpio

Uno de los puntos fuertes de este framework es la enorme personalización de los componentes: en su página web puedes descargar el código seleccionando qué componentes te interesan y qué no, configurando los colores y estilos que utilizará tu página web por defecto. No cargarás código que no vayas a utilizar, así que no ralentizarás tu página.

¿Dónde probarlo?

lunes, 26 de marzo de 2012

Metro: la interfaz de usuario más avanzada


Con la comercialización mundial de los teléfonos Windows Phone, el público tiene la ocasión de echar un vistazo a Metro, un llamativo interfaz desarrollado a lo largo de los últimos 6 años por los de Redmon y que sienta las bases de lo que será Windows 8.

Pero Metro no solo es el nombre de la interfaz, es además un lenguaje de diseño que establece prioridad sobre el contenido, no sobre el aspecto como han venido haciendo Google, Apple y en general cada fabricante de sistemas operativos para dispositivos móviles: todos haciendo lo mismo, hasta ahora. Este objetivo lo alcanza mediante un hábil uso de la tipografía, el color y la imagen como elemento de primer orden y que elimina la necesidad de un interfaz (iconos de casitas y demás monigotes): el contenido es el interfaz.

Microsoft empleó este tipo de aproximación (tipografías e imagen como interfaz) en sus reproductores Zune y tras pulirla, la consideró perfecta para sus actuales sistemas operativos de móvil (WP7), videoconsola (Xbox) y entretenimiento (Media Center), así como adaptable a escritorio y tablet en el futuro inmediato (Windows 8). Pero también podemos comenzar a encontrar adaptaciones en algunas de sus webs, como en http://support.microsoft.com todo es susceptible de adaptar Metro.


Podríamos hablar de hubs, tiles, panorama y demás jerga de elementos de diseño del sistema, pero al ser un sistema tan moderno y debido al salto conceptual que supone, es mucho mejor verlo en directo o probar alguna demo:
http://www.youtube.com/user/windowsphone
Baste decir que se prima el uso y la claridad de la información sobre los elementos de diseño, o como se suele decir en uno de los principios universales de diseño: se prima la función sobre la forma. Y eso lo convierte en una experiencia más natural y que requiere menos adaptación de los usuarios, algo de agradecer en estos tiempos de variedad de sistemas operativos.

Metro es por tanto la primera apuesta que existe para homogeneizar los interfaces de escritorio, tablet y móvil, videoconsolas y reproductores multimedia, por delante (muy por delante al parecer) de Apple y Google.
Así que no solo tenemos una nueva interfaz molona para los usuarios, o un SDK para que los desarrolladores programemos tanto aplicaciones web como de escritorio, sino que tenemos todo un lenguaje de diseño que va abarcar todos los productos de Microsoft, ahora y en el futuro.


miércoles, 1 de febrero de 2012

Supermenús: Ribbon

Cuando presentamos algún producto de la familia Office a los clientes, nos encontramos con alguna que otra duda de adaptación al nuevo interfaz que adoptó Microsoft en la suite 2007.

Pero también comprobamos que cuando se explican las razones del cambio de interfaz y su filosofía de diseño, el cambio se vuelve mucho más fácil para los usuarios. Por ello esperamos que esta pequeña introducción sea útil para quienes están pensando en actualizarse o a quienes tengan que dar soporte a usuarios que vayan a actualizarse.



Introducción

La interfaz de Office 2007 y 2010 tiene un nombre: Ribbon. “Cinta” en español, y forma parte de  la familia de menús que en el área de diseño y usabilidad llamamos Supermenú.

La razón de la existencia de los supermenús y en particular la versión Ribbon de Microsoft es tratar de lidiar, entre otros, con 2 aspectos clave en el diseño de interfaces de usuario:

1. Facilidad de uso para usuarios noveles.

2. Optimización del espacio y la distribución para menús con un número elevado de opciones.
Además la implementación de Microsoft, permite el uso de este interfaz tanto en aplicaciones estándar (ratón y teclado) como en dispositivos táctiles (sí, lo hemos probado).

Filosofía

La filosofía del interfaz, es poder organizar de una manera práctica y evidente todas las opciones disponibles, de manera que un usuario novel pueda localizar lo que necesita (las opciones más habituales) de un vistazo, pero sin penalizar a los usuarios avanzados, que pueden profundizar o personalizar el interfaz para mejorar su productividad o realizar tareas complejas.

Esto lo logra mediante botones grandes para las opciones más habituales y la agrupación de opciones similares en cintas o fichas con pestañas. De esta manera solo necesitamos saber qué queremos hacer para localizar la ficha y sus opciones rápidamente.

Para uso en cualquier dispositivo

Por otro lado, dos particularidades que sorprenden del Ribbon es que es contextual y adaptable.

Contextual porque el interfaz muestra nuevas cintas y opciones (u oculta) en función del contexto. Por ejemplo, si tenemos seleccionada una imagen en Word 2010, veremos una cinta adicional con funcionalidades para tratar imágenes. Eso permite aligerar el interfaz y volverlo más claro.




Adaptable porque no solo cambia lo que se ve, sino que además se reagrupa en función del espacio de que dispongamos. Esto es realmente útil cuando lo que tenemos en las manos es un netbook o un Tablet, pero también permite trabajar más cómodamente en monitores grandes.



Como todo cambio de interfaz, el producto requiere algo de entrenamiento para terminar de resultar cómodo, pero entendiendo su filosofía, la adaptación es mucho más rápida y las ventajas de tenerlo por ejemplo en Sharepoint Online para trabajar con dispositivos portátiles, es asombrosa.

Para quien esté interesado en profundizar en el interfaz de Office, se puede acceder a información adicional bastante útil y extensa en la misma web de Microsoft:

http://office.microsoft.com/es-es/
http://office.microsoft.com/es-es/word-help/migrar-a-word-2010-desde-word-2003-HA101850447.aspx?CTT=5&origin=HA101631587

martes, 10 de enero de 2012

Tutorial: ¡Hola mundo! en una pestaña de una página de Facebook



1. Crear la aplicación

El lógico primer paso es crear nuestra aplicación. Entraremos en la página de Apps de Facebook (https://developers.facebook.com/apps/) y crearemos una de cero. Como suele ser común, tendremos que rellenar un buen número de datos para nombrar, clasificar, personalizar y etiquetar nuestra aplicación pero el meollo de la cuestión está en la configuración posterior que deberemos introducir para permitir que la aplicación se muestre en una página.

2. Configuración básica
Después de decidir dónde tendremos alojada la página externa que queremos mostrar en nuestra nueva pestaña (en nuestro caso será un pequeño script con el logo empresarial y el lema "¡Hola mundo!"), deberemos prestar atención a un apartado en la sección 'Select how your app integrates with Facebook' de la configuración de la aplicación: 'Pestaña de la página'.



Ahí es dónde deberemos introducir la dirección de la página que queremos mostrar, tanto en su versión certificada -desde hace un tiempo, Facebook existe este tipo de seguridad- a la versión habitual. Además, el sistema nos permite mediante un enlace a una gestión de la pestaña que podremos configurar para personas sin conocimientos de programación

3. Integrarla en la página

El último paso es introducir la aplicación que hemos creado en nuestra página. El paso es sencillo. Siguiendo esta dirección (https://www.facebook.com/dialog/pagetab?app_id=ID_DE_TU_APP&next=URL_DE_TU_APP) seleccionaremos la página en la que queremos integrar "nuestro espacio". Et voilá!


A partir de este pequeño tutorial se abre un mundo de posibilidades al poder integrar cualquier tipo de contenido en la pestaña, incluyendo lenguajes de servidor o cualquier tipo de interacción con el API de Facebook, con la posibilidad de poder utilizar la misma aplicación para varias páginas totalmente distintas mediante el enlace de configuración enlazado anteriormente. Como veis, conocer este método hace que el único límite de la integración con Facebook se convierta en nuestra imaginación.