tutoriales

Cómo hacer un briefing de diseño web
14/07/2017
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.
Cómo instalar drupal 8 en 5 minutos
09/02/2017
Drupal 8 es la versión más reciente de drupal, incluyendo grandes mejoras con respecto a la versión 7 y dando un salto importante en tecnología, rendimiento y extensibilidad, su nuevo “core” basado en PHP orientado a objetos hace uso de algunas de las tecnologías más conocidas y exitosas como Symfony, Composer, Twig y muchas más, mejorando la experiencia del usuario y facilitando el trabajo de desarrollo. En este artículo vamos a mostrar la manera más simple y rápida de tener una web funcionando con drupal 8 en español en muy poco tiempo, en concreto será suficiente con 5 minutos (sin contar los tiempos de descarga/subida de ficheros ni el tiempo de instalación, que varía en función del servidor utilizado). Qué necesitamos Antes de comenzar necesitamos disponer de un entorno donde realizar la instalación que cumpla los requisitos técnicos para ejecutar drupal 8, lo más común sería un servidor con Apache 2.x, MySQL (5.5.3 o superior) y PHP (5.5.9 o superior), estos requerimientos son muy comunes por lo que prácticamente cualquier proveedor de hosting los ofrece dentro de su catálogo de servicios. Además existen algunas soluciones de instalación automatizada (Installatron es una de los más conocidas) que incluyen drupal dentro de su catálogo de aplicaciones. En caso de no disponer de una solución de estas características, los diferentes paneles de control que suelen ir incorporados a cada hosting (cPanel, DirectAdmin, etc.) facilitan mucho las diferentes tareas a llevar a cabo para la instalación. Algunos proveedores de hosting especializados como Pantheon.io incluso ofrecen una instalación automatizada completa haciendo posible crear un sitio en drupal 8 en pocos clicks. En cualquier caso, el sistema de instalación manual es muy sencillo, y las tareas a llevar a cabo son muy similares se use el panel de control del hosting que se use. Existen dos componentes imprescindibles para el funcionamiento de drupal: El código fuente del sistema. Consiste en una árbol de carpetas y ficheros (cuya gran mayoría están escritos en php) que deben ejecutarse en el servidor web, normalmente en una carpeta que se llama “public_html”, “www” o “htdocs”, tanto la ubicación como el nombre de esta carpeta depende de la configuración que el proveedor de hosting haya establecido en el sistema operativo del servidor, para este artículo vamos a suponer que dicha carpeta es “public_html” y nos referiremos a ella como la carpeta “raíz”. La base de datos. Toda la información que el código fuente necesita almacenar se guarda en una base de datos gestionada por el servidor de base de datos, la arquitectura de los sistemas depende de muchos factores y puede ser muy variada y en este artículo vamos a dar por hecho que tanto el servidor web como el de base de datos son el mismo, ya que es la configuración más común en los alojamientos de pequeño tamaño. Minuto 1. Preparar el código fuente Para preparar el entorno necesitamos incorporar los elementos que van a conformar nuestro sistema, primero obtendremos el código fuente necesario, realizando los siguientes pasos: 1. Descargar la última versión disponible de drupal 8 en la página oficial de drupal. Obtendremos un fichero comprimido con el árbol de carpetas y archivos que conforman el código fuente. 2. A continuación, ya sea mediante el administrador de archivos del panel de control del hosting o mediante un cliente FTP es necesario subir el fichero descargado a la carpeta raíz del servidor web. 3. El siguiente paso es descomprimir el fichero que acabamos de subir, normalmente el administrador de archivos del panel dispone de la opción “Descomprimir” o “Extraer”, si no disponemos de dichas opciones, entonces en lugar de subir el fichero comprimido, lo que haremos será descomprimirlo en nuestro equipo y subir a la carpeta raíz todos los archivos y carpetas con la misma estructura que tienen dentro del fichero comprimido. Una vez terminada esta operación, podemos borrar el fichero comprimido que habíamos subido inicialmente, de modo que en nuestra carpeta raíz quede de la siguiente forma: 4. Crear carpeta de traducciones. Este paso solamente es necesario si queremos instalar drupal en un idioma distinto del inglés, para ello es necesario crear la carpeta “sites/default/files/translations”, en la reciente creada estructura de carpetas navegaremos hasta “sites” > “default” y veremos que no existe la carpeta “files”, la creamos y dentro de ella creamos “translations”, para evitar problemas de permisos durante la instalación, le asignaremos permisos “777” tanto a la carpeta “files” como a “translations”, una vez finalizada la instalación se pueden modificar para aplicar una configuración más restrictiva. 5. Crear archivo settings.php. En la carpeta “sites/default” duplicaremos el archivo default.settings.php y le pondremos el nombre “settings.php” al archivo nuevo, también le asignaremos permisos “777”. Minuto 2. Preparar base de datos El segundo componente imprescindible de nuestra instalación es la base de datos, para ello es necesario crearla desde el panel de nuestro hosting, en la opción “Gestionar bases de datos” o “Gestión de MySQL” o algún nombre similar, el objetivo final es disponer del nombre de una base de datos y del nombre y contraseña de un usuario autorizado para operar con dicha base de datos, los pasos a seguir varían en función del panel de control que se utilice, pero suelen ser los siguientes: 1. Crear base de datos asignándole un nombre 2. Crear usuario de base de datos, asignándole la base de datos recién creada para que pueda operar con ella. En algunos paneles estas dos operaciones se realizan de manera simultánea desde la misma ventana de creación de base de datos. Minuto 3. Ejecutar instalador Es el momento de abrir con el navegador nuestra página web, si se ha incorporado correctamente el código fuente, aparecerá automáticamente la página de instalación en la que debemos ir seleccionando las opciones que más nos interesen para configurar nuestro sitio drupal: 1. Seleccionar idioma. En este caso seleccionaremos “Español” y pinchamos en “Save and continue” 2. Seleccionar perfil. Seleccionaremos la opción “Estándar”, ya que incorpora las características más comunes preconfiguradas, la opción “Mínimo” está indicada para usuarios avanzados que quieran construir el sitio desde cero personalizando todas las funciones. 3. Configuración de la base de datos. En esta ventana introduciremos los nombres de la base de datos y del usuario que habíamos creado, así como la contraseña que habíamos definido, normalmente las opciones avanzadas no es necesario cambiarlas a menos que la configuración del servidor así lo exija. Tras pulsar en “Guardar y continuar” comenzará la instalación de los componentes del sistema y posteriormente la importación de las traducciones necesarias al español, el tiempo de instalación puede variar en función de la velocidad y potencia del servidor que estemos utilizando, durante todo este tiempo, en la pantalla aparecerá una barra de progreso y un texto informativo indicando lo que se está haciendo y el porcentaje completado. Minuto 4. Configurar sitio Al terminar el proceso se mostrará una pantalla donde hemos de configurar la información básica del sistema: 1. Nombre e email del sitio 2. Nombre, email y contraseña del usuario administrador 3. País y zona horaria predeterminada 4. Avisos de actualizaciones Pinchamos en el botón de guardar y nuestro sitio drupal cargará por primera vez con la sesión iniciada para el usuario administrador. Minuto 5. Cambiar permisos de archivo settings.php Una vez terminada la instalación es el momento de cambiar los permisos del fichero settings.php, los permisos recomendados son 444, es decir, eliminar los permisos de escritura y ejecución para todos los usuarios, esto es muy importante ya que si no se hiciera estaríamos creando un enorme agujero de seguridad en nuestro sitio web. ¡Conseguido! Ya tenemos operativo nuestro sitio web en drupal 8. Con drupal 8 disponemos de un sistema con amplias posibilidades de configuración, podemos añadir nuevas funcionalidades instalando alguno de los miles de módulos disponibles en drupal.org o creando a medida lo que necesitemos e incorporar un tema personalizado que le dé un aspecto e imagen únicos. Dispondremos de un sistema fiable, seguro y escalable centrado en el rendimiento, no tendremos que preocuparnos de si responderá al ritmo de crecimiento de nuestro negocio, ya que drupal puede atender las necesidades tanto de un pequeño blog como de una web corporativa de ámbito global con miles de usuarios y millones de páginas vistas.
Diana tiro con arco olimpico representado el remarketing de Google
04/05/2016
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
12/11/2015
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
20/08/2015
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
17/11/2014
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.