cuaderno de bitácora

Web estática

Tras estar divagando sobre que plantilla utilizar y viendo algunas muy interesantes (pero desechadas por su código inmantenible), decidí partir de la base que daba la plantilla: The Firm Bootstrap Template cuyo enlace es: http://www.bootstrapzero.com/bootstrap-template/the-firm (íntegra en HTML y CSS).

h

Como toda plantilla gratuita, esta también tenía erorres (se podían ver a simple vista que el carousel no era adaptativo, las imagenes al clickar no funcionaban, descolocado el formulario de contacto…). Lo que no sabía era cuantos y lo que me iba a costar modificarlos para que, sin estropear las bases de la plantilla, incorporar mis detalles que se convertirian en ambiciones (metas a conseguir) como programador :).

Para que el carousel fuese adaptativo (Simplemente poner la etiquita style=”width:100%” en cada imagen), modifiqué la barra de navegación para que se quedase fija al bajar y quité el menu desplegable y puse las diferentes secciones. Destacan los errores que daba el código programado en javascript a la hora de hacer scrolling y al pulsar en cada apartado para que te llevase a la sección correspondiente. También incluí un scroll-to-top (quité el que venía dado ya que la animación cambiaba al pasar el cursor sobre él) que sólo se hiciese visible cuando bajases una determinada distancia.

q

También incluí una breve introducción sobre la misión de la clínica, incluí un video con un botón, basandome en el video que incluye la página de crowfunding https://www.indiegogo.com . (Sin poder reutilizar nada de código porque siempre había conflictos con la configuración dada por la plantilla), a través de la página http://www.wifeo.com/code/ donde se pueden encontrar un montón de ideas hechas con CSS, Jquery pude agregar con facilidad el botón:

qweqw76575trte

Destaco los parámetros que puedes modifical al video de youtube añadido para que diese una visión plana (sin botones, tan solo con el de reproducir, para que tuviese una estética pura como el de la página). Posteriormente incluí otra sección donde presentaría a la plantilla de la clínica:gfdgdf

La siguiente sección era la de Tratamientos. Buscaba algo dinámico donde el usuaio tuviese que interactuar para que la página no fuese tan solo “bajar”. De las candidatas a posibles plantillas topé con Bootstrap Worthy cuyo enlace: http://htmlcoder.me/preview/worthy/v.1.0/ .

dasd

La cual adapté para que las imagenes que no funcionaban al abrirse, pudiesen ser funcionales y me permitiese dar lugar a la sección: Tratamientos.

grf dasdas gfdas

La única parte que pude mantener de la plantilla era la sección de Localización donde se presenta el mapa de google maps (aunque con pequeñas modificaciones).

En la sección de Contacto, se corrige la posición del formulario que estaba desencuadrada para que fuera paralela a la de los datos de dirección, teléfono… Se modifican todos los parámetros que ha de ser obligatorios, dejando la lógica para la entrega final.

Por último se modifican los iconos de las redes sociales con la posibilidad de hacer click abriendose en otra pestaña (con la propiedad target=”_blank”).

gr tr

Tras modificar todo, tenemos un aspecto renovado de la plantilla, cuyo resultado se puede ver en: http://www.ribadeodental.com

Anuncios