miércoles, 19 de agosto de 2015

Trabajando con Icon Fonts

Ya no existen Aplicaciones o Sitios Web profesionales que no posean un set de íconos que acompañen a las acciones más comunes o trascendentes dentro de los mismos. Son la mejor forma de sintetizar lo que se espera de una interacción determinada por parte de un usuario en nuestra aplicación, además de servir para embellecer el diseño propuesto. Por último, y no menos importante, ayudan (y mucho) a mejorar la usabilidad de nuestros entornos, utilizando representaciones gráficas ya globalmente estandarizadas que hacen a nuestras aplicaciones más intuitivas y fáciles de aprender. Todo esto hace que trabajar con íconos sea hoy en día imprescindible.

Cuando únicamente se dispone de “mapas de bits” para llevar estos íconos a la pantalla del usuario, -y sugiriendo que no se pretende tener más de una imagen y programar una lógica que elija cuál mostrar-, sucede que, a la hora de diseñar aplicaciones responsive, empiezan a aparecer las dudas acerca de cuál es el tamaño óptimo de esa imagen para todas las resoluciones a las que está dirigido el diseño. De ello resulta que para resoluciones superiores necesito una imagen de mayor tamaño, que consecuentemente va a pesar más, que no es óptima para un dispositivo móvil; a su vez, este dispositivo móvil no necesita una imagen tan grande, y puede que necesite conectarse a conexiones más lentas en las que el peso total de la aplicación incide sobre el rendimiento. Sucede lo mismo a la inversa: una imagen óptima para un dispositivo móvil, pierde definición en un monitor de escritorio, por poner un ejemplo. Y esto solamente sin sumar cómo se renderizan algunas imágenes en pantallas de distinta densidad de píxeles, o con píxeles que no son cuadrados u otros detalles derivados del “Pixel Ratio”, etc.
Por ende, la mejor opción para resolver buena parte de la base del diseño de nuestra aplicación, es llevar nuestros iconos embebidos en Icon Fonts, lo que nos garantiza compatibilidad con la mayoría de los dispositivos móviles y navegadores de escritorio. Los Icon Fonts son básicamente fuentes de texto como los Arial, Times New Roman, etc. Sólo que en lugar de letras se trata de símbolos. Esto conlleva una serie de ventajas:
Los Icon fonts son bastante más livianos que los iconos generados como imágenes.
Como son fuentes de texto se pueden manipular de la misma manera que a un texto con CSS. Con un color: #00F; consigues un icono azul. Con font-size:2em; tienes un icono responsive y controlas su tamaño, etc etc. Esta es probablemente su mejor característica.
No importa el tamaño; nunca se pixela.
Pero mejor que hablar de sus prestaciones, es mostrarlas:

lunes, 21 de julio de 2014

Enviar Variables POST desde PHP con cURL sin usar formularios


Hoy veremos como enviar variables del tipo GET desde un sitio remoto, sin contar con un Formulario clásico de HTML <FORM>. Es decir, que emularemos el comportamiento de un formulario HTML y enviaremos variables del tipo POST a un servidor o dominio específico.

Hay múltiples razones por las que podemos necesitar hacer algo así, y contar con esta alternativa y saber de su existencia puede sernos útil a la hora de tomar decisiones para resolver problemas concretos. En principio, lo más común es que necesitemos enviar informarción desde un sitio alojado en un servidor a otro alojado en otro servidor y queremos evitar el uso de variables GET que nos obliguen a develar información o a tener que encriptarla para su envío.
En nuestro caso, teníamos un formulario de contacto clásico en un sitio web, y necesitábamos que esa misma información se impactara en un servicio alojado en un servidor diferente, en otro dominio, sobre una estructura completamente diferente, y de alguna forma requeríamos actualizar ambos sistemas de forma sincronizada. La razón por la que usamos este método es porque el sistema destino ofrece una forma estandarizada de añadir más información a su base de datos, que utiliza un formulario HTML propio de la aplicación, y es el mejor método y más seguro, que evita además entrometerse en la Base de Datos por detrás del sistema propiamente dicho y correr el riesgo de corromper su estructura.

Para alcanzar este objetivo, utilizamos una extensión de PHP denominada cURL. Esta extensión nos permite establecer sockets de conexión de varios de tipos: FTP, SFTP, HTTP, HTTPS, etc. De este modo, lo utilizaremos para enviar nuestras variables POST a un servicio alojado en un servidor externo.

miércoles, 30 de abril de 2014

Internet Explorer es vulnerable a un nuevo ataque informático

La compañía especializada en seguridad informática Fire Eye reveló una falla en las últimas versiones del Internet Explorer. Mientras Microsoft trabaja en un parche, diversas consultoras, gobiernos y el propio Microsoft recomiendan deshabilitar el complemento flash o utilizar otro browser como alternativa.



El problema
Acorde al informe proporcionado por Fire Eye, el ataque apunta a las versiones 9, 10 y 11 del Internet Explorer, aunque también son vulnerables las anteriores. La vulnerabilidad permite a un hacker insertar un código maligno en un enlace swf (flash) que afecta a la memoria del sistema. De este modo, puede ejecutar un código remotamente en la computadora del infectado.

Las consecuencias de una filtración como esta son varias, quizás la más grave de todas sea la posibilidad de robar nombres de usuario, contraseñas y datos que el usuario ingrese a su computadora como números de tarjeta de crédito, cuentas bancarias, etc.

viernes, 7 de febrero de 2014

Los complementos de Firefox que no te pueden faltar


Firefox es el navegador más flexible que existe. Además de ser una aplicación muy robusta, lo que le permite, a pesar de consumir una considerable cantidad de memoria RAM, ser un navegador muy fluído y veloz. Pero lo más notable de Firefox es su capacidad de adaptarse a las necesidades y gustos del usuario a través de los complementos que puedes descargar de su repositorio oficial.

Acá te listamos los que consideramos imprescindibles para todo diseñador y/o desarrollador web.

Firebug

El complemento por excelencia. Es lo primero que debes instalar ni bien inicias el Firefox por primera vez.

Esta poderosa herramienta te permitirá "debuguear" todos los sitios webs que quieras. Podrás revisar el código HTML y hacer pruebas en tiempo real. Podrás rastrear errores en librerías basadas en Javascripts que implementes, además de contar con una poderosa consola para hacer rastreos rápidos (Quick Watch) de las partes de código en tu aplicación web. Puedes además probar estilos CSS, jugar con tus clases y estilos aplicados.
Entre todas las funcionalidades que trae, cuenta además con un rastreador de Red, que te permitirá monitorear los tiempos de carga de tu aplicación o sitio web, además de obtener un práctico detalle de las partes de código que tardaron más o menos tiempo en cargar, o de aquellas que tuvieron algún error, o que no respondieron, etc.
Una vez instalado, puedes acceder a Firebug apretando F12, o haciendo click sobre el logo del "escarabajo" que está ubicado normalmente en la parte superior derecha del Firefox. Recuerda que una vez encendido, puedes experimentar un leve retraso en la carga de los sitios, ya que el complemento consume algunos recursos extras para analizar todo el cógido del sitio (dependiendo también de la cantidad de paneles que tengas habilitados), así que puedes desactivar todos los paneles con el acceso rápido en tu teclado de Mayus+F12.