domingo, 28 de diciembre de 2014

Diseño web responsive, adaptativo y flexible.

     Para empezar hay que conocer las características de cada uno de ellos que se pueden ver en esta web: http://www.csslab.cl/ejemplos/responsive-adaptativo-flexible/ y que contiene las siguientes definiciones:
     Flexible: El más antiguo y soportado por todos los browsers, también denominado líquido. Usa unidades de medidas como porcentajes y no requiere mediaqueries.
     Adaptativo: Rama del responsiveness, responde a múltiples versiones del mismo diseño que se adapta según el tamaño de la pantalla bajo diferentes anchos ya definidos.
     Responsive: Acuñado en 2010 por Ethan Marcotte, corresponde a una grilla fluida* que responde al cambio del ancho de un browser mediante mediaqueries, el cual incluye imágenes y vídeos.
*Entendiendose por grilla fluida que aparecerán más o menos cosas, o cosas diferentes según el tamaño de la pantalla disponible en el navegador.

     Por lo tanto para hacer un diseño actual y que sirva para todos los dispositivos se debería emplear responsive, que incluye el uso de mediaqueries. Un ejemplo e una de ellas está en la web de Mozilla para desarrolladores: https://developer.mozilla.org/es/docs/CSS/Media_queries
<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
    .facet_sidebar {
display: none;
}
}
</style>

     Ésta en concreto, hace desaparecer la barra de scrool si la pantalla es menor de 600px. Pues se entiende que estamos en un dispositivo móvil y estos no disponen de este elemento pues nos desplazamos con el dedo sobre la pantalla.

     Y como no voy a descubrir la pólvora describiendo algo sobre estos tipos de diseño, me voy a centrar en una de las herramientas que disponemos para hacer este trabajo, que es el navegador. Y en mi Firefox Developer que es el que utilizo habitualmente.

     Firefox Developer tiene un complemento, 'User Agent' que nos identifica frente a un servidor web como otro navegador y del sistema operativo que elijamos. Para instalarlo solo debemos ir al menú del navegador y en 'Complementos' buscarlo.
     'User Agent' por defecto tiene unos pocos navegadores pero le podemos instalar un paquete de navegadores descargando el archivo desde la web del plugin (http://forums.chrispederick.com/discussion/7/a-large-regularly-updated-import-list-of-user-agents) y tras instalarlo se muestran todas las identificaciones nuevas:

     Por supuesto cada cual puede añadir un navegador más concreto con el que se quiera identificar frente al servidor. Así el servidor aplicará junto a mediaquires lo que quiere enviar y el navegador se comportará con ello como esté preparado. Para ello le damos a la opción 'New' y nos aparece esta nueva pantalla:

     Rellenamos los datos y listo. Otro navegador más. Para saber todos los datos del navegador con el cual nos estamos moviendo tenemos las funciones de Javascript:
alert(navigator.appCodeName);  // visualiza el nombre en código del navegador 
alert(navigator.appName);    // visualiza el nombre del cliente.
alert(navigator.appVersion);    // visualiza información sobre la versión del cliente
alert(navigator.cookieEnabled); // true si cookies están o no habilitados en el navegador
alert(navigator.platform); // visualiza la plataforma sobre la que se está ejecutando el programa cliente 
alert(navigator.userAgent); // visualiza la cabecera completa del agente enviada en una petición HTTP.
También podemos capturar el tamaño de la pantalla disponible del dispositivo que estemos utilizando con: windows.innerHeight y screen.innerHeight para diseñarle milimetricamente a un dispositivo concreto con su tamaño y píxeles por pulgada del mismo.

     Para complementar este plugin debemos instalar también el plugin 'Firebug' que te permite estudiar una web desde su código fuente.
Nota: en Firefox Develorer 'Firebug' se puede disponer la presentación abajo; cosa que Firefox normal no deja. No sé el motivo.

      Para mostrar los iconos de los plugins que nos interesa tener en la barra del navegador nos vamos al menú y le damos a personalizar y arrastramos a la barra el icono de 'User Agent' y, si no lo tuviéramos ya, el de 'Firebug':

     Una vez hecho esto solo tenemos que abrir pinchar en 'User Agent' y seleccionar el navegador por el que se va a presentar Firefox al servidor web. Después nos vamos a 'Firebug' y en la pestañita de 'Tools' → pinchamos en 'Vista de diseño adaptable' y se nos encojerá la pantalla visible con unos indicadores para estirar y encoger la pantalla visible.

     Por último y también muy importante poder jugar con la resolución de la pantalla que queremos simular dándole a las teclas 'ctrl +' para aumentar la pantalla o 'ctrl -' para cambiar los píxeles por pulgada ('ctrl + 0' para restaurar a valores predeterminados). Simulando con todo ello un navegador muy concreto.

     Bueno, todo esto es lo más aproximado que se puede utilizar, pero para ver el resultado real tendremos que verlo en el dispositivo original.

     @eltiopacote
Índice de todas la entradas: http://www.pacovalverde.es/indice/

sábado, 13 de diciembre de 2014

'Sublime Text' es sublime.

     Sublime es un editor de texto para diseñadores web. Para mí el mejor. Lo he descubierto recientemente, pero en el poco tiempo que llevo utilizándolo se ha convertido en una herramienta imprescindible.

     El autocompletado de código es increible. Los colores utilizados para las etiquetas, variables, funciones e instrucciones condicionales y bucles es muy acertada e identifica a estos elementos a golpe de vista.
Su complemento perfecto, diría yo, es Firefox pues puedes ver lo que estás haciendo y como queda en un navegador al instante. Si

     Solo le falta una mínima compilación. Por lo menos que te indique cuando falta un punto y coma al finalizar una instrucción cuando estás picando código Javascript o PHP. Te podría indicar si te falta un punto en la unión de cadenas en PHP o el signo más en Javascript.
Un error que tampoco contempla es cuando haces referencia a un objeto en Javascript que todavía no has creado. Esto último reconozco que es muy difícil de controlar y contemplar pues se  puede hacer referencia a ese objeto desde cualquier otro documento que no estuviera en la misma ruta que el archivo. Esto sí lo controlan los IDE tradicionales como NetBeans puesto que todos los archivos que se van a utilizar están en la misma carpeta.

     Pero para el que no lo conozca, pasemos a su configuración:
     1º Después de descargarlo (http://www.sublimetext.com/3) y ejecutarlo por primera vez este es su aspecto original:

     2º Cuando abrimos un par de archivos vemos como se colocan por pestañas:

     3º Instalamos 'Package Control' para Sublime Text 3 desde https://sublime.wbond.net/installation#st3 Tras copiar el código, hay que ir al editor, pulsar en 'View' → 'Show Console', pegar el código y pulsar intro. Mientras está instalando los plugins en la parte baja verás un signo igual yendo de un lado para otro entre unos corchetes.

     4º También hay que activar el 'Side Bar' en 'View' → 'Show Side Bar'. Y reiniciamos el editor.
Su aspecto actual sería este:

     5º Ahora, en 'Preferences', pinchamos en 'Package Control', elegimos 'Install Package' y buscamos 'SideBarEnhancements'.
 Ahora, tras abrir alguna carpeta en el 'Side Bar' podremos ver las nuevas opciones, por ejemplo, 'Open in Browser'.

     6º También podremos abrir varias ventanas en columnas o filas desde 'View' → 'Layout' y seleccionar la vista que más nos guste. A mí en particular me gusta tener 2 filas. El aspecto sería este:


     Nota: Post con 12 consejos para ampliar Sublime: http://unadocenade.com/una-docena-de-plugins-indispensables-para-sublime-text/ (algunos ya están aquí)

     Pero por si esto no fuera suficiente, hay más. Se puede configurar la ruta de un servidor local y a la hora de ejecutar scripts PHP se va directamente a http://localhost/ruta/archivo.php y ejecuta el script. Para hacer esto tenemos que cambiar la ruta de localhosts en el fichero de configuración de tu servidor Apache2.

En XAMP abrimos y clic en el botón config de apache httpd.conf. Buscamos las líneas DocumentRoot "C:/xampp/htdocs" y <Directory "C:/xampp/htdocs">
 Las comentamos colocando una # y volvemos a escribirlas con la ruta deseada para el localhost.
     Ahora en el explorador de archivos del 'Side Bar' pinchamos sobre un archivo y nos vamos a la opción 'Project' → 'Edit Preview URLs' en el archivo que se abre en blanco llamado 'SideBarEnhancements.json' escribimos:
{
"C:/xampp/htdocs":{
"url_testing":"http://localhost",
"url_production":"http://127.0.0.1"
}
}

Y después de eso, como tenemos varios paquetes ya intalados y los atajos convencionales han chafado al atajo 'F12' para abrir el documento escribimos nuestro propio atajo. Nos vamos a 'Preferences' → 'Key Bindings – user' y en el archivo 'Default (Linux).sublime-keymap' escribimos esto:
[
    { "keys": ["ctrl+shift+o"],
        "command": "side_bar_open_in_browser" ,
        "args":{"paths":[], "type":"production"}
    }
]
     En mi caso el contenido de los dos ficheros es este:

     Por lo que vemos Sublime Text es muy modulable y configurable perfecto para programadores web. En el próximo post explicaré porque Firefox es el complemento casi perfecto para Sublime Text.

     @eltiopacote
Índice de entradas en: http://www.pacovalverde.es/indice