Hoy veremos cómo agregar la navegación por teclado a un sitio web usando unas pocas líneas simples de JavaScript. Primero, crearemos un tema de sitio simple en Photoshop y luego lo transformaremos en un sitio web que funcione y que use las funciones del teclado para cambiar de página.
Aquí hay una captura de pantalla de lo que estaremos construyendo. Haga clic en la imagen para ver el ejemplo en vivo:
Trabajo de photoshop
Para comenzar, abra Photoshop y cree un nuevo documento de 800px por 600px a 72dpi.
Gradiente radial
Luego, tome la herramienta de degradado y estire un degradado radial sobre el fondo. El color de primer plano debe establecerse en # 343636 y el color de fondo en # 121414. Asegúrate de que el color más claro no llegue a los bordes del documento o obtendrás un borde duro cuando lo coloquemos en nuestro CSS.
Tipo
Ahora agarra la herramienta de tipo y elige una fuente. Elegí Helvetica Neue. Escriba algún texto para su página de inicio como el de arriba, luego copie esa capa y cambie el tipo para leer "Acerca de mí". Repita ese paso para? Mi cartera,? y? contactame.?
Sombra interior
Ahora coloque una sombra interior en todas las capas de texto que acaba de crear con la configuración anterior. Puede aplicar el efecto a una capa, luego haga clic derecho y vaya a "copiar estilo de capa". luego haga clic derecho en las otras capas y pegue el estilo de capa.
Tecla de navegación
Ahora cree una tecla para instruir a los usuarios sobre cómo usar la función de navegación del teclado. Usando la misma fuente, escriba el texto en azul y aplique un brillo exterior para darle un efecto radiante y agradable. Mira las capturas de pantalla de arriba para la configuración específica. Asegúrese de dejar algo de espacio entre paréntesis para las flechas en el siguiente paso.
Flechas
Coge la herramienta de forma personalizada (que se encuentra debajo del menú desplegable de la herramienta de rectángulo) y selecciona una flecha como tu forma. Dibuje cuatro flechas (arriba, abajo, izquierda y derecha) y aplique el mismo color y brillo exterior que el tipo. Ahora coloca las flechas en los paréntesis del paso anterior.
Guarda las cuatro versiones
Ahora ve a? Guardar para web y dispositivos? en el menú de archivo. Guarde cada versión (Inicio, Acerca de, etc.) como un jpg en una carpeta llamada "imágenes". Ahora que hemos terminado en Photoshop, cierre eso y muévase a su editor de texto o suite de desarrollo web favorito. Yo uso la fantástica aplicación de Mac Espresso.
El HTML
Cree un archivo index.html en el mismo directorio que la carpeta de imágenes que creó anteriormente. Agregue una estructura HTML básica que enlace a un archivo CSS y JavaScript.
Agregar un menú de navegación
No queremos que nuestro sitio se ejecute únicamente en la navegación por teclado, por lo que agregaremos un menú de navegación visual como el método principal para desplazarnos. Para ello crearemos un? Nav? div dentro de un contenedor? div en la parte del cuerpo de nuestro HTML. Dentro de la división de navegación, coloque una lista desordenada de enlaces como a continuación.
Crear las otras páginas
Como dije antes, queremos mantener el HTML en este tutorial simple, así que nos detendremos allí para la página de inicio. Duplique este código en tres archivos html más: about.html, portfolio.html y contact.html. En cada uno de estos archivos, cambie solo el nombre del contenedor div. En el archivo about, cámbielo por? AboutContainer. Seguir el juego con? PortfolioContainer? y? contactContainer? en los otros dos.
Añadiendo el CSS
Ahora debería tener cuatro páginas web esencialmente en blanco que contienen solo una lista de enlaces sin estilo. Cree un archivo style.css y comience con el siguiente estilo básico.
Aquí esencialmente hemos establecido un color de fondo (que coincide con el color de fondo de nuestro PSD) y hemos establecido la familia de fuentes para que sea una Helvética bonita y delgada. Margin auto asegurará que nuestro contenido se mantenga centrado.
Añadiendo las imágenes de fondo
Aquí es donde todo empieza a verse bien. Diseñe cada uno de los cuatro divs de contenedor para tener los cuatro fondos que configuramos en Photoshop.
En este punto, sus páginas deben tomar forma y verse como la imagen a continuación:
Estilo del menú de navegación
Una última parte de CSS terminará el menú de navegación.
Como puede ver, he aplicado algo de relleno en la división de navegación principal y he eliminado cualquier decoración de texto del texto del enlace. Luego establezco el color del texto en blanco y agregué un efecto de desplazamiento que coincide con el color del texto azul en la tecla de navegación? al final de la página. Finalmente, he agregado en pocas líneas para apuntar específicamente a los elementos de la lista y distribuirlos un poco.
Si has seguido, tu página debe coincidir con la siguiente captura de pantalla:
JavaScript
¡Ahora debería tener un sitio básico de cuatro páginas en funcionamiento! Los enlaces en el menú de navegación deberían permitirle cambiar entre páginas con relativa facilidad.Ahora entraremos en el corazón del proyecto: añadiendo navegación con el teclado. En realidad, es un proceso bastante sencillo y solo debería llevarle unos minutos a lo sumo. Nuestro JavaScript se inspirará en este tutorial pero se tomará en una dirección diferente.
Configuración de la secuencia de comandos
Cree un archivo script.js e inserte el siguiente código:
Como puede ver, este código es bastante breve y muy básico. Esencialmente, le decimos a JavaScript que ejecute la función? KeyCheck? cuando el usuario presiona una tecla La función KeyCheck se vincula a la variable? KeyID.? Esto observará lo que presiona un usuario y establecerá el valor en KeyID. Ahora agregaremos una línea de código que le diga qué hacer si el ID de clave coincide con ciertos criterios.
Este código es un poco confuso. Como se indica en nuestra tecla de navegación, queremos programar los números 1-4 y las teclas de flecha para saltar a páginas específicas. Aquí hemos configurado un caso que dice: si el código? 49? se devuelve, cambie a la página index.html (a través de window.location). Probablemente haya notado que el código 49 no es una forma intuitiva de referirse a presionar el número uno. Para descubrir los códigos clave para una clave determinada, vaya a esta página y desplácese hasta la sección 3.3. Vemos que los números 0-9 son referidos por los códigos 48-57. Desplácese hacia abajo y vea que los códigos de las teclas de flecha son los siguientes: 37 (flecha izquierda), 38 (flecha arriba), 39 (flecha derecha), 40 (flecha abajo). Utilizando este conjunto de códigos como guía, podemos programar cada pulsación de tecla para que corresponda a una página.
¡Aleta!
¡Eso es todo al respecto! Ahora debería poder navegar por su sitio usando solo las flechas y las teclas numéricas como en el ejemplo de apertura. Use los comentarios a continuación para informarnos si cree que es una buena idea y si agregará o no navegación por el teclado a su sitio. Definitivamente hay más de una forma de hacerlo, así que también háganos saber cualquier idea que tenga sobre un método alternativo para implementar los métodos abreviados de teclado.