Mi charla del JSConf Colombia 2017 sobre WebAssembly

El pasado noviembre estuve en el JsConf Colombia 2017 dictando una charla sobre Reutilizar tu código y has aplicaciones de alto rendimiento con WebAssembly. En ella explico una introducción sobre cómo funciona Javascript, problemas de rendimiento, que es WebAssembly, ejemplos, entre otros.

Si te llama la atención esta grandiosa tecnología, no dudes en ver mi presentación en español sobre WASM. Son sólo 20 minutos donde aprenderás muchas cosas.

Así que a continuación te dejo con la presentación:

Si les gustó no duden en compartirlo en sus redes sociales para que mas personas conozcan sobre esta grandiosa tecnología.

Copiar la configuración del tema padre al tema hijo (o cualquier tema) en WordPress

Cuando necesitas modificar la plantilla de una instalación de WordPress, la forma correcta de hacerlo es mediante un tema hijo. De esta manera puedes realizar modificaciones solo a los archivos que necesites y es mas fácil llevar los cambios; si actualizas no perderás nada pues solo los archivos del “tema padre” se sobrescribe y no tus cambios.

La configuración de tema hijo

WordPress guarda la configuración del tema (incluyendo datos de los widgets y su posición en las barras laterales) en la base de datos. Al momento de almacenarlo utiliza el nombre de la carpeta del tema como identificador esto ocasiona la pérdida de la configuración si el nombre de la carpeta cambia por:
  • Agregaron el número de la versión del tema al nombre de la carpeta y el mismo es distinto en una versión superior.
  • Se crea un tema hijo que obviamente tendrá otro nombre.
Algunos temas posee una configuración compleja o tal vez en algunos sitios tienes una configuración de widgets muy larga como para recrearla. Por ello puedes automatizar este proceso utilizando la herramienta WP-CLI que te permite realizar tareas desde la consola.

Migrar la configuración

Asumiento que el tema padre se encuentra en la carpeta llamada tema_padre y el hijo en la carpeta tema_hijo el comando a ejecutar sería:
wp option get tema_padre --format=json > tema_hijo_settings.txt

wp option update tema_hijo "`cat tema_hijo_settings.txt`" --format=json
¡Listo! Al refrescar verás como la configuración del tema fue actualizada correctamente.Espero que te sirva de gran utilidad y recuerda compartir esta información si te fue útil.

CodeLobster: un buen IDE para PHP

Estaba buscando un nuevo IDE para PHP y me conseguí con CodeLobster. Lo probé en Windows y me gustó debido a su rendimiento, carga muy rápido y es liviano. La mayoría de IDE que he probado están hechos en JAVA por lo que suelen ser un poco pesados pero CodeLobster es una aplicación nativa funciona muy rápido. Al principio parece un editor, pero luego notarás que posee muchas herramientas para ayudarte.

Interfaz de CodeLobster

Interfaz de CodeLobster

Asistente de nueva aplicación

Lo primero que intenté fue crear un proyecto de WordPress. Un asistente me ayudó durante todo el proceso: preguntó por las credenciales de la BD, el nombre del proyecto e información básica. Entonces automáticamente empezó a descargar las fuentes, configuró el archivo wp-config.php y en segundos tenía una instancia de WordPress ejecútandose y lista para ser modificada dentro de CodeLobster.
Esta funcionalidad ahorra mucho tiempo y evita estar modificando los archivos y hacer la configuración inicial. Lo genial es que tiene soporte para la mayoría de los frameworks mas importantes de JS y PHP. Puedes crear o importar la mayoría de proyectos porque tiene soporte para muchas tecnologías. Estas herramientas son excelentes para novatos o académicos, pues no requiere editar la configuración de forma manual y la interfaz facilita el proceso inicial.

Credenciales para sitios de WordPress

Credenciales para sitios de WordPress

Herramientas integradas

CodeLobster posee muchas herramientas para ayudarte a lo largo del desarrollo de una aplicación de PHP: administrador de base de datos, sistema de control de versiones, validadores de código, entre otros. Lo excelente es que viene de forma nativa y no requiere instalar herramientas adicionales.

Credenciales del control de versiones

Credenciales del control de versiones

Si deseas hacer desarrollo frontend, incluye soporte para SCSS y compatibilidad para varios frameworks de Javascript como Angular, Ember, etc. Así que puedes escribir código tanto para  backend como frontend, ejecutar tus sentencias SQL y hacer implementación dentro de la misma aplicación.

Si tu código no esta funcionando, puedes usar el depurador incluido para probar tu código PHP y encontrar cualquier error. También puedes usarlo para confirmar la lógica de la aplicación y todo funciona como debería ser.

¿Por qué usar CodeLobster?

CodeLobster es un gran IDE para personas que desean hacer todo su trabajo dentro de una única aplicación. Por ejemplo, no necesitas cambiar a otra aplicación para administrar tu BD, mejorar el código, chequear errores, etc. Puedes hacer todo dentro de la misma ventana y es fácil de usar, de hecho, gracias a su asistente te ahorras tiempo en definir las configuraciones.

Te recomiendo este IDE si estás buscando: una única herramienta para ayudarte durante todas las tareas de desarrollo, compatibilidad con varios sistema soperativos. Deseas un IDE que sea rápido (o tienes una computadora vieja) y no tienes tiempo para configurar cada herramienta.

Para obtenerlo, puedes descargar CodeLobster desde su sitio oficial.

La importancia del diseño web de un proyecto

El diseño web constituye la imagen que vamos a dar de nuestro proyecto online. La presencia que desvelamos es el primer contacto del cliente con nosotros. Resaltar nuestros puntos fuertes y hacer un espacio atractivo no es algo sencillo pero en cambio sí un concepto en el que nos tenemos que esforzar. ¿Sabes cuáles son las ventajas de hacerte con boceto interesante.

Cuando organizamos un proyecto web en el que hemos depositado toda nuestra confianza, todos esos puntos en los que invirtamos tiempo y dinero nos servirán en un momento futuro. Sin embargo, cuando tenemos la página delante de nosotros son muchas las dudas que aparecen por nuestra cabeza.Laptop Hands

Estudiar el diseño que vamos a dejar ver en nuestra página es una de las tareas más entretenidas que existen. No todas las estructuras valen para un mismo proyecto por eso, dar con aquella que nos llena resulta cada vez más complicado. ¿Serías capaz de conseguir el modelo mas parecido a tu proyecto a colocar línea?

¿Cómo puedo resaltar el diseño de mi página web?

Hoy en día existen todo tipo de programas que nos ayudan a tener un diseño web que gusta a todos los usuarios. Las plantillas WordPress constituyen una serie de ventajas que debemos siempre tener muy en cuenta. Por lo general esta distribución cuenta con modelos singulares que logran un proyecto único para nuestra empresa. La cantidad de vertientes programadas que tiene, nos ahorra cantidad de trabajo a nosotros los desarrolladores, la mano de obra.

Cuando hemos ideado un proyecto en línea y tenemos las pautas en nuestra cabeza es fundamental que pensemos también en la base del usuario. No es lo mismo que diseñemos una plataforma a ciegas que, como consumidores, nos pongamos también delante de la pantalla para implementar las mejoras.

La temática de nuestra web es algo que debemos tener muy en cuenta antes de pensar en la idea del proyecto. Dependiendo de aquello que vayamos a vender o promocionar en nuestro espacio en línea podremos hacernos con un tipo u otro de plantilla que sea más acorde con lo que queremos ofertar.

Si estamos pensando en un sistema de  localizador de coches es fundamental que el tema de vehículos y modelos de conducción lo tengamos más que esclarecido. Solo de esta forma podremos haber unificado la idea de la plantilla con lo que queremos ofrecer al usuario desde el primer momento en que entra en nuestra página web.

¿Existen temáticas adaptadas a una plantilla?

Si nos ajustamos lo suficiente, cualquier temática o producto que queramos vender en un momento determinado se puede organizar en la plantilla que tienes en mente. Para una página de uber iniciar sesión nos bastará con un sistema sencillo que nos refleje cuáles son las aplicaciones que consiguen esto o dónde podemos descargarlas con mayor facilidad.

Un proyecto web debe reunir una serie de cualidades que lo hagan atractivo a los ojos que lo están descubriendo pero también interesante de trabajar para la persona que se puso a idearlo. La temática es la base de cualquier idea que tengamos en la cabeza. Siempre que nos metamos en una plataforma para dejar un producto al cliente somos nosotros los primeros que tenemos que confiar en este.

Para un espacio que vende teléfonos móviles (por ejemplo esta página web) debemos estar al tanto de los temas (themes) sencillos y que tienen la imagen como la base principal de su concepto. Siempre que estemos ante un proyecto de productos que salen a la venta debemos apostar por un ejemplar a modo de catálogo dónde veamos todos los modelos de una tirada y podamos, en base a la fotografía y las características que tenga el artículo, escoger el que más nos ha gustado.

Las plantillas de wordpress nos sacan de muchos apuros. Antes teníamos que programar todo desde cero y si fallábamos en cualquier parte del código debíamos repetir todo de nuevo. Pero todo esto ha cambiado bastante y debemos darle las gracias a los CMS por haberlo hecho posible.

unserialize(): Error at offset X of X bytes en PHP

Hace unos días tuve un problema al obtener datos serializados almacenados en una base de datos MySQL. Los datos se guardaban con serialize()  (se que con JSON es mejor pero se necesitaba guardar el objeto PHP) pero al momento de cargar el arreglo de objeto con unserialize() me arrojaba el siguiente error:

yii\base\ErrorException: unserialize(): Error at offset 579 of 664 bytes

Luego de varias horas intentando solucionar el error. Encontré en stack overflow que el problema ocurre con la codificación de los campos de texto (text) en la base de datos. Cuando se obtiene la información, si la codificación usada por PHP es diferente con la de la BD el número de bytes indicado por serialize() no coincide y la lectura se hace mal, ocasionando el error mencionado.

Solución al problema

La forma de solucionar el problema es cambiar la codificación del campo tipo texto, por ejemplo, en mi caso estaba con utf_general_ci y tuve que cambiarla a utf8_general_ci:

ALTER TABLE nombre_de_tabla MODIFY tu_columna VARCHAR(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci;

¡Listo!, con esto no deberías presental el problema de nuevo.

Cómo crear el diseño web perfecto para tu página principal en este nuevo año 2018

Conseguir crear el entorno gráfico ideal para tu sitio online quizás no se encuentre entre los propósitos más populares de año nuevo, pero sí que debe de estar entre tus tareas principales si quieres que este sea un año fructífero de cara al mundo de los negocios online. Y es que sin importar de si se trata de una tienda online, o una web puramente informativa, trabajar concretamente en el diseño web ayudará a potenciar el tráfico web de la misma, y sobre todo a fidelizar clientes.

Responsive Design

Son muchos los factores que están relacionados de una forma u otra con el diseño web, por lo que si eres una persona que no dispones de los conocimientos en informática necesarios como para llevarlos a cabo, lo mejor será sondear el mercado en busca de una empresa especializada en diseño web y todos estos otros servicios clasificados dentro del marketing online. En otras palabras: una agencia completa que trabaje tanto el diseño y el desarrollo web, como el SEO, las redes sociales… y te ofrezca un servicio técnico de calidad con el que tengas cierta garantía de efectividad ante cualquier percance o inclusive una modificación posterior para ajustarlo todo a los nuevos tiempos.

Te explico por qué es tan importante contratar un diseño de páginas web de calidad

Y es que no “solamente” se trata de un entorno visual con el que presentar tu proyecto al resto de los internautas a través de la red (con el peso que ya de por si conlleva esa característica tan “simple”) sino que además el diseño de páginas web influye en una enorme cantidad de ámbitos y sectores más, que participan de forma directa y activa en el éxito que tu página online pueda llegar a tener.

Potencia las ventas y reduce el efecto rebote: A la hora de crear un diseño para tu web eficiente, se deben de valorar dos aspectos fundamentales. Uno, sería la correcta estructuración de la web de cara a la navegación por la misma. Que sea sencilla e intuitiva, para que los visitantes puedan encontrar aquello que estuvieran buscando de forma rápida y efectiva, ya que de lo contrario abandonarán tu página para ir a otra de la competencia en busca de dicha información, servicio y/o producto.

A su vez, deberás de establecer una disposición que invite a investigar por otro tipo de contenido relevante dentro de la misma, para permitir ofrecer tus productos y servicios más relevantes al margen de cada búsqueda concreta que realice cada internauta. Así, aumentarás el tiempo que dura cada visita y esto en términos algorítmicos para Google se traduce en una optimización muy positiva y que ofrece al usuario contenido verdaderamente interesante, por lo que la premia.

Esto evidentemente te ayudará a obtener más tráfico y convertirlo además en uno de mayor calidad. Evidentemente, un diseño que combine a la perfección con la temática de la web, y dispuesto de forma que cautives al espectador, otorgándole la confianza que necesita a la hora de comprar online, también aumentará las ventas de dicha web.

Ayuda a mejorar aspectos del marketing digital tan importantes como el SEO: Estas pautas a establecer deberán de estar en concordancia además con los motores de búsqueda en otros muchos aspectos, tales como las etiquetas, el contenido, el lenguaje de programación utilizado, las plantillas (o themes) utilizados, los enlaces (tanto internos como externos), etc.

Si se elabora todo desde una base sólida, exenta de fallos y en base a una estructura que favorezca todos estos factores, los resultados serán mucho más óptimos en el ámbito del sector online, y lo verás reflejado en el posicionamiento de tu web, así como las keywords principales relacionadas con el nicho de mercado al que pertenezca la misma. ¿Entiendes ahora por qué es tan importante contar con un diseño web de calidad?

¿Qué es el desarrollo web?

Desde hace unos años escuchamos bastante el término de desarrollo web y probablemente se pregunten o han escuchado: ¿Qué es eso? ¿No es lo mismo que programación? Simplificando, desarrollo web consiste en crear soluciones tecnológicas que se ejecutarán dentro de un navegador (como Firefox/Chrome/Edge o Safari). Por este motivo es diferente a otro tipo de programación porque un navegador funciona de una forma particular y la información debe viajar a través de una Intranet o Internet. En otras palabras, crear todos esos programas y sitios web que vemos dentro de un navegador.

El uso del término desarrollo implica tareas mas allá de la programación: análisis de requisitos, conceptos de usabilidad, seguridad de la información, ingeniería de software, programación del lado del servidor y cliente, entre otros. Cuando alguien te diga que es desarrollador, implica que no solo codifica programas sino va mas allá y realiza mas tareas.

¿Que sé debe conocer para el desarrollo web?

Primero debes conocer los conceptos básicos de programación web:

  • HTML: es el lenguaje de marcado que permite estructurar el contenido que ves en un navegador. Es el esqueleto de la parte visual de la aplicación. En mi opinión aprender HTML es el primer paso para aprender desarrollo web, pues solo necesitas un editor de texto y un navegador para empezar a crear tus primeras páginas.
  • CSS: permite definir como va a lucir el HTML dependiendo del dispositivo. Indica al navegador los colores, tipos de letra, posición y tamaño al contenido del HTML. Su curva de aprendizaje es mediana pero dominar la tecnología requiere mucha experiencia.
  • JavaScript: es el lenguaje de programación que permite definir eventos, realizar tareas, acciones. Se ejecuta tanto en el lado del cliente (a través del navegador) como del servidor (para realizar cálculos, obtención de datos, entre otros). Si solo quieres hacer páginas web sencillas, no es necesario que aprendas esto por los momentos. Sin embargo, tarde o temprano te toparas con JavaScript a medida que vayas haciendo sitios mas complejos. Pues necesitaras agregar interacciones y automatizar acciones.
  • Lenguaje de programación del lado del servidor: las tecnologías anteriores permiten realizar páginas web que se muestran en el navegador. Pero cuando necesitamos interactuar con el servidor: iniciar sesión, subir archivos, descargar información. Necesitamos programar las acciones que debe realizar el servidor donde está alojada la página para saber que debe responder. Esto se hace mediante lenguajes de programación del lado del servidor. Entre los mas comunes suele ser PHP, JavaScript, Ruby, Java, Python, entre otros.

¿Qué aprender luego?

El siguiente paso es hacerte experto en estas 4 tecnologías, e ir en todo el ecosistema alrededor de ellas. Por ejemplo, todo sitio web se aloja en un servidor, entonces debes aprender como se configurar y optimizar uno. La información se almacena en base datos por lo que aprender a diseñarlas y consultar información  a través de ella te ayudará a ser mejor profesional. Conocer como obtener buenos resultados en los buscadores, visualizar correctamente el contenido en cualquier dispositivo. Aplicar técnicas de usabilidad en las interfaces para mejorar la interacción con los visitantes.

Pero no todo es tecnología, pues existen cosas importantes para desarrollador web: redactar correos para conversar correctamente con clientes. Aprender cuánto cuesta una web para saber cuanto cobrar por el trabajo. Elaboración de manuales, entre otros.

¡Parecen muchas cosas!

Aunque parece mucha cantidad de información, poco a poco iras aprendiendo. Ser desarrollador web requiere muchos conocimientos y años de experiencia. Pero con paciencia y práctica lograrás convertirte en uno.  A mi me parece una excelente rama de la informática, cada año va en auge y se puede trabajar desde cualquier parte del mundo.

Espero que les haya gustado esta introducción, recuerden comentar cualquier aporte, sugerencia u opinión sobre el desarrollo web.

Happy coding!

Hace 10 años en esa fecha: Archlinux estrena nuevo logo oficial