En el proceso de crear un tema para WordPress podemos empezar por la creación o migración de un sitio en HTML / CSS y JS o desde una plantilla HTML de terceros. Aunque existe el plugin HTML Import 2 aquí veremos cómo crear un tema propio para WordPress a partir de una plantilla HTML / CSS y JS.
Básicamente debemos de encontrar en ese HTML aquello que debe ser dinámico, aquello que debe cambiar según la configuración de WP o que debe ser editable desde el backend y sustituir ese HTML por PHP.
En esta primera parte de una serie de artículos sobre la creación de temas para WordPress veremos:
De HTML a WordPress (Preparando el entorno de desarrollo)
Diseccionando el index.html
Encolar los archivos CSS y JS
Sustituir lo estático por lo dinámico (template tags)
El Loop
Resto de páginas (distintos Loops)
Contenido dinámico
En el siguiente artículo publicaremos el proceso de conversión de una una plantilla HTML / CSS / JS a un tema de WordPress gratuito que subiré al repositorio.
Empezamos
1. De HTML a WordPress (Preparando el entorno de desarrollo)
Importamos contenido dummy (falso) para poder trabajar. Nos descargamos el archivo XML del Codex. En nuestro WP –> Herramientas –> Importar –> WordPress –> Instalamos plugin –> Ejecutar importador –> subimos el archivo XML que nos hemos descargado –> Dejamos los autores tal como están pero marcamos la casilla de importar los datos adjuntos.
Para no trabajar desde cero comenzaremos con un starter theme, nos descargamos el tema http://underscores.me/ (de código abierto, gratuito y creado por Automattic) En las opciones marcamos la opción Sassify para tener los archivos SASS. Lo instalamos en nuestro WP –> Apariencia –> Temas –> Añadir nuevo.
Abrimos la carpeta de nuestro tema en nuestro editor (Brackets, Sublime Text o mejor VS Code).
En esa misma carpeta metemos los archivos HTML / CSS y JS a convertir.
2. Diseccionando el index.html
La mayoría de las plantillas para WordPress actuales tienen la opción de mostrar un diseño diferente en la home de nuestro sitio que en las páginas de su interior. En nuestra plantilla HTML el archivo index.html sería la home. Lo tienes que dividir en 4 partes: header, contenido, footer y sidebar (este último es opcional).
El header.php contiene desde <!doctype HTML> hasta aquello que se va a repetir en todas las páginas, normalmente hasta el menú.
El contenido (index.php, single.php, archive.php, front-page.php…) es aquello que dinámicamente muestra según la página que se visite (una entrada, una página, un producto…)
El footer.php contiene aquello que se repite al final de todas las páginas, termina con </html>
El sidebar.php contiene el código que muestra la barra lateral, si no vas a usarla puedes omitirlo
El tema Underscores trae por defecto creados ya los acrhivos header.php, index.php, footer.php y sidebar.php Debes editar cada uno para poner el marcado HTML que has creado, con sus clases CSS.
3. Encolar los archivos CSS y JS
Si la plantilla HTML tiene archivos CSS y JS lo ideal es sustituir sus llamadas en el HTML a una función dinámica de WP que encola esos archivos. En el tema Underscores, en el archivo functions.php ya tienes la función creada, sólo tienes que añadir los archivos.
Ejemplo para encolar el archivo main.css (*) y el jquery.scrollex.min.js dependiente de jQuery de esta forma:
* Nota: como seguramente utilices SASS lo mejor es que compiles ese archivo junto a los de Underscores y los que tú añadas en el style.css y así sólo cargas un CSS.
4. Sustituir lo estático por lo dinámico (template tags)
Aquello que sea dinámico se marca con PHP <php código PHP ?> para ello utilizamos las templates tags.
Como WP trabaja con PHP vimos cómo en el mismo archivo conviven perfectamente estos dos lenguajes HTML y PHP, de forma que aquello que queremos que sea dinámico lo cambiamos a PHP, por ejemplo para poner el título del sitio en vez de poner
<h1>El título de mi sitio</h1>
ponemos
<h1><?php blogingo(‘name’); ?></h1>
Son lo que llamamos las “template tags”. La sintaxis básica será:
Abrimos PHP
<?php
Nombre de la template tag + () + ; <- en algunas ocasiones dentro de los paréntesis indicaríamos uno o varios parámetros por ejemplo ‘name’
bloginfo(‘name’);
Cerramos PHP
?>
Ejemplos:
<?php blogingo('name'); ?> <- Imprime el Título del sitio indicado en Ajustes –> Generales
<?php get_header(); ?> <- Inserta el archivo del tema llamado header.php
Hay algunos template tags que no imprimen el resultado, normalmente se diferencian de otras porque empiezan por get, por ejemplo tenemos the_title() y get_the_title(), si queremos imprimirlo (que se muestre en el navegador) utilizaríamos “echo” pudiendo concatenar con puntos HTML y PHP
<?php echo '<h1>El título de esta entrada es '. get_the_title() . '</h1>'; ?>
Nota: Si queremos que el texto sea traducible utilizaremos la función _e() para imprimir las cadenas de texto.
_e( 'El título de esta entrada es', 'textdomain' );
Por ejemplo para referenciar la ruta a una imagen subida a tu tema a la carpeta img pondrías
Luego está la parte que carga dinámicamente el contenido (entradas, productos o ítems de portfolio), es lo que se conoce como el Loop, tiene esta sintaxis:
Es un condicional que accede a la BBDD para ver si hay contenido. Si hay contenido mostrará uno de los contenidos (máximo el número indicado en ajustes, por defecto 10) con la plantilla del acrhivo «content-home.php» que está en la carpeta «template-parts». En ese archivo tendrás que utilizar otras template tags como the_title, the_permalink (el enlace a ese contenido), the_excerpt (el extracto o resumen).
6. Resto de páginas (distintos Loops)
En las partes donde se muestran artículos (o productos si fuera una tienda) seguimos utilizando el Loop de WordPress, dependiendo de qué página sea visitada se mostrarán el loop devolverá de la BBDD algo distinto. Por ejemplo en la página de una categoría se muestran sólo los que pertenecen a esa categoría, en la de fecha sólo de esa fecha, etc. El loop de un artículo tiene la misma sintaxis que cualquier otro pero lo que muestre de la BBDD será distinto del que usarás en la home.
El loop siempre tiene la misma sintaxis:
<?php if (have_posts()) : ?>
<!—Se comprueba que existan entradas publicadas. -->
<?php while (have_posts()) : the_post(); ?>
<!—En el caso de que existan se crea un bucle por el número de publicaciones que hayamos definido en Ajustes – Lectura, por defecto son 10 entradas. -->
<!—Aquí se pone lo que queramos que se muestre de cada publicación, por ejemplo el título, la imagen destacada, el autor, la fecha, etc. En vez de ponerlo aquí podemos ponerlo en un archivo vinculado con get_template_part(). Por ejemplo get_template_part( 'template-parts/content', 'single' ); -->
<!—Cargamos el archivo content-none.php con lo que queramos que aparezca si no hay ninguna entrada publicada. -->
<?php endif; ?>
El proceso es el mismo, sólo tendrás que cambiar la ruta del archivo PHP en get_template_part() en single.php a por ejemplo a get_template_part( 'template-parts/content', 'single' );
En el archivo content-single.php en vez de mostrar el excerpt mostrarás todo el contenido de ese artículo con la template tag the_content().
Puedes ayudarte del plugin What The File para ver qué archivo de tu tema es el que se está cogiendo, para la portada te aconsejo que hagas un archivo front-page.php, si recuerdas la jerarquía de WP cuando no existe un archivo más específico se tira de index.php por eso hacemos uno específico para la portada si buscamos un diseño único.
7. Contenido dinámico
La home o página de inicio además de poder tener un diseño distinto, de mostrar las últimas entradas, testimonios, portafolio puede tener algún contenido (texto + multimedia) propio. Para que sea editable y dinámico creas una página en WP y esa página la pones en los Ajustes -> Lectura como página de portada.
Otra forma de añadir contenido dinámico es con los Custom Fields. Puedes crearlos para hacer editable los títulos y textos que ahora son Lorem puedes añadir a la página que pongas como inicio Custom Fields, puedes crearlos con este plugin y luego los llamas en front-page.php con
En próximos artículos publicaremos el caso práctico real donde convertiremos una plantilla HTML / CSS / JS a un tema de WordPress que pondré a vuestra disposición para que podáis ver el código y/o utilizarlo de forma gratuita en vuestro WordPress.
Los recursos de tu servidor son finitos, el espacio en disco que tienes contratado puede acabarse si no gestionas bien la librería multimedia de tu WordPress. Seguramente cuando haces copias de seguridad es cuando eres consciente del enorme tamaño de tu sitio.
Un altísimo porcentaje de ese tamaño es por la carpeta «uploads» donde se guardan por defecto las imágenes y los archivos que subes a tu WordPress.
Claro que esto es lógico si consideramos que el 53% del peso de una web tipo son imágenes. Aunque no tan lógico cuando descubramos que muchas de las imágenes que guarda nuestro WordPress no sirven para nada.
En este artículo vamos a tratar de reducir en lo posible el tamaño de nuestra carpeta «uploads». Como más que un artículo me ha salido un libro os dejo un pequeño índice y si tienes prisa ve directamente a las conclusiones:
El primer problema es que el tamaño de esas imágenes puede no ser el adecuado, debes optimizarlas, así que lo primero que debes hacer es tener optimizadas esas imágenes, previa subida o mediante plugins como EWWW Image Optimizer o con ShortPixel cuyos brutales resultados explico en Cómo optimizar las imágenes de tu WordPress
El segundo problema, que es el que vamos a tratar en este artículo, es que puedes tener muchas imágenes en tu servidor que nunca se utilizan en tu sitio web, así que veremos cómo identificarlas y cómo deshacerte de imágenes que no sirven para absolutamente nada y están ocupado un preciado espacio.
Lo primero que tenemos que hacer es una copia de seguridad, no sólo de la carpeta uploads sino también de la BBDD.
1. Cómo guarda WordPress la información de las imágenes en la BBDD
La tabla wp_posts además de guardar la info de entradas, páginas, revisiones y CPT guarda la info de cada imagen donde:
post_type será attachment,
post_parent será el ID de la publicación a la que se adjunta
guid se guarda la ruta absoluta al archivo.
Y en la tabla wp_postmeta es donde se almacenan otros metadatos:
_wp_attachment_image_alt guarda el contenido del atributo ALT
_wp_attached_file guarda la ruta relativa dentro de «uploads»
_wp_attachment_metadata guarda la información sobre distintos tamaños de imagen, algo de lo que hablaremos más adelante.
2. Identificar y eliminar las imágenes inútiles de nuestro WordPress
Depende del tipo y edad de tu proyecto:
este sitio, un simple blog de 11 años que tiene 8.649 elementos multimedia que ocupan 2,2 GB
mientras que elfinalde.com con sólo 2 años tiene ya 70.476 elementos que ocupan 26,5 GB
En este artículo veremos cómo reducir el tamaño de esa carpeta:
Identificar esas imágenes inútiles y
Cómo eliminarlas.
2. 1. Cómo identificar imágenes que no usamos
Hay dos tipos de imágenes que debemos identificar:
las imágenes que por algún motivo subimos a nuestro WordPress pero que no utilizamos, serían las imágenes sin adjuntar
una misma imagen suele tener distintas versiones, debemos identificar cuáles usamos y cuáles no
2.1.1.- Identificar elementos multimedia sin adjuntar
Imágenes, vídeos o audios o archivos PDF que subiste pero que no añadiste a ninguna publicación. Estos elementos puedes verlos desde Medios > Biblioteca y en el primer desplegable donde pone «Todos los medios» elegir «Sin adjuntar».
Debes revisarlo de vez en cuando, aquí quedan esas imágenes que subimos desde la biblioteca para un posible artículo pero que nunca llegamos a publicar o imágenes de publicaciones que han pasado a mejor vida porque aunque las hayas eliminado de la papelera los archivos adjuntos no se eliminan.
Pero mucho cuidado, que aunque aparezcan como medios «Sin adjuntar» no siempre significa que no lo utilices. Una imagen sólo se adjunta a una publicación (Entrada, página o Custom Post Type) Va a ser una imagen «Sin adjuntar» aunque útil cuando:
una imagen subida a la biblioteca la usas sólo como Imagen destacada
una imagen subida a la biblioteca la uses en algún widget
subas una imagen desde la edición un widget, aunque la uses en el mismo
Y por último también puede ocurrir que haya archivos adjuntos que no uses. Si escribiendo una entrada subes 10 imágenes pero luego no las insertas serán imágenes «adjuntas» pero inútiles.
Una solución parcial es instalar el plugin Find Posts Using Attachment que nos mostrará un listado de las publicaciones y la forma en que un medio está siendo usado (contenido o imagen destacada) o no usado. La info la tendremos en una nueva columna de la Biblioteca pero también en la página individual de cada imagen. Es una forma mucho más segura de saber si es una imagen útil que simplemente ver si está sin adjuntar aunque no detecta si la imagen se usa en un widget o shortcode.
Otro plugin interesante para la gestión de medios aunque todavía en beta es Media Usage. Este plugin nos muestra en una nueva columna las distintas versiones de una imagen, iconos con la inicial del ID del tamaño. Al hacer clic en ellos accedemos a las estadísticas de uso de esa imagen, por IP y desde qué página. Ojo, como te habrás imaginado una imagen sin visitas no tiene porqué ser inútil.
En cualquier caso antes de eliminar cualquier imagen y como medida extra de seguridad os aconsejo activar la papelera en la Biblioteca de Medios añadiendo esto a wp-config.php
2.1.2. Identificar los tamaños de imagen que me sobran
Todo WordPress crea por defecto distintas versiones de una misma imagen. El número de archivos y sus tamaños vienen definidos por:
Imagen original
La configuración de medios
Imágenes responsive añadidas por el propio Core
El tema que utilices
Algún plugin
2.1.2.1. Imagen original
El archivo original lógicamente ocupa se guarda y ocupa espacio, no deberíamos subir archivos mayores del tamaño máximo que vayamos a necesitar. Es decir, si el tamaño mayor de imagen que vamos a utilizar es de 1024px de ancho lo ideal es subir todas las imágenes a ese ancho, no más.
Debemos tener en cuenta que si subimos una imagen de menor resolución a otras versiones que necesitamos no se crearán dichas versiones, es decir, WordPress puede escalar una imagen reduciendo su tamaño pero nunca ampliando. Siguiendo el ejemplo anterior si subimos una imagen de 1023 píxeles de ancho la imagen de 1024px no se creará.
2.1.2.2. Imágenes creadas por los ajustes de WordPress
En Ajuste > Medios se especifican 3 tamaños: miniatura, medio y grande que luego puedes utilizar desde el editor, que se creen los 3 dependerá del tamaño del original como explicado en el apartado anterior.
Tendrás que pensar si utilizas estos 3 tamaños cuando:
publicas desde el editor
desde el tema (ver en 1.2.4 cómo averiguarlo)
2.1.2.3. Imágenes responsive añadidas por el propio Core
Desde la versión 4.4 WordPress añade a la etiqueta HTML <img> los atributos scrset y sizes sirviendo un tamaño acorde con la resolución del dispositivo de todos los tamaños disponibles de una imagen. Ahorramos ancho de banda y ganamos en velocidad.
Además se añadió una función para crear un tamaño extra, llamado medium_large para resoluciones de 768px de ancho.
2.1.2.4. Imágenes que crea el propio tema
El tema que utilices puede añadir nuevos tamaños a través de add_image_size haz una búsqueda de esta función en los archivos de tu tema para saber qué tamaños añade.
Por ejemplo el tema Twenty Seventeen añade dos nuevos tamaños en su archivo functions.php
Para saber dónde se utilizan estas imágenes podemos volver a hacer una búsqueda pero esta vez por el nombre del tamaño de imagen. Generalmente los distintos tamaños de imagen se pintan usando
the_post_thumbnail( 'nombre del tamaño de imagen: thumbnail | medium | medium-large | full | twentyseventeen-featured-image | ... ' );
Aunque también se pueden usar otras resoluciones no registradas:
Siguiendo con el tema Twenty Seventeen si buscamos «twentyseventeen-featured-image" lo encontramos en 8 archivos, en header.php, en los de front page y en todos los archivos de loop de single incluidos los formatos de entrada. En resumen, el tema utiliza este imagen de 2000×1200 como imagen de cabecera.
Ahora busquemos la otra imagen, la llamada twentyseventeen-thumbnail-avatar y ¡sorpresa! no hay ningún archivo que pinte esta imagen de 100×100, hemos encontrado una imagen completamente inútil.
2.1.2.5. Imágenes creadas por plugins
Los plugins también pueden utilizar add_image_size Por ejemplo:
el plugin Featured Image Admin Thumbañade una imagen de 60×60 desde add_image_size( $this->fiat_image_size, 60, 60, array( 'center', 'center' ) );
El plugin Jetpack añade una de 50×50 para el módulo de portafolios con add_image_size( 'jetpack-portfolio-admin-thumb', 50, 50, true );
El widget del plugin SiteOrigin Post Carousel añade uno de 272×182 con add_image_size('sow-carousel-default', 272, 182, true);
Puedes escanear tu carpeta de plugins en busca de «add_image_size» para ver qué plugins añaden versiones de imágenes. Ten en cuenta que si desactivas y borras el plugin las imágenes que haya creado no se eliminarán.
Nota: Las imágenes que crean los plugins puede que no se guarden con la misma estructura de año/mes y lo hagan en una carpeta independiente cuyo nombre probablemente haga alusión al del plugin.
Nota 2: El bloque de Imagen del proyecto Gutenberg (versión 1.9.1 del plugin) lista todos los tamaños de una imagen, no sólo el original y los 3 por defecto. Podemos elegir también cualquier otro tamaño que haya sido creado desde el tema o desde un plugin.
2.2. Cómo eliminar y dejar de crear las imágenes inútiles
Una vez que detectamos aquellas imágenes inútiles que no hacen más que consumir recursos debemos eliminar las que tengamos ya creadas y decirle a WordPress que deje de crearlas.
2.2.1. Eliminar imágenes inútiles
Si tu WP es nuevo puedes saltarte este paso pero si llevas un tiempo con él lo más probable es que tengas un montón de imágenes inútiles en tu servidor.
Veremos cómo deshacernos de todas esas imágenes que se han estado creando y que sólo sirven para ocupar espacio.
Digamos que has cambiado los ajustes de medios o has cambiado de tema. Surgirán dos problemas:
El nuevo tema utiliza tamaños de imagen nuevos, por ejemplo uno de 275×275
El tema viejo utilizaba tamaños de imagen que ya no necesitas, por ejemplo uno de 450×250
El plugin Regenerate Thumbnails Reminder te advertirá si surge algún problema del tipo 1, si detecta algún tamaño nuevo te recomendará que regeneres ese nuevo tamaño para las imágenes que ya tenías subidas. El plugin que ya hemos comentado Media Usage muestra con iconos las versiones de cada imagen de forma que puedes comprobar si hay variaciones entre los tamaños nuevos y los antiguos.
Vamos a ver cómo regenerar estos nuevos tamaños.
2.2.1.2 Cómo volver a crear los nuevos tamaños útiles en imágenes antiguas
Para que todas tus imágenes antiguas tengan las versiones nuevas de tamaño útiles, en nuestro caso el nuevo tamaño 275×275 tenemos muchos plugins, el más famoso y clásico ya Regenerate Thumbnails. Hace exactamente lo que pedimos regenerar en lote o individualmente los nuevos tamaños sin borrar ningún tamaño antiguo. Veamos otras opciones:
Plugins que regeneran y también eliminan imágenes inútiles
Image Regenerate & Select Crop: Divide la acción de regenerar por tamaño, tipo de publicación a la que se ha adjuntado, calidad para regenerarla, además si es un tamaño recortado puedes elegir el punto de anclaje. Puedes desactivar el tamaño que quieras y también eliminar todas las imágenes pertenecientes a ese tamaño para luego regenerarlas. Muy, muy completo.
reGenerate Thumbnails Advanced: elimina todos los tamaños que no estén activos además de regenerar los nuevos tamaños, puedes elegir el período de tiempo de las imágenes a regenerar. Tendremos información del proceso así como un log de errores, por ejemplo si hay algún medio que no es una imagen.
Force Regenerate Thumbnails: elimina todos los tamaños que no estén activos además de regenerar los nuevos tamaños, te muestra un resumen de esos tamaños eliminados y regenerados.
ONet Regenerate Thumbnails: Puedes regenerar las imágenes en lote como muchos otros pero además puedes elegir el ratio de compresión, añadir un botón al lado del uploader del editor de publicaciones y crear nuevos tamaños de imagen. No elimina ninguna imagen.
Simple Image Sizes: Este plugin mejora la página Ajustes > Medios mostrando todos los tamaños disponibles y pudiendo crear los nuestros. De cada tamaño puedes editar su tamaño, recorte e incluso dando la opción de que un tamaño añadido por un tema, un plugin o creado por nosotros esté disponible en el editor. Por último permite regenerar aquellos tamaños que seleccionemos. No elimina ningún archivo.
Thumbnails (Miniaturas): en vez de regenerar todas las imágenes, las crea y cachea cuando se necesitan evitando procesar una gran cantidad de imágenes. Además puede añadir la Imagen Destacada a entradas que no tengan ninguna asignada. Es muy útil cuando un tema o plugin crea un tamaño sin ID, por ejemplo los plugins de sliders suelen usar tamaños específicos.
2.2.2.2 Cómo eliminar los tamaños inútiles de imágenes antiguas
Otra opción es hacerlo de forma manual, aunque no es aconsejable puedes usar por ejemplo Filezilla. Haces una búsqueda recursiva (icono prismáticos) en la carpeta uploads de archivos que contengan «-300x» y te devolverá todos los archivos cuyo ancho es 300px. Ej: imagen-inutil-300x127.jpg
Si tienes acceso por SSH a tu servidor puedes hacer lo mismo yendo al directorio wp-content/uploads y luego ejecutando
find . -name "*-300x*" -type f -delete
Bonus: Actualizar el HTML después de regenerar y eliminar
Regenerar y eliminar las imágenes no modifica el contenido de tus publicaciones, si pusiste una imagen de tamaño grande en una página y luego cambiaste su tamaño esa página seguirá buscando la imagen antigua. Afortunadamente tenemos una solución:
Regenerate Thumbnails HTML: Muy útil sobre todo cuando los cambios son en los ajustes de Medios. Digamos que en mis entradas he añadido imágenes de tamaño medio durante meses cuyo tamaño máximo son 300px y ahora decido cambiarlo a 250px, si vamos a la pestaña HTML de una de esas entradas vemos que WP ha estado generando este código
Donde la ruta del archivo será aquella versión de ancho 300, lo sabemos por el sufijo del nombre del archivo «nombre-archivo-anchoxalto.jpg» y que el atributo width toma como valor también los 300px. WordPress no actualiza este HTML aunque hayamos cambiado el tamaño medio, sigue llamando a la imagen anterior incluso si la eliminamos lo que puede resultar en enlaces rotos.
Este plugin te permite hacer una búsqueda de etiquetas img según el atributo ancho y el ID del tamaño. Si da resultados puedes actualizar el HTML de tus publicaciones.
2.2.1.3. Eliminar imágenes sin adjuntar
Las podemos eliminar desde la misma Biblioteca de medios como hemos visto antes o pero mejor utilizando el plugin gratuito Media Cleaner, DNUI o incluso mejor el plugin Theia Upload Cleaner for WordPress que trae funciones extras. Estos plugins escanearán más a fondo la BBDD que un simple filtro de imágenes sin adjuntar que como vimos en el apartado sobre identificar imágenes sin adjuntar no siempre te asegura que sea inútil.
Entre las ventajas de estos plugins están:
que cuando eliminas las imágenes además de enviarla a la papelera las mueve a otro directorio (uploads/wpmc-trash en el caso de Media Cleaner) y Theia Upload Cleaner además te crea una copia de seguridad. Si envías una imagen a la papelera desde la Biblioteca de Medios los archivos se quedarán en el mismo sitio
también escaneará posibles imágenes utilizadas en widgets, galerías o shortcodes
detectará como inútil aquellas imágenes adjuntadas pero que realmente no se utilizan
Theia Upload Cleaner permite eliminar tamaños inútiles de imagen
Image Cleanup ofrece una interfaz más pobre que los otros, de hecho no tenemos una miniatura de la imagen aunque es muy potente indexando todas las imágenes posibles.
Como dijimos al principio del artículo recuerda que antes de eliminar cualquier imagen debemos hacer una copia de seguridad de la carpeta uploads y de la BBDD.
2.2.2. Dejar de crear tamaños de imagen inútiles
Añadiendo esta función evitarás que se creen tamaños de imagen especificados tanto en los ajustes, en el Core, en un plugin o en un tema.
function no_crear_useless_image_sizes ($sizes) {
unset( $sizes['medium']); /* tamaño por defecto (ver otro método 2.2.1) */
unset( $sizes['medium_large']); /* tamaño responsive (ver 2.2.2) */
unset( $sizes['jetpack-portfolio-admin-thumb']); /* tamaño del plugin Jetpack (ver 2.2.3) */
unset( $sizes['twentyseventeen-thumbnail-avatar']); /* tamaño del tema Twenty Seventeen (ver 2.2.3) */
return $sizes;
}
La función se la pasamos al hook intermediate_image_sizes_advanced que filtra todos los tamaños que genera WP automáticamente cada vez que subamos una imagen.
En principio puedes añadirlo a tu archivo functions.php o mejor al functions.php de un tema hijo o como plugin.
Si no quieres meterte en código puedes utilizar el plugin que hemos comentado antes Image Regenerate & Select Crop para desactivar tamaños de imagen.
Otra opción es usar el plugin gratuito Optimize Images Resizing lo que hace es generar los tamaños sólo cuando se necesitan, no cuando se sube una imagen, es decir, este plugin evitaría que se generara el tamaño twentyseventeen-thumbnail-avatar del tema Twenty Seventeen porque jamás se va a necesitar. También puedes eliminar con él las imágenes inútiles antiguas.
Me parece muy interesante para algunos tipos de proyectos que por ejemplo utilicen muchos tamaños y tengan una enorme librería de medios. Para un sitio al uso es un poco arriesgado dejar que WP genere el tamaño X cuando un usuario visite tu esa página.
2.2.2.1. Dejar de crear tamaños por defecto
Para que WordPress no genere alguna o todas las versiones que por defecto crea (thumbnail, medium y large) de cada imagen podemos ir a Ajustes > Medios y definir en cero los anchos y altos de las imágenes que nos sobren.
Con esta configuración no se crearían imágenes de tamaño medio (‘medium’)
2.2.2.2. Dejar de crear el tamaño responsive medium-large
Igual quieres que WP no cree una versión de 768px de ancho de todas tus imágenes, quizás no porque no te preocupa esto de las imágenes responsive sino porque tu tema ya crea una imagen de este tamaño o casi y ves absurdo tener dos.
2.2.2.3. Dejar de crear tamaños de plugins y temas
Podemos evitar que se creen imágenes inútiles desde plugins o temas, simplemente conociendo el nombre de esa imagen. Si la función que hemos visto antes la añades al archivo functions.php debe estar después de que se haya definido el tamaño con add_image_size de ahí que os recomiendo hacerlo mejor desde un tema hijo.
3. Conclusiones
Tener optimizado tu WordPress es un trabajo de detalles, hay muchos factores en los que pensar, uno de ellos son los archivos. Como empezamos el artículo, tu servidor tiene un espacio finito.
Resumen de pasos facilito y con plugins:
Hagas una copia de seguridad
Instales Image Regenerate & Select Crop y veas todos los tamaños que se están generando por cada imagen ¿De verdad los necesitas todos? Imagino que si estás leyendo esto es porque piensas que no
Elimina las imágenes de los tamaños que no necesitas
Desactiva los tamaños que no necesites para que no se vuelvan a crear
Opcional: Si ves que alguno de los tamaños al margen de Miniatura, Medio y Grande te pueden ser útiles para incluirlos en alguna publicación en vez de tener que recortar o escalar la imagen instala el plugin Simple Image Sizes para añadirlo a los tamaños de inserción de imágenes del editor.
Además si has cambiado de tema o los ajustes de medios
Regenera los tamaños que han sido afectados
Instala el plugin Regenerate Thumbnails HTML para actualizar los cambios en el HTML de inserciones de imágenes de tamaños que han cambiado.
5 plugins más para aumentar tu productividad con variables, renombrar capas masivamente, escalar archivos y para trabajar con código HTML y CSS dentro de Photoshop.
Con este plugin puedes meter código HTML y CSS dentro de tu PSD, lo representa con el motor WebKit de forma que puedes ver por ejemplo cualquier recurso externo: fuentes web, imágenes externas, css externo como por ejemplo Bootstrap, etc.
Podrás cambiar el tamaño de los elementos sin problemas. Una de las grandes ventajas es por ejemplo cuando diseñamos un formulario, en vez de crear los elementos simplemente añade el HTML.
Photoshop CC 2015, de momento sólo disponible para Mac OS
Crea y usas variables en Photoshop y úsalas poniendo #nombrevariable como nombre de la capa. Por ejemplo para colores con el valor hexadecimal, tamaño de la fuente, visibilidad, etc.
En este artículo vamos a ver cómo personalizar el color de la barra de direcciones en dispositivos móviles y la barra de desplazamiento o scroll con CSS.
Cómo cambiar el color de la barra de direcciones en móviles
Si estás leyendo esto desde tu móvil verás que la barra de direcciones y la barra de estado tienen un aspecto y color distintos al habitual. Si no estás en un móvil fíjate en la parte superior de esta captura móvil de elFinalde.com
Para hacer que cuando alguien visite tu web desde su móvil (con alguno de estos navegadores: Chrome, Firefox OS, Safari, Internet Explorer y Opera Coast) vea la barra de direcciones de otro color sólo tienes que añadir esta etiqueta <meta> en el <head> de tu web.
<!-- Chrome, Firefox OS y Opera -->
<meta name="theme-color" content="#4285f4"/>
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4"/>
Estas dos etiquetas cambiarán el fondo de la barra de estado en iOS Safari
La primera es necesaria para que la segunda tenga efecto, acepta estos valores:
black: fondo negro
black-translucent: fondo negro y traslúcido y el contenido se muestra a toda pantalla dejando la barra de estado parcialmente oscura.
Cambiar la barra de direcciones en móviles en WordPress
Si usas WordPress puedes editar el archivo header.php aunque si el tema no es tuyo y no quieres repetir el proceso cuando lo actualices será mejor que le crees un tema hijo y en él un archivo functions.php con este código.
add_action('wp_head','cambiar_color_barra_direcciones');
function cambiar_color_barra_direcciones() {
$output = '<!-- Chrome, Firefox OS y Opera --> <meta name="theme-color" content="#4285f4"/> <!-- Windows Phone --> <meta name="msapplication-navbutton-color" content="#4285f4"/>';
echo $output; }
Cómo cambiar el aspecto de la barra de scroll con CSS
En Webkit
Ya puestos puedes también cambiar el aspecto de la barra de desplazamiento, de la barra de scroll de tu sitio o de algún contenedor. Puedes usar Javascript, algún plugin de jQuery o estos pseudo elementos CSS creados en 2009 para navegadores basados en WebKit.
Para explorar todas las opciones visita este generador. Aquí tienes una demo de CodePen y de paso un mixin para SASS, por cierto si te fijas en las barras de scroll de CodePen verás que están personalizadas.
Y puedes concretar más con las pseudo clases :enabled, :disabled, :hover y :active además de estas específicas de scroll:
Os recuerdo que la propiedad overflow-x con valor hidden ocultará la barra de scroll horizontal aunque estoy seguro que no la usas porque tu sitio es 100% responsive ;)
Opinión personal
Personalmente me ha costado cambiar el color de la barra de direcciones, creo que sirve para identificar mejor tu sitio. Me ha costado porque cambiar elementos del interfaz del navegador nunca me gustó, me trae recuerdos de IE 5.5 :O.
Otro inconveniente es la compatibilidad y la consistencia en distintas plataformas, usar vendor prefixes nunca debe ser una recomendación.
Sobre la barra de desplazamiento pasa lo mismo, quizás le veo sentido en contenedores que no sean el html.
¿Qué opinas tú de estas opciones? ¿Las tienes o las vas a implementar en tus sitios?
Cuando vas a iniciar tu proyecto web probablemente te decantes por utilizar el CMS más popular: WordPress.
Esta decisión que toman 1 de cada 4 proyectos web ya de por sí va a implicar ciertas limitaciones aunque no seré yo quien diga que con WordPress no puedes construir cualquier web. Las limitaciones impuestas por la tecnología pueden casi siempre ser salvadas por los conocimientos y profesionalidad del que la usa. Puedes hacer grandes fotografías con tu móvil, trabajar con ratón o con tableta gráfica, con Mac, Linux o Windows, etc.
WordPress es en sí un framework
Elegir WordPress frente a programación ad hoc u otro CMS es una elección que dependiendo de tus conocimientos limitará tu web. WordPress es en sí un framework, una colección de código que te facilita el desarrollo, gestión y administración de un sitio web. Está basado en PHP, MySQL y cada vez más JavaScript, conocer a fondo estos lenguajes te permitirán ampliar este framework, igual que conocer CSS a fondo te permite usar sin limitaciones Bootstrap.
Si por ejemplo necesitas una funcionalidad que no encuentras en ningún plugin de WordPress, aunque difícil es posible, y no sabes crearlo tú mismo pensarás que WordPress no es tu solución.
Con el diseño ocurre lo mismo, si no tienes conocimientos de diseño de temas para WordPress, PHP, CSS, HTML, JavaScript y puedes crear uno tú mismo tendrás que elegir uno de los miles que existen. Puedes optar por un tema gratuito o uno de pago y esa elección será de nuevo una limitación. Si eres capaz de crear un tema hijo (lo explico al final del artículo) y hacer las modificaciones que necesitas genial, si no estarás limitado a las posibilidades de personalización que ofrezca.
Para diseñar y personalizar un tema de WordPress tienes varias opciones, el enfoque también puede variar según sea un tema para tu proyecto, para un cliente o para compartirlo o comercializarlo:
Elegir uno gratuito o premium
Elegir un framework como base de tu tema
Empezar a desarrollar un tema desde cero con un starter theme
Empezar a desarrollar un tema desde cero picando código
Una vez que has tomado esta decisión y tienes el tema puedes seguir personalizando su diseño de tres formas:
crearle un tema hijo para personalizar algún aspecto y no perder las posibles actualizaciones del tema que has elegido,
desde la versión 3.4 puedes configurar las opciones de personalización que ofrezca el tema en el panel de administración de WP desde el customizer, si has decidido crearlo no creo que emplees tiempo en añadir opciones al customizer a no ser que pretendas compartirlo,
instalar plugins como los Page Builders u otros plugins que añadan capas de diseño.
En este artículo vamos a centrarnos en dos aspectos, los frameworks y los Page Builders.
Diferencias entre Frameworks y Page Builders para WordPress
Crear un tema para WordPress con multitud de opciones de personalización, con multitud de módulos, con un sistema WYSIWYG, de soltar y arrastrar, con buena documentación y soporte hará que sea utilizado por multitud de usuarios de WordPress. Incluso profesionales del diseño web y de WordPress utilizarán estos temas como base para crear los proyectos de sus clientes.
Es lo que conoce como framework, un esqueleto, un armazón que tiene funciones ya definidas para ahorrarte un trabajo de programación. Elegir un framework nos va a facilitar el uso y el mantenimiento de una tecnología pero también puede limitarla (de nuevo) Si pensamos en CSS por ejemplo podríamos usar Bootstrap, tenemos ya un diseño base de botones, tipografía, grid, etc. Dependerá de nuestros conocimientos de CSS para personalizar o añadir lo que nos falte.
La primera limitación de un framework es que debemos aprender a utilizarlo, la curva de aprendizaje puede ser mayor o menor, ayudará que exista buena documentación. Cuando se utilizan frameworks por usuarios no avanzados el resultado puede ser óptimo pero limitado a lo que ofrece. Su uso implicará una dependencia más, confiamos en que el desarrollo de WordPress continúe por mucho tiempo pero cómo asegurarnos que ocurrirá lo mismo con el framework que hemos elegido.
Mi consejo es que te documentes antes de decantarte por uno u otro framework:
quién lo desarrolla,
el tamaño de su comunidad,
la documentación que existe,
su flexibilidad,
su rendimiento,
el impacto en WPO, etc.
Podemos hacer dos grupos de herramientas que nos sirven para diseñar un tema de WordPress, los que integras o vienen ya integrado en un tema, los frameworks, y los que funcionan como plugins, los llamados Page Builders que permiten diseñar páginas y posts. Sus principales diferencias son:
Normalmente los frameworks se utilizan para desarrollar un nuevo tema, normalmente como tema hijo del tema framework mientras que los Page Builders son plugins que puedes utilizar en un proyecto en marcha en el tema que ya tengas activo para por ejemplo diseñar una página nueva o añadir contenido a algún post.
Otra diferencia es el usuario final, normalmente los plugins son utilizados por usuarios sin conocimientos avanzados de programación mientras que los frameworks son utilizados por diseñadores y desarrolladores web, profesionales y estudios de diseño para mejorar la productividad de sus encargos.
Muchos Page Builders son compatibles con frameworks e incluso puedes utilizar más de un Page Builder, consulta la documentación y asegúrate de que no hay conflicto.
19 Frameworks para WordPress
Hacemos una relación de los frameworks más populares, los que tienen multitud de opciones de configuración. En 2009 publiqué un listado que actualizaré en breve de otro tipo de frameworks, sin apenas opciones de configuración, desnudos de estilos, son conocidos como starter themes.
Los starter themes como Undesrcore, a diferencia de los frameworks que listamos aquí no tienen opciones de configuración simplemente incluyen los archivos y estilos más básicos para empezar a desarrollar tu tema desde cero.
Características comunes a los frameworks de WordPress:
los temas framework se instalan como cualquier tema, funcionan como temas padre.
Muchas veces se descargan ya con un tema hijo y si no lo creas tú.
Requieren conocimientos de programación y una curva de aprendizaje mucho mayor que los Page Builders,
Suelen utilizarlos por diseñadores y desarrolladores web que quieren mejorar la productividad.
El tema de WordPress más vendido en la popular tienda Themeforest, creado por ThemeFusion, lo han comprado más de 182,896 veces, unos beneficios de más de 8 millones de dólares con un solo tema. Su éxito es que lleva incluido Fusion Builder
Es parte de una suscripción a Elegant Themes (desde 69$), con dicha suscripción puedes descargar todos sus temas. Este y otros temas de Elegant Themes vienen con el plugin Divi Page Builder para WordPress. Es el tercer tema más popular entre los usuarios de WordPress.
TemplateMonster es un software de escritorio con el que generas plantillas para WordPress, Joomla, Magento, Drupal, HTML Website, PrestaShop, VirtueMart y WooCommerce.
Puedes empezar de cero o descargar algún tema, hacer las modificaciones, exportar el tema e instalarlo en tu WordPress, el tema incluirá el framework de TemplateToaster
Este framework es de los más veteranos, desde 2009, entre las opciones está la de guardar un historial, una captura (snapshot) con el que poder volver a un estado anterior de tu diseño.
Quizás de las opciones gratuitas y de código abierto la más completa, actualizado recientemente en su versión 5.2.7. Detrás del proyecto está la tienda Rockettheme que lo liberó creando una gran comunidad con mucha documentación. Basado en Bootstrap es un framework tanto para WordPress como para Joomla!
Otro framework, utilizado también como plugin, liberado por una tienda, en este caso ThemeFuse. En la web oficial puedes descargar un starter theme para este framework.
Un reciente framework que está compuesto de dos partes Awesome Dev Platform y Awesome Studio. Basado en shortcodes. Ahora mismo en beta privada aunque han subido un plugin para descargarte los módulos mediante shortcodes y utilizarlo como builder.
Este framework añadía un panel de opciones pero lo han integrado en el customizer. WordPress.org no permite en su repositorio oficial de temas ningún tema con panel de personalización propio.
Un panel del opciones que funciona con el customizer, gratuito y de código abierto aunque parece que no se actualiza desde hace un tiempo.
16 Plugins Page Builders Drag & Drop
Las características más comunes de los Page Builders son:
Generalmente son independientes del tema que utilices,
no necesitan de conocimientos de programación,
funcionan con módulos que se arrastran y sueltan (drag & drop) en el editor de páginas o posts,
pueden ser compatibles con algún framework de los anteriormente vistos,
aunque no es lo habitual es posible que puedas utilizar o necesitar más de 1 plugin Page Builder y no tengas problemas de conflicto,
los módulos o elementos de contenido suelen ser widgets, sliders, carrousel, testimonios, mapas, vídeos, imágenes, HTML personalizado, efecto parallax, etc.
la mayoría ofrece opciones de configuración de dichos módulos,
muchos permiten organizar los módulos en un nuevo layout en columnas responsive.
muchos tienen la posibilidad de hacer esta edición en vivo en el front-end
algunos permiten guardar plantillas para reutilizarlas,
el resultado en código al utilizar un Page Builder puede ser mediante shortcodes o código, en cualquier caso si desinstalas el plugin no te va a funcionar pero si cambias de tema se mantendrá el trabajo que hayas hecho.
Más de 100.000 ventas en CodeCanyon hacen de este Builder el más popular. El sexto plugin más utilizado en sitios creados con WordPress según el servicio wpsniffer. Permite la edición desde el front-end y desde el backend. Puedes ampliar sus más de 45 módulos con más de 150 extensiones creados por su comunidad.
Gratuito y con más de 700.000 descargas, puedes añadir cualquier widget en post o páginas y decidir su layout por columnas arrastrando y soltando. Viene con algunos widgets propios aunque puedes añadir los que quieras.
El plugin de Themify viene incluido en los temas de la tienda pero también lo venden por separado para utilizarlo en cualquier tema.
Edición en el backend y front-end, módulos, arrastrar y soltar y algo que se agradece, puedes importar y exportar el diseño y configuración de la página que hayas creado.
Versión gratuita y de pago. Edición desde el Front-end y backend. Puedes ampliarlo con tus propios shortocodes y es compatible con custom post types, WPML y frameworks y temas de Studiopress, PageLines, Headway Themes, WooThemes, Template Monster, Theme Hybrid, etc.
Este reciente plugin del conocido Manuel Vicedo, creador de la tienda CPOThemes. El plugin tiene versión gratuita y una PRO. Más de 40 módulos diseñados con muy buen gusto que puedes añadir desde el mismo front-end.
Funciona con cualquier tema, tanto en páginas como en posts. Más de 50 elementos, antes a la venta en Codecanyon y ahora sólo en su web donde puedes probarlo antes de comprarlo.
Puedes añadir sus más de 30 módulos desde el fornt-end. Interesante que además de poder editar el contenido de posts y páginas puedes editar el header y el footer, es decir, con este builder y un tema en blanco puedes crear todo el sitio.
Aunque es gratuito dispone de addons, algunos gratuitos y otros de pago. Puedes ver cómo funciona en esta demo.
Permite generar shortcodes, integrar módulos desarrollados en Bootstrap y también cualquier widget. Interesante la posibilidad de configurar animaciones para los widgets.
Plugin gratuito y de código abierto. Según me cuenta Ben Pines, su CMO, les ha llevado más de un año desarrollarlo. Como verás en las capturas y en el vídeo su uso es muy sencillo. Tienes un panel a la izquierda con los elementos que quieras añadir, sólo tienes que arrastrar y soltar para editar en vivo.
Otras opciones
Hay muchas más opciones:
plugins de shortcodes, una opción simple para añadir multitud de cosas a tus posts o páginas aunque puede ser un quebradero de cabeza si algún día decides dejar de utilizarlo y tienes que eliminar todos los shortcodes de tu WP,
el megaplugin Jetpack, uno de sus módulos te permite añadir otro CSS
y cualquier plugin para funciones concretas como sliders, caja de autor, redes sociales, widgets, etc.
Una opción curiosa y distinta que nació en 2013 sin demasiado éxito. No es realmente un Builder, es un sistema de máscaras, de skins, para temas específicos de ElegantThemes, StudioPress, WPZOOM y WooThemes, busca si tu tema es compatible y descarga la máscara que añadirá una capa que cambiará el aspecto de tu tema mediante CSS y jQuery.
La gran ventaja es que tu tema queda intacto y su instalación y desinstalación es cuestión de segundos. Sólo necesitas un plugin y descargar tu máscara. Algo parecido a las Skins de DIYthemes.
Está a punto de lanzarse este builder construido enteramente en Javascript. Actualizaremos el post cuando eso ocurra, mientras puedes leer este artículo: The Benefits of Going 100% Javascript – PageLines
Extensión para crear temas de WordPress directamente desde Dreamweaver, más de 140 módulos a incluir fácilmente pinchando y arrastrando en la vista Diseño. Puedes empezar con uno de los 13 temas que incluye. Crea secciones de autor, portafolios, testimonios, etc. Compatible con CS4 hasta CC 2015.
Bonus: Cómo crear un tema hijo
Ya sea porque te has decidido por un tema framework o porque necesitas hacer algún cambio a tu tema y no quieres perder sus posibles actualizaciones te dejo una breve guía de cómo crear un tema hijo o child theme de tu tema framework o tema padre:
Instala el tema framework o padre como cualquier tema
Crea una carpeta en wp-content/themes, por ejemplo: mitemaframework-hijo
En esa carpeta crea el archivo style.css añade los metadatos de tu tema al inicio del archivo en los comentarios y muy importante añade la etiqueta Template con el nombre de la carpeta de tu tema padre:
/*
Theme Name: Mi temapadre hijo
Theme URI: http://miweb.com/mitemapadre-hijo/
Description: Mi temapadre Child Theme
Author: Tu nombre
Author URI: http://miweb.com
Template: mitemapadre
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mitemapadre-child
*/
Una vez hecho esto activa tu tema hijo en Apariencia -> Temas.
De esta forma ya tienes un tema hijo con todo lo del tema padre pero sin los estilos CSS. Si quieres mantener los estilos del tema padre crea un archivo functions.php y añade este código
En este mismo archivo, el archivo functions.php es donde tendrás muchas veces que incluir una función que hará la llamada al framework.
Conclusiones
La pretensión de este artículo no es la de recomendar uno u otro framework o Page Builder, ni siquiera su uso. He intentado recoger todas, o casi todas, las opciones, de pago y gratuitas. Seguro que hay algún framework o Page Builder que se me ha pasado, es cuestión de acceder a los enlaces, a las demos, probar en una instalación local y decidir cuál es el quieres usar.
Recuerda que al igual que sistemas como Wix te facilitará el trabajo intenta no depender demasiado de trabajos de terceros y aprende cómo diseñar y crear tú mismo el tema y funciones que necesita tu WordPress.
¿Recuerdas cómo eran las páginas web en los albores de Internet hace más de 20 años? Antes de que el término responsive existiera, webs inundadas de marquees, marcos, Flash, Comic Sans, colores chillones, diseño en tablas, nada de espacio en blanco, etc.
A pesar de que el diseño web ha evolucionado muchísimo muchas de esas aún están online con el mismo retro-cutre diseño de entonces.
Hay 3 sitios web que nos permiten viajar al pasado del diseño web:
RetroSite.ninja Oldweb.today
Internet Archive: Wayback Machine y
Geocities-izer.
Si quieres viajar en el tiempo y hacer daño a tus ojos sigue leyendo ;)
1. RetroSite.ninja Oldweb.today
RetroSite.ninja es una especie de StumbleUpon para saltar aleatoriamente entre sitios webs que fueron creados en los 90 y que aún están online. (Actualización 10/11/17: El dominio es ahora comercial.)
Así que la hemos reemplazado por oldweb.today que además de permitir navegación aleatoria nos ofrece el sitio retro en la ventana de navegadores que extrañamos tan profundamente como Internet Explorer.
Seguramente ya conozcas este brutal archivo histórico de Internet. Introduces la URL y navegas por las versiones que ha tenido esa web a lo largo del tiempo. Esta es la captura del sitio de Adobe en 1996
Si tu nivel de masoquismo te lo pide puedes convertir a ese estilo chirrioso cualquier web con Geocities-izer de Mike Lacher. Pones la URL y su diseño parecerá hecho por un chaval de 13 años en 1996.
En el blog de Daniel Nabil y en el de colorate publicaron estas 2 infografías de KISSmetrics y Clixlogix con un timeline de la evolución del diseño web desde 1990
Cuando envías un email no sabes si al destinatario le va a llegar a su bandeja de SPAM o no. Además de pasarle desapercibido tu mensaje esto repercute en tu imagen de marca.
El hecho de utilizar un proveedor como Mailchimp para enviar tu newsletter, una de las bases del marketing online, no asegura que tus emails se sirvan correctamente. La reputación de tu cuenta de correo y también el contenido de tu email son factores claves que debes comprobar y monitorizar para asegurarte que no llegan a SPAM.
Cómo saber si tus emails no llegan a SPAM
Una forma de averiguarlo es con Inboxtrail, te registras gratis y creas hasta 3 tests de envío. Cada test tienes un ID que puedes copiar y pegar en el correo que vas enviar de 4 formas.
Y el meollo de la cuestión son las llamadas seed lists, una relación de destinatarios de correos que van a testear tu correo.
Envías un correo con el ID a esa lista de correo, puedes hacerlo con tu gestor de correo o también añadiendo esa lista a por ejemplo Mailchimp.
En el panel de control de Inboxtrail verás un análisis en tiempo real.
Mira cómo tus clientes visualizan tus emails
Otra función interesante de Inboxtrail además de asegurarte que tus emails no llegan a SPAM es que puedes visualizar cómo se ven tus emails en los principales proveedores de correo y navegadores.
El sistema es muy parecido, en vez de create new test, pinchas en create new preview y envías un email a la dirección que te proporcionan.
Ayer 15 de junio se lanzó Adobe CC 2015, una importante actualización con numerosas novedades que ya nos desveló en primicia el gran Antonio Lirio hace una semana. Ahora que es oficial ya podemos compartirlas.
Novedades destacadas de Adobe CC 2015
La que creo que es más importante es Adobe Stock Photos, un nuevo servicio gracias a la adquisición de Fotolia por parte de Adobe. Ahora podrás acceder a ese inmenso banco de imágenes de 40 millones de fotografías e imágenes vectoriales seleccionadas a conciencia para que trabajes con ellas sin salir de tus aplicaciones, editarlas y si lo decides comprarla desde la misma aplicación.
Una vez licenciada se mantendrán todos los cambios que hayas efectuado, se descargará la versión en alta y sin la marca de agua.
Otra novedad importante en Photoshop son las mesas de trabajo, algo que encuentro particularmente muy útil sobre todo para diseño web.
Mejoras en el editor de código, diseño y previsualización de diseños responsive en Dreamweaver
En InDesign tenemos la publicación en línea de nuestros documentos, mejoras en el diseño de tablas.
Novedades de cada aplicación de escritorio
Resumen
Photoshop
After Effects
Dreamweaver
Illustrator
InDesign
Premiere
Muse CC 2015
Flash Pro CC 2015
4 nuevas apps gratuitas, ahora para Android
Hace unos días tuve la oportunidad de probar las betas de estas apps en Android, desde el 14 de junio están disponibles en la Play Store para todos. Los enlaces son para Android, para iOS puedes buscarlos en el catálogo de aplicaciones móviles de Adobe
Photoshop Mix: recortar imágenes, aplicar apariencias, fusionar imágenes y realizar ediciones no destructivas en tu Android, iPad y iPhone. Además, es totalmente compatible con Photoshop CC.
Adobe Color CC: Captura los colores que te rodean, haz una foto o escoge alguna de tu librería y crea temas de color para usarlos en Illustrator, InDesign y Photoshop
Adobe Brush CC: Convierte fotos o gráficos en pinceles de alta calidad que podrá usar en Adobe Photoshop CC o Illustrator CC.
Adobe Shape CC: Para vectorizar fotografías y usarlos en Adobe Illustrator CC o Adobe Photoshop CC.
Todo sincronizado, trabajes donde trabajes
Y cómo no todo lo que hagas podrás sincronizarlo en la nube con Adobe CreativeSync, hoy por la mañana trabajas en tu tablet, por la tarde en tu estudio y por la noche en el equipo de tu casa.
Estas son sólo algunas de las novedades, las que encuentro más destacadas pero hay muchas más, específicas de cada aplicación. En video2brain ya hay 3 cursos con varias horas de vídeotutoriales que hablan en detalles de cada una de estas novedades. Recuerda que puedes acceder gratis a todos los cursos de video2brain durante 7 días con solo registrarte.
