lunes, 31 de octubre de 2016

Determinar las resolucion de pantalla en Javascript y CSS y ajustar los objetos en pantalla

Diseñar una página web es un proceso complejo. Mas por que debemos tener en cuenta, que la WEB ahora es accesada desde diversos dispositivos.

Simplemente al acceder desde una PC se usan una gran variedad de resoluciones de pantalla. Ahora si sumamos tablets y smartphones, se vuelve un proceso dificil ajustar el contenido a la pantalla.

En ocaciones determinamos el tamaño o la posicion de un objeto de forma fija en pantalla. Además le damos cierto margen, entre otras propiedades.

Pero al trabajar con resoluciones de pantalla diferentes, vamos a tener que los objetos no se acomodaran correctamente en la pantalla.

¿Que podemos hacer?

Una opcion es redimensionarlos y reacomodarlos dinámicamente, dependiendo del tamaño de la pantalla del dispostivo de salida.

Para eso claro, necesitamos conocer el alto y el ancho de la pantalla del dispositivo de salida. ¿Como podemos hacerlo? Bueno usando 2 lenguajes que se ejecutan del lado de la maquina cliente. Ya hemos visto que tanto JavaScript como CSS tienen poder de modificar los objetos que vemos en pantalla. Asi que veamos como hacerlo con ambos.


1.-JavaScript


Mira el siguiente codigo:

        if( screen.height == 768 ||screen.height == 720 )
         $("#Menu").css( { top:120 });
     
     if( screen.width == 1024)
           $("#Menu").css( { left:636});

¿Sencillo no?

Si te fijas la clave son las instrucciones screen.heigh y screen.width. Estas nos devuelven el ancho y el alto de la pantalla.

En la primera condicion le indico que si el alto de la pantalla es 768 o 720 pixeles, al elemento Menu, le modifique la propiedad top (que indica en que posicion de la pantalla estará la parte superior del objeto) con el metodo css.

El método css permite modifica dinámicamente las propiedades css de un objeto.

En la segunda condición pregunto por el ancho de la pantalla. Si es de 1024 pixeles, esta vez modifico la propiedad left, que me indica la posicion izquierda de la pantalla donde comienzael objeto.

Ambos valores se los doy en pixeles.

De esta manera , con diferentes resoluciones de pantalla, estaría ubicando mi objeto en una posición diferente.


2.-CSS

Veamos ahora un ejemplo de como ajustar contenido con CSS:

@media screen and (max-width: 800px){
 #content_header
   font-size: 12px !important;
   width:800px; height:100%; display:table; margin:0 auto; 
   }
}

@media screen and (max-device-width: 800px){
 #content_header
   font-size: 12px !important;
   width:800px; height:100%; display:table; margin:0 auto; 
   }
}

Como pueden ver la clave esta en la etiqueta @media screen con la condicion  max-width max-device-width.

Podemos usar esta etiqueta como un if, y dentro de ella definir todas las propiedades de CSS que deseemos para los objetos. Esta opción es mas completa, podemos definir tamaño de fuenete, ancho del objeto, alto del objeto, el padding , el marging, y un sin fin de propiedades. Prácticamente todo lo que deseemos y podemos construir un objeto diferente para resolución de pantalla.

No hay que olvidar, que si definimos mas propiedades fuera de esa etiqueta, serán ignoradas, es decir tenemos que poner la defición completa de las propiedades del objeto, pues no se heredan.

Si yo hubiera definido #content_header antes, y quisiera cambiar solo una propiedad como el tamaño de fuente, no me es posible. Debo volver a copiar todas las propiedades del objeto, que solo aplicaran cuando el ancho sea 800 px.

En todos los caso default, donde el ancho no sea 800 px, tomara mis propiedades genericas.

De esa manera podemos empezar a jugar un poco, con la construcción de páginas webs para diferentes resoluciones de pantalla.

Para la altura seria algo similar

@media screen and (max-height: 768px){
 #MiCuenta {
    padding:60px;
    padding-bottom: 10px;
    cursor:pointer;
    font-weight:bold; color:#fafafa; border-right:1px solid #c3c3c3;
   }
}
@media screen and (max-device-height: 768px){
 #MiCuenta  {
    padding:60px;
    padding-bottom: 10px;
    cursor:pointer;
    font-weight:bold; color:#fafafa; border-right:1px solid #c3c3c3;
   }
}

Y ya con esto podemos irnos adaptarnos a las diferentes resoluciones de pantalla. !A programar!








viernes, 28 de octubre de 2016

Tener siempre la ultima versión de mis archivos JavaScript y CSS en la maquina del usuario

Ya hemos analizado en una entrada anterior, como construir un buen sitio web dinamico. Eso muchas veces, incluirá el usar archivos .PHP, .JS y .CSS.

Recordando un poco lo aprendido, los archivos .php estan en el servidor, y no tenemos acceso a ellos en código fuente desde la máquina local. Eso es una enorme ventaja en terminos de mantenibilidad. Si haces un cambio en un archivo PHP en automático todas las máquinas que se conecten a tu sitio tendrán la nueva versión, ya que los archivos PHP siempre son enviados cada que se piden por la máquina (en demanda). Es decir cada que solcicitas un archivo PHP este es ejecutado en el servidor.

Recordemos que Javascript, se encarga de controlar los eventos que pasan en el navegador, y CSS de controlar el aspecto visual que tendrá la página web en pantalla.

Los navegadores actuales, suelen hacer todo lo posible para que las páginas se carguen lo más rápido posible. Eso incluye el uso del caché, que no es otra cosa que guardar la mayor parte de los elementos posibles de una página cuando se abre por primera vez, en disco duro local. De esa manera si vuelves a entrar a la misma página, el navegador solo debe checar los cambios y no descarga toda la informacion completa. Esto es múy util en el caso de imagenes y recursos multimedia, de esa manera se acelera la carga de las pagnas web.

Los navegadores acuales tienen la manía de guardar los archivos JS y CSS en cache. Esto tiene sus ventajas y desventajas. Ventaja, que Javascript actua directamente sobre el navegador, y CSS sobre la presentación de la web, asi que al estar en caché la carga de la página es más rápida.

Pero como desarrolladores, no nos agrada esa idea. Cada que yo hago un cambio a mi JavaScript o CSS, en teoría el navegador debería reconocerlo y cargar la nueva versión. Pero no es así. La memoria del navegador es algo persistente. Una solución a nivel de usuario es pulsar F5 ya que manda un comando de refescar y trae de nuevo los archivos. A veces, ni eso funciona y será necesario borrar el historial del navegador, que es donde se guarda el cache. 

Pero no podemos decirle a todos nuestros usarios, "oye hice un cambio en mi JavaScript, por favor vacia tu historial". No es practico.

¿Hay alguna solución?

Claro. Aqui apelamos  a las propiedades de nuestro PHP. Recordemos, que este si se refresca cada que se abre la página, es indispensable pues se ejecuta en el servidor.

¿Donde mandamos llamar nuestros archivos JS y CSS? En el PHP precisamente, como ya hemos visto.

Ua técnica muy usada en muchos sitios web, es tener una página llamada header.php y otro footer.php. Por cuestiones de diseño, muchas veces queremos tener un header y un footer comun, para todo nuestro sitio.

Así nuestras páginas tendrían la siguiente estrcutura:

<?php
require("common/header.php");
?>

//codigo de mi pagina


<?php require("common/footer.php");?>

¿Por que mencionamos esto? Por que por lo general, todas las invocaciones a archivos JS y CSS se hacen en el hedaer, de esa manera, no es necesario repetir el codigo en cada página.

De esta manera cada página invocada, debe llamar al header. El header controlara las invocaciones a recursos externos como los archivos JS y CSS.

Veamos ahora un ejemplo:

<link rel="stylesheet" href="<?=$urlSitio;?>/includes/css/MiCSS.css?version=1.0" type="text/css" media="all" />

<script type="text/javascript" src="<?=$urlSitio;?>/includes/js/MiJS.js?version=1.0"></script>

Notemos la diferencia con otros ejemplos usados anteriormente. Al invocar tanto el archivo CSS, como el JS, añadimos al final lo siguiente : ?version=1.0.

Como si estuvieramos mandando la version como un parámetro. Dentro de nuestros archivos, no tenemos que hacer ningun cambio relativo a esto. Simplemente le estamos diciendo al navegador, que busque una nueva versión del archivo, es decir, que no será un resurso estático.

¿Que pasará si hago un cambio a mi Javascript y deseo que todas las máquinas clientes carguen la nueva versión? Simplemente, en el archivo PHP donde lo llamo, cambio el parametro version a 1.1. Y si hago otro a 1.2. Y así sucesivamente.

De esta forma al cargar el PHP, el navegador sabra en automatico que la versión que tiene en cache del Javascript no le sirve, y cargará la nueva desde el servidor.

Pero, mientras yo no modifique el parametro versión trabajará con la copia local, lo que es bueno pues ayuda al rendimiento de la página.

¿Sencillo no?

Por eso es mas sencillo si agrupo todas las llamadas a recursos externos,si las tengo todas en mi archivo header, será muy sencillo, cambio una línea, y en automatico todas las páginas cargaran la nueva versión.

De esta manera con PHP, controlo la subida de nuevos recurso JS y CSS al navegador, independientemente de la memoria cache.








jueves, 27 de octubre de 2016

Tres carencias de Usabilidad de IOS

La lucha de los sistemas operativos en el entorno móvil, suele definirse en 2 grandes jugadores Android e IOS. Aunque Android tiene más de 80 % de cuota de mercado, el uso del smartphone es tan intensivo, que con una cuota pequeña IOS está presente en en muchos dispositivos.

Ventajas y desventajas, ofrece cada sistema. De IOS se destaca la estabilidad. De Android la libertad y personalización, ya que aunque es muy estable, se dice que IOS es mejor en ese aspecto.

Hoy me concentraré en un aspecto que suele alabarse de IOS: la usabilidad. Se dice que es uno de los sistemas más sencillos que existe, y es cierto. Aunque Android va casi a la par (como experimento dale a un niño o una persona mayor un Android, y podrá usarlo), no iguala su sencillez.

Sin embargo hay ciertos aspectos en que la usabilidad de Android es mejor. Hoy hablare de 3 de ellos.

1.- Escritorios y Widgets


 Android es bastante parecido a un PC. Al iniciar lo primero que vez es el escritorio. Un escritorio donde puedes poner accesos directos a apps, contactos, o incluso widgets. En contraste con eso, en IOS al iniciar ves directamente el cajón de aplicaciones. No existe algo como un escritorio. Un lugar donde puedas tener tus apps mas usadas. Incluso windgets utiles para realizar funciones rápidas.

Es cierto en la ultimas versiones IOS incluye widgets (¿alguien dijo que Apple copia?)...en la barra de notificaciones. No es muy comodo tenerlos ahi , todos juntos.

En cambio la personalizaión que puedes lograr en un escritorio con Android, es fantastica. Mira algunos ejemplos:





No solo es mucho mas estetica la presentacion de Android, ademas es practica: puedes reproducir musica, leer un libro, ver el clima, usar una calculadora, todo sin abrir la app, directamente desde el widget.

¿Facil no?


2.- Boton Atras 


El boton atrás crea polémica. Es cierto no siempre sabes a donde te va a llevar. Pero es muy comodo para navegar entre aplicaciones. En IOS solo tienes el boton home. ¿Que pasa si quieres retroceder a un paso anterior? Bueno el diseñador de la app debio preveerlo y poner un boton. Pero no todos lo hacen.

Algo que es un poco frustante en IOS es que siempre que quieres regresar, debes hacerlo a la pantalla principal. Home es tu unica opción. Y si ibas a la mitad de un proceso largo , es estresante.

3.- Ajustes dentro de la aplicacion


La primera vez que quize hacer un ajuste en una aplicación en IOS me quede desconcertado. Viniendo del mundo Windows, cada aplicación es un mundo aparte y tiene su propio menu de ajsutes.

Es lo mas natural. Pero cuando me explicarion que en IOS todos los ajustes se hacen en la parte de ajustes me resulto confuso . ¿Ysi no quiero salir de la app? ¿Por que tengo que cerrarla para hacer un ajuste? ¿Que no se supone que la sección de ajustes es exclusiva para el sistema operativo ? ¿Por que mezclar todo? En serio, detesto tener que salir de una app e ir a justes para modificar algo, que se podría modificar dentro de la misma app.

Android lo hace como windows , encapsulando y separando perfectamente SO y aplicaciones. ¿Quieres ajustar algo en una app? Ahi mismo puedes hacerlo. ¿Quieres ajustar algo en el SO? Ve a la seccion de ajustes del SO.


Vaya que en este sentido IOS es mas complicado.

De hecho para varias cosas, tienes que ejecutar mas pasos en IOS, y es una navegacion un tanto menos agil.

Por supuesto, la optimizacion del sistema es buena.

El diseño, a mi modo de ver, no es el más óptimo.

Aunque al final, puede haber muchos otros aspectos por los que un usuario se decida sobre Android /IOS. Ya hemos analizado algunas ventajas de Android.