El sitio de Kenobi-LJN

Yeah! Aquí estamos

Esta web es un espacio personal, un lugar donde poder expresar algunas ideas, conceptos, etc. También es un intento de recopilar todos los temas de los que he hablado alguna vez en otros medios: cohetes de agua, aeronáutica, pedales de guitarra, arcades, juegos retro, geocaching, etc etc. Es un proyecto bastante mastodóntico, por lo que me lo tomo con filosofía. Al fin y al cabo, el objetivo primordial es el de aprender y divertirme haciéndolo.

Puede que lo que aquí se cuente no te interese lo más mínimo. O puede que encuentres útil alguno de los temas, tutoriales o ayudas que iré escribiendo. Si es así, me alegro mucho: al fin y al cabo, creo en la filosofía del software libre, y eso se aplica también al conocimiento. En cualquier caso, es un lugar personal y sin ningún tipo de ánimo de lucro.

La web está escrita en PHP7 + HTML5 + CSS3 + JavaScript + MySQL, corriendo sobre un servidor apache. El código está escrito a mano en texto, basado en los tutoriales de w3schools y modificado según requisitos personales. De momento, los enlaces a páginas sin escribir estarán tachados.

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.

<p>Kenobi Effects DISTORTION: Vista general</p> <p>Kenobi Effects DISTORTION: Detalle de la toma de corriente</p> <p>Kenobi Effects DISTORTION: Detalle de la base</p>

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.