Categoría: CMS

Soluciones a dos problemas de Scout al trabajar con Sass
Scout es una gran aplicación gratuita y multiplataforma para trabajar con Sass y Compass sin necesidad de tocar la línea de comandos. Un entorno muy sencillo de configurar para que sólo te centres en diseñar con Sass.
Junto con Brackets es el entorno que recomiendo a mis alumnos, un entorno sencillo y gratuito para aprender y trabajar con el preprocesador Sass.
En video2brain tenemos un par de cursos muy completos a los que puedes acceder gratis durante 7 días.
1. Desarrollo web con Sass, CoffeeScript y Emmet. Aprende a desarrollar sitios web con herramientas rápidas y productivas
2. CSS con LESS y Sass. Maquetación CSS profesional con preprocesadores
Soluciones a dos problemas de Scout
Desgraciadamente la última versión de Scout, la 0.71, tiene 3 años y hay un par de problemas que no han sido resueltos y que puedes encontrarte al utilizar Scout.
1. Error en Adobe Air
Cuando al iniciar un proyecto Adobe Air te devuelve el error:
ArgumentError: Error #3214
Esto es debido a que Scout no encuentra la ruta de la versión de Java que tienes instalada, tienes que editar el archivo process_interaction.js en la carpeta app de tu instalación de Scout:
```
C:\Program Files (x86)\Scout\javascripts\app
```
En el final del archivo process_interaction.js deberás poner la ruta de tu instalación de Java en tu equipo:
```
function javaDir() {
 if(air.Capabilities.os.match(/Windows/)) {
 path = air.File.applicationDirectory.resolvePath("C:\\Program Files\\Java\\jre1.8.0_45\\bin\\java.exe");
 if(!path.exists){
 path = air.File.applicationDirectory.resolvePath("C:\\Program Files (x86)\\Java\\jre1.8.0_45\\bin\\java.exe");
 if(!path.exists){
 path = air.File.applicationDirectory.resolvePath("C:\\Program Files\\Java\\jre1.8.0_45\\bin\\java.exe");
 }
 }
```
2. Los puntos decimales
Scout tiene un problema al renderizar los CSS que contienen decimales por ejemplo cuando asignamos una opacidad:
background-color: rgba(0,0,0, .5);
No siempre falla, si sólo tienes un estilo con opacidad y el último archivo scss que guardas es ese puede que el CSS lo haga bien Scout. Para curarte en salud hay una solución sencilla, poner los decimales fraccionados, de forma que en vez de poner 0.5 pones 5/10.
26 de mayo de 2015
Cómo recortar manualmente la imagen destacada de tu WordPress
Hace unos meses publiqué Características, plugins y snippets para la gestión de la Imagen Destacada en WordPress pero le faltaba incluir la forma de personalizar en que WordPress recorta esas imágenes destacadas. No todos los temas van a recortar la foto, como vimos en el artículo puedes hacer que no se recorten y que mantenga la proporción.
Pero si tu tema SÍ recorta la imagen original lo hará siempre por el medio, ahora imagina que lo importante de tu imagen, tu fotografía está en una esquina, la imagen destacada no te servirá (Before). El encuadre de la nueva imagen dará al traste con la intención original. Necesitamos un recorte personalizado (After)
Para solucionarlo y conseguir el After de la imagen anterior podemos utilizar el plugin gratuito para WordPress: Post Thumbnail Editor. Incluye un editor con el que puedes editar manualmente la imagen destacada.
8 de mayo de 2015
El navegador del que nadie habla, el de la app de Facebook
Los diseñadores web debemos conocer los distintos navegadores y testar nuestros trabajos en ellos. Tiempo ha y tras mucho esfuerzo nos deshicimos de las obsoletas versiones de IE. Luego vino todo lo responsive pero de nada sirve cambiar la resolución de tu monitor si no compruebas también que esos navegadores en móviles son compatibles con tu web.
Ventajas y desventajas del navegador de Facebook
Están los navegadores por defecto, los que traen los móviles, de iOS y Android pero desde hace unos meses muchos usuarios pueden estar viendo tu web desde el navegador de Facebook. Entre sus ventajas está la rapidez con la que se abren los enlaces y la información sobre el nº de veces que se ha compartido.
Claro que podemos desactivar este navegador, o más bien activar el navegador externo, desde las opciones de configuración de la app de Facebook.
Pero estoy convencido de que la gran mayoría no va a hacerlo, va a ver tu web desde este navegador que dista mucho de ser un navegador moderno.
Veamos un ejemplo, queremos ver si podemos usar Flex y comprobamos en el grandísimo recurso Can I Use que esa información no la tenemos.
Este navegador no está incluido, al igual que otros, se supone que sólo están los más usados pero sé que Flex no es compatible con el navegador de Facebook. Además aunque fuera (que lo es) muy usado no va a aparecer porque no es en sí un navegador, lo explico después.
¿Cuánta gente utiliza el navegador de la app de Facebook?
He intentado averiguar el nº de usuarios que podrían usarlo ya que como sabéis y por primera vez ya se conectan a Internet más usuarios por sus dispositivos móviles que por su portátil u ordenador de sobremesa.
Estas son las cifras globales de los principales navegadores en Marzo de 2015 (Fuente: Browser Information)
1. Chrome: 63.7 %
2. Firefox: 22.1 %
3. IE: 7.7 %
4. Safari: 3.9 %
5. Opera: 1.5 %
En cuanto a los navegadores móviles estas son las estadísticas de Marzo.
Conclusión
El navegador interno de Facebook no aparece por ningún lado porque no es un navegador en sí, forma parte de otro tipo de app.
Aunque no hace falta el dato sabemos que Facebook es la red social con mayor nº de usuarios: 1.28 billones en 2014. Es lógico que sea una de esas Top app instaladas en millones de dispositivos, sólo en Google Play aparece como descargada entre 1.000.000.000 – 5.000.000.000. Haced cuentas y pensad si es importante o no tener este navegador interno en la lista de tareas cuando lleguéis al testeo de vuestra web.
14 de abril de 2015
¿Es posible conseguir un 100/100 en Google Pagespeed?
Respuesta corta sí, respuesta larga: Para que tu sitio web consiga un 100 en Google Pagespeed además de tener un buen hosting, optimizar CSS y JS, optimizar imágenes, tener una web responsive, etc. no puedes utilizar servicios del mismo Google como:
- Google Adsense
- Google Analytics
- YouTube
Entonces ¿Por qué Google penaliza el uso de sus propios servicios? Realmente Pagespeed no penaliza sino que te sugiere formas de optimizar el rendimiento y velocidad de tu sitio. De hecho si analizas google.com verás la baja puntuación que obtiene.
Google Pagespeed Es una herramienta potente para detectar, analizar y solucionar aspectos que afectan a la velocidad y rendimiento de tu sitio.
Cómo utilizar Google Pagespeed
El análisis de tu sitio puedes hacerlo con su API aunque lo más habitual es usar el servicio online de Pagespeed actualizada en 2013 con un análisis más profundo en cuanto a móviles y usabilidad que la extensión que añade una pestaña a las Herramientas para desarrolladores de Google Chrome.
Puedes hacer el análisis general desde Pagespeed para optimizar errores generales pero si quieres optimizar todas las páginas de tu sitio te recomiendo que utilices:
- las Herramientas para Webmasters de Google > Tráfico de Búsqueda > Usabilidad Móvil. Obtendrás un informe con los problemas de páginas concretas, por ejemplo esos botones (enlaces) pequeños o páginas donde estás utilizando Flash.
- Google Analytics > Comportamiento > Velocidad del sitio > Sugerencias de velocidad. En este informe obtienes el tiempo de carga de tus páginas más visitadas, su puntuación en Google Pagespeed y un enlace directo para analizarla en Pagespeed.
En Pagespeed pones la URL de una página y el resultado se divide en dos pestañas: Móvil y Ordenador que comparten muchas reglas para el análisis.
La puntuación sobre 100 dependerá de si las reglas las cumples o no, cada regla aparecerá como:
- Elementos que debes corregir
- Elementos que puedes plantearte corregir
- Reglas aprobadas
Desde no hace mucho en la pestaña Móvil hay una sección nueva llamada Experiencia de Usuario con puntuación independiente y es la que muchos sitios están revisando desde el anuncio de Google de que a partir de este 21 de abril su algoritmo dará mejor posicionamiento a sitios responsive.
Cómo mejorar la Experiencia de usuario en Google Pagespeed
Vamos a empezar con la sección de usabilidad y UX para móviles. Si tu sitio es responsive obtendrás buena puntuación aunque quizás haya algunos aspectos que puedas mejorar.
Existen 5 reglas:
1. Aplicar el tamaño adecuado a los botones táctiles
Puede que algunos enlaces y botones de la página web sean demasiado pequeños para que los usuarios puedan tocarlos en una pantalla táctil. Quizás debas aplicar un tamaño más grande a los botones táctiles para proporcionar una experiencia de usuario mejor.
Ya sabemos que el dedo es más gordo que el puntero así que deja bastante espacio entre ellos y que no sean demasiado pequeños.
En el análisis de Experiencia de usuario de google.com esta es la única regla que no aprueba por los dos botones que veis enmarcados en la captura.
Hay 2 reglas que seguramente pases sin problemas:
2. Evitar los plugins
Básicamente evita Flash, Java y Silverlight para que sea compatible. Si tu sitio lleva ya un tiempo funcionando igual tienes vídeos de YouTube embebidos en Flash, revísalo y actualízalo a HTML5. Te acosenjo que utilices las Herramientas para Webmasters de Google para ver rápidamente qué páginas utilizan algún plugin.
3. Utilizar tamaños de fuente que se puedan leer
El texto de la página debe ser legible. Te recomiendo el artículo de Daniel Martínez (@Wakkos) Unidades de medida en CSS
Estas dos reglas son las que definen si tu sitio es o no responsive:
4. Adaptación del contenido a la ventana gráfica
Hay que evitar el scroll horizontal, que todo el contenido aparezca en el ancho del dispositivo:
- no utilizar anchos de ventana gráfica absolutos, si tu layout no es fluido utiliza media queries para asignar un ancho de un 100% a la ventana gráfica a partir de ciertos tamaños de dispositivo,
- haz que tus imágenes y vídeos sean responsive y se ajusten también (ver Cómo hacer los vídeos e imágenes responsive en WordPress)
- y como seguridad extra aplica un overflow:hidden
5. Configurar ventana gráfica
Añade la metaetiqueta a tu <head>
```
<meta name=viewport content="width=device-width, initial-scale=1">
```
Cómo conseguir un 100 en Google Pagespeed
Vamos ahora con lo más complicado, obtener un 100 o al menos una puntuación cerca del 100 en Google Pagespeed tanto en Móvil como en ordenador.
Como os decía las reglas son comunes, son 10, vamos a ordenarlas según la dificultad para aprobarlas. Desde las más fáciles, las que seguramente tengas aprobadas, a otras que requieren conocimientos avanzados a la regla que por mucho que lo intentes jamás pasarás.
1. 1 Regla fácil de mejorar
Reducir el tiempo de respuesta del servidor, debe ser inferior a 200 ms. Solución: elige un buen hosting para tu sitio
2. 5 Reglas relativamente fáciles de mejorar
Las siguientes reglas son relativamente fáciles de mejorar:
1. Minificar JavaScript
2. Minificar CSS
3. Minificar HTML
Para minificar los recursos JS, CSS y HTML tienes 3 posibilidades:
1. Minificarlos manualmente, si desarrollas tu propio tema con algún preprocesador como Sass lo tendrás fácil para el CSS, y luego subirlos a tu servidor
2. La más recomendable: utilizar algún plugin para WordPress como W3 Total Cache que incluye entre otras esta opción o Minit específico para minificar y concatenar CSS y JS.
3. Desde el mismo análisis de Pagespeed tienes un enlace para descargar los recursos de imagen, JavaScript y CSS optimizados y la extensión para Chrome te dará un HTML minificado, claro que si utilizas WP o cualquier lenguaje dinámico esto último de nada te sirve.
Otra regla es Habilitar compresión
Normalmente con un plugin para caché como el mencionado W3 Total Cache lo tendrás solucionado siempre y cuando tu servidor lo tenga habilitado, si no usas el plugin puedes añadir a tu .htaccess
```
<IfModule mod_deflate.c>
# Insert filters
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE image/svg+xml

# Drop problematic browsers
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</IfModule>
```
La quinta regla relativamente fácil de mejorar es la Optimizar imágenes, tienes también varias opciones:
1. Optimizarlas con algún servicio online y volver a subirlas.
2. Utilizar las que te da Pagespeed en el análisis en el enlace para descargar los recursos de imagen, JavaScript y CSS optimizados
3. Si usas WordPress el plugin EWWW Image Optimizer optimizará las que vayas subiendo nuevas pero y sobre todo te permite optimizar las de tu propio tema y también optimizar las de tu librería una a una o masivamente.
5. 2 Reglas relativamente complicadas de mejorar
Estas reglas tienen que ver con el renderizado de tu página, de cómo se va construyendo y para aprobarlas tienes que servir prioritariamente todo lo necesario para que se renderice primero la parte visible superior de tu página y luego el resto. Si no eres diseñador web y utilizas un tema o plantilla de terceros olvídate de aprobar estas reglas. Si lo eres probablemente te encuentres en un dilema sobre la conveniencia o no de dividir tus CSS y JS.
Una de estas reglas es “Prioriza el contenido visible”, habla del HTML, de que ese HTML esté organizado para que se muestre rápido, sin recursos externos, sin imágenes que lo ralenticen, este primera regla no es muy complicada de mejorar si el tema es tuyo, básicamente hazla semántica, carga los recursos de forma asíncrona, utiliza CSS en vez de imágenes, etc.
El problema es que está relacionada con esta seguna regla que sí que es un quebradero de cabeza: “Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página” es lo que se conoce como ruta crítica de renderización, critical path render y también Above the fold.

Se supone que debes poner el CSS y JS que renderiza esa primera parte de tu web dentro del HTML con la etiqueta <style> no como archivo CSS externo y con el JS lo mismo, algo que contradice lo que todos los diseñadores aprenden en su primera aproximación a CSS.
Para detectar ese CSS puedes utilizar:
- este servicio online: Critical Path CSS Generator – by Jonas Ohlsson
- este bookmarklet para Google Chrome que te mostrará en la consola de Google Chrome ese CSS prioritario.
- Más herramientas aquí critical-path-css-tools
- Un buen artículo: Conoce cómo funciona el browser y optimiza tu código frontend | CSSLab
6. 1 regla que jamás vas a aprobar
Llegamos al quid del artículo, la regla “Especificar caché de navegador” no vas a aprobarla jamás si utilizas como casi todos los sitios Google Analytics o Adsense. Para el resto, para los recursos internos utiliza algún plugin pero para los externos como http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js o http://www.google-analytics.com/ga.js no puedes hacer nada.
La única solución es prescindir de Adsense y GA. De hecho Adsense aunque tiene formatos de anuncios responsive también puede que complique la regla de usabilidad móvil de los botones, muchos anuncios tienen botones pequeños y/o demasiado juntos y no puedes hacer nada para evitarlo.
Actualizaciones: Solución para Google Analytics
Última actualización (14/06/16):
Solución de Google Analytics para conseguir 100/100 en Pagespeed
Hay una posible y fácil solución para Google Analytics que algunos han utilizado para mejorar la velocidad, es cargarlo de forma asíncrona. Puedes hacer algún uso de un plugin o simplemente utilizar este código de seguimiento.
```

<script async src='//www.google-analytics.com/analytics.js'></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXX-Y', 'auto');
ga('send', 'pageview');
</script>

```
Hay que tener en cuenta al tener GA asíncrono se pierde el registro de visitas cortas, es un detalle que no tiene mayor importancia pero afecta por ejemplo a la duración y tasa de rebote. Además el atributo async no es compatible con todos los navegadores. Según la documentación oficial:
«Se puede deteriorar en la carga síncrona y en la ejecución en IE9 y en navegadores para dispositivos móviles anteriores, que no reconocen el atributo async. Te sugerimos que uses este fragmento si tus visitantes utilizan principalmente navegadores modernos para acceder a tu sitio.»
La única solución que he visto para aprobar la regla y sacar mayor puntuación es descargar el archivo www.google-analytics.com/analytics.js a tu servidor para que deje de ser un recurso externo y pase a ser un recurso local. No es un archivo que se actualice con mucha frecuencia aunque no es una práctica recomendada por Google.
Desgraciadamente para Adsense aunque uses el formato asíncrono no hay forma de optimizar las imágenes de los anuncios o sus recursos.
Más información
Las explicaciones y consejos de las Reglas de PageSpeed Insights
Reglas de velocidad
(*) Para la regla de Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página”
Reglas de usabilidad
Resumen
Es muy difícil conseguir un 100 si como decía al principio utilizas Adsense, GA o pones vídeos, tuits o cualquier recurso externo, está en ti prescindir de ellos sólo por mejorar esa puntuación. Yo diría que no te obsesiones con la puntuación en Pagespeed, mejora lo que puedas y analiza tu sitio con otras herramientas gratuitas como GTmetrix, Yslow o Pingdom o WebPagetest
De todas formas lo escrito aquí se basa en mi experiencia, una de las cosas que he hecho recientemente es quitar todos los botones sociales, reducir la llamada a recursos externos y crear funciones con contadores para cada FB y twitter. Lo de la ruta crítica estoy en ello junto con una optimización general del CSS, este sitio tiene tiempo y poco a poco estoy cambiando algunas cosas para mejorarle el diseño y la usabilidad, la próxima versión la estoy haciendo ya con Sass y me será mucho más fácil gestionarla y optimizarla. Por último me queda optimizar páginas antiguas en las que incluí vídeos en Flash, en fin que como todos sabéis nunca se acaba una web.
Espero que os resulte útil el artículo, si quieres aportar algo para mejorarlo en los comentarios te lo agradecería.
31 de marzo de 2015
¿Cuánto cuesta diseñar un sitio web? Que el cliente le ponga precio
En este blog hemos hablado varias veces de tarifas de diseño web, debatido si es o no conveniente tener un tarifario público o si es mejor poner precio según cada proyecto y cliente.
Esandra nos da unos precios orientativos:
- Diseño de una landing page responsive desde cero: 600 EUR + IVA
- Adaptación plantilla landing page comprada sin modificaciones importantes: 250 EUR + IVA
- Adaptación plantilla HTML: a partir de 550 EUR + IVA
- Adaptación plantilla CMS tipo WordPress: a partir de 750 EUR + IVA
- Diseño web responsive desde cero web estática: a partir de 1500 EUR + IVA
- Diseño web responsive desde cero CMS tipo WordPress: a partir de 2000 EUR + IVA
Pero hay una tercera opción: dejar al cliente que te diga el presupuesto que él tiene para crear su sitio. Esta opción te ahorra la engorrosa negociación, el posible riesgo de emitir un presupuesto superior al que espera y perder el trabajo pero también añade el riesgo de que ese presupuesto no se amolde a lo que valoras tu trabajo.
Sabemos que el abanico de precios es amplio, ni el cliente ni el diseñador conocen un precio de referencia más de los que puedan encontrar en su entorno, el cliente pidiendo varios presupuestos y el diseñador por su experiencia y sus contactos.
Frente a este dilema el diseñador Edmundo Pérez ha lanzado Tu blog a tu precio.
El cliente cuenta sus necesidades a Edmundo y le pone precio. No sólo blogs puedes contratar cualquier tipo de proyecto web, desde blogs a wikis o comercio electrónicos.
¿Necesitas un blog y no sabes cómo, o no tienes tiempo? Soy tu tipo. Pero no sólo puedo hacer por ti blogs, puedo hacer tiendas electrónicas, wikis, blogs basados en Ghost, Joomla!, Ghost, o cualquier CMS que desees.
Cómo surgió la idea
Edmundo nos cuenta:
Buscando clientes siempre he tenido un tira y afloja en el precio: ellos muy barato, yo muy caro (para ellos), y con el problema de que si doy precio bajo, soy malo y estoy desesperado, y si soy alto, es muy alto.
La idea surgió cuando, con unos conocidos que tienen un negocio pequeño, no lográbamos un acuerdo y sencillamente les dije: vale, al acabar la tienda, les explico qué hace, cómo y ustedes ponen el precio. Me dieron más de lo que pensaba pedirles.
Luego, al ver que muchos blogueros ofrecen servicios similares a un precio más o menos el mismo, pues decidí confiar en la gente, y que la gente ponga el precio luego de darles el trabajo. Espero que la gente confíe en mí.
Ideas similares de diseño low cost
A mi juicio es una buena acción de marketing para conseguir clientes indecisos, de bajo presupuesto, seguramente no le lleguen proyectos grandes y profesionales pero uno hace nombre y amplía currículo y portafolio.
Seguro que muchos diseñadores, como él mismo me ha contado, verán en esta idea una competencia que agravia ya de por sí el difícil oficio de freelance. Pero tomemos el caso de un prestigioso diseñador e ilustrador, Von Glitschka (Vonster) que ofreció un logo por 5 dólares en 5 minutos y al que también muchos criticaron.
Tuvo una enorme repercusión y en alguna entrevista que he visto de él en video2brain me he quedado sorprendido no sólo por la calidad de su trabajo sino porque es capaz de hacer buenos logos en eso, en sólo 5 minutos.
Luego tienes a 50 dollar logo que hacen logotipos por 50USD y otros que te lo hacen por 5USD en sólo 24 horas
En diseño web hay empresas que ofertan webs por precios muy por debajo de lo que solemos presupuestar. Hay muchísimas, un par de capturas reales, los precios no tienen nada que ver con los que proponía Esandra al principio del artículo.
¿Qué os parece la idea?
Estamos en un libre mercado, si seguimos trabajando es porque hay clientes para todos. Clientes que decidirán por el precio, por las referencias y reputación, incluso por sus gustos personales al ver los trabajos de su portafolio.
Los freelance además del saber hacer tenemos que vender nuestra marca personal. Tenemos que hacer de marketeros, contables y comerciales, para la mayoría de nosotros esa es la parte que menos nos gusta, hablar de dinero, negociar, lo que nos gusta es crear.
Si criticamos a estos compañeros cómo calificamos a quienes crean plugins, frameworks o temas completamente gratuitos. ¿No es eso incluso peor? Yo mismo creé el tema Marla gratis para WP y de vez en cuando pierdo un rato dando soporte y algunos usuarios del tema me han pagado para alguna personalización. Hace un año empecé a desarrollar una idea similar que consistía en dar soporte de WordPress y que el cliente pusiera el precio, los trabajos se irían desarrollando no por orden de llegada sino por el precio animando así, estilo puja, la prioridad que los clientes le daban a los plazos. La idea sigue ahí y espero montarla en unos meses.
Edmundo es un gran profesional, estoy seguro que esos clientes que pongan precio a su trabajo saldrán satisfechos, pásate por su sitio y lo comprobarás: Branketing. Su propuesta es como la de cualquier otro negocio que ve un nicho de mercado donde la variable precio es el mejor gancho.
Así que ya sabéis si queréis ponerle precio al trabajo de Edmundo encargadle un trabajo en Tu blog a tu precio y contadme en los comentarios vuestra experiencia y vuestra opinión sobre su proyecto.
12 de marzo de 2015
Layers y Upfront ¿Es este el futuro de WordPress?
En los últimos días se han presentado dos nuevas formas de diseñar un tema para WordPress: Layers y Upfront, este último se ha presentado como el futuro de WordPress.
Ambos sistemas comparten algunas cosas:
- Ambos se pueden considerar temas, para utilizarlos los instalas como cualquier otro tema en tu WP.
- Ambos apuestan por el diseño en un entorno de drag&drop WYISWYG facilitando el trabajo de diseño a aquellos que no quieren o saben tocar mucho código
Dicho esto son muchas las diferencias:
- La diferencia principal para muchos es que Layers es de código abierto y gratuito y Upfront es de pago.
- Otra gran diferencia es que Layers es un starter theme y Upfront va en el core de los temas de WPMU DEV, es decir, Layers te lo descargas una vez y Upfront es una combinación de tema padre y tema hijo, no se descarga en sí mismo sino que utilizas algún tema de WPMU DEV que lo lleve integrado para personalizar dicho tema.
- Otra gran diferencia es que Layers funciona desde el customizer de WP, un entorno ya conocido e integrado en WP mientras que Upfront lo usas directamente en el frontend sin ninguna referencia al panel de administración de WP.
- Layers trabaja principalmente con widgets y páginas y Upfront con todo el sitio, con regions y elementos.
Vamos a ver cómo se usa uno y otro para sacar luego las conclusiones sobre si este es o no el futuro de WordPress.
Layers
Nada más instalar el tema te hace un pequeño tour, aún no está disponible más que en inglés donde podrás poner el nombre del sitio, la descripción del sitio y el logo.
Luego te pedirá crear tu primera página, vacía o a partir de alguna de las 7 plantillas disponibles, de contacto, para una aplicación, portfolio, de vídeo, landing page…
Y de ahí al customizer o bien puedes acceder al menú Layers y empezar desde ahí.
Como hemos comentado trabaja con el entorno de customizer propio de WP, con widgets y lo que llaman la revolucionara barra de diseño “Design Bar” con la que no tendrás que tocar código para aplicar el diseño deseado.
Puedes exportar o duplicar los layouts que hayas creado para luego importarlo a otra página en formato JSON
Vía mi amigo Pato y wwwhatsnew
Upfront
Por el momento la única forma de utilizar Upfront es siendo miembro de WPMU DEV y utilizar alguno de los 3 temas que vienen con Upfront. Lo que sí puedes es visitar una DEMO. Elige un tema que tenga Upfront (actualmente sólo hay 3) y luego arriba a la derecha pincha en “Customize using Upfront”.
Al hacerlo verás a la izquierda un panel con:
- dos botones superiores “Post/Pages/Comments” para navegar e ir a un post o página concreta del sitio, “Media” que te abre la galería
- y 12 botones con elementos que puedes arrastrar al tema para incluirlos, desde acordeones a galerías o mapas.
Todo se hace desde el frontend. Una vez arrastrado podrás configurarlo, que sea global o local, su estilo, posición, flotante o adaptado al contenedor, etc.
Si haces clic directamente en cualquier elemento texto o imagen podrás editar su contenido.
Un segundo panel se abre con “Theme Settings”
Desde este panel configuras la tipografía, el color, añades reglas CSS propias y el fondo
Abajo de estos dos paneles en acordeón tienes botones para deshacer/rehacer, mostrar la rejilla o cambiar el modo de previsualización a responsive
Al margen del panel podrás editar en vivo:
- las “Regions”, las secciones de la página, configurando un fondo y su CSS.
- cualquier elemento sobre el que te posiciones, eliminándolo, clonándolo, escalando su tamaño, pinchándolo y arrastrándolo
- y dependiendo del tipo de elemento podrás configurar algunas ajustes, en la siguiente captura vemos las opciones para el menú
Conclusiones ¿Es este el futuro de WordPress?
Habrás podido comprobar que Upfront es mucho más potente que Layers, más completo y revolucionario en su uso, de hecho en el post de presentación se le calificaba como el futuro de WordPress
We’ve made something for you. It’s the future of WordPress. Really.
Algo que ha levantado polémica en la comunidad de WordPress porque como os he comentado Upfront es de pago. Si algo identifica a WP es que es de código abierto y gratuito, de hecho ese es el secreto de su expansión. Que Automattic comercialice con la versión wordpress.com o que muchas empresas se ganen la vida desarrollando temas o plugins comerciales es totalmente lícito pero si en la base WordPress no fuera gratuito y de código abierto poco recorrido hubieran tenido.
Por otro lado son cada vez más los que auguran la muerte de la web si el diseño de un sitio cae en manos de cualquiera sin conocimientos, es decir, hasta ahora aunque muchos temas tengan posibilidad de personalizar colores, fondo, logo, tipografía, su diseño base ha sido creado en principio por un profesional. Existen muchos sitios donde no necesitas saber programar para tener tu sitio a tu gusto pero siempre a partir de una plantilla o tema dado, muchas veces destrozado a base de edición y personalización.
Estos dos argumentos, el del precio y el del modo de construir un sitio son los que pesan sobre esa afirmación sobre el futuro de WordPress.
En mi opinión Upfront es un gran proyecto, realmente un avance aunque coincido en que no cualquiera sabría sacarle provecho y si pensamos en desarrolladores o diseñadores la tendencia creo que es la contraria, picamos código, usamos preprocesadores CSS, librerías Javascripts e IDEs de puro código en contra de la pesadez del WYISWYG.
Sobre Layers creo que es un starter theme más, muy bien hecho y al ser de código abierto y gratuito lo tendré localizado para seguir sus avances, de momento cuando me enfrento a un nuevo proyecto con WordPress empiezo de cero o con una personalización del Sass y funciones del starter theme Underscore
¿Qué pensáis vosotros? ¿Cómo diseñáis vuestros temas? ¿Creéis que este es el futuro de WordPress?
22 de febrero de 2015
Completa referencia CSS de Codrops y Chuleta CSS3 de Manz
Si hay un sitio de referencia para los que trabajamos con CSS ese es Codrops. Sus artículos y tutoriales van siempre acompañados de demostraciones y la descarga de los archivos. No sólo aprendes CSS sino diferentes aproximaciones a soluciones de diseño, originales y de gran calidad.
Sara Soueidan acaba de publicar una nueva sección que ya estás tardando en guardar en tus favoritos: CSS Reference | Codrops. Un trabajo de 8 meses realmente plausible.
La única pega puede ser que está en inglés (ver Bonus abajo) pero si esto no es un obstáculo para ti vas a encontrar un sitio donde consultar, aprender y resolver todas tus dudas sobre CSS, con ejemplos de código y demos.
Hay 6 secciones completamente actualizadas, muy interesante es la de conceptos donde se explican con detalle Flexbox y los Counters.
Lo dicho, agrega ya a tus marcadores CSS Reference | Codrops.
Bonus: Añade también a tus favoritos el gran trabajo de Manz: Lenguaje CSS (Hojas de estilo), una completa CheatSheet de CSS3 en PDF gratuita en español y una sección de documentación con un sinfín de herramientas y sitios útiles sobre CSS.
11 de febrero de 2015
Características, plugins y snippets para la gestión de la Imagen Destacada en WordPress
Cuando escribimos una entrada o una página en WordPress es conveniente asignarle una imagen destacada (Feautured Image), algunos la llaman también miniatura o thumbnail.
Es lo que generalmente se muestra en nuestra home y páginas de archivos junto al título para invitar a su lectura. También podemos gestionarla para que se comparta en las redes sociales. Fotografías o imágenes que deben invitar a la lectura y mejorar el diseño de nuestro sitio.
Vamos a ver sus características y cómo sacar todo el partido a este elemento visual de gran importancia para tu sitio. Iremos de lo básico a lo avanzado terminado el post con 5 plugins y 4 snippets muy útiles para la gestión de las imágenes destacadas en WordPress.
1. Características de la Imagen Destacada en WordPress
2. Consideraciones y soluciones
3. 6 Plugins para la automatización y gestión de la imagen destacada
4. 4 Snippets para la automatización y gestión de la imagen destacada
1. Características de la Imagen Destacada en WordPress
Se introdujo en la versión 2.9 de WordPress a finales de 2009. Tu tema debe tener activada esta función, normalmente todo en functions.php
```
add_theme_support( 'post-thumbnails' );
```
WordPress va a generarte por defecto 3 imágenes extras a partir de la que hayas subido que se llamarían desde los archivos de tu tema de esta forma, siendo su tamaño máximo el indicado y siempre proporcionales:
```
the_post_thumbnail('thumbnail');       // Tamaño de la miniatura 150x150 píxeles 
the_post_thumbnail('medium');          // Tamaño de la mediano 300x300 píxeles
the_post_thumbnail('large');           // Tamaño de la grande 640x640 píxeles
```
Al tamaño de miniatura puedes activarle la opción de que se recorte para que sea exactamente ese tamaño.
Y la imagen original:
```
the_post_thumbnail('full'); // La resolución original
```
Estos tamaños puedes cambiarlos en los Ajustes Multimedia: Ajustes > Medios
Estos tamaños también los podrás utilizar cuando insertes una imagen en tu editor siempre y cuando el tamaño original sea superior al que vas a utilizar, es decir, si subes una imagen de 500×500 no vas a poder insertarla al “tamaño grande” (640×640)
Si necesitas un tamaño especial tu tema lo puede asignar de esta forma, con los parámetros (nombre, ancho, alto y true o false si quieres que se recorte la imagen para que sea ese tamaño exacto
```
add_image_size( 'nombre-de-tu-nueva-imagen-destacada', 300, 450, true );
```
Para utilizarla no tendrías más que utilizar
```
the_post_thumbnail( 'nombre-de-tu-nueva-imagen-destacada');
```
Esta función además de mostrar la imagen destacada al tamaño que le indiques les añade dos clases CSS: wp-post-image y attachment-(el nombre del tamaño utilizado). Ejemplos para darle estilos en tu CSS
```
img.wp-post-image
img.attachment-thumbnail
img.attachment-medium
img.attachment-large
img.attachment-full
img.nombre-de-tu-nueva-imagen-destacada
```
2. Consideraciones y soluciones
Generalmente estas imágenes se utilizan en la home, sidebar, pié, posts relacionados y páginas de archivos junto al título y extracto. Es una forma muy visual de invitar a seguir la lectura.
1. Al cambiar de tema
Hay que tener en cuenta que si cambias de tema y ese nuevo tema utiliza un tamaño distinto al que estabas utilizando puede causarte problemas en tu diseño.
Digamos que decides utilizar mi tema gratuito Marla, las imágenes no van a salirse de su contenedor pero no estarán optimizadas porque se utiliza un tamaño especial para la home y archivos.
La solución es muy simple, instalas el plugin gratuito Regenerate Thumbnails o AJAX Thumbnail Rebuild que volverá a crear los tamaños de imagen destacada que lleve tu tema.
2. Utilizar una Imagen Destacada en la página de tus entradas
Muchos temas muestran una imagen destacada en la misma página de tus entradas, en tu archivo single.php
A veces puede ser redundante si la misma Imagen Destacada está nuevamente inserta en el propio artículo. La solución es utilizar imágenes distintas, la que uses como destacada no la insertes en el post o al menos no al principio
3. Plugins para la automatización de la imagen destacada
Como con toda automatización hay que ir con cuidado. Vemos una serie de plugins que pueden ayudarnos.
1. Con Default featured image puedes asignar una imagen destacada por defecto.
2. Si quieres ahorrarte el paso de Fijar la imagen destacada y asegurarte que no se te ha olvidado puedes utilizar el plugin gratuito Easy Add Thumbnail de Samuel Aguilera, añadirá automáticamente como Imagen Destacada la primera de las imágenes insertada en tu post.
3. Con el plugin Require Featured Image te saldrá un aviso si intentas publicar antes de fijar la imagen destacada.
4. Con el plugin Auto Post Thumbnail podrás añadir imágenes destacadas a posts ya publicados que no la tuvieran.
5. Si publicas vídeos puedes conseguir la imagen que lo ilustre por ejemplo de YouTube: https://img.youtube.com/vi/<id-del-video>/0.jpg o utilizar este plugin gratuito que la saca por ti Video Thumbnails de distintos proveedores como Vimeo.
Bonus: Y si lo que quieres en que en esos posts de vídeos en vez de una imagen tu “Imagen Destacada” sea realmente un vídeo prueba el plugin Featured Video Plus
Cómo recortar manualmente la imagen destacada de tu WordPress (Actualización 8/05/15)
Si tu tema o en tus opciones has optado por recortar la imagen destacada recuerda que WordPress siempre recortará por el medio. Para personalizar ese recorte y hacerlo manualmente tenemos el plugin gratuito Post Thumbnail Editor del que hablamos en Cómo recortar manualmente los thumbnails en WordPress
4. Snippets para la automatización de la imagen destacada
Si quieres prescindir de plugins e insertar tus propio código en functions.php aquí van algunos snippets:
1. Añade como imagen destacada la primera imagen de tu entrada
```
function imagen_destacada_automatica() {
    global $post;
    $ya_tiene_imagen_destacada = has_post_thumbnail($post->ID);
    if (!$ya_tiene_imagen_destacada)  {
    $attached_image = get_children( "post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1" );
        if ($attached_image) {
            foreach ($attached_image as $attachment_id => $attachment) {
                set_post_thumbnail($post->ID, $attachment_id);
            }
           }
     }
}
add_action('the_post', 'imagen_destacada_automatica');
add_action('save_post', 'imagen_destacada_automatica');
add_action('draft_to_publish', 'imagen_destacada_automatica');
add_action('new_to_publish', 'imagen_destacada_automatica');
add_action('pending_to_publish', 'imagen_destacada_automatica');
add_action('future_to_publish', 'imagen_destacada_automatica');
```
2. Imagen por defecto si no tiene imagen destacada, utiliza un condicional y cuando no encuentre una imagen destacada muestra una por defecto, esto lo puedes hacer también por categorías o tags:
```
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail();
} else { ?>
<img src="<ruta de tu imagen por defecto>" alt="<?php the_title(); ?>" />
<?php } ?>
```
3. Uso de la imagen destacada para las redes sociales. Cuando se comparte un post en Facebook puedes indicar la imagen que quieres mostrar en una meta etiqueta
```
<meta content="ruta-imagen-destacada-para-facebook" property="og:image">
```
Debe ser al menos 200×200 y el aspect ratio no puede ser mayor de 3, es decir, la imagen que indiques no puede ser 3 veces más ancha que alta o viceversa. Para Twitter debes crear primero una Twitter Card y añadir el siguiente código que te sirve también para Facebook cambiando las correspondientes meta etiquetas:
```
function img_destacada_twitter() {
if ( has_post_thumbnail()) {
   $twitter_thumb = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); 
   $twitter_thumb = $twitter_thumb[0];
} else {
	$fbthumb = "https://ceslava.com/img/imagen-destacada-por-defecto.jpg";
}
echo 	'<meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@ceslava">
    <meta name="twitter:title" content="'. get_the_title().'">
    <meta name="twitter:description" content="'. strip_tags(get_the_excerpt()).'">
    <meta name="twitter:creator" content="@ceslava">
    <meta name="twitter:url" content="'. get_permalink().'">
    <meta name="twitter:image:src" content="'.$twitter_thumb.'">';
}
add_action('wp_head', 'img_destacada_twitter');
```
También puedes utilizar el plugin WordPress SEO by Yoast y configurar algunas opciones en su sección “Social”
4. Añadir la imagen destacada al listado de entradas de tu panel de administración de WordPress, una buena forma de comprobar si a algún post le falta la imagen destacada (vía)
```
add_filter('manage_posts_columns', 'posts_columns', 5);
add_action('manage_posts_custom_column', 'posts_custom_columns', 5, 2);
function posts_columns($defaults){
    $defaults['riv_post_thumbs'] = __('Thumbs');
    return $defaults;
}
function posts_custom_columns($column_name, $id){
        if($column_name === 'riv_post_thumbs'){
        echo the_post_thumbnail( 'featured-thumbnail' );
    }
}
```
21 de enero de 2015