Blog de Cooltimedia Panamá, está lleno de tips e ideas.

¿Cómo iniciar un juego en HTML5?

Para este proyecto utilizamos el famoso personaje de Mario Bros, ya que es un excelente ejemplo para tener las bases para el desarrollo de juegos en HTML5.

Paso #1: Estructura HTML5.

■ Lenguajes de etiquetas bajo las especificaciones de HTML5.

Paso #2: Creación de estilos con lenguaje CSS3.

■ Uso de lenguaje CSS3 para los colores, bordes y demás detalles importantes.

Paso #3: Código JavaScript.

■ Utilizamos javascript para obtener datos de altura y posición del escenario de nuestra página web, adicional implementamos el uso de teclas para mover a nuestra personaje en la pantalla de nuestro juego.

Les dejo este vídeo donde explico en detalle el proyecto donde utilizamos el teclado para interactuar con el famoso personaje de Mario Bros.

¡Espero que les guste el proyecto! Te invito a que te des una vuelta por el canal de Youtube y también puedes visitar nuestro BLOG para ver más contenido interesante. Puedes contactar conmigo por correo electrónico, tenemos un repositorio en GitHub del proyecto con sus archivos HTML5, CSS y JavaScript, y así poder realizar las modificaciones necesarias y entender con más detalle el código utilizado.

Me despido como siempre, deseándote los mejor en tus proyectos.

Para dudas, comentarios y sugerencias me puedes contactar a: jair@cooltimedia.com

¿Cómo crear un mapa mental?

¿Qué es un mapa mental?

Es una representación gráfica de un tema, idea o concepto, plasmado de la forma más visual posible.

Los mapas mentales nos permiten desarrollar y potenciar otras capacidades mentales como la lógica, la unión de ideas, la concentración y la memoria, además de la creatividad. Nos ayudan a gestionar el flujo de información, lo que nos facilita la organización del pensamiento; con este esquema podemos obtener de forma sencilla una visión global del tema.

Utilizando esta técnica, podemos mejorar el rendimiento y la agilidad mental, además de nuestra capacidad de asimilar y procesar información.

Para hacer un mapa mental, debemos utilizar palabras clave, lápices y marcadores de diferentes colores, podemos agregar flechas, dibujos de apoyo, entre otras cosas. Debemos colocar la idea principal en el centro de la hoja y las ideas secundarias fluyen desde ella. De esta forma, podemos organizar la información de manera que podamos ver las cosas en perspectiva.

Esta técnica se puede aplicar individualmente o en grupo y es muy buena para detallar un problema.

Como se muestra en la figura, el problema se escribe o se representa con un dibujo en el centro del papel, dentro de un círculo para crear un enfoque sobre él.

Las ideas van surgiendo desde ese centro en forma de ramas hacia los extremos del papel. Las conexiones entre las ideas se representan mediante flechas que indican la dirección que nuestra mente debe seguir. Idealmente, es buena idea dejar espacio en blanco a medida que se va confeccionando el mapa mental, para que más adelante se puedan ir perfeccionando las ideas.

Cuando hemos finalizado el mapa con todas las relaciones representadas, es buena práctica mostrarlo como si fuera la primera vez que lo vemos. Con esto, activamos nuestro lado crítico. Lo que buscamos es detectar posibles lagunas de información o áreas en las que se debe seguir profundizando.

Como muchas otras técnicas, no se trata de un proceso terminado, sino que debemos dejar el mapa abierto a cambios, ya que tal vez surjan nuevas conexiones y asociaciones de ideas.

Buena suerte, espero te sea de mucha utilidad y no olvides compartirlo con alguien que lo necesite.

¿Cómo hacer un sitio web exitoso?

Si usted necesita un sitio web o mejorar el actual, es importante que tome en cuenta algunas recomendaciones.

Primero, me gustaría explicar qué significa una conversión en el sitio web.

Conversión en un sitio web

Lograr que los visitantes de nuestro sitio web hagan una acción específica previamente definida por nosotros.

Esto es muy importante, ya que nosotros somos los responsables de definir las acciones que deseamos que realicen los visitantes. En los últimos años, la tecnología ha facilitado la creación de sitios web. Me refiero a plataformas como Wix y otras similares que se enfocan en la parte de diseño y desarrollo web. Sin embargo, la creación de un sitio web conlleva, más allá del diseño y desarrollo, un proceso de planificación y análisis de mucha información que nos lleva a definir los objetivos, conversiones y, especialmente, cómo lograrlos.

Dicho esto, hablemos sobre el primer punto: la planificación. Esto va más allá de preguntarse qué quiero que pase cuando alguien visite mi sitio web. Hay que hacer un análisis del entorno: circunstancias actuales, competencia, oportunidades, amenazas, y otros factores que nos rodean. Además, debemos tener claro que necesitamos incluir diferenciadores en nuestro proyecto.

Los resultados que debemos obtener en esta sección:

Definir nuestro público objetivo:

¿Cuál es nuestro público meta? Las personas a las que vamos a llegar con nuestro mensaje, ¿son mujeres? ¿están embarazadas? Estas son algunas preguntas que debemos realizarnos para definir nuestro público objetivo.

Para esto, también les puedo recomendar utilizar técnicas de creatividad, como la lluvia de ideas y el mapa mental, donde plasmamos en papel de la forma más visual posible nuestra idea o concepto y así poder visualizar el flujo de la información que se espera. Lo bueno de estas técnicas es que se pueden desarrollar efectivamente con pocas personas y obtener un buen resultado, esto nos ayudará a sacar nuestro lado critico y tener una perspectiva más clara de cómo debemos llegar a nuestro público meta.

Nuestro propósito y objetivos:

Parece obvio que nuestro propósito es vender más. Esa sería la respuesta fácil, pero la verdad es que para conseguir la conversión final primero debemos lograr que lleguen visitas a nuestro sitio web. Debemos llevar al visitante a realizar acciones específicas donde se inicie el proceso de cumplimento de objetivos y, eventualmente, lograr una conversión importante.

¿Cuántas visitas debemos tener en el primer mes?
¿Cuál debe ser la duración de estas visitas?

Estos son algunos parámetros que debemos definir e ir ajustando con el tiempo para tener claro si estamos o no cumpliendo con los objetivos y ,en el caso de que no, qué debemos hacer para mejorar.

Es por esto que debemos tener presente que el sitio web es un portal de comunicación con nuestro cliente y sólo tendrá acceso a lo que seamos capaces de mostrarle. Los objetivos buscan precisamente eso, saber si lo que estamos comunicando está generando una respuesta en los visitantes.

Tomando en cuenta estos dos puntos, podemos definir cómo debe ser el sitio web, qué tecnología debemos utilizar, cómo será la estructura del sitio. En esta sección creamos un mapa del sitio web incluyendo el menú y los enlaces en cada sección del sitio.

Diseño web y contenido (Experiencia de Usuario UX)

El siguiente punto es el diseño del sitio web. Tomando en cuenta la planificación previa, debemos crear un diseño enfocado en el visitante. El sitio debe ser consciente e inclusivo, y debe tener la capacidad de empatizar con los visitantes y satisfacer su necesidad.

Para esta sección, debemos tener en cuenta que el diseñador no debe trabajar en solitario y sería un error grave iniciar la etapa de desarrollo del sitio sin que se cumpla esta etapa de forma colaborativa con todos los responsables del proyecto.

El contenido del sitio web hace parte fundamental del diseño, es clave para transmitir nuestro mensaje a los visitantes. Debemos tomar en cuenta las imágenes, videos y textos que respondan a las necesidades de todas las personas que visitan nuestro sitio web.

Es muy importante tomar en cuenta la identidad de marca desarrollada durante la etapa de diseño del sitio web. Esto incluye los colores, tipografías y formas de aplicación del logo en todas las versiones del sitio web, recordemos que hoy día los sitios deben ser adaptables a las pantallas de nuestros visitantes, ya que muchas de las visitas serán desde dispositivos móviles.

Desarrollo del sitio web

En esta fase, debemos tener definida la plataforma en la que vamos a desarrollar el sitio, que puede ser WordPress, Magento, Shopify, Djang, por mencionar algunas. Lo importante es tener claro que la plataforma que utlicemos nos ayudará a desarrollar el máximo potencial de nuestra presencia en internet.

Pruebas del sitio web

Etapa fundamental en la que realizamos pruebas de funcionamiento del sitio web. Es aquí donde identificamos si lo que planificamos está representado en el diseño y desarrollo del sitio; nada se nos puede quedar por fuera, es el momento de mira todo con lupa. Por supuesto, esto debe ser antes de abrir el sitio web al público.

Puesta en marcha o lanzamiento del sitio web

Llegó el día la lanzar el sitio web y crear campañas que nos traigan las primeras visitas. Es muy importante llevar registro de todas las visitas para validar que se cumplan esos primeros objetivos por los que trabajamos tanto. Para esto, puedes utilizar Google Analytics, esta plataforma también te permite crear objetivos utilizando la información de las visitas y generar reportes que permitan tomar mejores decisiones en el futuro.

Mantenimiento del sitio web

El mantenimiento al sitio web nunca termina. No hemos hablado del posicionamiento del sitio web, bueno, esta es la mejor fase para trabajar en este tema. Es la etapa donde podemos generar contenido de valor alrededor de nuestro producto o servicio.

Buena suerte con tu sitio web y no olvides compartir este post.

Diseño y Desarrollo Web de “Analytics Lookout”

Analytics Lookout

El proyecto inicio en el año 2016

Inicialmente, su nombre era “Plataforma de Reportes” y el objetivo principal consistía en tener agrupada la información de diferentes medios de comunicación como:

– Sitios web
– Redes sociales
– Revistas

Con la información de estos medios crearíamos automáticamente reportes personalizados en formato de Word, Excel y PowerPoint.

Un buen reto para empezar.

En ese momento, la mayor dificultad era crear estos reportes con el diseño que el cliente necesitaba.

Para esto, teníamos que tomar en cuenta la tipografía, los colores y las formas que tenía el reporte original o plantilla.

Decidimos crear un prototipo utilizando el framework Django, ya que podríamos utilizar Python como lenguaje de programación para el BackEnd para desarrollar el código en el servidor.

Con este lenguaje podemos buscar los valores en la base de datos y crear reportes en Word, Excel y PowerPoint.

En 3 meses, nuestro conocimiento en el lenguaje pasó de conocerlo un poco a programación avanzada; no hace falta explicar detalladamente lo difícil que fue crear el primer prototipo. Esto refuerza la teoría de que la práctica hace al maestro.

Teniendo la solución para el backend, iniciamos el proceso de diseño del sitio web con todas las páginas o ventanas con las que estaría interactuando el cliente y, por supuesto, creando los reportes en el formato y rango de tiempo que requería. Para esto, utilizamos código de cero para los archivos en HTML, CSS3 y JavaScript. Esto nos tomó otros 2 meses entre la creación del mockup, aprobaciones y desarrollo web.

Inicialmente, era necesario utilizar formularios en HTML para ingresar la información y posteriormente crear los reportes requeridos, pero con el tiempo esto empezó a ser un problema. A pesar de automatizar todo el proceso de creación de los reportes, se requería automatizar más partes del proceso. Fue allí donde iniciamos la formalmente la creación de Analytics LookOut: necesitábamos un servidor robusto para la tarea de automatización.

La mayor parte del proceso requería monitoreo de cuentas de Instagram. Se podrán imaginar que es algo complicado darle seguimiento diario a 1000 cuentas en esta red social. Simplemente es algo imposible de hacer… para las personas, pero no para los servidores.

Actualmente, Analytics LookOut monitorea mucho más de 1000 cuentas en Instagram, es decir, busca palabras clave dentro del contenido de las cuentas, en el caption, en los tags, en el location de las publicaciones y guarda automáticamente el contenido para crear reportes en formatos genéricos y personalizados. Créame, ¡esto ahorra muchas horas de trabajo!