Categoría: CSS

Cómo cargar sólo los plugins necesarios para cada página de tu WordPress
Una de las bondades pero también peligros de WordPress es que no hay prácticamente límites en la cantidad de WordPress que puedes instalar. El problema es que todos los plugins no son necesarios para cada página y cargan archivos CSS y Javascript que no hacen más que ralentizar su carga.
Para para mejorar el rendimiento y la velocidad sin CSS y JS extras una buena solución es Plugin Organizer, un plugin que te va a permitir entre otras cosas:
1. Ordenar la carga de los plugins
2. Organizarlos en grupos
3. Y lo más interesante, activarlos sólo en la(s) página()s o post(s) que lo necesiten.
¿Por qué utilizar Plugin Organizer?
Varios ejemplos en los que te puede ser útil:
- Utilizas un plugin para tu formulario de contacto, lo ideal es que sólo se cargara en esa página de contacto ¿verdad?
- Utilizas un plugin para galerías de imágenes o sliders, con Plugin Organizer podrás cargar ese plugin sólo en los posts que lleven esa galería
- Utilizas WooCommerce pero no en la home de tu sitio
- Utilizas esos molestos plugins de ventanas modal que en los móviles son todavía molestos, con Plugin Organizer puedes hacer que no se cargue dicho plugin cuando tu sitio sea visitado desde un móvil.
- Utilizas plugins para los comentarios, etc., etc., etc.
Obviamente puedes hacer uso de tus dotes de programación y utilizar condicionales en functions.php o en tu propio plugin pero no todos los usuarios de WordPress son programadores o no tienes tiempo de hacerlo para todos los proyectos.
Cómo utilizarlo
Hay 4 formas:
1. En Global Plugins lo desactivas para todo el sitio y luego en una página o post específico podrás activarlo. Este sería el caso del plugin para el formulario de contacto.
2. En Search Plugins defines los plugins que se cargarán en la página de resultados de búsqueda.
3. Con los Plugins Filters puedes desactivar cualquier plugin en una URL específica
4. En Post Type Plugins puedes desactivarlos por tipo de publicación «post» o «page» o los custom post types que tengas. Como en Global Plugins luego podrás reactivar un plugin en un artículo o página en concreto.
Captura dentro del Editor de WordPress donde puedo desactivar/activar plugins sólo para esta entrada
Cómo configurar Plugin Organizer
Una vez instado en la página de configuración (settings) encontrarás desactivada la opción Selective Plugin Loading, actívala, si no puedes ve a la última opción «Manage MU plugin file» y pincha en el botón «Copy», eso copiará el arhivo PluginOrganizerMU.class.php de
```
/wp-content/plugins/plugin_organizer/lib
```
a una nueva carpeta llamada mu-plugins
```
/wp-content/mu-plugins
```
Otras opciones de configuración son:
- Admin CSS: para cambiar los colores CSS que por ejemplo muestran un fondo gris a los plugins inactivos
- Mobile User Agents si has activado en la configuración «Selective plugin mobile» podrás detectar móviles y hacer que se carguen o no tus plugins
Más cosas
- Puedes crear grupos de plugins, como un grupo de plugins de administración, grupos de plugins de comentarios, grupos de plugins de WooCommerce, etc.
- Puedes hacer lo propio con los plugins para el backend
- Hacer configuraciones diferentes para http o https
- Cambiar el orden de la carga de los plugins
Personalmente creo que el primer consejo sería no instalar demasiados plugins pero si no tienes más remedio seguro que Plugin Organizer puede ayudarte a mejorar el rendimiento de tu WordPress.
Puedes buscarlo en tu WordPress o descargarlo desde el repositorio: Plugin Organizer « WordPress Plugins
9 de junio de 2015
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
Crea tu propia versión de cualquier web
Imagina que quieres crear tu propia versión de un sitio web popular:
- hacer tu propia portada de Menéame,
- cambiar el timeline de algún tuitero,
- una parodia de algún periódico digital…
- o hacer un boceto web para un cliente basándote en otro sitio.
Con Clone Zone lo tienes muy fácil, pones la URL del sitio que quieres copiar y editas su contenido, con tus propias fotografías y texto. Esto lo puedes hacer también con las herramientas para desarrolladores de tu navegador si sabes un poco de programación pero con Clone Zone lo haces mucho más fácil, posicionas el ratón sobre cualquier elemento y lo editas. Además tienes una ventaja, tu creación queda guardada en una única URL que puedes compartir. También puedes personalizar el título y la descripción con la que se compartirá en las redes sociales.
Por ejemplo he cogido esta URL
http://www.pp.es/actualidad-noticia/rajoy-gobierno-pp-ha-dado-vuelta-situacion-economica-dos-anos-medio
Y le he cambiado la foto y el pié de foto, el título y la descripción
La URL para compartirla es http://www.pp.es.clonezone.link/rajoy-rato
Y si le echas un poco de morro puedes incluso acortar dicha URL para quedarte con tu gente cuando lo compartas en Facebook o Twitter:
http://m.ceslava.com/rajoy-pp
Si te registras podrás volver a editar y gestionar tus clones web.
Enlace: Clone Zone
28 de abril de 2015
Cómo se creó la visita virtual a los estudios Abbey Road de Google
Google nos deja visitar los míticos estudios de grabación Abbey Road. Toda una experiencia para los amantes de la música, puedes ver cómo se masteriza una grabación, interactuar con equipos y sumergirte en una parte importante de la historia de la música con fotografías y vídeos. Aquí grabaron los Beatles, Oasis, Adele y también las bandas sonoras de La Guerra de las Galaxias y Harry Potter.
https://youtu.be/YGztmJrf748
¿Cómo se hizo esta web?
Un sitio web del que merece la pena ver el About para ver cómo se está hecho.
Para empezar crearon crearon un mapa 3D de 30 millones de puntos por estudio con un escáner LIDAR (con láser) para ubicar las más de 1000 fotografías panorámicas que componen esta visita virtual e interactiva.
Cada una de estas vistas panorámicas pesa unos 110MB y está compuesta con 6 fotografías HDR. Google te las sirve a mayor o menor calidad según tu ancho de banda, si usas Chrome se descargarán en formato WebP mucho menos pesado.
Para el audio usaron la tecnología Web Audio para posicionar el sonido en un espacio 3D. Con una aplicación creada ex profeso se ponían las imágenes y audio en el sitio adecuado
La mayoría de los vídeos son de YouTube pero algunos están creados con CSS3 3D transform.
Sube el audio y disfruta: Inside Abbey Road
17 de abril 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
Script para Illustrator que exporta infografías a HTML y CSS
ai2html es un script de código abierto que puede convertir un documento de Illustrator en HTML y CSS. Como te habrás imaginado no es ninguna varita mágica, no hay todavía nada que sustituya a un buen maquetador web. Este script no está pensado para cualquier proyecto web, es específicamente útil para convertir infografías, mapas o diagramas a HTML.
Ha sido desarrollado por el equipo de New York Times, esta infografía interactiva ha sido creada con ai2html.
Cómo usarlo
Una vez instalado verás un bloque de texto arriba a la izquierda de tu mesa de trabajo que empieza por ai2html-settings
Puedes crear otros bloques de texto para configurarlo, siempre fuera de la mesa de trabajo para que no formen parte de la exportación. Los bloques de texto deben comenzar con ai2html- seguido de css, js, html o text. De esta forma puedes añadir tu propio CSS, Javascript, HTML o variables de texto.
Los nombres de las capas serán clases CSS y los de las mesas de trabajo los id de los divs.
Puedes exportar las mesas de trabajo en un solo HTML con divs o cada mesa de trabajo en un HTML independiente. Tendrás el texto con posiciones absolutas y el resto como imágenes de fondo.
Sin duda una mejor opción que exportar a SVG.
Descarga y documentación: ai2html
19 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