Diseño Web

Compartir, Diseño Web, Video, Webs

Canal recomendado para CG, VFX, 3D y animación: Carolina Jiménez

Sabemos que nos lee gente de todos los estilos y edades. Y entre ellos seguramente habrá más de un estudiante interesado en la animación por ordenador, o algún profesional que esté dedicado a este campo. Si ese es el caso quizás habréis oído hablar de Carolina Jimenez, una CG (Computer Generated) Artist , animadora, que ha trabajado en películas como: – The Hunstman (Cedric Nicolas-Troyan) 2016 – Alice Through the Looking Glass (James Bobin) 2015 – The Hobbit: The Battle of the Five Armies (Peter Jackson) 2014 – Dawn of the Planet of the Apes (Matt Reeves) 2014 – The Hobbit: The Desolation of Smaug (Peter Jackson) 2013 – Superman, Man of Steel (Zack Snyder) 2013 – World War Z (Marc Forster) 2013 – The Hobbit: An Unexpected Journey (Peter Jackson) 2012 – Prometheus (Ridley Scott) 2012 Podéis ver su filmografía aquí y os dejo una demo reel de su trabajo hecha en el 2014. Bueno, pues una vez presentada, y puesta en contexto, lo que quería contaros hoy. Carolina, además de su página de Facebook, blog y demás redes sociales tiene un canal de Youtube. Hace unos días ha decidido, y me parece una GRAN idea, responder a las preguntas que la gente pueda tener sobre su trabajo (programas que se usan, cómo se trabaja, consejos, métodos, sitios donde poder ver buenos tutoriales…). Y obviamente, ya que trabaja actualmente en películas, es una fuente excelente para aquellos a los que os interese este mundillo. Vi el primero vídeo en directo y, sin ser del mundillo, me interesó saber cómo funcionaba. Buen trabajo. Por cierto, también me gustó mucho la partida online con tu hermano jejejeje. PD: Te he robado la foto directamente….espero que no tenga copyright 😀 Se que habrá muchos otros CG Artists españoles, pero no los conozco. Sin embargo, conozco a Carolina (es la mujer de un amigo) y se que ayudará en lo posible a todos los que pregunten e intentará aportar lo que pueda. Sabéis que siempre apoyamos eso en el blog. Suerte Carol, sin presión…. pero MUY buena idea. Todo lo que podamos ayudar a otros, todo lo que podamos ahorrarles de problemas que ya hemos pasado, usando estos métodos que la tecnología nos da, es un gran paso. Ojala hubiéramos tenido estos recursos hace años ¿no? 😀 ¡Estad atentos a sus vídeos! Los recomendamos.      

Buscadores, Diseño Web, Gestores de contenidos, Trucos

Mejorar la puntuación de PageSpeed Insights comprimiendo y cambiando tamaño de imágenes

A todos los que tenemos páginas web nos debería preocupar el posicionamiento de las mismas en Google. Para mejorarlas tenemos muchos recursos y muchas herramientas, de las cuales iremos hablando. Pero es obvio que hay que tener la mejor puntuación que se pueda (dentro de las funcionalidades que queremos tener) en las herramientas que proporciona Google. Hoy os enseñamos cómo mejora la puntuación en Google PageSpeed Insights sólo por comprimir o cambiar de tamaño las imágenes que te indica esta herramienta. Este proceso conviene hacerlo tras haber instalado cachés en tu WordPress y usado plugins como Autoptimize. En los próximos días escribiremos sobre cómo optimizar estos plugins. También después de haber hecho una optimización “masiva” de imágenes con el plugin adecuado como EWWW Image Optimizer. Una vez realizados estos preliminares, conviene ir a PageSpeed y mirar qué cosas podemos optimizar, sobre todo las imágenes. Os dejamos un ejemplo real con nuestra web. En este caso la mejora en puntuación no fue enorme, pero hemos conseguido resultados excelentes en otros clientes sólo con este “truco”.  

Diseño Web, Soporte, Trucos

Fallo “Allowed memory size exhausted” en WordPress al actualizar

Hace unos días actualizamos un WordPress a la nueva versión (4.7 en este caso). Todas las páginas en las que lo habíamos hecho funcionaron sin problemas, pero en esta en particular inmediatamente salió un pantallazo en blanco. Sin información. Siguiendo indicaciones de nuestro blog ( ya os hemos dicho que lo usamos nosotros mismos), pusimos WordPress en modo debug. El error que obteníamos era Allowed memory size exhausted Esto suele deberse a poca memoria en los parámetros del php.ini, pero sólo cuando instalamos. En una web que ya lleva tiempo en funcionamiento, salvo casos raros, no debería haber problemas si no ha avisado antes de fallo de memoria. Aún así lo comprobamos y tenía 512, suficiente. Al fijarnos más en la línea que daba el código, apuntaba a un subdirectorio de un módulo. Ya está, error encontrado. Es lo más común en las actualizaciones. Esta versión del plugin, en nuestro caso User Access Manager, daba error con la nueva versión de WordPress.  Siempre mirad los plugins antes de avisar….pero a veces no salen actualizaciones de los mismos (aunque haya). Tienes dos soluciones. Puedes ir la página del plugin. Si, como era nuestro caso, el desarrollador está activo seguramente habrá sacado una nueva versión. Entra en su página, descarga la nueva versión a mano y súbela por FTP. Si no sabes la versión que tenías puedes comprobarlo en el directorio del plugin, por FTP. El fichero Readme o similar suele decirte la versión. Al actualizarse debería resolverse el problema. Si no tienes una nueva versión, cambia el nombre al directorio del plugin que da error, o muévelo a tu ordenador directamente. Esto inhabilitará el plugin y podrás entrar en WordPress sin problemas. Una tontería…pero nos dejó la página tirada casi una hora. Así que aquí lo dejamos por si os sirve.

Diseño Web, Gestores de contenidos, Trucos

Cómo poner WordPress en modo debug. Arregla la pantalla blanca.

En ocasiones WordPress, y realmente todos los gestores de contenidos, tendrá un error que no produzca nada en pantalla. Sólo obtendrás una pantalla blanca. Puede ser al instalarlo, al ejecutarlo o al actualizarlo. En esas ocasiones debes poner WordPress en modo debug. Os lo hemos explicado antes para Prestashop , para Vtiger, y para Moodle. Con el módulo debug (desarrollador), aparecerán en pantalla errores que pueden darte una pista para encontrar el posible origen del error. Así puedes saber qué hacer para solucionarlo. Para poner WordPress en modo debug tienes que seguir los siguientes pasos: Tienes que acceder a los ficheros de tu web. Lo más común es por FTP, si no por ssh. Encuentra el fichero wp-config.php y ábrelo para editar. Tienes que encontrar la línea que pone define( ‘WP_DEBUG’, false ); Cambia la línea a (si no estaba por algún sentido añádela): define( ‘WP_DEBUG’, true ); Ahora refresca la página. Verás que aparecen errores en la página. Usa el buscador del blog y Google para encontrar la posible solución a ese error. Cuidado porque un mismo error puede ser debido a varias causas, todo lo que pruebes (y no te queda más remedio que probar) que puedas deshacerlo. Recuerda, una vez arreglado el problema, desactivar el modo debug poniendo la línea como estaba originalmente (en false). Más información aquí.  

Diseño Web, e-Learning, Gestores de contenidos, Trucos

Plugin Game en Moodle. Crucigramas, ahorcado, sudoku y mucho más

Si gestionas un Moodle que tenga cursos de palabras o definiciones (casi todos), te puede interesar introducir juegos en tu web. Los juegos son una manera divertida para que los alumnos practiquen sus conocimientos, las definiciones o aprendan de memoria palabras. ¿Quién no hace un crucigrama o sudoku de vez en cuando, o juega al Trivial? Moodle es capaz de integrar esto con el módulo Game que puedes descargarte del repositorio oficial de plugins de Moodle. Lleva mucho tiempo de desarrollo y está actualizado a las últimas versiones. El módulo tiene los siguientes juegos: Ahorcado Crucigrama Sopa de letras Millonario Sudoku La imagen oculta Serpientes y Escaleras Libro con preguntas Tenéis un manual con instrucciones en español y podéis descargaros la traducción del módulo. Sobre el uso del plugin, es muy sencillo. Sólo una nota, las palabras para los juegos los puede sacar o de preguntas del curso o (más fácil) de un Glosario. Puedes crear un glosario oculto al principio del curso (en añadir actividad), introducir ahí las definiciones, y que los juegos lo saquen de ahí. Obviamente cada juego tiene sus configuraciones…ahí que probar un poco.      

Diseño Web, Gestores de contenidos, Trucos

Menú oculto en WordPress: options.php

Mucha gente no sabe esto (quizás porque mucha gente no debería saberlo 😀 ), pero en WordPress existe un menú oculto desde el que puedes ver todos los parámetros guardados en la tabla wp_options. Para acceder a este menú, puedes ir (una vez hayas iniciado sesión como administrador en tu web) a www.tudominio.loquesea/wp-admin/options.php Verás que aparece una página llamada Todas las Opciones y ahí hay muchos parámetros, dependiendo de tu web. Yo tengo muchos parámetro de plugins como Instant Articles, Jetpack…, y otras opciones del core. Algunos podemos cambiarlos, algunos no (los que pone Serialized Data). Eso si, los que no podemos siempre podríamos ir a la base de datos y cambiarlos. ¡¡Si no sabes, no toques!! Esto no es para el usuario medio. Normalmente nunca deberías cambiar algo aquí. Pero parar desarrolladores es uua manera rápida de consultar estos parámetros incluso de cambiar alguno sin entrar en la base de datos. Obviamente, haz una copia de seguridad antes de cambiar nada.  

Diseño Web, Gestores de contenidos, Trucos

Cómo activar los Webservices en Prestashop y para qué sirven

El Webservice es un servicio poco conocido de Prestashop (y muy poco documentado) pero muy potente. ¿Qué es? Es una API , una CRUD  (Create, Read, Update, and Delete) API, que puedes usar para que otras aplicaciones o programas intereactúen, en las dos direcciones, con tu tienda online. Nos permite gestionar el catálogo, los pedidos, los clientes, consultar productos ….y descargar esa información a otras aplicaciones, o enviar esa información de otras aplicaciones a nuestro Prestashop. Cuando alguien se plantea hacer esto en Prestashop, algo que ocurre más a menudo de lo que pensáis porque muchos quieren conectar su tienda con su aplicación de gestión en el local o con otras tiendas (tipo Dropshipping), se plantean otras opciones como descargar el catálogo y enviarlo, realizar importaciones por csv o atacar directamente a la base de datos. La ventaja de los webservices es que se puede hacer todo eso de manera automática y programarlo. Es robusto, fiable y fácil de usar. Además, como veréis, se crean usuarios con accesos específicos así que es fácil controlar los permisos. Y lo que se produce es un xml (REST), algo fácilmente exportable a y entre otras aplicaciones. Las desventajas principales son la poca documentación que hay (toca prueba y error) y que  la arquitectura XML REST hace que cada actualización (de catálogo o de cantidades por ejemplo) deba hacerse una por una.  Esto hace que sea muy lento para ciertas cosas como actualizar un catálogo entero o una actualización completa de stock. Para muchos cambios quizás es mejor atacar directamente a la base de datos, hacerlo en partes o usar el importador del backend. Sería mejor usar JSON (más versátil con PHP) para esto último, que parece estar implementado pero todavía no para usarse en producción. Y no parece que lo estén moviendo mucho, tendremos que esperar. Pero para descargarse el catálogo, , producir informes, envíos de productos o de pedidos ocasionales es muy útil por la posibilidad de automatizar los procesos. ¿Cómo se activa? Tenéis que ir al backend a la opción de Parámetros Avanzados > Webservice. Ahí tenéis que poner en Sí la opción Activar el servicio Web. La de Activar modo CGI para PHP depende mucho del servidor donde tengas la web…prueba activarlo o desactivarlo cuando lo tengas funcionando y ver que pasa. Nota: Hay unos requisitos que debe cumplir tu servidor como tener curl activado y el mod_rewrite activo también. Una vez activado, puedes crear un acceso con sus permisos. Para eso, en el mismo apartado, en Webservice, pinch en el símbolo + (Añadir Nuevo) y después: Tienes que poner una Clave o pinchar en Generar (aconsejado). Si la pones tu ponla muy complicada. Lo curioso es que esta clave es la que luego tendrá que introducir la persona que acceda al webservice como nombre de usuario, dejando la clave en blanco (raro si). En la descripción identifica bien para qué es este servicio web. Debajo tienes que marcar los permisos que tendrá el usuario que entre con esa clave. Aconsejo hacerlos restrictivos y luego ir habilitando más según se vaya necesitando. Verás que puede hacer Get, Put, Post, Delete y Head. ¿Cómo se usa?  Entra desde un navegador a la dirección www.tudominio.xxx/dondeestétutienda/api Te pedirá un usuario y contraseña, recuerda usuario es la clave, contraseña en blanco. En la página que te aparece verás los servicios a los que tienes acceso en un xml. Cada uno tendrá una url a la que puedes acceder. Por ejenplo si te han activado los productos puedes verlos desde www.tudominio.xxx/dondeestétutienda/api/products Para el uso pronto haremos algún artículo. Pero os dejo los ejemplos sencillos de Prestashop aquí , aquí  y en su github. Puedes ver cómo para acceder a los clientes, pedidos, imágenes de manera básica y alguna implementación real que te puede servir para realizar tu programación. En este artículo podéis ver cómo acceder al web service desde PHP. Y para empezar con vuestra aplicación os dejo un vídeo de un usuario que crea una manera de listar los productos. Con eso ya tenéis para empezar.      

Diseño Web, Trucos

Cómo añadir texto a imágenes por CSS y que se lea bien

Hace unos días os explicamos cómo poner texto en una imagen con GIMP, para que se pueda leer correctamente. Hoy hacemos lo mismo con CSS, para hacerlo en una web. Por ejemplo en un Slider. Suponemos que el texto no se ve bien en toda o en parte de la imagen. La idea es la misma, podemos: Poner un color de fondo con transparencia en el div de texto. Para que quede como esto: La idea es sencilla. Identifica el div del texto o dale un id. Luego en ese id en la página de estilos pon: background-color {rgba(0, 0, 0, 0.25)} Recordad que tenéis que poner el color en formato rgba para usar transparencia. En este comando los 3 primeros números son el color (como veis yo suelo usar el negro), y el último es el grado de transparencia (aquí 0.25). Con ese último es con el que tenéis que jugar. Recomiendo usar Inspeccionar de Chrome o Inspeccionar elemento de Firefox. Ahí podrás ver los cambios en tiempo real antes de ponerlos en el código. Puedes hacer un blur en la capa de texto. Es decir, difuminar la de debajo donde esté la capa de texto. Para eso poner este comando en esa capa de texto: {-webkit-filter: blur(12px); filter: blur(12px);} Poner una capa intermedia (div) de color con transparente entre el texto y la imagen. Como en la imagen por GIMP, si no queréis que quede el recuadro anterior, podéis hacer lo mismo pero cubriendo toda la imagen. Sólo tenéis que poner un div entre el texto y la imagen, del mismo tamaño (y posición) que esta última. En ese div intermedio poner : background-image: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));} Este comando es parecido al anterior, pero crea un gradiente de color. En este caso hemos dejado todo el fondo igual. Para ayudarte puedes usar un generador online de gradiente lineal como este o este. Obviamente podéis cambiar los colores tanto de principio como de final. Quedaría algo así: Y como en el caso de las imágenes, también podéis poner una sombra en el texto. Para ello en la clase del texto poner: { text-shadow: 0 1px 0 black; }

Diseño Web, Gestores de contenidos, Trucos

Autoptimize: plugin de wordpress para cachear y minimizar CSS,JS y HTML. Acelera tu web.

Una de las cosas que más puntúan los buscadores es la velocidad de respuesta de una página. Esta depende de muchos factores, y puedes analizar tu página con PageSpeed de Google u otras web para que te den consejos sobre cómo reducir el tiempo de respuesta. Obviamente aquí entra el hardware del servidor, las conexiones etc. Eso poco puedes hacer. Pero si que puedes minimizar las imágenes, usar plugins de caché como W3 Total Caché o similares….y reducir y cachear el código CSS, html y javascript. Para esto último uno de los mejores plugins es Autoptimize. Para ver la importancia de este plugin sólo tenéis que ver el número de descargas y el número de puntuaciones máximas (muchísimas). Es una manera sencilla y rápida de acelerar tu web. Ante todo destacar que lo que puedas hacer y los resultados dependen del tema de tu página. En algunos temas (aquellos con Sliders), cachear el Javascript puede ocasionar problemas. En otros como aquellos con Visual Composer algunas opciones de CSS pueden dar resultados extraños. La única opción que tienes es ir activando las opciones y ver tu página. Si alguna le cambia el aspecto o la tira, desactívalo y pasa a la siguiente. Cuantos más tengas activados mejor…pero es raro poder tenerlos todos. Cuando lo instales y lo actives, te recomiendo pinchar en Show Advanced Settings para ver todas las opciones del plugin. Siempre puedes elegir Autoptimize…y si funciona fenómeno. A mi me gusta más controlar lo que está pasando.   Si unes este plugin, a uno de optimizar imágenes y a uno de caché…aumentarás rápidamente la velocidad de tu web sin demasiado esfuerzo. Obviamente casos complejos y mejores optimizaciones requieren un estudio más detallado, pero esa combinación anterior  es suficiente para la mayoría de las webs sencillas.

Diseño Web, Gestores de contenidos

Cómo crear Anchor Links para crear saltos de página internos en tu web

Con los Anchor Links podemos crear fácilmente saltos de página dentro de nuestra página Web. Al estilo de los índices de Wikipedia. Estos enlaces son muy útiles en varios casos: Para crear un pequeño índice o introducción al comienzo de la página que nos lleve a cada apartado al pinchar. Para referenciar a secciones de la misma u otra página en el texto y que nos lleve ahí al pinchar en una palabra. Para crear webs de una sola página (muy de moda hoy en día) y que los menús nos lleven directamente a cada sección (y no a otras páginas). Por ejemplo si elegimos el apartado Contacto del menú, nos llevará a la sección Contacto de la misma página (por ejemplo al final). Por ejemplo esto te llevará al final de la página. También podemos usarlo para crear botones de “subir” y que nos devuelva al principio de la página. Os explicamos cómo crear estos enlaces ancla: Tienes que poner una etiqueta al destino con el atributo id de CSS. El destino ser una palabra, un div, una imagen…cualquier elemento al que puedas asignar un id de css. Por ejemplo (sólo algunos de los posibles: <p id=”etiqueta”>Soy el destino</p> <div id=”etiqueta”></div> <h1 id=”etiqueta”>Título destino</h1> En el destino pon un enlace que simplemente contenga #etiqueta .  Se puede, de nuevo poner en cualquier elemento que admita un enlace (palabra, frase, imagen, apartado de un menú). Esta es la versión simple. Si lo que quieres es crear un menú, es mejor que antes de la etiqueta pongas la url completa. Si, por ejemplo tu índice es www.tudominio.es  y quieres llevar a el apartado contacto de la misma página (al que previamente has puesto una etiqueta) pon www.tudominio.es/#contacto Si no pones la url completa, en una subpágina no sabrá llegar a ese apartado. Recuerda que si lo que quieres es poner enlaces de “ir al principio” o “ir al final”  podéis poner divs vaciós con etiquetas como en el ejemplo del apartado 1 o el ejemplo de esta página. Ahora probad y jugad. Permite crear páginas muy interactivas y de mucha facilidad de uso para los clientes. Nota: No uséis espacios en las etiquetas. Mejor con guiones. Final Esto te llevará al principio

Scroll al inicio