Archive for the ‘tecnologías’ Category

Internet Explorer 11 y la…

enero 28, 2014

… cadena que identifca el user-agent.

Síntoma: algo anda en Internet Explorer 10 y al actualizar a 11 deja de andar.

Esto se debe a que nuestros humildes programas web tienen que adaptarse a las características de javascript de cada navegador.

La solución más clásica era buscar el substring “MSIE” en el User Agent String.

Internet Explorer 11 no quiere que lo traten como a sus versiones anteriores y no incluye el substring MSIE.

Para eso recomiendan con mucho tino detectar características en vez de substrings.

En el raro caso de que no se pueda, reconocerlo con el substring Trident.

Mientras hacemos los arreglos el modo de compatibilidad nos puede sacar del paso.

En nuestro caso había que bloquear el F5 y el Control-R. La implementación para IE usaba el evento document.onkeydown, mientras que la versión para Mozilla y Chrome usa addEventListener al evento “keypress”.

Con IE11 trataba de hacer el addEventListener a keypress, lo reconocía, pero al hacer F5 a pesar del return false seguía corriendo el evento. En Mozilla/Chrome esto no pasaba. Lo pasamos a document.onkeydown y todo joya. ¡La próxima será MSIE!

La aplicación no la hicimos nosotros, sino un proveedor externo y el cambio tenía que ser lo menos invasivo posible. Fuimos por el Trident.

Anuncios

¿El fin de xAMP?

diciembre 11, 2013

Para no abandonar el vicio estoy haciendo algunas cositas en PHP.

Pero como adquirí vicios estoy tratando de evitar eso de mezclar lógica con renderizado de html. A lo que llegue fue a armar un html bien básico y jQuery y eventos mediante, circunscribo los pedidos al servidor en una capa javascript que gestiona los requests y renderiza el resultado de los response.

Del lado del servidor quedan unos scripts PHP muy sencillos que se concentran en ejecutar la lógica y devolverlos en un formato javascript friendly. Tan reemplazable con servlets + jaxb…

Hace poco compré un librito(sí… es vintage, pero no hay nada más lindo que recibir del correo tradicional el sobre marrón) de manning acerca de Single Page Web Applications. El libro tiene más o menos la misma arquitectura pero la variante que propone es node.js del lado del servidor reemplazando a PHP y jubilar a MySQL por la cada vez más ubicua MongoDB.

Es muy difícil en el mercado rioplatense vender una aplicación que confía sus datos a Mongo…DB, pero parece que las cosas van para ese lado.

¿será el fin de apache, MySQL y PHP?

Incluir videos en SPIP

julio 9, 2008

Hace mucho tiempo que mis SPIP adictos me vienen pidiendo como incorporar videos en sus sitios.

Por cuestiones de ancho de banda, y también promocionales, es conveniente tenerlos en youtube. La única salvedad que tiene es si youtube está bloqueado en el lugar donde queremos ver. Para solventar esto se puede programar un proxy para youtube (perdiendo las ventajas antes mencionadas) o bien ver los videos fuera de horario de oficina.

El método es sencillo: se los agrega como un documento adjunto.

  1. Subimos el video a youtube.

  2. Una vez que tenemos el video en youtube debemos observar la dirección que youtube le asigna:

    http://www.youtube.com/watch?v=OlLT7-7FUiU

    Para esta dirección nuestra dirección de carga será:

    http://www.youtube.com/v/OlLT7-7FUiU

    En el Cuadro “AÑADIR DOCUMENTO” hacemos clic sobre desplegable “Subir desde tu ordenador”. Esto nos muestra otra caja de texto que tiene solamente el contenido “http://”. Nosotros lo reemplazamos con la dirección de carga “http://www.youtube.com/v/OlLT7-7FUiU” y apretamos “Elegir”.

  3. Se cargará un bloque nuevo con título “OlLT7-7FUiU” y en la parte inferior de este bloque debemos asignarle Dimensiones (0 x 0 por defecto). Nosotros le asignamos 425 x 344 píxeles. Este paso es tan importante como el anterior. No hay que omitirlo. Si quisiéramos cambiarlo de tamaño basta con ajustar el 425 x 344 a otra relación. Es el alto debe ser aproximadante 81% del ancho.

Con esto tenemos el documento adjunto. Para que aparezca en la página solo resta incluir la etiqueta <embXXX> en el editor de texto de nuestro documento, donde XXX es el número asignado al video.

¡Voilá!

¡Feliz día, Patria!

ASP.NET MVC

enero 19, 2008

Anoche fui a una TechNight de Microsoft donde presentaron ASP.NET MVC. Los chicos que dieron la exposición estuvieron muy bien, y que haya habido cerveza y papas fritas a la salida me pareció un gran gesto. Eso y los ojos de una muchacha que andaba dando vueltas por ahí, azules como el cielo de este hermoso día.

Mi pregunta era como habían hecho las cosas… No las hicieron mal, solo que las hicieron igual… ¡Ejemplo del blog con comentarios incluido!

Igual a Ruby on Rails, a Monorail, a CakePHP, a todos los frameworks MVC, pero con las tecnologías de VS 2008. Como ORM utilizan LINQ, como API para Sindicación usan WCF, etc.

Algo muy positivo es que los módulos que componen el modelo se comportan como módulos realmente y son intercambiables.

Tiene un router de urls, expresiones regulares para validar. ¡Está todo!

Tal vez lo más interesante sea en que cada parte sea implementada como una interfaz, permitiendo implementar las propias, hacer mock-objects, utilizar sistemas de templates como los de MonoRail o implementar el propio sistema de Ruby On Rails. Es muy flexible en eso. Esto para integrar aplicaciones ya desarrolladas es un golazo.

Otra ventaja -que al programador asp.net medio no le parece tal- es que se van el viewstate y el postback. ASP.NET depende mucho de estas cuestiones y ahí es donde se complican la mayoría de las páginas. Haber transportado el esquema de eventos de Visual Basic a la web es algo que ayuda mucho a acortar la curva de aprendizaje para pasar de una tecnología a otra, pero los dolores de cabeza empiezan cuando hay que hacer cosas en AJAX, o necesitamos manosear el DOM desde javascript. Se puede calcular o directamente obtener el id del DOM de los controles. El drama es cuando estos son generados como ItemTemplates, hay que hacer alguna chanchada. El esquema es bueno en una aplicación de escritorio, pero en web es muy pesado. Esto lleva a que todos los controles que dependían del viewstate y del post-back hayan quedado, bueno, “deprecated”. Tendrían que haber visto como se puso la monada cuando los chicos tuvieron que avisar que el GridView no iba más. AJAX.NET también se ve comprometida.

Tranquilos muchachos, están los Helpers de la UI para generar nuestros nuevos controles. En vez de Viewstate usamos el cache del lado servidor. Es programar un poco más, pero podemos armar nuestro propio Viewstate usando la Cache. Y ganamos obteniendo páginas y sesiones más livianas.

Con .NET 3.5 hay variables tipadas dinámicamente, saludando al variant de VB. Sinceramente, si no era porque las variables NO empezaban con $, hubiera jurado que estaba viendo código PHP y templates de CakePHP en Visual Studio 2008.

Otra cosa es que IIS 7 ya permite Rewrite Rules o algo por el estilo. Lo que nos permite hacer la magia de las urls amigables a la intuición del usuario y a los buscadores.

La verdad es que me parece muy bueno que ASP.NET provea la posibilidad de trabajar con MVC, al margen de que yo lo haga. Le da al desarrollador un enfoque nuevo muy útil en varios escenarios.

Espero que le den para adelante, porque se va a ganar mucho en flexibilidad y legilibidad del código. Pero tal vez lo mejor es que trabajar con MVC nos ayuda a identificar mejor los requerimientos de nuestra aplicación y trabajar en función de ellos. Después si tiene que salir en ATOM, XHTML o código morse ya es problema de la vista y sus helpers. Nosotros tenemos nuestro controlador que hace el trabajo importante.

Yo voy a seguir firme junto a PHP5, SPIP y CakePHP en trabajo independiente, dado que no tengo un IIS7, ni plata para comprar un módulo ISAPI de redirección para IIS6 (otra cosita que tuvieron que contar los chicos), pero ASP.NET MVC sería mi “weapon of choice” a la hora de trabajar en web con .NET.

SPIP y las palabras clave

septiembre 20, 2007

SPIP tiene un mecanismo muy poderoso de categorizar contenidos por palabras clave.

Por un lado propone las secciones para cargar artículos asociados a una temática. Un ejemplo sería una comunidad en particular que quiere publicar noticias y opiniones, cada uno con su formato particular.

De golpe en el contexto ocurre un evento, por ejemplo: la comunidad es una comunidad de jugadores de rugby y a su vez está ocurriendo el Mundial de Rugby de Francia. Este mundial genera noticias (resultados, fixtures, etc) y por otra parte opiniones (comentarios de partidos, amistosas sugerencia, etc)

Si quisieramos armar una página especial por el mundial de Rugby podríamos armar una sección nueva y cargar todos las noticias y las opiniones ahí. Pero surgiría el problema del formato. Además, ¿que pasaría si yo quisiera que las noticias del mundial salgan con las noticias de la comunidad, lo mismo que las opiniones?

Las palabras clave vienen al rescate. SPIP permite definir grupos de palabras clave a los cuales se les asocian diversas palabras clave. En nuestro ejemplo podríamos definir un Grupo de Palabras Clave que se llama Torneos y en ese grupo una palabra clave concreta: “Mundial de Rugby Francia 2007”. Podríamos crear otras palabras Clave: “Campeonato de la URBA”, “Gira a Nueva Zelanda” y así las que queramos.

Bastará con crear un esqueleto con el contenido estático y el recorrido de las palabras clave que estemos usando.

Podríamos incluso abrir un canal RSS dedicado solo al evento mediante el mismo uso de la palabras clave.

Como se puede ver tiene muchas posibilidades. Espero que haya sido útil. Nos vemos y vamo’ lo’ puma’!

interface: widgets para jQuery

agosto 30, 2007

Estoy haciendo un sitio institucional estático para un vivero, muy básico. Puro HTML y trabajo en javascript.

La diseñadora gráfica armó un esquema muy lindo, aunque que muy “à la Flash”. Así que estoy haciendo magia con CSS y javascript para que quede lindo como en el bosquejo que me mandaron.

El problema era un ScrollBar no estándar muy bonito que por más que se presione al CSS, se ponía poco menos que imposible.

Había que apelar a algún widget en javascript y encontré el Slider de la biblioteca Interface para jQuery.

La única observación es que no funciona en Internet Explorer con jQuery 1.1.3 o 1.1.4, pero funciona de pelos con jQuery 1.1.2 que es la que podés descargar del sitio de Interface.

El problema era que en total toda la biblioteca pesa 80KB + 21KB de jQuery es pesadito. Interface también ofrece una solución para esto: se puede seleccionar los widgets que queremos y nos genera la biblioteca con lo que usás y nada más. Para el Slider necesitaba Drag&Drop y el propio Slider, peso del interface personalizado: 24KB + 21KB de jQuery.

Con eso conseguí el bloquecito de texto, y me quedó bastante bien el layout.

¡Hasta la próxima!

JsCalendar Helper para CakePHP

agosto 26, 2007

Necesitaba incluir el JsCalendar y me puse a buscar si estaba implementado el Helper, pero no. Lo más parecido era un controlador que se puede ver en este link.

No está nada mal, pero me resultaba un poco molesto tener que usarlo como controlador. Además el propio Pierpaolo invita a que lo mejoremos.

Yo decidí encararlo como Helper y que a la hora de imprimir el calendario en la vista sea lo más general posible.

El primer problema que se me presentó fue el de incluir los archivos .js y .css. Como estoy trabajando con 1.1.16.5421 necesitaba incluirlos en el layout. Googleando encontré que alguien ya había hecho algo para resolver este problema aquí. Hay que tocar el layout pero esto provee un Helper bastante bonito para lo que necesitaba.

Resuelto esto ya podía armar el Helper.

Tomé la clase PHP que viene con la distribución del JsCalendar. adapté el constructor al esquema de CakePHP. Desde el constructor se selecciona el look, el idioma, el directorio relativo a js, css e img de CakePHP. A su vez se setean otras opciones por defecto. Además tuve que agregar dos parámetros. Uno ‘align’=>”, porque con MSIE salía por cualquier lado. El otro es ‘width’=>’240px’ porque el ancho iba hasta el borde derecho de la pantalla.

El método de carga de los scripts fue modificado para trabajar con HeadHelper.

Por último modifiqué “make_input_field” para que funcione con un input, una image y un link del HtmlHelper. También valida que no se haya invocado el método de carga mediante una variable de instancia. Con eso ya tenía el calendario funcionando como un helper.

¿Cómo lo uso? Cargo el helper en el controlador con la variable $helpers.

<?php
echo $jsCalendar->make_input_field( 'Proyecto/inicio', #tagName del input
array(), #opciones del calendario(*)
array(
'name'=>'data[Proyecto][inicio]', #campo
'value'=>$html->tagValue('Proyecto/inicio' ) #valor inicial
); ?>

(*) se puede ver la documentación del jsCalendar.

No hace falta usar tantas líneas, la idea es usarlo como cualquier otro widget de Html.

Los scripts js del calendario se deben poner en webroot/js/calendar/. Los css en webroot/css/calendar/ y las imágenes en webroot/img/calendar/. En caso de usar Skins deben estar los archivos distribuidos en los directorios de los css y las imágenes.

Se puede descargar el helper con el esquema de directorios.

Bueno, espero que sea útil como me resultó a mí y si quieren mejorarlo, bienvenidos sean.

Problema con acentos, ñs y CakePHP

agosto 17, 2007

Haciendo pruebas con una aplicación que tengo para proyectos, encontré que cuando cargo acentos, ñs u otros caracteres latinos CakePHP me cortaba las cadenas a partir de la primer ocurrencia del caracter “malo”.

¡Oh no! ¡Problemas de charset! Como estoy con la versión 1.1.16.x no tengo soporte de internacionalización, ni nada.

Googlear fue inútil. No encontré nada. La cuestión es que me fije la codificación del navegador y era la fatídica “Europa Occidental (Windows)”.

CakePHP usa utf-8 para comunicarse con la base de datos. A su vez presupone que se le pasan datos utf-8. Cuando el navegador mandaba los datos los mandaba en latin-1, CakePHP los procesaba como si fueran utf-8 y ahí venía el problema.

Esto pasa porque el servidor está andando sobre Windows y por defecto envía las páginas como iso-8859-1. Basta con corregir esto para que vuelva a funcionar.

¿Cómo eludir el problema sin tener que modificar el código del núcleo ni la configuración del servidor (recordar que esto no siempre está al alcance de uno)?

Agregando en el <head> de la aplicación (dir_aplicacion)/views/layouts/defaults.thtml el siguiente tag:

<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

Con eso se arregló y ya tengo mis acentos!

Saludos, y hasta la próxima.

PHP 4 se discontinúa

agosto 5, 2007

Según el sitio de PHP la versión 4 se discontinúa a fin de año, después de más de 7 años de buen y leal servicio. Se seguirán haciendo fixes críticos hasta el 08/08/08.

Para empezar a ponerse en tema acá hay una guía de migración a la versión 5.

Por lo que pude ver de la versión 5, además del modelo de objetos mejorado, la inclusión de iteradores, SQLite, manejo de excepciones, trae mejoras en las funciones del tratamiento de strings y unicode. Si bien esto no se anuncia con bombos y platillos, es muy util para nosotros, que estamos fuera del charset ASCII.

Las aplicaciones que se ven más afectadas son aquellas que hacen uso del -tan vapuleado- modelo de objetos de PHP4. La ventaja es que el modelo actual es muy parecido al de java, permitiendonos aprovechar nuestra experiencia en el lenguaje de Sun. Sin embargo hay una directiva para mantener la compatibilidad con el modelo anterior.

Así las cosas, habrá que ponerse a actualizar y revisar lo programados.

Saludos!

jQuery

julio 27, 2007

jQuery es una biblioteca javascript. Su slogan es “Escribí menos, hacé más”. La idea es escribir JavaScript de una manera intuitiva.

Ahí me sonó la alarma: ¿escribir JavaScript de una manera intuitiva? ¡Ni loco! Bastante me tomó aprender a garabatear js para andar cambiando a esta altura del partido. Pero seguí, porque me llamaba la atención. Además porque tenía que usarlo con SPIP.

¿En qué consiste entonces esa manera intuitiva?

jQuery nos propone acceder a los elementos mediante consultas al DOM y devolviéndonos un objeto adaptador.

¿Por qué usar esta forma?

La manera de seleccionar los objetos es muy flexible. Se basa en tres formatos, 2 de los cuales son estándar: CSS, XPath y uno propietario (y bastante intuitivo). Se pueden ver acá

A su vez los objetos adaptadores son muy flexibles. Nos permiten manejar los atributos, los eventos, los adyacentes y padres en el DOM, algunos efectos visuales y ajax. Todo esto está muy bien documentado en docs.jquery.com.

¿Cómo empiezo?

Primero hay que bajar la biblioteca. La incluimos en nuestra página mediante:

<script type="text/javascript" src="jquery.js" mce_src="jquery.js">
<script>//mi c&oacute;digo fuente</script>

Una de las primeras cosas que debemos hacer es ejecutar código cuando la estructura del documento está cargada. Esto lo hacíamos con window.onload = function() { … }. Pero había que esperar a que carguen las imágenes. jQuery soluciona esto mediante método $().ready().

$(document).ready(function() { ... })

¿Qué es $()?

Es la consulta propiamente dicha y nos retorna el objeto adaptador. Se le puede pasar un cadena con la consulta, un elemento del DOM o incluso una cadena html que nos genera elementos html en el aire.

Otra propiedad interesante es que los métodos del objeto adapta retornan el mismo objeto (salvo aquellos donde lo que se retorna es un valor, como se verás más abajo). Esto permite encadenar varias acciones sobre los objetos reduciendo las líneas de código.

Para cerrar vamos a mostrar un pequeño ejemplo. Tenemos una lista de títulos y textos descriptivos. Esto podrían ser feeds de un blog. Queremos listar los títulos y ver solo la descripción cuando alguno en particular nos interese.

<ul>
	<li><span>titulo 1</span>
    
Este es el texto de   la descripci&Atilde;&sup3;n colapsable n&Atilde;&ordm;mero 1
    <a href="#" mce_href="#">mostrar</a></li>
	<li><span>titulo 2</span>
   
Este es el texto de   la descripci&Atilde;&sup3;n colapsable n&Atilde;&ordm;mero 2
    <a href="#" mce_href="#">mostrar</a></li>
	<li><span>titulo 3</span>
   
Este es el texto de   la descripci&Atilde;&sup3;n colapsable n&Atilde;&ordm;mero 3
    <a href="#" mce_href="#">mostrar</a></li>
</ul>

El script quedaría de la siguiente forma:

<script>$(document).ready(function(){ //Las etiquetas a que sean contenidas por una etiqueta li $("li > a").click(function() {  //si tienen por rótulo "ocultar"  if ($(this).html()=="ocultar")  {   //ocultan el elemento previo   $(this).html("mostrar").prev().hide("slow");   }  else  {   //sino muestran el elemento previo   $(this).html("ocultar").prev().show("slow");  } 

  return false; }); 

}); 

</script>

De esta manera tenemos descripciones colapsables con pocas líneas. La mitad del espacio son comentarios y llaves para hacer legible el código.

¿Bastante intuitivo, no?

Quería hacer una mención respecto a $(). En otro post dije que las funciones en JavaScript son objetos de tipo Function. Este es un caso. Se puede ver bien en el código como se usa esta función objeto y como final jQuery se puede usar con otras bibliotecas y frameworks JavaScript.

Esto se hace invocando al método $noConflict() del objeto jQuery. De esta manera $() queda libre (por ejemplo para prototype) y con invocar jQuery en vez de $() tenemos la misma funcionalidad.

Con eso ya hay para divertirse. ¡Hasta la próxima!