Probando tecnologías para la web
Barra de navegación sticky y responsive
Quería tener una barra de navegación bajo un banner, pero que al hacer scroll ésta se pegara al borde superior del navegador. Eso se llama "stickness". Haz scroll para comprobarlo. ¿Ves cómo se queda anclada arriba? Si haces scroll hacia arriba vuelve a aparecer el banner.
Por mucho que me pese, es obvio que a día de hoy la gente accede a internet de muchas formas. Y el smartphone ocupa cada vez más cuota. Por ello, había que hacer una barra de navegación que se adaptara a los dispositivos móviles. Esto se llama "responsiveness". Encoge la ventana (o entra desde el móvil) para ver cómo la barra se pliega en una persiana, accesible desde el botón Menú .
Y ya el colmo es que tanto el stickness como el responsiveness son complementarios. Compruébalo ;)
Las modal images
Habiendo ya superado con éxito el problema de la barra de navegación, ahora toca el turno a las "modal images". Aquí el resultado final (click en cada imagen). He conseguido hacerlo paramétrico por así decir, lo que significa que no depende del número de imágenes que haya. Movidas de JavaScript...
Mi objetivo era que al hacer hover en cada imagen, se aclararan para resaltarlas, pero al usar opacity había problemas de z-index con la barra de navegación. Así que he usado un border-color, que cumple la misma función sin problemas... aunque quizá quede un poco outdated.
Reproductor de sonido
Se me ha ocurrido que sería interesante incluir en alguna de las secciones de la web un reproductor de sonido. Me imagino por ejemplo leer el tutorial de ScummVM escuchando la música de The secret of Monkey Island... ¡Así que al lío!
La verdad es que es una etiqueta <audio> de html5 sin más... Otra movida sería hacer una lista de reproducción (¿quizá con javascript podría cambiar de manera fácil la fuente de la etiqueta <audio>?). También sería interesante ocultar la interfaz de control del navegador para crear una propia con css, y usar javascript para controlar la reproducción/pausa/volumen. Odio que se cargue con el volumen al máximo...
Aquí también hay problemas de z-index, aunque sólo en Chrome, lo cual me lleva una vez más a pensar en hacer una interfaz de reproducción propia.
Reproductor de vídeo
Por el mismo motivo que el sonido, quizá para algún tutorial pueda colocar un vídeo sin depender de youtube, lo cual estaría muy bien. Me imagino que tiene las mismas pesquisas que el de audio (controles personalizados, listas, problemas de z-index, etc).
Contenido irrelevante para poder hacer scroll...
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.