Blog | 4r Soluciones

Ya hemos hablado de HTML, CSS y JavaScript, tres de los lenguajes más importantes en el ámbito del desarrollo web. El uso mixto de estos tres lenguajes es común entre casi todos los sitios web que visitamos habitualmente. Sin embargo, no siempre se hace un aprovechamiento inteligente de lo que pueden lograr en conjunto. De esta clase de combinaciones surge un potente enfoque conocido como Dynamic HTML.

El término DHTML (por HTML dinámico) designa a la utilización conjunta de un grupo de tecnologías para crear sitios web interactivos y animados. El objetivo es crear sitios web con características dinámicas que funcionen del lado del cliente, es decir, que el contenido o el formato se modifique sin que el usuario deba volver a cargar la página. Conozcamos las tecnologías que lo componen:

Lenguajes de marcado estáticos. El término se refiere especialmente a HTML, aunque también puede abarcar XML y XHTML.
Lenguajes de scripting del lado del cliente. Los lenguajes de scripting son aquellos que no siguen un proceso de compilación explícito (es decir, el código del programa no debe ser “transformado” para su ejecución). En DHTML es habitual JavaScript y, en menor medida, la plataforma ActiveX.
Lenguajes de presentación de definiciones. Son aquellos que definen el formato de la página y no su estructura, como CSS.
DOM (Document Object Model). Es una convención estandarizada para representar, acceder e interactuar con objetos en documentos HTML, XML o XHTML. Disecciona los elementos (etiquetas, atributos, contenido) que componen un documento y los organiza en una estructura lógica con formato de árbol. Y brinda una API para que los programadores puedan manipular esa estructura.

La combinación de estas tecnologías permite crear páginas con animaciones, menús desplegables, estilos visuales dinámicos y efectos especiales que se cargan una sola vez y se ejecutan totalmente del lado del cliente. Sin embargo, no necesariamente se trata de “páginas dinámicas”, un concepto más amplio, que también abarca cómo se genera contenido personalizado antes de cargar la página y no sólo cómo se modifica una vez cargada. Tampoco debemos confundir DHTML con Ajax, ya que en este último enfoque se admiten nuevos pedidos ocasionales al servidor luego de cargar una página.

Existen dos técnicas diferentes para crear, almacenar y procesar imágenes digitales: los mapas de bits y los gráficos vectoriales. En Internet, la gran mayoría de los archivos de imagen presentan formatos como JPEG, GIF y PNG, y corresponden a la primera categoría; mientras que otros, en formatos como SVG o PDF, pertenecen a la segunda.

Los mapas de bits (bitmaps) son agrupaciones rectangulares de pequeños puntos llamados píxeles. Un píxel puede verse como un diminuto e indivisible cuadrado de luz, que puede presentar cualquier color y nivel de brillo. Grupos de píxeles adyacentes asumen distintos colores y de esa manera “forman” la imagen en la pantalla, en una ilusión similar a la de un cuadro de estilo puntillista. Haciendo suficiente zoom sobre un mapa de bits podremos ver “agrandados” los píxeles individuales que lo componen. Por eso, los mapas de bits se distorsionan cuando se los expande.

En cambio, los gráficos vectoriales se construyen sobre figuras geométricas (líneas, círculos, polígonos, etc.) generados por un conjunto de vectores. En matemática, un vector es un elemento abstracto con una dirección, un sentido y una longitud; geométricamente, es representado con una flecha que parte de un punto de origen y apunta a un punto de destino. Los programas de edición de gráficos vectoriales (como PhotoShop) generan una serie de vectores que apuntan a distintos “puntos de control” en los contornos de la imagen. De esta manera, si la imagen se expande, los contornos no se distorsionan, ya que los vectores se mantienen aferrados a sus puntos de control. Cuando un gráfico vectorial se expande, las formas se agrandan proporcionalmente y no se “pixelan”.

La calidad de un mapa de bits queda atada a su resolución original, mientras que los gráficos vectoriales conservan las formas ante cualquier cambio de tamaño. Sin embargo, los gráficos vectoriales presentan serias limitaciones para describir imágenes geométricamente imperfectas (como un paisaje), ya que es prácticamente imposible reconstruir con exactitud formas irregulares a partir de agrupaciones de figuras geométricas. Por eso, las cámaras digitales utilizan formatos de mapa de bits como JPEG.

Probablemente, una empresa que desarrolla la mayor parte de sus operaciones a través de Internet se resista a realizar acciones publicitarias en medios tradicionales. Sin embargo, la entrega de artículos gratuitos a los clientes como medio promocional es habitual en todo tipo de compañías debido a sus múltiples ventajas.

El material POP (Point of Purchase) abarca todos aquellos objetos destinados a promocionar una empresa que se entregan a los clientes como obsequio. “Point of Purchase” significa “punto de venta”, ya que, en su definición tradicional, el material POP sólo incluía al mobiliario diseñado para enriquecer la presentación visual de un artículo en negocios y supermercados: estanterías, stands, vitrinas, tarjeteros y mesas de demostración, entre otros. Sin embargo, en la actualidad el término se extiende a llaveros, relojes, lapiceras, calendarios, tazas, agendas y cualquier otro producto identificado con la imagen de nuestra marca que pueda ser obsequiado a clientes o potenciales clientes.

Desarrollar material POP es más económico que mantener un espacio de publicidad en medios como radio y televisión. Por eso, es ideal para empresas con recursos limitados. Sin embargo, muchas compañías ya instaladas también distribuyen material POP, como una manera de fidelizar a los consumidores. Al regalar objetos útiles, de uso cotidiano, nos aseguraremos de que los clientes convivan permanentemente con nuestra marca.

En el caso de los objetos POP que exponen productos en negocios y supermercados, su efectividad radica en que los consumidores que se cruzan con ellos ya están haciendo compras; por lo tanto, tendrán una mayor predisposición a adquirir lo que se les presenta. Si el consumidor se topara con nuestro producto en una publicidad en un diario, difícilmente saldría a adquirirlo en el momento, ya que no se encuentra en situación de compra.

El branding es el conjunto de acciones destinadas a la construcción de una marca. El término se refiere especialmente a su identidad, dada en buena medida por los elementos visuales que la caracterizan, como el logo, el diseño de los productos y el formato de la folletería. La importancia del aspecto gráfico en la identidad de la marca es especialmente importante en empresas que desarrollan la mayor parte de su actividad comercial a través de Internet: el diseño de su sitio web puede determinar en buena medida la respuesta de los usuarios.

El rebranding es una estrategia de marketing en la cual se crea, para una marca establecida, un nuevo nombre, término, símbolo, diseño o combinación de ellos con la intención de instalar una identidad completamente nueva en las mentes de consumidores, inversionistas y competidores. Los objetivos pueden ser muy diversos:

Aumentar nuestro nivel de diferenciación con respecto a otros jugadores del mercado a través de una imagen original.
Ampliar nuestro público objetivo a través de una propuesta más inclusiva.
Modernizar la imagen de nuestra compañía.

El rebranding es una tarea muy estimulante, pero que siempre implica una cuota de riesgo. Si no tomamos los recaudos adecuados, nuestros clientes tradicionales podrán abandonarnos asustados ante un cambio tan drástico. Todo cambio de identidad debe venir precedido por un período de análisis del mercado actual y del perfil de nuestro propio público.

En Internet, el rebranding implica un cambio en el diseño de nuestro sitio, que casi siempre involucra una actualización tecnológica. Pero también exige una modificación de nuestra estrategia SEO: si queremos atraer nuevo público, debemos cambiar nuestras palabras claves. Esto obliga a cambiar el contenido y las URLs de las páginas de nuestro sitio. Por otra parte, en función de nuestro nuevo público es probable que debamos modificar los procesos de compra en nuestro sitio web: cada perfil de usuario prefiere interfaces o medios de pago particulares. Al igual que en los negocios tradicionales, las empresas basadas en Internet deben estar dispuestas a cambiar por dentro y por fuera a la hora de afrontar un proceso de rebranding.

Generalmente, los elementos gráficos que encontramos en la Web presentan formatos tradicionales, como JPG para las imágenes estáticas, PNG para las transparentes y GIF para las animadas. Las que cuentan con efectos de interactividad se basan en soluciones no siempre satisfactorias, como el clásico Adobe Flash o las herramientas nuevas de HTML5 y CSS3. Todos estos enfoques son fáciles de implementar, pero presentan inconvenientes cuando las necesidades a cubrir son algo complejas. Si usamos JPEG, GIF, PNG o Flash, el texto que pueda estar contenido en la imagen no será reconocido por los buscadores. Mientras tanto, el elemento canvas de HTML5 brinda una mejor posibilidad de indexación, pero esta característica no es soportada por todos los navegadores.

Sin embargo, desde 2001 existe una opción no muy conocida que resuelve éstos y otros inconvenientes. SVG (Scalable Vector Graphics) es un formato para definir gráficos vectoriales bidimensionales a través de la sintaxis del lenguaje XML. Los elementos SVG no son mapas de bits estáticos ni objetos externos insertados: son gráficos interactivos que se integran perfectamente a la estructura de la página. Las imágenes en SVG ofrecen muchas ventajas:

No son mapas de bits, sino gráficos vectoriales. Éstos tienen la ventaja de poder expandirse a gran tamaño sin sufrir grandes pérdidas de calidad (en términos menos formales, “no se pixelan”).
Como son definidas por código, su comportamiento es dinámico e interactivo. Por ejemplo, el texto de la imagen puede cambiar de acuerdo con la información que obtenga de una base de datos en tiempo real.
Son aceptadas por la mayoría de los navegadores, sin necesidad de instalar plugins.
Como tratan por separado al diseño y al contenido, el texto que puedan contener será indexado por los buscadores.
Tardan menos en cargar que un gráfico en Flash.
Son más fáciles de manipular y modificar que las imágenes en PNG, JPEG o GIF.

Por todas estas razones, SVG debería ser adoptado con mayor frecuencia, especialmente cuando se pretende presentar información con un formato especial, como el de las infografías.

PayPal es la plataforma de pagos en línea más popular del mundo. Si bien en nuestro país viene aplicando algunas restricciones a sus usuarios desde hace un tiempo, sigue tratándose de la opción más conveniente para realizar transacciones a través de Internet. Esto se debe a su comodidad (muy superior a la de los sistemas tradicionales), pero también a su completa API, que permite adaptar sus funciones a las necesidades de todo tipo de proyectos.

La API de PayPal se ofrece en dos formatos de representación de datos:

Par nombre-valor (NVP). Las solicitudes y respuestas se envían utilizando HTTP sencillo. La mayor parte del modelo de datos puede representarse con pares <atributo, valor>.
Protocolo de acceso simple a objetos (SOAP). Otra modalidad de intercambio de información, basada en una sintaxis similar a la de XML, y más compleja que la de NVP.

Ambos formatos definen formas de comunicación entre computadoras, y la elección de uno u otro dependerá del programador. NVP impone una sintaxis más tradicional, basada en secuencias de comandos, mientras que SOAP se encuadra dentro del paradigma orientado a objetos.

Al integrar una pequeña aplicación PayPal en nuestro sitio web, daremos a los usuarios la posibilidad de pagar por nuestros productos o servicios de manera fácil, segura y también cómoda, ya que realizarán la operación desde nuestro propio entorno.

La interfaz permite manipular distintas opciones de pago. Con Express Checkout los usuarios de nuestro sitio web pueden realizarnos pagos sin tener cuenta de PayPal y sin que nosotros tengamos que cumplir con requisitos especiales. Con Direct Payment podemos alojar todo el proceso de transacción en nuestro propio sitio web (y no sobre la plataforma de PayPal), contando con una gran libertad sobre él. Otras opciones nos permiten configurar pagos recurrentes (algo ideal si ofrecemos un servicio por suscripción con pago mensual) o a varios destinatarios a la vez.

Gracias a los métodos que ofrece la API de PayPal obtendremos un sistema de ventas online a nuestra medida, y dotado con los mecanismos de seguridad (como HTTPS y SSL) que garantiza esta plataforma.

Aunque todavía encuentran grandes detractores, hace mucho que los videojuegos dejaron de representar una simple forma de entretenimiento. Hoy se estudian sus beneficios para el desarrollo de habilidades motoras, la mejora de la visión, el alivio de la depresión y la capacidad de toma de decisiones. Actualmente se desarrollan videojuegos con fines educativos, terapéuticos y comerciales (como los juegos de Facebook que desarrollamos en 4r Soluciones). En todos los casos se aprovecha el interés del usuario por divertirse, y en eso se basa el enfoque conocido como gamificación.

La gamificación o jueguización (gamification) es el uso de mecánicas de juegos para incentivar a los usuarios a adoptar cierto comportamiento. Entre estas mecánicas se incluyen la otorgación de recompensas en forma de puntos, el avance a través de niveles o la existencia de un ranking con los mejores participantes. Por ejemplo, en una empresa pueden utilizarse videojuegos para motivar al personal a aumentar las ventas o mejorar la calidad de los productos; o, en una escuela, para que los alumnos aprendan ciertos contenidos. Aplicando gamificación, podemos volver divertidas tareas que de otra forma serían muy poco motivantes.

La gamificación, sin embargo, no es exclusiva de los videojuegos: la iniciativa The Fun Theory, de Volkswagen, busca estimular hábitos positivos instalando elementos lúdicos en ambientes urbanos, y la organización de competencias entre empleados es habitual en muchas empresas. Sin embargo, el ritmo al que se desarrollan los videojuegos abre interesantes posibilidades en este campo. La gamificación ya representa una industria en pleno auge, con empresas que ofrecen plataformas especiales para desarrollar juegos adaptados a nuestras propias necesidades. De acuerdo con un notable estudio de M2 Research, un 47% de quienes contratan estos servicios buscan fidelizar a los usuarios. Otros lo hacen para fomentar el reconocimiento o la lealtad a la marca entre los consumidores, o bien para motivar o formar a los empleados.

La gamificación es un fenómeno de crecimiento acelerado, cuyo verdadero potencial puede ser muy superior al que imaginamos.

Las infografías son representaciones visuales que buscan clarificar información compleja a través de dibujos, gráficos y esquemas. Son habituales en diarios y revistas desde el siglo XIX, pero también han sido fuertemente adoptadas en Internet, a la vez que las aplicaciones de edición gráfica incorporaron funciones y facilidad de uso.

Pero no todas las infografías de Internet son imágenes estáticas en JPG. El desarrollo del formato SVG y las novedades de HTML5 y CSS3 abrieron paso a infografías interactivas con animaciones y elementos dinámicos, superando así las limitaciones del formato tradicional. Esta evolución tecnológica, sumada a cierta tendencia a privilegiar los gráficos sobre el texto, explica el presente auge de las infografías en blogs y revistas online.

Muchas empresas crean infografías para construir su imagen de marca entre los consumidores o difundir información importante entre sus empleados. En cualquier caso, una buena infografía para Internet debe contar con algunas características:

Diseño efectivo. En una infografía pueden utilizarse elementos gráficos muy diversos. Gráficos estadísticos, imágenes y tipografías impactantes están entre los más tradicionales, pero en Internet es habitual el uso de caricaturas. Los dibujos humorísticos ilustran lo que queremos decir y transmiten emociones con increíble efectividad.
Facilidad de difusión. Si queremos que nuestra infografía se difunda, debemos brindar medios sencillos para hacerlo. Un formato fácil de reproducir (evitar Flash), botones para publicar en redes sociales y un posible código para “incrustar” la infografía serán de ayuda.
Adaptación al medio. Las infografías en medios gráficos suelen tener formato horizontal; las infografías realizadas para Internet, formato vertical. Los diarios suelen tener un gran tamaño e incluso ampliarlo a través de páginas desplegables, pero los usuarios de Internet pueden utilizar un amplio rango de dimensiones. Estas diferencias deben tenerse en cuenta a la hora de diseñar una infografía para Internet.

Aplicando estos principios podremos liberar el asombroso poder las infografías para comunicar nuestras ideas.

Archivos de la categoría: Blog