Categoría: CMS

Informe y estadísticas sobre el uso de CSS
Alex McPherson ha hecho un interesante estudio sobre cómo se usa CSS.
Su estudio recoge una muestra de las CSS de 10.400 dominios, los 1000 primeros de Alexa y el resto de su lista de correo, es decir, hay de todo, se supone que las 1000 de Alexa tendrán un mayor cuidado en su CSS pero el resto corresponde en teoría a webs más personales o con menor presencia.
El informe es muy extenso, aquí vamos a resaltar algunas curiosidades.
Propiedades CSS
- Declaradas 1.528 propiedades diferentes.
- Las 5 más usadas: color, width, display, content, background-color
- Se han utilizado hacks (* y _ ) para antiguas versiones de IE, siendo las más comunes * zoom y _font-family
- Los vendor prefix lo utilizan el 7% de los sitios estudiados aunque los navegadores modernos no lo necesitan.
- También han encontrado propiedades no válidas de esas que en producción escribimos con algún error y luego no corregimos: bototm, foat, and heith.
- El mayor valor en un z-index es 999999999999999999999999999 o 9.99e26. (LOL) El menor -999999.
Selectores CSS
Los 5 selectores más comunes: body, textarea, h1, pre, h2
El selector más largo mide nada menos que 221 caracteres: .ClientAreaContainer .element-columns-alpha-outer .element-columns-alpha-inner .element-column-right-alpha-outer .element-column-right-alpha-inner .element-column-right-alpha-content:first-child .ContentEditor > p .h2Grey
- 13.7% Selectores con #id
- 84.1% Selectores de clase
- 20.4% Selectores con un :pseudo-selector
- 0.3% Selectores con un :pseudo-element-selector
- 7.5% Selectores de elementos HTML
Colores
Para ilustrar su artículo muestra por orden los colores más populares en Internet.
- #428BCA es el más utilizado como color de marca seguramente por ser de BootStrap. El 99,6% utiliza el modo de color HEX y el 0,4% rgb/rgba
- La media es de 169 declaraciones de color. Este alto número indicaría un uso de color no coherente en muchos sitios.
Unidades de medida
Ganan los píxeles por goleada, seguido del %
- 77.8% usan px
- 14.2% usan %
- 6.1% em
- 1.6% rem
- 0.1% pt
- 0.1% calc()
- <0.1% vw
- <0.1% vh
- <0.1% cm
- <0.1% ex
- <0.1% in
- <0.1% mm
- <0.1% pc (1pc == 12pt)
- <0.1% vmin
- 0% ch
- 0% vmax
La media es 31 medidas para fuentes distintas por sitio, una barbaridad.
Responsive Design
El 64% utiizan algún breakpoint con media queries aunque las medidas utilizadas alrededor de los 990px indican cierto baile de resoluciones trabajadas. 768, 992, y 1200 son las que inclye Bootstrap por defecto.
Frameworks
Gana el popular Bootstrap con el 78,2% seguido de Foundation con el 15,1%
Formatos de imagen
Teniendo en cuenta background-image se ha estimado que
- 77,7% usa PNG,
- el 9,5% GIF
- 6.7% SVG
- 5,9% .jpg o .jpeg
Un buen dato aunque seguro que el SVG irá ganando con el tiempo.
El informe completo en Quick Left | Reports on Internet Performance (EN)
15 de enero de 2015
Gestiona todos tus sitios WordPress con el plugin Jetpack
El mega plugin de WordPress Jetpack de Automattic ha introducido una importante novedad, ahora puedes administrar todos sus sitios desde un único panel de administración, el de wordpress.com
Puedes administrar tanto los sitios que tengas en wordpress.com como los que tengas alojados siempre y cuando tengas el plugin Jetpack instalado y la función Centralized Site Management y el módulo JSON API activados.
Si lo tienes instalado verás en tu panel de administración este aviso
Desde wordpress.com > Mis sitios podrás:
- publicar entradas,
- publicar páginas,
- cambiar temas,
- ver todas las estadísticas y
- gestionar los plugins activando por ejemplo las actualizaciones automáticas.
Algo bastante útil si tienes muchos sitios con WordPress, además es gratuito y totalmente gratuito a diferencia de ManageWP.
18 de diciembre de 2014
4 cosas necesarias que complican el diseño de casi cualquier web
Tienes entre manos un proyecto web que ya está quedando a tu gusto en cuanto a diseño y rendimiento. Todo parece perfecto, limpio y bajo tu control salvo por 4 cuestiones necesarias casi en cualquier sitio web:
1. publicidad
2. redes sociales
3. aviso de cookies
4. y SEO
1. Publicidad
Muchos sitios viven de la publicidad, hacerla más o menos intrusiva, que ocupe más o menos espacio es una cuestión de ambición, de necesidad y a veces de respeto por tus lectores. Los formatos muy intrusivos pueden acabar con tus visitas pero un anuncio poco visible puede redundar en menos ingresos y al final hacer que abandones tu web. Si tu web es de por sí comercial o un simple hobby o un proyecto muy personal puedes obviar la publicidad pero para el resto suele ser el motor que lo mantiene vivo. Si son banners fijos tienes el control de su diseño pero si utilizas por ejemplo Adsense puedes mostrar anuncios bien diseñados o anuncios que estropeen todo el equilibrio estético de tu web. Por no hablar de enlaces publicitarios en textos, formatos expandibles o flotantes, esos molestos interstitials y layers que perjudican la usabilidad de tu sitio y la experiencia del usuario.
2. Redes Sociales
Cuadros de Facebook, de Twitter, botones para compartir, suscripciones… Elementos que se repiten y que de alguna forma impiden diseños más creativos. Como ya he comentado en alguna ocasión estos botones deberían desaparecer y ser parte del navegador, mejoraría tanto el diseño como el rendimiento. Se ha llegado a decir que los usuarios que comparten en redes sociales no necesitan de estos botones, que utilizan sus propios métodos para compartir contenido, bookmarklets en su navegador, la opción de compartir en dispositivos móviles, etc. Hay sistemas para cargarlos asíncronamente o de personalizar algo sus diseños con iconos propios pero aún así debes el diseño de muchas webs (las mías incluidas) quedarían mucho más limpios sin ellos.
3. Aviso de cookies
Lo peor de lo peor, una ley absurda que nos obliga a los editores a mostraros a los lectores un texto absurdo.
4. SEO
El SEO no es un elemento gráfico en sí mismo pero cuando se toma demasiado en serio hace que por ejemplo prescindamos de imágenes a favor de texto, que engordemos nuestros textos con más palabras, que los titulares sean menos originales, etc. Sin el SEO estoy seguro que muchos posts que publicamos en nuestros blogs serían más cortos, dando importancia realmente a lo que queremos mostrar: un vídeo o una fotografía bastarían. La velocidad de carga, importante también para el SEO, nos hace plantearnos el número y el peso de las imágenes a mostrar y si utilizamos sistemas como Lazy Load ganamos velocidad pero perdemos SEO.
Conclusiones
4 elementos que pueden ensuciar tu diseño pero que casi siempre deben estar presentes. Hay grandes ejemplos de sitios con un diseño increíble que salvan esta dificultad obviándolas directamente o minimizando su impacto. Sitios que prescinden de publicidad, de botones sociales y de técnicas básicas de SEO, aún así son sitios de referencia, bien posicionados, con grandes comunidades que comparten su contenido y seguramente con grandes ingresos por otras vías que no son la publicidad.
Estoy trabajando en el diseño del tema de WordPress para el elFinalde y en un rediseño de esta y de mis otras webs y me planteo seriamente quitar los botones sociales y muchos elementos que sobran. Seguramente no podré prescindir de la publicidad al menos en este blog y desgraciadamente tampoco del aviso de cookies pero todo lo demás creo que será historia.
Así era
Así me gustaría
Y así está ahora (sigo trabajando)
¿Estás de acuerdo con el artículo? ¿Cómo solucionas tú esto en tu web?
15 de diciembre de 2014
Cómo NO detectar el dispositivo del que te visita en WordPress
En la búsqueda de crear la mejor solución para que los usuarios que visiten nuestro sitio tenga la mejor experiencia sea cual sea el dispositivo quizás además de tener un tema responsive queramos mostrar u ocultar algo según el dispositivo.
Con las media queries podemos hacerlo con CSS pero si detectamos el dispositivo podemos directamente no servirlo o cambiar por ejemplo el tamaño de las imágenes a mostrar o decidir si mostrar o no más o menos anuncios de Adsense.
Los 2 problemas de wp_is_mobile()
En WordPress existe una función desde la versión 3.4 que podemos usar como condicional:
wp_is_mobile()
```
function wp_is_mobile() {
	static $is_mobile;

	if ( isset($is_mobile) )
		return $is_mobile;

	if ( empty($_SERVER['HTTP_USER_AGENT']) ) {
		$is_mobile = false;
	} elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false // many mobile devices (all iPhone, iPad, etc.)
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mobi') !== false ) {
			$is_mobile = true;
	} else {
		$is_mobile = false;
	}

	return $is_mobile;
}
```
Esta función detecta si la visita es de un dispositivo móvil o tablet. El problema surge precisamente de esto, lo que detectamos son los dispositivos, independientemente de la resolución, eso significa que da igual que sea un smartphone Android que una tablet, un iPhone que un iPad.
Ejemplo:
```
<?php if (wp_is_mobile() ) : ?>
Esto sólo se mostrará en smartphones y tablets
<?php endif ?>
```
Otro problema es que si utilizamos un cacheado y el usuario que nos cachea la página lo hace desde un móvil esa página cacheada se servirá también a los que nos visiten desde un equipo de sobremesa.
Otro plugin similar es WordPress Mobile Detect que en vez de funciones utiliza shortcodes que puedes usar directamente en tu editor.
Media solución alternativa, plugin mobble
El plugin mobble soluciona el primero de los problemas, nos permite ampliar el criterio y distinguir entre tablets y SO.
Nos proporciona nuevas funciones que podemos utilizar también de forma condicional:
is_handheld(); // cualquier dispositivo portátil (smartphone, tablet, Nintendo)
is_mobile(); // cualquier smartphone (iPhone, Android, etc)
is_tablet(); // cualquier tablet
is_ios(); // dispositivos Apple (iPhone, iPad, iPod)
Ejemplo:
```
<?php 
if (!is_mobile()) {
    get_sidebar();
}
?>
```
Pero el problema del cacheado seguirá existiendo.
Conclusión: No los uses
De hecho el tema por defecto Twenty Fourteen eliminó la función wp_is_mobile de su código. En este hilo verás cómo se aconseja sólo su uso para el backend a no ser que no utilices ningún sistema de cacheado.
Lo mejor es que utilices alguna solución Javascript, aquí tienes algunas:
12 de diciembre de 2014
WP Clipboard: agregador de recursos sobre WordPress
La comunidad de WordPress es probablemente una de las claves de su éxito. Hay muchísima información, herramientas, tutoriales y recursos en la red.
WP Clipboard es un buen sitio para encontrar estos recursos sobre WordPress categorizados y actualizados diariamente. 54 categorías que van desde SEO, rendimiento, desarrollo, seguridad, temas, plugins, etc.
Como en cualquier agregador los recursos son puntuados de forma que es fácil acceder a los más populares dentro de una categoría. Si quieres añadir un recurso no hace falta registro simplemente pinchas en el icono del lápiz y ellos valoran si merece la pena.
Enlace: WP Clipboard | WordPress Resources. Categorised & Rated.
12 de diciembre de 2014
Plan WordPress con hosting y dominio .es gratuitos
Esta es la oferta de lanzamiento para la presentación de la nueva RedCoruna, ahora les conoceremos como Host Europe. Un cambio de nombre que lleva asociado cambio de imagen y de web.
Los que llevamos años trabajando con ellos agradecemos ese nuevo look, igual nos cuesta hacernos al nombre pero lo que está claro es que sus servicios siguen siendo geniales, un soporte 24/7 en español profesional y unos precios muy buenos.
Para los que aún no los conozcáis este es un buen momento porque como os decía lanzan una magnífica oferta de lanzamiento para que comiences tu nuevo proyecto web sin ningún coste:
- hosting y dominio .es gratuito 1 año
- tráfico ilimitado,
- 10 GB de espacio web,
- 10 cuentas de correo electrónico personalizadas,
- certificado SSL,
- y cupones de Adwords y Fotolia.
Aunque el nombre del plan es WordPress también puedes alojar otros CMS como Prestashop, Drupal y Joomla! Todos los podrás instalar con un sólo clic, sin necesidad de que tengas conocimientos avanzados.
Puedes aprovecharte de esta oferta hasta el próximo 31 de diciembre.
Enlace: Plan WordPress gratuito Host Europe
10 de diciembre de 2014
Útiles ejemplos de textos en español para sitios web y apps
Estamos acostumbrados a sitios que recopilan snippets de código, de PHP, CSS, para WordPress, etc.
Ahora he encontrado un sitio que recopila no código sino contenido, textos que nos pueden ser de gran utilidad como fuente de inspiración y algunos de libre uso para textos típicos de cualquier proyecto web.
Content Snippets recoge ejemplos de texto de páginas web y aplicaciones móviles, para servir de inspiración a copys profesionales
Puedes encontrar a un golpe de click los textos que usa Twitter para el aviso de cookies, las características del botón +1 de G+,
Los tenemos en inglés pero también en español clasificados por categorías:
- Avisos y alertas
- Características
- Compartir
- Confirmación
- Errores
- Estados vacíos
- Instrucciones
- Libre uso
- Microcopy
- Publicidad
- Registro
Enlace: Content Snippets
5 de diciembre de 2014
9 principios básicos del diseño web responsive explicados con GIFs animados
El diseñador web Sandijs Ruluks, creador de la herramienta para crear webs responsive FROONT – Responsive Web Design Tool explica con simples GIFs animados 9 principios básicos del diseño web responsive.
La mayoría hablan del layout, otros de rendimiento o de técnicas recomendadas para crear sitios web que se adapten a todos los dispositivos. Algunos pueden ser inclusos discutidos pero me parecen una genial forma de explicar qué es el diseño web responsive (RWD).
1. Responsive versus Adaptativo
Aunque mucha gente los sigue utilizando indistintamente como sinónimos no lo son. Son dos técnicas distintas. Si usamos la filosofía del diseño adaptive lo que hacemos es trabajar con anchuras fijas de dispositivos concretos, con la cantidad de dispositivos que existen es mucho mejor trabajar en un diseño responsive.
2. Unidades de medidas relativas versus Unidades de medidas estáticas
Evitaremos el uso de la unidad píxel en un diseño responsive
3. Con o sin Breakpoints
Los breakpoints son los que utilizamos con las media queries para definir que algo cambie a partir de un tamaño determinado. Por ejemplo pasar de 3 columnas a una.
4. Diseño fluido versus diseño estático
Los elementos irán ocupando más espacio vertical a medida que la pantalla se estrecha. Con un diseño fluido conseguimos que no estos elementos se distribuyan siguiendo el espacio natural que deben ocupar.
5. Anidar o no anidar elementos
Es mucho más sencillo trabajar con un elemento contenedor que tener que hacerlo uno a uno, sin caer en la divitis.
6. Fuentes de sistema versus webfonts
Las fuentes de sistema no inciden en el peso de la web y en su rendimiento, si pensamos en dispositivos móviles minimizar y optimizar la velocidad de carga es mucho más importante.
7. Determinar una anchura máxima
Igual que trabajamos para dispositivos móviles con resoluciones pequeñas debemos pensar también en otros dispositivos como los televisores. Establecer una anchura máxima (max-width) es una buena opción.
8. Filosofía Desktop first versus Mobile First
Este punto quizás sea el más discutible por los diseñadores donde la tendencia apunta y defiende las ventajas del mobile first, empezar diseñando para dispositivos de baja resolución. Sandijs Ruluks no lo ve así y en su herramienta Froont da la opción de empezar por una u otra. No cree que exista mucha diferencia entre usar una u otra.
9. Vectores versus Bitmaps
No necesita demasiada explicación, siempre será mejor a no ser que hablemos de fotografías elementos vectoriales.
28 de noviembre de 2014