.

28 de septiembre de 2014

Plantilla Camly para Blogger, responsive y con pestaña desplegable

Escrito por

La plantilla Camly para Blogger de Chandeep J., es un template con una estructura sencilla y que tiene un diseño responsive  con transiciones suaves, que hacen que tu blog se vea bien en todo tipo de pantallas. Su estructura es la clásica de 2 columnas, a la izquierda el cuerpo principal con los artículos y a la derecha una sidebar con los diferentes gadgets que quieras insertar. Su particularidad es que debajo del menú principal aparece una pestaña con el símbolo +, que es un desplegable. Cuando aprietes sobre la cruz blanca, se abre una sección con contenido que estaba oculto.

Negro, blanco y verde son los tres colores principales del diseño, aunque si aprendes un poco de CSS podrás modificar-los por aquellos que más te gusten. Esta sencillez, junto con algunos ajustes que se han realizado para mejorar el SEO de la plantilla harán que sea un tema interesante para empezar un nuevo proyecto. Además de facilitarte los enlaces para que te descargues Hola Responsive Template, vamos a analizar su usabilidad y diseño.

Ver demo de la plantilla Camly para Blogger.

Descarga la plantilla en la página del autor.

Análisis de la Plantilla Camly

Diseño y programación

  • Codificación. HTML5, aunque usa sobretodo la etiqueta <div>.
  • Verificación W3C. Bien, pero tiene algunos errores que se repiten. Al hacer la validación de la demo da 18 errores y 11 avisos, estos últimos por propiedades de HTML que están "obsoletas" y que deberían estar codificadas en la parte del CSS.
  • Reset. Sí.
  • Código bien estructurado. Sí.
  • Responsive design. Sí. El diseño se adapta bien a las tabletas y teléfonos móviles, 
  • Variable definitions. No tiene. Eso significa que tu blog cargará más rápido, pero los cambios que quieras hacer en la plantilla tendrás que hacerlos a mano, picando código. No puedes por ejemplo cambiar la amplitud de la columna desde el editor de plantillas.
  • Widgets personalizados. El de afiliación, que aparece dos veces.
  • Estilos titulares personalizados. Sí, de <h1> a <h6>, se pueden cambiar desde la plantilla con facilidad si se desea.
  • Idioma. En inglés, hay que personalizar los textos a mano.

Estructura y Widgets

  • Sidebar. Tiene una barra lateral a la derecha, blanca pero con gadgets oscuros. Las letras son blancas para que destaque el texto sobre el fondo.
  • Pie de página. Sencillo.
  • Entradas resumidas. Sí, automáticas con un número de palabras y con una imagen cuadrada grande que se sitúa a la izquierda.
  • Menú. Tiene de un único menú, sencillo, no desplegable.
  • Paginación. Sí, sencilla y funciona bien.
  • Marcadores sociales: Sí. Tiene iconos sociales redondos en la barra lateral, son negros y no destacan casi, pero se podrían cambiar por otros iconos si se quiere personalizar el aspecto.
  • Buscador. No.
  • Afiliación: Sí, por feed.
  • Widget-multi autor. No.
  • Copyright. Sí, los autores tienen enlace a pie de página y hay que mantenerlo como atribución. Se puede incluir el atributo no-follow si se desea.

Personalización de la plantilla Camly.

  • Cambiar colores.
  • Personalización de los menús. Para que el menú funcione tienes que crear los enlace, cambiando también las palabras del Anchor Text.
  • Eliminar Capitalize de los títulos. Las etiquetas <H1> a <H6> tienen esta característica de CSS que hace que la primera letra de cada palabra sea mayúscula. Si no te gusta borra la propiedad y vuelve a guardar la plantilla.
  • Personalizar el gadget de afiliación. Tienes que cambiar el feed asociado, para que se afilien al blog, mientras no lo cambies está el feed del creador de la plantilla.
  • Personalizar los botones sociales de la parte superior. Lo mismo pero con los botones de Twitter, Facebook o Google Plus.

0 comentarios:

Publicar un comentario en la entrada

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.