tutoriales

Cómo hacer un briefing de diseño web
A menudo me encuentro con clientes que tienen serias dificultades para explicarnos en qué consiste su proyecto web. Les cuesta mucho organizar la información y definir aquellos datos que son más importantes a la hora de hacer un presupuesto de desarrollo web. Por este motivo os dejo un breve esquema de cómo debe ser un briefing para el desarrollo o diseño de un sitio web.   Descripción del proyecto Empezaremos nuestro briefing haciendo una descripción del proyecto en líneas generales, de la empresas u organización que lo respalda y del contexto del mismo. No estamos escribiendo una novela, conviene ir al grano y resumirlo en no más de 2 ó 3 párrafos. Datos de contacto Datos de contacto de las personas implicadas en el proceso de desarrollo así como de sus departamentos. Público objetivo  Aquí presentaremos la audiencia y el público objetivo al que irá dirigido el sitio web. Edad, zona geográfica, nivel socioeconómico, sexo, profesiones, estudios, aficiones, etc.. Tampoco hay que profundizar en esto y basta con tener una idea somera del asunto. Productos o servicios ofrecidos Descripción de los productos o servicios que ofrece la empresa de una forma esquemática y sin profundizar. En el caso de no existir productos o servicios, como por ejemplo una web para concienciar a la gente sobre el movimiento vegano, obviamente no hará falta completar este apartado. Competencia Definición de los principales competidores tanto a nivel nacional como internacional. Siempre debemos incluir los links a las páginas de esas empresas u organizaciones. Referencias Ejemplos de webs que gustan y a las que hay que parecerse o superar. Este apartado es muy útil a la hora de dar a entender los gustos y el nivel de diseño. Presupuesto Es muy importante definir un presupuesto y exponerlo abiertamente. De igual forma que hacemos cuando vamos a comprarnos un portátil o un coche, es muy conveniente ser claros con esto. Hay que buscar proveedores de confianza y confiar en ellos. Un proveedor serio podrá asesorar y valorar todo mucho mejor teniendo una horquilla de presupuesto. No hagamos que nos enseñen el Porsche si solo tenemos presupuesto para un Dacia. Además esto puede ahorrarte mucho tiempo en negociaciones y búsqueda de proveedor.  Objetivos Empezaremos por definir los objetivos más intangibles, aquellos que ayudan a entender en términos generales de qué va la vaina, pero que no se pueden medir con exactitud. Algunos ejemplos serían:  · Dar a conocer la marca · Promocionar los servicios de la empresa · Mejorar la presencia online · Mejorar la usabilidad Y después pasamos a centrarnos en la definición de aquellos objetivos que sí se pueden medir y que después pueden pasar a ser los famosos KPIs. Estos objetivos son los que realmente nos interesan ya que van a condicionar en gran medida muchas de las decisiones de diseño y desarrollo. Debemos dividirlos en dos: Objetivo principal  Motivo por el cual se quiere desarrollar el sitio web, el goal principal, aquello que más nos interesa conseguir. Ejemplos de objetivos principales típicos serían:  · Vender determinado producto. · Conseguir potenciales clientes (leads). · Obtener donativos.  Objetivos secundarios Otros objetivos que, si bien no son críticos, su consecución nos puede resultar de gran ayuda. Ejemplos de objetivos secundarios serían:  · Conseguir suscriptores a la newsletters. · Conseguir usuarios registrados. · Conseguir comentarios en los post. · Conseguir reviews de productos. Mapa de sitio Si tienes alguna idea de las secciones, tipos de contenido o mapa de sitio conviene especificarlo aquí. Si no sabes cómo organizar el contenido simplemente especifica qué tipo de información quieres mostrar en la web.  Idiomas Definir en qué idiomas deberá estar disponible el sitio. También indicar si el cliente proveerá los textos traducidos o la empresa de desarrollo debe encargarse de esto. Tiempos Plazos de entrega final y entregas parciales.  Imagen corporativa y diseños Si la empresa u organización dispone de logo es conveniente adjuntarlo al briefing. Si hay diseños o ejercicios de UX o diseño previos también conviene adjuntarlos. Funcionalidades En este apartado es donde hay que definir cualquier cosa que queramos que haga el sitio web. Es la parte más importante de todo el briefing web y donde debemos explayarnos con los detalles, ya que es la que más influye en el coste de desarrollo. Si tenemos algún conocimiento técnico o sabemos más o menos de lo que hablamos es importante dar cuantos más detalles mejor. Si no tienes ni idea, es mejor ser prudente e intentar explicar de forma simple qué cosas quieres que haga la web.  Si no sabes cómo se llama algo puedes poner ejemplos de otras webs pegando la dirección de la web que hace aquello que quieres. Por ejemplo: Quiero que las fotos del producto se vean como en zara.com https://www.zara.com/es/es/rebajas/hombre/blazers/blazer-cuadros-marino-c436046p4606523.html Ejemplos de funcionalidades comunes son: · Diseño responsive (adaptativo). · Sistema de venta online con carrito de la compra y pago con tarjeta y PayPal. · Buscador por palabras. · Buscador por palabras y autocompletado · Blog con comentarios y bloque de artículos relacionados. · Posibilidad de registro de usuarios con Facebook (Login with Facebook). · Sistema de reservas de pistas de paddel. · Área de clientes donde podrán descargar archivos. También es importante detallar cualquier integración que haya que hacer con otros programas o webs. Por ejemplo: · La tienda virtual debe integrarse con un sistema CRM. · El catálogo de piezas deberá actualizarse diariamente contra nuestro sorfware de gestión de almacen. Tecnología Si se trata de un sitio nuevo y tienes predilección por alguna tecnología en particular debes definirlo. Si no lo tienes claro ponte en manos de profesionales y déjate asesorar. Siempre he defendido que hay que elegir un proveedor de confianza y trabajar con la tecnología que dicho proveedor domine. Se contrata a profesionales y estos profesionales deben decidir cuál es la mejor tecnología para cada proyecto. En el caso de que se trate de rediseño hay que dejar muy claro cuál es la tecnología actual y si hay que mantenerla o se puede cambiar. Alojamiento web Indicar el presupuesto disponible para alojamiento web.  También se pueden incluir extras para mejora del rendimiento o la seguridad como por ejemplo la contratación de un CDN o un certificado SSL. Dominios Si ya se dispone de un dominio conviene detallarlo. Si no se dispone del mismo se deben sugerir nombres de dominios para comprobar su disponibilidad. Mantenimiento Especificar si se dispone de un equipo para actualizar el contenido o necesitas contratar este servicio.   Y esto es todo. Fácil ¿verdad? También puedes incluir cualquier otra información que estimes oportuna, pero recuerda obviar todo aquello que no sea de interés para valorar el desarrollo. Ahora ya no tienes excusa para lanzarte con esa idea loca de web que tienes en mente. Ponte manos a la obra, crea un briefing para tu proyecto online y busca una empresa de diseño web que te elabore un presupuesto.
Diana tiro con arco olimpico representado el remarketing de Google
El remarketing de Google es una herramienta muy poderosa para mostrar anuncios de AdWords a visitantes de nuestro sitio web en función de una serie de reglas que podemos personalizar. El módulo webform de drupal es uno de los más utilizados, especialmente para crear formularios de contacto, solicitud de información, inscripciones, etc.. En este artículo vamos a explicar cómo hacer un módulo que nos permita hacer remarketing a los usuarios que han enviado un formulario con un valor concreto seleccionado, para ello crearemos un callback en nuestro módulo encargado de hacer que la url de confirmación de envío del webform incluya un parámetro único indicador del producto, servicio o tema sobre el que queremos hacer remarketing, vamos a utilizar como ejemplo un webform que tenga un componente selector de productos en el que hay 3 opciones: 1 | Premium 2 | Avanzado 3 | Básico El objetivo es que la página de confirmación del envío del webform incluya el código de la selección sobre el que el usuario ha solicitado información de modo que podamos configurar nuestros AdWords sabiendo sobre qué producto está interesado el usuario. Para ello estableceremos una página de confirmación con una parte fija y una segunda parte dinámica que incluirá el producto seleccionado en el webform, de modo que las URL’s posibles en nuestro ejemplo serían: /envio-realizado/1 /envio-realizado/2 /envio-realizado/3 Adicionalmente debemos configurar el webform para que utilice como página de confirmación la URL personalizada que vamos a crear y le pase como parámetro el valor que el usuario ha seleccionado en el selector del formulario. Lo primero que debemos hacer es crear el módulo que, mediante el hook_menu de drupal, va a proporcionar la URL personalizada y el callback que gestionará esas peticiones, en el ejemplo que vamos a seguir lo llamaremos “webform_remarketing”: /** * Implements hook_menu(). */ function webform_remarketing _menu() { $items = array(); $items['envio-realizado/%'] = array( 'title' => 'Submission received', 'description' => 'Confirmation page for webform', 'page callback' => 'webform_remarketing _confirmation_page', 'page arguments' => array(1), 'access arguments' => array('access content'), ); return $items; } Una vez que tenemos creada la opción de menú, debemos agregar la función definida en el page callback que será la que proporcione el contenido que se mostrará en pantalla: /** * Confirmation page menu callback. */ function webform_remarketing _confirmation_page ($producto) { return . t('Submission received') . ; } Esta función es un ejemplo con fines didácticos, por lo que simplemente muestra un mensaje sencillo, lógicamente lo habitual es querer mostrar más contenido, para ello es conveniente recordar que todo el contenido que se muestra al usuario debe utilizar una función de theming para que pueda ser fácilmente modificable por el desarrollador del sitio. El siguiente paso que necesitamos dar es modificar la configuración del webform para que utilice la página de confirmación que hemos creado en nuestro módulo y le pase el valor seleccionado por el usuario, para ello, editaremos las opciones del webform en la pestaña “Ajustes de formulario”; entre otras opciones, hay un apartado llamado “Dirección de redirección” que nos presenta 3 opciones, debemos seleccionar “URL personalizada” e introducir la URL que hemos definido en nuestro módulo y hacer que el propio webform pase en la segunda parte de la URL el valor marcado por el usuario en el componente del selector de productos, para ello utilizamos el token correspondiente, que en este caso sería [submission:values:?] donde “?” hay que sustituirlo por el form_key del componente, suponiendo que dicho valor fuera “producto”, lo que debemos escribir en el campo sería: envio-realizado/[submission:values:producto] Y con esto hemos conseguido nuestro objetivo, cuando un usuario rellena el formulario y solicita información sobre un producto, la URL de confirmación incluye el código de dicho producto, por lo que ya podemos configurar las opciones de remarketing utilizando esas URL’s en AdWords y configurar nuestras campañas.
Cómo crear un bloque de contenido relacionado con views en Drupal 7
Como suele ser habitual en Drupal, siempre hay varias formas para resolver un problema. En este caso queremos hacer un bloque de contenido relacionado para que se muestre en un nodo, por ejemplo el típico bloque de noticias relacionadas que se muestra en el nodo de una noticia. Lo que necesitamos es crear una view que muestre noticias del mismo término de taxonomía que el nodo en el que se mostrará el bloque y, por supuesto, que no nos muestre el mismo nodo en el que estamos. Para ello debemos seguir los siguientes pasos: 1.- Creamos una view con un display tipo bloque. 2.- Añadimos los campos que queremos que aparezcan como título, fecha y foto. 3.- Añadimos un filtro contextual para excluir el nodo actual. Hacemos click en “Añadir Filtro contextual” Seleccionamos “Contenido: Nid (El ID del nodo)”. Ahora cuando el filtro no está disponible seleccionamos “Proporcionar valor predeterminado” y en Tipo seleccionamos “ID de contenido desde URL” Por último vamos a la sección “Más” y marcamos la casilla “Excluir - Si se marca, los números indicados para el filtro serán excluidos en lugar de limitar la vista”. 4.- Añadimos un segundo filtro contextual:   Seleccionamos “Contenido: Tiene un id de un término de taxonomía“. Cuando el filtro no está disponible seleccionamos “Proporcionar valor predeterminado” y en Tipo seleccionamos “ID de término de taxonomía desde la URL” y después marcamos la casilla “Load default filter from node page, that's good for related taxonomy blocks” y seleccionamos el vocabulario que queramos. Si no carga la lista de vocabularios, pincha en guardar y vuelve a hacer click en el filtro conceptual. 5.- Ahora ya solo queda ir a la configuración de bloques y ubicar el bloque en la región y el tipo de contenido que nos interese. Y ya tenemos nuestro bloque de contenido relacionado con views en Drupal 7.
Cómo instalar Boost en Drupal 7
Optimiza el rendimiento de tu sitio web Drupal con Boost, un módulo que provee una caché para las páginas estáticas de Drupal permitiendo así una significativa mejora del rendimiento para sitios que reciben tráfico preferentemente de usuarios anónimos. Es la mejor opción para mejorar y optimizar nuestros sitios alojados en hostings compartidos. Boost almacena y comprime (gzip) el contenido html, xml, ajax, css y javascript.  En este vídeo-tutorial explicamos cómo instalar y configurar el módulo Boost en Drupal 7.     Esperamos que os haya servido de ayuda, podéis dejar vuestros comentarios o dudas y trataremos de responderos a todos.
Aplicando Parches a módulos drupal desde Mac OS X
El programa necesario para aplicar parches a cualquier módulo drupal viene instalado de serie en cualquier versión de Mac OS X. Se trata del comando patch que debe usarse desde la línea de comandos usando la aplicación Terminal.app Aplicando el parche usando el terminal.app Lo primero de todo es hacer una copia de seguridad del archivo .module por si fuera necesario volver atrás. Lo siguiente es descargar una copia del parche que vamos a aplicar. (En nuestro caso ejemploparche.patch) y copiarla al mismo directorio donde tenemos el archivo .module. Ahora, comprueba que el parche que quieres aplicar y el modulo tienen la misma versión abriendo ambos archivos con un editor de texto y comprobando los números de revisión. Son algo parecido a esto: diff -u -r1.51 example.module. Esto significa que el programa parcheador buscará la version 1.51 del example.module. Si la versión en el archivo del parche es diferente de la versión del módulo, en el terminal aparecerán errores al parchear y te quedarás con cara de gili delante de tu Mac. Si los numeritos coinciden ya podemos proceder: Abre la aplicación Terminal.app, puedes encontrarla en la carpeta de Aplicaciones -> Utilidades. Verás una ventana con algo como esto: Last login: Fri Nov 14 08:56:19 on console Ordenador-de-pepe:~ admin$ Usando el comando ‘cd’ (change directory) navega a la carpeta donde esta el modulo y el parche que queremos usar. (e.g. "cd ~/Users/Sites/Misitiodrupal/sites/all/modules/example_module/") Consejo: Puedes arrastrar una carpeta o archivo desde el finder a la ventana del terminañ y la ruta a dicha carpeta o archivo se autocompletará. Es decir.. solo tienes que escribir en el terminar “cd “ (con espacio después del cd) y arrastrar la carpeta que contiene el modulo y el parche y después pulsar enter. Una vez que estés en la carpeta correcta, ejecuta el siguiente comando reemplazando el nombre del parche por el de tu parche. $ patch < ejemploparche.patch (Nota: no escribas el símbolo de $. Es solo para ilustrar la linea de comando que veras en tu Terminal). Y ya lo tienes! El módulo original esta ya parcheado y listo para usar.
¿Quieres volar?Nosotros te ayudamosEscríbenos