Autor: 43890246

¿Qué se te viene a la mente al ver estos íconos?

Seguramente, ya los has visto en alguna página web y reconoces su significado sin importar si tu idioma es el español, inglés o chino, debido a que los íconos se han convertido en un lenguaje universal. Con un simple ícono, representación visual simbólica de un objeto u concepto, nos ahorramos explicaciones largas e innecesarias. Además, si te encuentras en un sitio web, los íconos te facilitan la navegación [5][7].

Ejemplo: El famoso ícono de la “lupa” nos indica que iniciaremos una búsqueda.

En LiOnline buscamos diseñar sitios web enfocados en obtener una positiva experiencia del usuario y los íconos nos ayudan en ello pues hacen que las interfaces sean más intuitivas y amigables es decir de fácil entendimiento por parte de los usuarios.

El sitio web de nuestro cliente BYC Grupo Inmobiliario, empresa de venta/alquiler de propiedades, cuenta con íconos que representan las características que posee una propiedad:

• Número de habitaciones – ícono de una cama
• Número de baños – ícono de una ducha
• Cantidad de fotos disponibles para esa propiedad – ícono de imagen
• Metros cuadrados – ícono de un plano.

Imagen 1 – Sitio web de nuestro cliente ByC

Imagen 2 – Propiedad en Venta de ByC

Luego de haber entendido qué son los íconos y porqué son importantes, nos moveremos a ¿cómo los implementamos (creamos) en un sitio web. Antes del 2014, los íconos estaban en  *.jpg, *.png u otro archivo de imagen. Siguiendo el ejemplo de ByC, entonces podíamos tener un archivo “cama.png”, o “ducha.png”. ¿Qué problemas nos trae trabajar los íconos como archivo de imagen?

• La solicitud de mútiples imágenes al servidor, hace que el sitio web se cargue lentamente.
• Las imágenes pierden resolución/nitidez al aumentar su tamaño
• Al tener un ícono en imagen, no es posible modificar, por ejemplo, el color. Había que crear la misma imagen pero con diferente versión de color.
• No se pueden animarse las imágenes fácilmente.

Por tanto, definitivamente utilizar un archivo de imagen para un ícono no era una buena solución [1][4]

Veámoslo de forma gráfica: En la imagen 3, tenemos un ícono de “casa” (no es un archivo imagen) y un ícono de “regla” (archivo tasacion.png), con un zoom adecuado ambos se ven con buena resolución. ¡Ok!

Imagen 3 – Íconos para representar los servicios de  ByC

Sin embargo, hagamos un zoom ++++, ¿qué ha sucedido? en la imagen 4, vemos que la “casa” ha mantenido su resolución a pesar de haber aumentado de tamaño, algo que no sucede con la “regla” la cual vemos borrosa.

Imagen 4- Ícono en imagen vs Ícono en icon-font

Por suerte, hoy tenemos una solución para eso: “Icon Font”, el ícono de la “casa” es de ese tipo.

¿Qué es un Icon Font? ¿Cómo lo utilizo? ¿Puedo crear mi propio ícono?, ¡aquí responderemos esas preguntas!

Leer más

Si estás en el mundo del desarrollo de software, sabes que cada programador tiene su propio “estilo de programar”. Es por ello, que se recomienda que en un equipo de trabajo defina una guía de “buenas prácticas” de programación para poder tener un código estándar, es decir que cualquier miembro del equipo, o incluso un nuevo miembro, pueda entenderlo con facilidad y que de la sensación que fue escrito por un único programador (¡Ay qué ideal!)

Pongamos un ejemplo: “Creación de variables”

Un programador que crea sus variables con estilo “camelCase“, definirá una variable “idAluno”

Un programador que utiliza “guiones” ( – ) o “guión bajo” ( _ ), definirá “id_aluno”

Y no falta el programador que definirá “variable1” (¿es en serio?¿le pusiste “variable” como nombre?)

Otro ejemplo: Programando en JavaScript

Java, Visual Basic, C# entre otros lenguajes de tipo “compilado”: Necesitan pasar por el proceso de “compilación”, el cual permite encontrar errores antes de ser ejecutados. Los diferentes IDE’s (entornos de desarrollo) como Neatbeans para Java, detectan errores como “la falta del ‘punto y coma’ (‘ ; ‘) al final de cualquier sentencia” o “variable y/o import no utilizado”

¿Qué pasa con JavaScript? él es un lenguaje de tipo “interpretado” o sea no necesita pasar por el proceso de compilación, además que es más “permisivo” lo que hace que el programador esté propenso a errores y que solo los verá en la ejecución [7].

Aquí [8], un ejemplo sencillo de lo que nos permite JavaScript:

Para declarar variables, se usa la palabra clave var.  

// A single declaration.
var count;

Sin embargo, puedes declarar una variable sin utilizar la palabra clave var y asignarle un valor.  Se trata de una declaración implícita.  

// The variable noStringAtAll is declared implicitly.
noStringAtAll = "";

En ambos casos, todo funcionará Ok!.

Lamentablemente, no siempre es así

Por ejemplo, no nos daremos cuenta de variables que no han sido declaradas o estén mal escritas hasta que lo ejecutemos y veamos ese error en la consola del browser:

¿Pero sabías que se puede optimizar la calidad de nuestro código? La respuesta es la definición de las “buenas prácticas” o reglas a seguir en nuestro proyecto a través de herramientas de Linting, como ESLint para proyectos JavaScript (React, Angular otros).

Así que es hora de parar de decir “¿Por Dios quién programo esto?”, admítelo lo has dicho haha.

Leer más

Los sitios web de la mayoría de los clientes de LiOnline están alojados en Godaddy pues nuestra experiencia ha sido positiva con dicho proveedor de hosting y dominios. Esos sitios web desarrollados y personalizados con el CMS (Content Management System): “WordPress“, nosotros los consideramos de tipo “informativos” ya que cuentan con una estructura básica para presentar el giro del negocio del cliente:

• Inicio
• Sobre nosotros
• Catálogo de productos/ servicios y/o proyectos
• Formulario de contacto
• Blog (Publicación de noticias yo/o artículos)

Godaddy ha sido suficiente para soportar dichos sitios web. Sin embargo, ¿qué pasa con aquellos clientes que requieren soluciones web más complejas y con mayor nivel de seguridad/velocidad?

Leer más

En LiOnline, antes de comenzar a desarrollar una página/sistema web, utilizamos algunas herramientas que nos permiten “bosquejar” lo que queremos construir, estas son: “sketchs” “wireframes“, “mockups” y/o “prototipos“. Éstas nos facilitan la comunicación con el cliente pues él puede visualizar cómo quedaría el producto que desea (antes de invertir tiempo en desarrollar) y dar sus comentarios/sugerencias las cuales se traducen en mejoras y/o cambios ¡a tiempo!.

En [1] nos dicen resumidamente cuáles son las ventajas de estas herramientas:

• Generar una lluvia de ideas (brainstroming) para definir qué expectativas tiene el cliente del producto a ser desarrollado.
• Ahorro de dinero/tiempo en la fase de desarrollo
• Describir claramente qué es lo que necesita ser desarrollado
• Usado para captar inversionistas, primeros clientes y/o co-fundadores, por ejemplo a través de aceleradoras de startups.

Nuestro proceso para el diseño de una página web es el siguiente:

• Reunión preliminar con el cliente en el que nos cuenta las necesidades de su negocio y cómo le gustaría que sea su sitio web. A mano alzada realizamos un bosquejo de la web y sus funcionalidades, tomamos apuntes y damos sugerencias (Sketch)
• De acuerdo a los requerimientos levantados durante la reunión preliminar y a la evaluación de los sitios webs de la competencia, proponemos la estructura o esqueleto del sitio web (Wireframe). El cliente podrá evaluarlo y solicitar las modificaciones pertinentes.
• Luego de aprobado el wireframe, éste es explicado al diseñador gráfico que ¡hará su magia! y nos entregará cómo se verá la web o mejor dicho la representación visual de la web (textos con los tipos de letras y colores que forman parte del branding del negocio, imágenes,  íconos, logos, etc.) (mockups). En este fase, los diseñadores gráficos utilizan sus conocimientos de buenas prácticas de User Interface (UI).
• Lo siguiente es el desarrollo de un prototipo (prototype), este paso es opcional según [1] [2] y efectivamente en nuestro equipo de trabajo lo hemos aplicado en pocas ocasiones. El prototipo es nuestro mockup pero enriquecido con piezas de User Experience (UX), en donde el usuario puede interactuar por ejemplo dando clic a botones, enlaces, ver animaciones, etc. ¡Ojo! el usuario sentirá que está utilizando la versión final sin embargo aún no hay funcionalidad, pues solo son piezas conectadas entre sí [2].
• ¡Finalmente viene lo bueno! ¡A programar! y aplicar todos nuestros conocimientos de HTML, CSS, jQuery, php, frameworks, bibliotecas, APIs o más! ya sabiendo cómo debe verse y cómo debe funcionar.

Ejemplo de nuestro cliente BYC – Grupo Inmobiliario

Seguro que hasta este punto ya tienes una idea en qué se diferencia cada término. A continuación vamos a ver más a detalle qué son y qué softwares existen para crearlos.

Leer más