Realizado

Modificación a Theme Wordpress (solo expertos)

Publicado em 18 de Outubro de 2015 dias na TI e Programação

Sobre este projeto

Aberto

Buscamos un EXPERTO en Wordpress, PHP y Javascript para modificar un Theme (y algún que otro plugin que complemente el trabajo), que nos entregue en un plazo de 48 horas el proyecto TERMINADO. Debe trabajar las modificaciones directamente en nuestro demo actual. Por favor hacer pruebas a cada variante posible en cada entregable, para minimizar los apuntes a las correcciones que deban realizar.


** Les aviso que soy un cliente exigente y riguroso para aceptar los entregables **

Se trata de un one-page modificable con Visual Composer, aquí el link al demo:
http://gerenciayservicios.com/spartanos/

Está basado en el theme IMAGO, pueden ver el theme original aquí: http://qkthemes-demo.com/wordpress/imago-demo/travel/

Si creen que se requiere instalar el theme nuevamente, pero conservando el progreso actual, decírnoslo y nosotros les pasamos el theme original.

**NOTA: El theme está configurado con Visual Composer, por favor utilizar este plugin para que se mantenga fácil de editar.

Entregables:

01. El theme y sus elementos (los actuales y los que Uds. Propongan como soluciones a nuestros requerimientos) deben ser completamente cross browser y responsives, comprobado en los navegadores Mozilla Firefox, Chrome y Safari; en Desktop, Tablet y teléfonos móviles (todas las resoluciones).
El theme y sus elementos actualmente se adaptan parcialmente a diferentes resoluciones en desktop y teléfonos móviles.

02. Donde dice somos spartanos, misión y visión, en la versión para teléfonos móviles, debe dársele más espacio entre cada ícono y párrafo, actualmente salen como en la imagen 02.png. Deben aplicar un margin-top que satisfaga éste punto.


03. Sección ¿Qué te gusta?: (Versión desktop)
•    Queremos que los 5 íconos de las categorías aparezcan alineados al centro de forma horizontal. ÉStas categorías desplegarán los paquetes de viajes, en imágenes.
*NOTA: El theme trajo un plugin llamado ¨QK About Tabs¨ el cual no cumple nuestro requerimiento. Dejamos al desarrollador que proporcione una solución, ya sea modificando ese plugin o haciendo algo diferente. Las categorías jamás variarán, solo serán esas 5.

•    Al dar clic al ícono de la categoría, las imágenes que pertenecen a dicha categoría deben aparecer como en la imagen de ejemplo 03.png una al lado de la otra, sin espacios entre ellas y deben acomodarse apareciendo centradas (ver imagen 03-a.png). Si son más (dependiendo de la resolución) deben irse corriendo hacia los extremos de la pantalla. Debe ser un carrusel de imágenes que no sea boxed, con flechas de navegación a los extremos.
*Por favor hacer las pruebas necesarias agregando diferentes cantidades de imágenes.
•    Cuando se haga click sobre alguna de las fotos, la misma debe abrirse en un pop-up que contenga la imagen en el mayor tamaño que permita la resolución del navegador que se utilice, dependiendo del tamaño de la imagen original, con una X en la esquina superior derecha para cerrarla y flechas a la derecha e izquierda de la imagen, alineadas al centro, para ver las demás fotos de esa categoría específica. (Ver imagen  03-b.png)


03. Sección ¿Qué te gusta?: (Versión móvil)

•    Los íconos de las categorías deben alinearse en forma vertical uno debajo del otro, tal como aparece en el demo IMAGO (Ver imagen  03-a-movil.png)
•    Al tocar el ícono de una categoría, debe aparecer el carrusel inmediatamente debajo del ícono (ver imagen  03-b-movil.png).
Con flechas de navegación en los costados. También debe poderse mover las imágenes del carrusel de manera táctil en un celular o Tablet.
•    Cuando se toque alguna de las fotos, la misma debe abrirse en un pop-up que contenga la imagen en el mayor tamaño que permita la resolución del navegador que se utilice, dependiendo del tamaño de la imagen original, con una X en la esquina superior derecha para cerrarla y flechas a la derecha e izquierda de la imagen, alineadas al centro, para ver las demás fotos de esa categoría específica. (Ver imagen  03-c-movil.png) *Debe poderse agrandar la foto a manera táctil, moviéndola con los dedos para expandirla.

04. Sección ¡Comparte tu viaje ideal!: (versión desktop)
•    Queremos que debajo del texto que está en gris haya una galería de imagenes, todas cuadradas, tipo grid y full width, una al lado de la otra sin espacios entre ellas (simulando un perfil de instagram). En la primera fila deben desplegarse tantas imágenes como sean necesarias para que se cumpla con el objetivo de que el grid sea full width, con máximo dos filas de imágenes (Ver imagen  04.png).
Si son menos de las imágenes requeridas para que sea full width, entonces que aparezcan centradas y se vayan corriendo hacia los extremos de la pantalla. Para cargar más imágenes colocar un botón de Ver más (esté botón hará que aparezcan más fotos), similar al de la imagen 04-boton.png
•    Cuando se haga click sobre alguna de las fotos, la misma debe abrirse en un pop-up que contenga la imagen en el mayor tamaño que permita la resolución del navegador que se utilice, dependiendo del tamaño de la imagen original, con una X en la esquina superior derecha para cerrarla y flechas a la derecha e izquierda de la imagen, alineadas al centro, para ver las demás fotos. (Ver imagen  03-b.png)

04.
Sección ¡Comparte tu viaje ideal!: (versión móvil)
•    Queremos que debajo del texto que está en gris aparezcan 3 imágenes full width en forma vertical y a partir de ésta debe aparecer un botón de Ver más similar al de la versión desktop… este botón hará que aparezcan 3 fotos más y así sucesivamente.
•    Cuando se toque alguna de las fotos, la misma debe abrirse en un pop-up que contenga la imagen en el mayor tamaño que permita la resolución del navegador que se utilice, dependiendo del tamaño de la imagen original, con una X en la esquina superior derecha para cerrarla y flechas a la derecha e izquierda de la imagen, alineadas al centro, para ver las demás fotos. *Debe poderse agrandar la foto a manera táctil, moviéndola con los dedos para expandirla. (Ver imagen  03-c-movil.png)

05.
Corregir Mapa de Google: debe aparecer arriba del formulario de contacto tanto en versión desktop como móvil. importante no debe tener bordes ni separación con la sección anterior. Debe ser idéntico al del demo IMAGO (Ver imagen 05.png), es decir, además de no tener bordes, que no se mueva al hacer scroll (también aplica para la versión de celular).
Deben hacer pruebas con el zoom del mapa, para que les digamos a qué zoom dejarlo. Ver sección modelo en http://qkthemes-demo.com/wordpress/imago-demo/travel/.

06. Corregir el menú de navegación en la versión móvil (Ver imagen 06.png): los íconos de las redes sociales salen uno encima del otro, deben aparecer correctamente uno debajo del otro. Además, los elementos del menú deben aparecer centrados.

Cuando se de clic a una sección del menú, tengo pensado dos alternativas:
•    Debe colocarse una X en vez de las barritas para que el usuario intuitivamente sepa que debe cerrar el menú (Ver imagen  06-a.png), o
•    El menú debe replegarse instantáneamente cuando se toque una sección. **Preferimos esta última alternativa, de ser posible.

07. ÍConos de la sección Contáctanos (tanto desktop como móvil): Achicar tamaño, deben ser del mismo tamaño que los del demo de IMAGO http://qkthemes-demo.com/wordpress/imago-demo/travel/

08. Añadir script de motor de búsqueda a la sección ¿A dónde quieres viajar hoy?

<script id="widget_app_technocloud" data-textcolor="#ffffff" data-target="technocloud" data-bgcolor="#3e9833" type="text/javascript">
    !function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'http';
        if (!d.getElementById(id)) {
            js = d.createElement(s);
            js.id = id;
            js.async = 1;
            js.src = p + "://static.travelcloud.com.co/static/technocloud/es/flights/js/technocloud_manager.js?" + window.location.host;
            fjs.parentNode.i
nsertBefore(js, fjs);
        }
    }(document, "script", "widget_app_js_technocloud");

            </script>

Categoria TI e Programação
Subcategoria Programação
Isso é um projeto ou uma posição de trabalho? Um projeto
Tenho, atualmente Eu tenho especificações
Disponibilidade requerida Conforme necessário
Experiência nesse tipo de projeto Sim (Eu já gerenciei esse tipo de projeto)
Funções necessárias Desenvolvedor

Prazo de Entrega: 20 de Outubro de 2015

Habilidades necessárias