.

3 de agosto de 2014

Twenty Fourteen de Wordpress, la plantilla del 2014

Escrito por
Si antes de que llegue el 2015 creas un nuevo blog en Wordpress.org por defecto empezarás con la plantilla Twenty Fourteen. Tiene tres columnas, la posibilidad de incluir imágenes especiales para el resumen de las entradas, un carrusel o slider de contenidos especiales en la parte superior y otras opciones que te permiten crear un blog interesante con estilo de revista. El diseño de la plantilla Twenty Fourteen para Wordpress es minimalista, está basado en figuras de corte rectangular y en el contraste del blanco y el negro.


Como todas las plantillas de Wordpress, tienes sus limitaciones, pero es un diseño moderno que esta siendo bastante utilizado. Además, como Twenty Fourteen es la plantilla por defecto del 2014 ya han salido varios artículos (la mayoría en inglés) explicándote como puedes personalizar su diseño. Por ello en el post de hoy además de la ficha técnica, te muestro algunos ejemplos, de sitios Webs que lo están empleando, y son ejemplos reales de lo que puedes llegar a hacer.

Por si acaso alguien no conoce Twenty Fourteen aquí tienes la demo de la plantilla, que te permite ver sus características avanzadas y especiales. Puedes descargar la plantilla en esta página de Wordpress.org, aunque si empiezas un nuevo blog te aparecerá instalada por defecto.

Análisis de la Plantilla Twenty Fourteen de Wordpress


Diseño y programación

  • Codificación. HTML5.
  • Verificación W3C. Excelente, el único error que me da es el exceso de H1 en la página principal, ya que marca los títulos de cada una de las entradas como H1. Esto seguro que se puede remediar.
  • Reset. Sí.
  • Código bien estructurado. Sí.
  • Responsive design. Sí. Se adapta bien a diferentes tipos de dispositivos y pantallas.
  • Gadgets personalizados. Sí. Tiene un buscador en la parte superior derecha, y está preparada para que tenga una sección de artículos seleccionados en la parte superior.
  • Estilos titulares personalizados. Sí, con letras mayúsculas anchas y finas.
  • Otros estilos. Sí, tiene estilos especiales para las citas, que aparecen como si fueran anotaciones a la izquierda y derecha. Un aspecto interesante para una revista online.
  • Multiautor. Sí, es un tema diseñado para revistas. Tiene incluso una página especial en la que se incluyen todos los autores de la publicación.
  • Idioma. Está en español, no tendrás que personalizar los textos.


Estructura y Widgets

  • Cabecera. Personalizada, usa imágenes de 1038x192 píxeles.
  • Sidebar. Tiene 2 barras laterales si se ve a pantalla completa en un ordenador. La barra izquierda es negra, igual que la cabecera. Es la primera que desaparece del diseño al reducir la pantalla. La barra de la derecha es blanca, igual que la barra central de posts.
  • Menú. Tiene dos menús, que pueden ser desplegables o no, algo que puedes hacer fácilmente desde el editor de Wordpress. En la cabecera uno que se ilumina cuando pasas con el ratón por encima, y puedes insertar otro menú en la barra lateral. 
  • Pie de página. Con varias columnas.
  • Páginas especiales. Sí. Tiene dos tipos, una de cuerpo entero y otra para añadir los autores del blog o la revista.
  • Entradas resumidas. Sí, se crean de forma manual, de forma que tu eliges donde se corta el texto. Los resúmenes incluyen una imagen especial (que no tiene porque estar en el texto) que se muestra en gran formato. El tamaño perfecto para estas imágenes es de 672x372 píxeles.
  • Post especiales. Sí. Incluye un formato especial para galerías de imágenes, también otras entradas especiales de imágenes, citas, enlaces, ideal para microblogging.
  • Paginación. Sí, sencilla y funciona bien.
  • Marcadores sociales: No. No lleva por defecto iconos sobre las redes sociales. Lo que sí tiene es un área para enlaces a redes sociales, situada en la parte superior de la cabecera (Twitter, Facebook, Pinterest, Google+, LinkedIn, Flickr, GitHub, Dribbble, YouTube y Vimeo).
  • Buscador. Sí.
  • Afiliación: No lo lleva instalado.
  • Copyright. Sí, los autores tienen enlace a pie de página y hay que mantenerlo como atribución.

8 blogs y sitios Web creados con Twenty Fourteen

Más de mil personas se descargan cada día esta plantilla y empiezan a utilizarla, así que los ejemplos que vamos a ver seguro que no son los mejores, pero te servirán para hacerte una idea de como usando la plantilla puedes llegar a conseguir diferentes resultados.
  1. Democratas por la justicia. Un blog en español de una asociación por la defensa de la justicia, contra la corrupción en España.
  2. Sur un son rap de hypotheses.org. Revista que tiene varios autores, que aparecen citados en la parte inferior de cada artículo de forma automatizada.
  3. A Pretty Penny. Un blog de moda en inglés. Es curioso ver como se ha eliminado el negro de la cabecera, el pie y la barra lateral izquierda, creando una plantilla más luminosa.
  4. Roadporvides. Un blog de viajes realizado en Wordpress, con la plantilla de partida del 2014. 
  5. Coyopa. En este blog puedes ver lo que sucede si insertas imágenes para los resúmenes de las imágenes, no son suficientemente grandes.
  6. Edjelley. Otro blog con un diseño luminoso, en el que el negro ha sido cambiado por un gris suave. También nos muestra como quedaría el blog si no usamos la opción de "leer mas" para mostrar sólo un fragmento de las entradas en la portada.
  7. Dailyslicemag. El sitio Web de esta banda de música, es un buen ejemplo de como emplear Twenty Fourteen para tu proyecto.
  8. Oscar en fotos. Un blog de fotografía en la que puedes ver como son las entradas de galerías de imágenes.

    1 comentario:

    1. ¿Por qué en los temás por defecto de wordpress como este la etiqueta h1 viene por defecto en todos los titulos de los post? No creo que sea un error porque lo hacen al menos desde la twenty eleven. Denormal se recomienda una por pagina

      ResponderEliminar

    Bienvenido, en este blog encontrarás información para crear y personalizar tu blog de Blogger o Wordpress, además de artículos sobre Internet, las nuevas tecnologías, programación con HTML y CSS, educación y otros temas. Espero que los tutoriales, artículos y recursos del blog te resulten útiles. Si quieres mantener el contacto puedes hacerlo a través de mis cuentas de Twitter o Google Plus.