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.

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.

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

SQL para migrar la configuración del tema en WordPress

Desde hace unas versiones WordPress ofrece Customizer, una herramienta para pre-visualizar y configurar un tema en tiempo real. Si se te ha perdido la configuración, esta entrada te explicará como migrar la configuración del tema desde la base de datos. ¿Por qué hacerlo por base de datos y no por un plugin? Pues existen escenarios donde no puedes recrear la configuración manualmente:

  • Vas a lanzar un nuevo tema hijo a producción. No puedes perder tiempo en mostrar un sitio mal configurado a las personas.
  • El tema posee una configuración muy compleja o  grande. Tomando mucho tiempo en recrear la visualización del sitio.
  • El tema esta codificado en otro idioma (escenario que me inspiró esta entrada) y no entiendes la configuración seleccionada.

¿Por qué se pierde la configuración del tema?

Esta configuración se guarda en la base de datos asociada al tema, ocasionando que si cambias a una plantilla hija o una copia de la misma, todas las personalizaciones se pierden. Inclusive, algunos desarrolladores comenten el error de colocar la versión a la carpeta del tema y al cambiar la versión, se pierden los datos de personalización.

SQL para  migrar la configuración del tema en WordPress

La configuración del tema se guarda en la tabla wp_options bajo el nombre de theme_mods_NOMBRE_CARPETA_DEL_TEMA. Por ejemplo, si tienes activado el tema twentynineteen, los ajustes del tema estarán bajo el nombre theme_mods_twentynineteen.

Para migrar la configuración, del tema cuyo nombre de carpeta en /wp-content/themes/ se llame original a un nuevo tema (hijo o con otro nombre) llamado nuevo solo debes ejecutar esta sentencia:

INSERT `wp_options` (option_name, option_value) VALUES ('theme_mods_nuevo',

(SELECT `option_value` FROM `wp_options` WHERE `option_name`='template_mods_original')

);

¡Listo! Ya con estos pasos deberías tener la misma configuración del tema padre (u otro tema si es compatible) con la plantilla cuyo nombre es nuevo (recuerda cambiarlo por el nombre de tu tema). De esta forma ahorras tiempo en recrear toda la configuración automáticamente y luego activar el tema. No perderás tiempo configurando cosas o renombrando carpetas.

Espero que les sirva este comando SQL y recuerda comentar si conoces un mejor método o como optimizar este. ¡Feliz desarrollo!

Carga los productos de una orden en WooCommerce

WooCommerce es una excelente solución para crear tu propia tienda en línea. Al ser un plugin de WordPress permite aprovechar todo lo disponible para esta tecnología. Cada nueva versión incluye mejoras significantes pero sacrificando muchas veces compatibilidad hacia atrás. Hace unos meses salió la versión 3.0 que introdujo varias mejoras y cambios en el SDK. Uno de mis plugines estuvo funcionando mal con los productos variables, pues la forma de obtener los productos de una orden habían cambiado. A continuación te explico como carga los productos de una orden.

Carga de productos de una orden

El problema es que en WooCoommerce existen varios tipos de productos: simple, variable, virtual, etc. Cada uno de ellos es definido en su propia clase, entonces cuando cargas una orden en WooCommerce desde el SDK solo tienes acceso al ID. Luego poder detectar con ese ID el tipo de producto y cargar su respectivo objeto puede ser tedioso.

El primer paso es obtener los objetos que representan los productos de la orden. No se debe confundir con el producto como tal, pues estos tienen un precio y atributos únicos para la orden.  Luego de cargar estos productos, si procedemos a cargar la instancia de su respectiva clase que nos dará toda la información.

WooCommerce nos ofrece la función get_product() que dando un ID, se carga automáticamente el producto como un objeto de su respectiva clase. Permitiendo acceder y manipular la data de muchas formas.

$order = wc_get_order( $order_id );
$line_items = $original_order->get_items();

foreach ( $line_items as $item_id => $item ) {
  $wc_product = $item->get_product();
  ....
}

Y listo, ya con esto puedes obtener un objeto que representa al producto de un orden.

Hace 2 años en esa fecha: Mi opinión sobre When Google met Wikileaks

Hace 9 años en esa fecha: World Challenger JCheater v1.1

Hace 10 años en esa fecha: Un MEME

Mi entrevista en WordPress.tv por el Global WordPress Translation Day

El pasado noviembre me hicieron una entrevista en WordPress.tv, pues desde el 2016 he estado organizando encuentros de WordPress en San Cristóbal, Venezuela. El 12 de noviembre de 2016, organizamos el único Global WordPress Translation Day de latinoamérica. Allí explicamos como realizar traducciones y una herramienta para facilitar las hecha por Diego Juliao con la participación del localizador oficial para Venezuela Jordi Cuevas.

Mi entrevista en WordPress.tv

Puedes ver la entrevista a continuación, está en ingles, hablo un poco de mí y las tareas que realizo en los meetups. También explico como nació la comunidad local de WordPress y otras cosas.

Espero que les guste.