Resumen ejecutivo
se requiere el desarrollo de una barra de navegación horizontal 3d responsive para sitio web de mi empresa, usando las siguientes tecnologías: html5, css3 y jquery.
(Ver adjunto e imágenes al final del documento)
eleccion del candidato (fecha)
miércoles 24 de julio de 2013.
ALCANCE Y aspectos funcionales
-la barra de navegación (típicamente los tags <ul> <li>) deberá permitir multi-nivel.
-No se permiten divs (<div>) en reemplazo de los clásicos <ul> <li>. Aunque si podrán existir divs contenidos dentro de ul's li's, así como también span y obviamente anchors.
-La barra debe ser responsive viewport meta, es decir debe adaptarse a la resolución de la pantalla y según la plataforma (escritorio PC o smartphone), se podrá usar twitter bootstrap o similar, pero el mismo debe estar customizado (
http://twitter.github.io/bootstrap/customize.html), únicamente a las clases usadas y siguiendo los criterios de los puntos que siguen a continuación.
-Debe ser animada, con una de las siguientes opciones: fade out/fadein, slide down/top u otro a evaluar.
-Deberá ser 3D (deseable con sombras) siguiendo criterios en imágenes adjuntas.
-En pantalla mayor a 700px se debe mostrar el menú (<ul> <li>) horizontal y completo, en pantalla menor a 700px deberá mostrarse minimizada. Obviamente manteniendo y mostrando al usuario todos sus elementos, siguiendo criterios en imágenes adjuntas.
-La adaptación responsive, según la resolución, etc, deberá mantener la misma barra de navegación, no se aceptará un menú diferente para cada aspecto, sino que el menú <ul> <li> deberá ser el mismo en ambos casos (tanto para pc como para móvil). No vale ocultar uno para mostrar el otro.
-Los estilos deberán estar separados de la siguiente forma: 1)
custom-nav-layout.css 2)
custom-nav-design.css 3)
custom-nav-animation.css (deseable). En cada hoja de estilo (CSS) se manejarán los aspectos dados en el nombre del archivo (
custom-nav-layout.css - contendrá la disposición, posición y tamaños de la barra y sus elementos;
custom-nav-design.css - contendrá colores y/o imágenes de fondo;
custom-nav-animation.css - animaciones, transiciones o transformaciones éste último es un deseable, su alternativa debería ser dada por un script .js únicamente usando jquery como framework javascript, no se permite mootool ni ningún otro framework javascript).
-No es necesario que la barra permita varios temas o skins, solo se necesita 1 skin o tema.
-Debera ser funcional y exactamente igual en navegadores IE9, IE10, Chrome, Firefox, Opera, Android, Blackberry, IPhone y Windows Phone.
- Para navegadores IE6, IE7 e IE8 todos los aspectos de layout y diseño también deben de estar 100% funcionales e iguales, permitiendo únicamente diferencias en aspectos de animación pudiendo éstos estar ausentes solo en lo mencionados en este punto (IE6 al IE8) (Se permiten hojas de estilo separadas para cada unos de éstos).
-No se deberá usar JQuery ni Javascript para manejar aspectos del Layout del sitio, es decir ni posiciones, tamaños o disposición, ni tampoco aspectos como colores o imágenes. Se permite Jquery únicamente para animaciones.
-En caso de des-habilitación de Javascript en el navegador del usuario, la barra de navegación debe continuar mostrándose IGUAL y ser funcional 100%. Lo único que debe dejar de funcionar es su animación.
-Iconizer es un deseable, tal como se adjunta en la imagen.
-Finalmente la barra de navegación deberá ser validada sin errores en los servicios de validación del World Wide Web Consortium (W3C) markup, css y mobileOK, es decir:
http://validator.w3.org/,
http://jigsaw.w3.org/css-validator/,
http://validator.w3.org/mobile/ cualquier error dado por el consorcio invalida la aceptación del proyecto.
-Cualquier incumplimiento de algún punto invalida la aceptación del proyecto.
Muchas Gracias
Plazo de Entrega: No definido