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

Desde palaciodeverano.es, se puede acceder a más plantillas html5, css3 y javascript (y el php para el funcionamiento del formulario de contacto), basadas en ensamblajes de códigos de varios autores.

Hay muchas webs de donde poder obtener código libre, listo para reutilizar en nuestros proyectos personales con unos mínimos ajustes sin tener que montarlos desde cero. Mis favoritas son las ya mencionadas por aquí:

¡Nos vemos en el próximo trabajo!

Menu