Otros clientes
Portada. Se hace uso de los plugins fitText y textualizer para crear el efecto con el texto
|
Descripición de la actividad en redes sociales. Se hace uso del plugin colorBox para mostrar la información de Facebook.
|
Descripción de Mercè. Tres párrafos y una imagen.
|
Slider de mapas de localización usando la API de Google Maps. No son mapas incrustados.
|
Descripción simple de la disponibilidad. Utiliza los tooltips proporcionados por el plugin qTip2.
|
Un formulario de contacto que envia un correo electrónico… ¡Lo nunca visto!
|
[Nota] La web ha sido actualizada desde que se realizaron las capturas que hay colgadas aquí. Visita Mercè Perelló para ver el resultado actual.
La página de Mercè Perelló es un proyecto especial en Human Bits, ya que no lleva un Drupal. ¡Lo siento! Esto ha sido un complejo, ya que no soy un desarrollador Frontend … Pero forma parte de mi propósito de expandir mis horizontes :-)
Este proyecto es más bien un desarrollo personal. És la página web de la consulta de fisioterapia de Mercè Perelló.
La solución por la que he optado ha sido utilizar HTML5 Boilerplate como plantilla de partida. Esto ha solucionado muchos aspectos y ha permitido avanzar rápidamente con el desarrollo.
Para este proyecto se han usado los siguientes plugins o librerías:
- FitText.js 1.0. Para cabeceras gigantes que se adaptan al tamaño de la pantalla.
- qTip2. Proporciona un sistema robusto y configurable de mostrar tooltips.
- jQuery Easing v1.3. Da la posibilidad de elegir entre muchos efectos de easing. La he recortado para quedarme sólo con los que me interesaban (al final me he decidido por
easeInOutExpo). - ColorBox v1.3.19. Es un plugin para cargar contenido en marcos flotantes.
- jQuery Scrolling Parallax v0.1. Permite crear el efecto parallax al hacer scroll sobre la página. Lo que hace es hacer que la imagen que eliges hace scroll a una velocidad diferente que el fondo.
- SlideDeck. Es un plugin para realizar pases de diapositivas muy interesantes.
- PHPMailer. Es una librería PHP. Permite enviar correos electrónicos usando tus datos SMTP. En este caso lo he configurado para que utilice la dirección de GMail de Mercè.
La idea de realizar una página de scroll en vez de diversos documentos HTML enlazados surge por la simplicidad que conlleva tener un solo documento y el atractivo que da la navegación por scroll. Además hay algún soporte responsive para dispositivos de pantalla estrecha.
Aviso: Esta web hace uso de CSS3 y de etiquetas HTML5. Si no tienes un navegador "moderno" no puedes ver una página "moderna".
Intentaré ir comentando en el blog las impresiones de cada uno de los aspectos que más me han llamado la atención durante este desarrollo.