Share
En este tutorial, veremos cómo podemos crear fácilmente un visor de contenido atractivo y que ahorra espacio que incluso funciona con JavaScript desactivado. Construiremos un núcleo sólido de HTML semántico, diseñado con algunos CSS básicos y luego usaremos jQuery para agregar mejoras adicionales en forma de animaciones de transición..
La siguiente captura de pantalla muestra lo que terminaremos al final del tutorial:
Primero, creemos la página HTML subyacente para nuestro visor de contenido; en un nuevo archivo en su editor de texto cree la siguiente página:
Visor de contenido a prueba de balas
- Panel 1
- Panel 2
- Panel 3
- Panel 4
- Panel 5
Supernova 1994D, visible como el punto brillante en la parte inferior izquierda, ocurrió en las afueras de la galaxia del disco NGC 4526.
La radiación de las estrellas calientes de la parte superior de la imagen ilumina y erosiona este pilar gigante y gaseoso.
V838 Mon se encuentra a unos 20,000 años luz de la Tierra en el borde exterior de la Vía Láctea.
El Sombrero Galaxy es una galaxia espiral sin estrellas en la constelación de Virgo, aproximadamente a 30 millones de años luz..
Esta región de formación de estrellas de corriente activa es parte de una nebulosa de emisión difusa a unos 6,500 años luz de distancia..
Guardar esto como contentviewer.html. Comenzaremos con un HTML limpio y semántico, sin usar más elementos de los estrictamente necesarios. Tenemos un contenedor externo para el espectador en su totalidad, que contiene una estructura de navegación para seleccionar qué panel de contenido ver y un segundo contenedor para los paneles de contenido..
Dentro del contenedor del panel de contenido, tenemos otro contenedor utilizado para encerrar todos los paneles de contenido (esto es necesario para visualizar los paneles de contenido correctamente) y los paneles de contenido en sí. Cada panel contiene una imagen y un lapso que describe la imagen..
Las imágenes principales se agregan al documento como imágenes HTML adecuadas utilizando la Elemento: esto se debe a que son contenido y deben ser visibles para las tecnologías de asistencia o los usuarios con scripting y CSS deshabilitados o de lo contrario no están disponibles. La estructura de navegación también contendrá imágenes, pero como no se clasifican como contenido, no es necesario que estén visibles en todas las situaciones y, por lo tanto, se pueden agregar mediante CSS, por lo tanto, los nombres de clase adicionales en la elementos.
En este momento la página debería aparecer así:
No se ve bien, pero el documento fluye correctamente y todos los elementos son claramente visibles y utilizables.
Ahora podemos usar CSS para transformar el visor de contenido en una interfaz funcional que no se ve terrible. Ya hemos enlazado a la hoja de estilo en el encabezado de nuestra página, así que creémosla ahora; en un nuevo archivo en su editor de texto agregue los siguientes selectores y reglas:
#viewer width: 700px; margen: auto; #nav ancho: 200px; flotador izquierdo; margen: 0; relleno: 0; tipo de estilo de lista: ninguno; #nav li width: 200px; altura: 100px; relleno: 0; #nav li a display: block; ancho: 100%; altura: 100%; texto-sangría: -9999px; desbordamiento: oculto; fondo: url (img / thumbs.png) no-repetir 0 0; #nav li a: hover, #nav li a.on background-position: -200px 0; #nav li.thumb2 a background-position: 0 -100px; #nav li.thumb2 a: hover, #nav li.thumb2 a.on background-position: -200px -100px; #nav li.thumb3 a background-position: 0 -200px; #nav li.thumb3 a: hover, #nav li.thumb3 a.on background-position: -200px -200px; #nav li.thumb4 a background-position: 0 -300px; #nav li.thumb4 a: hover, #nav li.thumb4 a.on background-position: -200px -300px; #nav li.thumb5 a background-position: 0 -400px; #nav li.thumb5 a: hover, #nav li.thumb5 a.on background-position: -200px -400px; #panels ancho: 500px; altura: 500px; desbordamiento: oculto; posición: relativa; flotador izquierdo;
Guardar esto como contentviewer.css en el mismo directorio que la página HTML. He mantenido el diseño mínimo para que podamos centrarnos en lo que lo hace funcionar; el panel de navegación y visualización están flotando uno junto al otro y los elementos de la lista individual reciben sus imágenes de fondo y estados de desplazamiento. También hemos añadido en estados también. Esta parte del CSS es exclusivamente para diseño / presentación y no afecta la funcionalidad..
Lo importante es cómo se organizan los contenedores y las imágenes de contenido. El contenedor exterior (#panels) se le otorga un tamaño fijo que coincide con la altura y el ancho de una imagen de contenido única y tiene su propiedad de desbordamiento configurada como oculta para garantizar que solo se muestre una imagen al mismo tiempo. Este es el único CSS realmente necesario para que el visor de contenido funcione en un grado básico. Si mira la página ahora, verá que puede hacer clic en cualquiera de las miniaturas y la imagen de tamaño completo correspondiente se mostrará en el panel de visualización:
Esto es genial porque sigue siendo funcional y accesible sin depender de JavaScript. Pasaremos a utilizar jQuery para agregar algunos efectos de transición suaves en solo un momento, pero primero debemos agregar algunos estilos más necesarios para las animaciones y mostrar los párrafos correctamente. Agregue el siguiente código al final de contentviewer.css:
#slider width: 2500px; altura: 500px; #slider div float: left; posición: relativa; #slider p position: absolute; abajo: 0; izquierda: 0; color: #fff; fuente: 16px "Trebuchet MS"; margen: 0; ancho: 90%; altura: 45px; relleno: 5px 5% 10px; color de fondo: # 000;
El contenedor interior (#slider) tiene una altura fija igual a una imagen de contenido única, pero un ancho igual a todas las imágenes. Luego, los contenedores individuales que contienen las imágenes y los párrafos se desplazan hacia la izquierda para que se apilen horizontalmente. Finalmente, los párrafos tienen un estilo y una posición para que se superpongan en cada imagen:
Flotar los paneles de contenido individuales a la izquierda y configurar el tamaño del control deslizante no es estrictamente necesario, sin estos, las imágenes se apilarán verticalmente. Esto significaría que cualquier animación que agreguemos tendría que mover los paneles de contenido verticalmente también, pero los estaremos animando horizontalmente.
Un punto que debo mencionar aquí es que el código hasta ahora no funciona en Opera; por alguna razón, Opera no puede usar los anclajes en la página para mostrar los diferentes paneles de contenido cuando se hace clic en uno de los elementos de navegación. Esto es un gran fracaso y parece ser un problema en más de una versión de Opera. Aparentemente hay una solución y cualquier persona que use Opera como su navegador principal habrá implementado esta solución. No es un problema cuando el JavaScript ha sido agregado aunque.
Como la página ahora funciona por sí sola, podemos agregar el JavaScript que lo convertirá de una página funcional en una interfaz atractiva. Dejamos un vacíoy
Accentsconagua