Categoría: Diseño de páginas web

WordPress, el gestor de contenidos más popular.

Logotipo WordpresHace un año que el número de páginas web en el mundo superó los mil millones, y de esa cifra, nada menos que el 25% de sitios web utiliza WordPress. La popularidad de este gestor de contenidos que, como decimos, soporta ya la impresionante cifra de 250 millones de sitios web, se basa en la sencillez de su sistema de administración y la diversidad de extensiones y complementos que permiten personalizarlo en función de las necesidades de cada usuario. A pesar de que hay sectores donde aún se sigue pensando en wordpress como sinónimo de blog, hace mucho que soporta toda clase de páginas web con diseños y esquemas muy alejados del blog tradicional.

Gracias a la simplicidad de administración y a la amplia comunidad de desarrolladores implicados, WordPress lleva años experimentando un paulatino y pronunciado ascenso que le ha convertido en el gestor de contenidos más popular, a mucha distancia de sus competidores. Si del total de sitios web, contabilizamos sólo las páginas que utilizan gestores de contenidos CMS (Content Management Systems) de código abierto, como Joomla, Drupal, Magento, etc, el dominio de wordpress es abrumador: WordPress alcanza el 60% de páginas frente a Jommla, en segunda posición, con cerca del 7% de los CMS. Los defensores de Joomla tienen parte de razón cuando destacan la mayor solidez de este gestor de contenidos, pero las cifras son elocuentes:

Popularidad de los diferentes gestores de contenido de código abierto. Tabla comparativa CMS
 
La disponibilidad de extensiones y complementos para este CMS (más de seis mil quinientos) dobla la oferta disponible para Jommla. Para wordpress podemos encontrar plugins para casi todo (muchos de ellos gratuitos): organizar una web multi-idioma, aumentar la seguridad del sitio, acelerar la velocidad de descarga de las páginas, mejorar el SEO, enlazar con perfiles en redes sociales, por supuesto instalar formularios, sliders, galerías de imágenes y vídeos, generar y almacenar backup, crear calendarios de eventos, etc, etc. Es importante saber también que, para cualquier problema que surja trabajando con wordpress, podremos encontrar información y soluciones, gracias a la documentación y la experiencia que otros usuarios han plasmado en foros y portales de Internet, o en la propia web oficial (en español) de WordPress desde donde se puede descargar el paquete completo y seguir las instrucciones para su instalación.

No obstante, hay que tener en cuenta que, para trabajar con wordpress, existen dos opciones diferenciadas:  wordpress.org  y  wordpress.com

Para proyectos profesionales, con dominio propio y diseños complejos, es recomendable descargar el software desde wordpress.org e instalarlo en un alojamiento (hosting) propio. Esta fórmula nos permite contar con multitud de extensiones y, si es necesario, modificar el código PHP.

Por el contrario, quienes quieran utilizar wordpress en un proyecto personal, sin complicarse más de la cuenta, pueden optar por wordpress.com (para entendernos podemos decir que es parecido a Blogger o Tumblr). En este caso tendrán algunas limitaciones pero obtendrán el hosting gratuito para su página web, aunque si no seleccionan un plan de pago, la dirección del sitio en Internet será un sub-dominio de .wordpress.com, es decir: la URL incluirá .wordpress.com.

De una forma u otra, wordpress se ha consolidado como el gestor de contenidos mejor valorado por millones de usuarios en todo el mundo.

Para quienes estén interesados, recomendamos el curso de DesarrolloWeb.com y EscuelaIT:

Curso Gratuito de Iniciación a WordPress

  1.   Vídeo: Instalar WordPress (Windows + Mac)
  2.   Lenguajes que debes conocer para exprimir WordPress
  3.   Administrar WordPress, gestión de contenido
  4.   Extender WordPress por medio de plugins
  5.   SEO para WordPress
  6.   Primeros pasos para personalizar tu tema en WordPress
  7.   Conocimientos de base para empezar a desarrollar para WordPress
  8.   Por qué merece la pena aprender a crear plantillas WordPress
  9.   Seguridad en WordPress
  10.   Creación de Custom Post Type en WordPress
  11.   Metaboxes en wordpress
  12.   Mostrar los Custom Post Type y sus campos personalizados
  13.   Theme child en WordPress

Fondos gratuitos para diseñar páginas web

No siempre se presta la debida atención a los fondos de un sitio web. Se considera que son elementos que no definen la experiencia de usuario, que a menudo pasan inadvertidos. Sin embargo, el comportamiento de los visitantes no se basa sólo en actitudes racionales y conscientes sino que, mucho más frecuentemente de lo que pensamos, las decisiones obedecen a reflejos emocionales, a estímulos visuales. Los fondos de una pagina web pueden ser una buena herramienta, discreta y eficaz, para generar en el usuario emociones positivas.

No obstante, para obtener fondos rápidos para tu sitio web, o para crear composiciones fotográficas, existen diversos generadores de fondos gratuitos que, usados adecuadamente, pueden resultar útiles:

Waterpipe.js

waterpipe-js

 

Trianglify Generator

Trianglify Generator

 

Geopattern

Geopattern

 

Material Design Background Generator

Material Design Background Generator

 

Unique Gradient Generator

Unique Gradient Generator

Breve lección sobre la teoría del color

Pantone. Coated color bookDefinir el color para un sitio web puede tener sus complicaciones. A menudo, la referencia de color que nos facilita el cliente, se limita al logotipo de la empresa impreso en una tarjeta, o un folleto comercial. También es frecuente que la selección de color se haya decidido mediante un monitor que no está bien equilibrado, que no reproduce los colores con fidelidad, y por tanto la información que recibimos no es la correcta. Es importante entender adecuadamente la teoría y las diferentes fórmulas de color, y elegir el color utilizando sistemas fiables como los que facilita la empresa norteamericana Pantone. Para seleccionar el color en un proyecto que tenga versión online y versión offline, hay que entender las diferencias entre el sistema RGB (Rojo, Verde y Azul) de “proyección” de luz que utilizan los monitores y el CMYK (Cyan, Magenta, Amarillo y Negro) para impresión mediante tintas.
 

Para revisar la teoría del color en poco más de un minuto, recomendamos el vídeo de Rhea Lelina Manglapus, donde brevemente repasa los conceptos fundamentales: colores primarios (amarillo, rojo y azul), secundarios (verde, violeta y naranja) o terciarios; colores fríos y cálidos, saturación y tono de color, etc.

Breve lección sobre la teoría del color

A Brief Lesson on Color Theory from Rhea Lelina Manglapus on Vimeo.

 

Por otro lado, para seleccionar los colores con precisión creatofilia.org (Recursos / Paletas) nos facilita, entre otros recursos online (gratuitos), la paleta de colores sólidos que Pantone popularizó en los años 70 del pasado siglo, en concreto la colección Coated color book (colores para imprimir sobre papel recubierto, estucado), y en el futuro pretende añadir también los uncoated color book.
Para acceder al catálogo es suficiente con registrarse.

Muestrario de colores pantone

Información del color pantone 633C

Ya está aquí el nuevo algoritmo de Google

Logotipo de GoogleLa nueva versión del algoritmo de Google: Amigable con dispositivos móviles, entra en acción ya, y va a suponer un cambio en los resultados de búsqueda y el posicionamiento para multitud de páginas web. Un cambio mayor que el que supuso, en su momento, Google Panda o Google Penguin.

Las páginas web que no hayan desarrollado una versión para móvil, o que no utilicen un diseño responsive, capaz de adaptarse a los monitores de los diferentes dispositivos móviles, como ya ha avisado Google desde hace tiempo, van a sufrir una significativa pérdida de tráfico, una importante caída del número de visitas.

Las características del nuevo algoritmo no deberían sorprender a nadie que siga las políticas de la empresa norteamericana. En el año 2012 señalamos, en el articulo El diseño de páginas web responsive facilitará el posicionamiento en Google, la apuesta del Buscador para premiar el posicionamiento de los sitios web que utilizaban Responsive Web Design, dado el importante aumento del uso de estos dispositivos en los accesos a Internet. Hoy el 80% de los teléfonos móviles tienen acceso a la Red.

Diseño responsive amigable con dispositivos móviles
Se considera que, según la terminología de Google, una página web es amigable con dispositivos móviles cuando es capaz de adaptar su estructura y resolución a éstos dispositivos. Para que nos entendamos, cuando los usuarios de tablets o smartphones pueden leer los textos sin necesidad de ampliar sucesivamente, y cuando las entradas de los menús están bien diseñadas y son operativas en las pequeñas pantallas táctiles. En todo caso, es fácil comprobarlo utilizando las herramientas de Google Developers: Prueba de optimización para móviles. Sólo hay que introducir la dirección de nuestro sitio y esperar el resultado.

Pantalla de Google Developers, con Prueba de optimización para móviles

De momento no hay medias tintas, el Buscador va a diferenciar sólo entre páginas web que son responsive y sitios que no lo son, sin calificar inicialmente variables relativas a la experiencia de usuario o la calidad de la respuesta de cada sitio en los móviles.

A partir de hoy, y dependiendo de los días que dure el proceso de implantación del nuevo algoritmo, ya no se tratará de premiar el posicionamiento de las páginas web responsive, sino que Google va a puntuar el mobile-friendly  y a penalizar aquellas web que no se hayan adaptado.

Imágenes GIF con “tres dimensiones”

Efectos visuales que provocan la sensación de las tres dimensiones.

Las imágenes GIF con movimiento son un clásico en Internet: Desde los tradicionales emoticones animados, al diseño de logotipos con efectos de movimiento para la web. Sin embargo, ahora lo ultimo en GIFs animados son los que los anglosajones han denominado SplitDepthGifs, algo así como GIFs divididos y con sensación 3D, con profundidad.

Imagen GIF: La caja

Cuando hay talento, utilizando esta técnica los dibujantes y diseñadores pueden obtener resultados brillantes que, sin duda, captan la atención. Pero el problema de estas animaciones, si se ejecutan indefinidamente, es el mismo de las animaciones clásicas: Una vez captada la atención del usuario pueden terminar exasperando al más templado. Por eso, si utiliza animaciones de este tipo, nuestra recomendación es que no se ejecuten indefinidamente.

Hemos puesto dos ejemplos muy diferentes: En el primer caso (La habitación) el efecto 3D se consigue utilizando dos imágenes superpuestas con ligeras variaciones, como las que transmite el ojo izquierdo y el derecho cuando contemplamos un objeto.

imágenes GIF: La foca besucona

El segundo ejemplo (La foca) es un SplitDepthGifs. Al “traspasar” las barras verticales, características de las viñetas, la imagen tomada con gran angular aumenta el efecto tridimensional.