Diseño responsivo, optimización para móviles: ¿Qué incluye?

Un potencial cliente, hablando de diagramación responsive, me preguntó qué hacíamos para los móviles además de que se ajuste según la ventana. Me vi en aprietos, pues demasiadas cosas se me vinieron a la cabeza y me temo que mi respuesta fue un poco incoherente. Justo hoy me encuentro con un artículo de Paul Boag, que trata este tema, así que aquí escribo lo que nosotros queremos decir por optimización móvil.

Lo básico

El sitio responsive más básico se ajusta al tamaño de la ventana del navegador para facilitar su lectura o navegación. Son los mismos elementos que se re-diagraman según el tamaño de la ventana.

Esto es lo que normalmente incluye un theme o una plantilla responsiva común, esto tiene como consecuencia que el sitio sea más pesado para un móvil que si no se ajustara.

Lo importante

Para los smartphones y tabletas modernos el tamaño en pixeles del sitio no es lo más complicado, uno puede hacer zoom y resuelve muchos problemas si está relativamente bien diseñado.

El verdadero desafío para un smartphone es la velocidad y latencia de la conexión. Aún con 3G lo que más afecta la experiencia de un sitio es el tiempo de carga.

Entonces…

Optimización para móviles incluye:

  • Ajuste de la diagramación según las dimensiones de la ventana (media queries)
  • Otimización de las imágenes para los diferentes tamaños de dispositivos.
  • Logos y gráficos vectoriales para mejor resolución en pantallas de alta definición (retina).
  • Cambiar cómo se presenta la navegación según el espacio disponible.
  • Ajuste a links y botones para ser más amigable con los dispositivos touch.
  • Asegurarse que elementos como videos y tablas se ajusten adecuadamente en vez de ocultarlos.
  • Ajutar el cuerpo de los textos según el tamaño de la pantalla.
  • Extra Concatenación y compresión de imágenes, hojas de estilo (CSS) y javascript.
  • Evitar la carga innecesaria de archivos que no se van a usar.

Existen otras técnicas que no incluimos a menos que se soliciten específicamente, como entregar imágenes de alta definición para pantallas retina, puesto que pesan 4 veces más que las normales y no hay un modo fiable de saber con qué velocidad de conexión cuenta el dispositivo.

Esta lista no es exhaustiva de las técnicas responsive y de velocidad, pero sirve para acotar la definición y lo que generalmente incluye.

¿Me faltó poner algo? ¿Algo sobra, o está poco claro? Coméntanos.

Lo último en tecnología web

Eso nos pedía un potencial cliente en una reunión, y como buen geek, rápidamente hice una lista mental de los últimos chiches y le empecé a explicar las variadas tecnologías.

Pero me quedé pensando, atrás quedó la época en la que había que poner el logo animado con alguna técnica novedosa, en una dirección web en la que decía

Somos una empresa de vanguardia con años de experiencia que genera soluciones reales para nuestros clientes.

Todavía hay gente que espera eso de su sitio web. Pero es nuestro deber como trabajadores de la web disuadirlos, hoy los sitios web deben mostrar y hacer algo por el visitante.

La verdadera última chupá del mate, es:

Estrategia de Contenido

Ese es el verdadero futuro, pensar qué vamos a poner en un sitio y cómo va a servir para los objetivos del sitio. Personalmente aborrezco el uso y abuso de la palabra estrategia, pero la verdad es que es lo que mejor describe lo que hay que hacer con un sitio.

Hace tiempo que partimos las reuniones con preguntas de estrategia antes que de diseño; a muchos se les iluminan los ojos. Pero en general, no es una tarea fácil y las intenciones quedan en eso. Afortunadamente han habido excepciones y eventualmente nos tocan proyectos en los que efectivamente hay un re-planteamiento de los objetivos del sitio web.

Nuevo Blog, exclusivo de código

Hemos decidido dejar el blog de Médula para temas más generales de internet y diseño, lo que es código lo llevaremos en el blog especial, con un sistema de publicación semi-estático, sin base de datos que estoy desarrollando.

Yo hice varios diseños y finalmente la Violeta en unas horas hizo el genial diseño que tiene ahora.  Aún debemos hacer que funcionen bien los estilos “responsive”.

La idea es portar los artículos de código de aquí hacia code.medula.cl donde los revisaremos (especialmente el de webpay).

Esperamos tus comentarios.

Formato de una dirección postal en Chile

El problema

Es un tema que me tortura cada vez que estoy escribiendo la dirección en un sitio web, ya sea en al contacto o en el pie de página. Con lo maniático que soy para algunas de estas cosas.
Hasta hace poco, en la página de Correos de Chile te mostraban la manera correcta de escribir tu dirección cada vez que preguntabas por el código postal, pero ahora resulta que te tiran todo en una línea y listo.

En varias oportunidades traté de pillar una fuente donde saliera claramente especificado, pero sólo doy con el formato para otros países. Eso no es útil considerando que en Chile tenemos la particularidad de dividir nuestro país en comunas; comunas que pueden contener múltiples pueblos dentro de sí o que no alcancen para una ciudad, tieniendo una ciudad mútiples comunas.

Finalmente hoy, tratando de bucar alguna versión internacional del asunto, di con una empresa que se dedica a el problema este, hacen software especializado para lidiar con las direcciones.

Personalmente no tenía idea que cada país tiene su sabor muy especial de escribir las direcciones postales. Miré algunas, los británicos y los autralianos tienen unos formatos de lo más particulares, en latinoamérica somos bastante consistentes. En resumen no hay 3 o 4 maneras, hay una por país, es horrible. ¿Y la ISO? pues papando moscas parece, (o vendiendo certificados).

Los Links

http://www.addressdoctor.com/en/countries-data/address-formats.html
Aquí hay un formulario donde se puede buscar el formato por país, es el único recurso donde sale cómo se escribe una dirección postal en Chile.
También encontré un documento de Microsoft sobre internazionalización y el anexo V presenta los formatos de dirección para muchos países y regiones, entre los cuales está américa latina.
http://msdn.microsoft.com/en-us/library/cc195167

El Formato

Aquí escribo el formato como lo presenta Microsoft, ajustado para Chile según los datos de DoctorAddres.

<Título / Honorífico> <Primer Nombre> [<Segundo Nombre>] <Primer Apellido> [<Segundo Apellido>] 
[<Nombre de Empresa >]
<[Tipo de Calle]> <Nombre de Calle>  <Número de Casa o Edificio> [, [<Piso>] [<Departamento u Oficina>]]
[<Código Postal>] <Comuna>
[<Ciudad>]
[<CHILE>]

Los ítems [entre paréntesis cuadrados] son opcionales

Según lo de arriba, un ejemplo completo sería:

Dr. Perico Andrés Los Palotes Sánchez
Médula Diseño
Av. Los Leones 1745, Piso 2 oficina 13
7510838 Providencia
Santiago
Chile
	

Y el mínimo válido para una dirección.

Juan González
Coronel 2317
7510134 Providencia		
	

Más logos Transbank en vectores

Como el logo de webpay para algunos no es suficientemente confiable, resultó que me pidieron agregar el logo de transbank, que obviamente no exitía en vectores.

el nuevo y amigable logo de transbank

Pero oh! milargro de milagros, con fé partí googleando “transbank logo”  y resulta que encontré un PDF no sólo con el lgo de transbank si no que con otras variaciones del de webpay y algunas aplicaciones bien prácticas; todo en vectores bien limpiecitos. Así que aquí publico las aplicaciones en vectores.

Espero que esto ayude a más de alguno.

 

Descargar el zip con los vectores en .AI .EPS y .SVG aquí.

este sólo lo he visto en POP.

webpay plus, con el logo de transbank abajo, separado por una linea punteada rosada.

Tarjetas, todas en vectores, verticales. Me imagino que para una barra lateral.

Logo de Webpay Plus en vectores

Aburrido de siempre estar peleando con JPGs y GIFs en baja calidad, cada vez que tengo que maquetar un sitio, he armado el logo de webpay plus en vectores.

Logotipo Web pay plus de transbank, con tarjetas y redcompra.

Descargar ZIP con archivos EPS, SVG, y AI.

Está actualizado con las últimas tarjetas de crédito, VISA, MasterCard, MAGNA, American Express y Diners Club.

Buscando las tarjetas di con un buen reemplazo a la logoteca, que desde que cobran no sirve para nada… es Brands of the World, eran los únicos que tenían la tarjeta MAGNA en vectores.

La tipografía del logo es Avant Garde Demi y Avant Garde Medium, aunque en los archivos están trazadas, con interletrado -109 en Illustrator y con la letra “W” comprimida al 90% horizontal (a la mala).

Obviamente, transbank no tiene publicado este logo, no está, no tienen centro de medios ni documentación y la documentación que te mandan una vez contratado el sistema da pena, renovaron todo el sitio, hicieron un nuevo portal y hasta hicieron videos explicativos, pero sigue vendiendo solamente y no da información, digno de un monopolio.

Dejo aquí las tarjetas en EPS para descargar, aunque, en varios casos les recomiendo buscar en la página de las respectivas marcas, donde tienen los logos al día y en varios formatos.

logo tarjeta visa

VISA

Logo Tarjeta Master Card

MasterCard

Tarjeta Magna de Chile

MAGNA

Logo tarjeta American Express

American Express

Logo trajeta Diners Club

Diners Club

 

Espero que esto sirva a alguien además de nosotros.

Toolbox Theme: A good start for HTML5 in WordPress

Finally opened this blog with something.

The other day, in Paul Boag’s podcast, Paul interviewed Ian Stanley about WordPress best practices and they mentioned Toolbox, the HTML5 theme they are using as a base for building other HTML5 themes.

http://wordpress.org/extend/themes/toolbox

I had been struggling with themes a while, but none was clean enough for me, nor easy to modify, but today afternoon I remembered and gave it a try…

This theme is fantastic!

So easy to tweak! just added a few styles, added our webfont, and voilá! 30 minutes later I had a published decent HTML5 Worpress Blog.

Still tons to do, but now there is no going back, it’s so HTML5 semantically correct, a bit too much for my taste. I’m still not convinced about the multi H1  in the document outline, so I’m tweaking a little more, for better backwards compatibility.

I guess one could see this as a Boiletplate for HTML5 themes.

Toolbox Theme: Parte HTML5 en WordPress con el pie derecho.

Finalmente he abierto este blog con algo.
El otro día, escuchando el podcast de Paul Boag, Paul entrevistó a  Ian Stanley sobre buenas prácticas para WordPress. Mencionaron varias cosas, pero entre ellas me llamó la atención un theme llamado Toolbox, que Ian y su equipo han estado usando como base para hacer Themes HTML5, me imagino que lo usan como un Boilerplate, para plantillas de WordPress.

http://wordpress.org/extend/themes/toolbox

Había tenido problemas con este blog desde hace tiempo, las plantillas no me acomodaban. Muy pesadas y sucias algunas y otras tan complicadas de modificar, pero hoy en la tarde me he acordado de Toolbox…

Este theme es filete!

Tan simple de instalar y editar, como no tiene fotos y es semánticamente correcto, me bastó agregar algunas líneas de CSS, nuestra webfont y listón dePaloDeMaderaDeÁrbol! en 30 minutos tenía un blog HTML5 decente funcionado.

Aún faltan toneladas de cosas por afinar, pero ya no hay vuelta atrás, es tan correctamente HTML5. Quizá un poco mucho para mi gusto. Todavía no me convence esto de tener múltiples H1 en el delineado del documento, así que estoy ajustando el html para que sea compatible con algoritmos de delineado más viejos (backwards compatible).

WordPress y Error 310 (net::ERR_TOO_MANY_REDIRECTS):

Actualizando manualmente una versión previa de WordPress me encontré con este error… se colgaba un rato y luego: Error 310.

En WordPress este es el mensaje que muestra Chrome, Firefox sólo se cuelga; con suerte y mucho tiempo tira un timeout.

Cabe destacar que estos redirects son de header de PHP y no javascript.

Resulta que fue culpa mía. Mi configuración de apache hacía que medula.cl se convirtiera a www.medula.cl, pero la semana pasada me pareció más cool sin el www. Lo sé, soy voluble a las modas, pero de eso vivo jejeje. El tema es que wordpress se instaló sobre www.medula.cl/blog y al tratar de entrar a medula.cl/blog wordpress trataba de enviar al navegador al “Home” en www.medula.cl/blog y apache mandaba los encabezados de vuelta a medula.cl/blog y así se genera un loop o bucle eterno, que Chrome rápidamente corta.

Obviamente hay 2 soluciones, reconfigurar apache para que acepte la url con www. o más fácil aún, ir en la base de datos de la instalación a la tabla options o [prefijo_de_tabla]options.

Ahí examinar sus contenidos (si usas phpMyAdmin) y buscar en el campo option_value donde salga la URL del blog y le  sacas el www. del principio y listo.

La solución la encontré en http://wordpress.org/support/topic/error-310-neterr_too_many_redirects donde un usuario que se llama lukasztyrala me ilustró con su comentario.

Cómo Configurar Webpay en PHP

Esta es una colección de pruepas y errores que he ido teniendo al configurar webpay en algunos sitios.

Este es un post para chilenos, dado que dudo que en alguna parte del mundo todavía usen un sistema de transacciones electrónicas tan arcaico como el de Transbank, realmente una tortura tratar de entender esto, además de que no hay documentación, ni en la misma página de transbank. Sólo algunos comentarios en algunos foros.

Yo me considero un programador intermedio de PHP, he integrado varios sistemas de pagos, pero esto me dejó completamente parado, tuve que leer el manual completo y aún así no sabía por dónde empezar, así que comencé hakeando/traduciendo el ejemplo hecho en ASP y ahí encontré unas variables post por las que hiceuna búsqueda y encontré publicado el script de PHP usado por un techo para chile, lo que me ayudó a entender algunas lineas del ASP que no me entraban. Ahí es donde estoy ahora, al comienzo de este post, decidido a que si alguien busca ayuda sobre este tema en Google lo encuentre aquí.

Por mientras iré posteando los links que tienen alguna información útil.

http://www.forosdelweb.com/f125/duda-webpay-chile-213843/ varios tipos capos contestando variadas preguntas al respecto

http://svn2.assembla.com/svn/utpch/utpch/webpay/pagina_cierre.php
http://trac2.assembla.com/utpch/browser/utpch/webpay/pagina_cierre.php son el script xt compra.asp versión PHP

http://kb.mediatemple.net/questions/30/Running+scripts+outside+of+the+cgi-bin para ejecutar CGI fuera del cgi-bin

usando el script para ejecutar fuera del CGI-BIN y dando permisos de 0755 a la carpeta y los archivos corre, pero ahora me da un error de conexión.

if you set up permissions incorrectly, you'll probably get "500 Internal Server Error"

Essto explica algunas cosas.

buena referencia en : http://wiki.dreamhost.com/CGI

al final eran los permisos nuevamente: extrañamente la carpeta de logs necesita 0777 [edit:] NUNCA usar permisos 0777 no importa qué NUNCA usarlos [/edit] ¿eso significa que los logs son generados desde el servidor de transbank?
Después resulta que todo es case sentitive, así que no olvidar las mayúsculas.

luego de que se colgara lanzando un error 34 en el log, me dijeron que la última línea del config estaba mala y que para el URLCGICOM usara una dirección absoluta, duda que había tenido desde el principio.

He revisado que se mantiene el error 34 luego de modificar a dirección absoluta el parámetro URLCGICOM, que según el Manual corresponde “34 ERR_REFERER”, por lo cual agradeceré eliminar la línea del archivo de configuración TBK_CONFIG.DAT con el parámetro TBK_REFERER. Solicito por favor mantener la dirección absoluta del parámetro URLCGICOM.

otra nota: los logs se demoran en actualizar la última transacción, hasta 3 minutos en el caso del servidor que estaba probando yo.

siguen los problemas, ahora sale el error 42.

hasta ahora ni idea qué está produciendo lo siguiente:

http://200.119.239.153/seguro/compra.php

conectandose al port : (80)

No pudo abrir socket para conex-com

tienda NO acepto transaccion

respuesta enviada a TBK (ERR)

Error al conectar servidor especificado (42)

ERR;             ;42

http://200.119.229.153/seguro/compra.php;

conectandose al port : (80);
No pudo abrir socket para conex-com;
9290;   ;resultado ;1289858888                              ;15112010      ;185934;200.10.12.55   ;OK ;                    ;tienda NO acepto transaccion;
9290;   ;resultado ;1289858888                              ;15112010      ;185934;200.10.12.55   ;OK ;                    ;respuesta enviada a TBK (ERR)
;9858161553;        
9290;   ;resultado ;datoscom                                ;15112010      ;185934;200.10.12.55   ;Ok ;
597026016975         ;Error al conectar servidor especificado (42);
9290;   ;resultado ;1289858888                              ;15112010      ;185934;200.10.12.55   ;ERR;                    ;42
http://200.119.229.153/seguro/compra.php                                
9858161553;        
9290;   ;transacc  ;9858161553                              ;15112010      ;185625;200.10.12.55   ;OK ;
597026016975         ;conectandose al port : (80)                                              
9858161553;
9290;   ;resultado ;fallo abrir_conexion                    ;15112010      ;185934;200.10.12.55   ; -2;597026016975        ;No pudo abrir socket para conex-com                                        9290;   ;resultado ;1289858888                              ;15112010      ;185934;200.10.12.55   ;OK ;                    ;tienda NO acepto transaccion                                               9290;   ;resultado ;1289858888                              ;15112010      ;185934;200.10.12.55   ;OK ;                    ;respuesta enviada a TBK (ERR)                                         9858161553;        
9290;   ;resultado ;datoscom                                ;15112010      ;185934;200.10.12.55   ;Ok ;597026016975        ;Error al conectar servidor especificado (42)                               9290;   ;resultado ;1289858888                              ;15112010      ;185934;200.10.12.55   ;ERR;                    ;42

hubo que usar la IP local en algunos parámetros y se generó un error 46, que era porque estaba rechazada la autenticación por la tienda.

OJO con las direcciones con ./cgi-bin/tbk_check_mac.cgi slash sin punto en PHP, no es lo mismo que en windows.
en PHP / = raíz del dominio
en ASP / = la carpeta que ontiene este archivo. (corríjanme si estoy mal)

Luego el problema estaba en mi código en el archivo que ellos le llaman xt_compra o Página de Cierre.

OJO con subir los CGI desde Dreamweaver, si usan dreamweaver hay que forzar la transferencia a modo binario, cosa que no pude descubrir cómo hacer, así que usé FileZilla. En otra ocasión usé SFTP (FTP de conexión segura) y no tuve problema, pero no puedo recordar si fue por la conexión segura o porque no usé Dreamweaver.

Si no se suben de modo binario se corrompen los archivos, y el servidor arroja un Internal Server Error, y genera un archivo core que es binario y no pude leer.  Si uno revisa los .log del servidor (en mi caso Dreamhost) el servidor dice los siguiente:

[Tue Nov 30 10:25:34 2010] [error] [client 200.83.106.80] Premature end of script headers: tbk_bp_pago.cgi, referer: http://000.000.000.000/es/payment.php

MEDCOM 1 significa SSL, MEDCOM 2 usa redirección por javascript (cosa que no imagina cómo puede funcionar)

Iba todo bien, hasta que me puse a jugar con cURL para enviar los datos a webpay, bueno, tambin cambié el MEDCOM y el código de comercio para que funcionara en dolares, y me da un error 1 ( ERR_LECTURA_INPUT ) y ni siquiera me muestra la pantalla para pagar con la tarjeta. Vamos a depurar un poco para ver. partamos por devolver la tienda a pesos. No era ni la tienda en dólares ni el cambio de MEDCOM, OK, el error era porqeu estaba usando mal cURL ahora, por una extraña razón cURL si funciona.

Finalmente MEDCOM no puede cambiarse a 1 , por lo tanto no hay comunicación interna por SSL, entonces, aunque en el manual diga que si se puede, los siguientes parámetros tienen que ir así:

MEDCOM         = 2 (1 no se encuentra disponible)

URLCGICOM      = http://www.example.com/cgi-bin/tbk_bp_resultado.cgi --> no puede ser HTTPS://... y les recomiendo que sea absoluto

PORTCOM        = 80 à 443 no está disponible

Adicionalmente....

PORTCOM        = 80 à 443 no funciona (o yo no he logrado hacerlo funcionar)

HTML_TR_NORMAL = http://www.example.com/interno/xt_compra.php --> no puede ser HTTPS://... y les recomiendo que sea absoluto


http://www.webmasterworld.com/php/3164561.htm

<?php

$transbank_format_number = number_format($totalCompra, 2, '', '');

?>

Ahora estoy batallando con xt_compra.php

y Éxito!

ahora a formatear el resultado para que en transbank aprueben el sistema.

Rant on Flash, HTML5 and Uncle Steve

What I don’t get is this visceral hatred towards flash, I know it allows bad design, but so does jQuery, CSS3 and dear Photoshop. jQuery using more battery than flash for the same task.

Don’t get me wrong, I think JQuery, MooTools and others similar are one of the best things to happen to the internet, but, just as flash, it’s not the panacea.

People seem to forget that the main attribute to flash is not animation, it’s the ease for making things work across platforms. Plugin architecture is far from ideal, but clearly it has worked far better than asking Software Companies to stick to a spec. 3 specs if you want to do what flash does.

If Steve Jobs claims sloppy coding on behalf of Adobe, but one can say the same about how Apple works with hardware.

Flash has huge improvement to do efficiency wise, still needs ways to handle crashing and resource utilisation. Flash Player 10.1 addresses this quite decently. Still I was hoping that with SC5 they would work on something better.

This is far from over, and I think this could lead to mayor mayor changes like the settlement of HTML5 as a real, stable, adopted spec. Or huge improvement on the flash platform and the fulfilment of the Open Screen Project (which, as a developer, am a bit ambivalent on).

The huge problem I have with JavaScript is performance (even on Chrome), compared with ActionScript 3, which is absurdly fast considering it is an interpreted language.

That would be the rant I had been choking on for a few weeks.

Let the wrath of the Open Source righteous rain on me.
———————————————————-
I might soon elaborate on this a bit…