Descarga esta plantilla si la quieres

article image

Template Free Responsive en Html5 de Recordis Web

Está hecha gracias a varios ensamblajes de recursos publicados en Codyhouse, Tympanus/codrops y Codepen.

El menú "hamburguesa" con efecto desplegable circular cuando se pulsa en él es de Codyhouse. Desde el enlace remarcado en este párrafo se puede descargar y ver su demo.

Como pantalla principal, he colocado un mapamundi que he descargado mediante una búsqueda en google images, y sobre él, el título de la Web (o marca de empresa), con un espectacular efecto hover que he podido hacer gracias a Tympanus/codrops. Para quién no se haya dado cuenta del efecto, que pruebe a pasar el ratón por las letras para ver que pasa. En un móvil también funciona, aunque se debe pulsar con el dedo sobre el área de las letras.

Esta sección por la que estás navegando, otra vez la he encontrado en Codyhouse, se llama Reading Progress Indicator, porque indica en los círculos del submenú de la derecha, cuánto se va avanzando en la lectura del texto de cada uno de los apartados de los que se compone. Para saber como customizarlo pasa al siguiente apartado:

article image

Cómo customizar esta sección

Al descargar la plantilla de "Reading Progress Indicator" de Codyhouse, y tras descomprimir el archivo rar, nos daremos cuenta de que, entre otros arhivos de otro tipo, contiene 4 archivos html:

Un index.html y otros 3 archivos html que se titulan como cada uno de los "h1" de sus apartados, exceptuando el primero.

Todo estos archivos contienen exactamente lo mismo: todo el texto (títulos y párrafos) de los 4 apartados (ó 3 ó 5 si disminuímos o aumentamos éstos).

Así que una vez que acabemos de redactar los apartados del index.html, en la sección "aside", que es la que contiene el "submenú" que aparece a la derecha de este texto, con los "círculos de progreso de lectura", linkearemos a los otros 3 documentos (el primero, es el index.html). Por ejemplo, llamando al segundo docu2.html, al tercero docu3.html y al cuarto docu4.html, pues no tiene porqué coincidir su nombre con el título del apartado de que se trate.

Y guardaremos ese index.html, como docu2.html, docu3.html y docu4.html (o tal como hayamos denominado en la sección "aside" los links de los diferentes apartados).

Por último, para evitar el contenido duplicado, cuatruplicado en mi caso, en el archivo robots.txt es importante que se indique un "Disallow" a los docu2.html, docu3.html y docu4.html (o como los hayamos llamado).

article image

Qué más hay por aquí

Pues tenemos una galería de trabajos en "grid", que he incorporado gracias, de nuevo, a tympanus/codrops: la "Google Grid Gallery", con un precioso efecto tridimensional cuando se pulsa en una imagen y se pone en modo carrusel.

Unas "tablas de precios", que he encontrado en Codepen: Prices Tables, diseñadas por un tal Bradley Treweek.

Unos coloridos y originales "submenús en acordeón", también hallados en Codepen: Pure CSS Accordion, de Raúl Barrera.

Como en Codepen hay de todo, también he buscado por ahí el formulario de Contacto, y aunque hay cosas "más serias", la gran mayoría no llegan a superar a éste de Geert-Jan Hendriks. Probadlo, porque tiene sorpresas cuando se va rellenando el formulario.

Tengo que advertir que el "Blog" no va incluido en la plantilla, lo he añadido tan sólo para incorporar una sección más, un enlace externo. De todas formas, podríamos suprimir secciones de esta plantilla, si no no son útiles y añadir tantas como nos fueran precisas con unos mínimos retoques, así como también es susceptible de mejorar (puliendo el CSS contradictorio, por ejemplo, reunificando en un sólo archivo las hojas de estilo y las de javascript, etc.).

article image

Otras cosas más

Esta es la segunda plantilla que diseño, o más bien debería decir "ensamblo"; no es perfecta, tampoco lo es la primera, pero milagrosamente tanto ésta como la que he colgado en web.recordis.es/miplantilla tienen un aspecto visual del que estoy muy satisfecha.

No he repetido recursos utilizados en la una para la otra, a fin de que no tuvieran ninguna semejanza, de que fueran totalmente distintas. La imagen que ilustra este último apartado es de "Mi Plantilla", la primera que "liberé". Sobre como está hecha, se puede consultar en mi Blog.

Lo cierto es que a la par que he aprendido, me he divertido mucho encajando piezas para crear las distintas secciones de ambas plantillas. A veces fustra que al intentar insertar el código de una sección nueva "se desencajen" ciertas partes que antes iban perfectamente, pero con unos cuantos retoques se puede lograr encarrilar el diseño o, si aún así no funciona, consultar tutoriales o, finalmente desistir y buscar otra cosa que se adapte mejor o que sea más fácil de adaptar a la base que ya tenemos trabajada.

¡Nos vemos en el próximo trabajo!

Menu