Sitios web de fotografía casi siempre se ejecutan en Flash. La tecnología cada vez más notoria de Adobe simplemente hace un excelente trabajo de visualización de imágenes de una manera dinámica que es perfecta para exhibiciones de fotografía. Sin embargo, hay algunos inconvenientes.
Primero, no siempre es fácil encontrar una plantilla de presentación de diapositivas gratuita y de calidad, y si no es un desarrollador de Flash, esto podría generar costos significativos. En segundo lugar, el mundo está en una relación de amor / odio con Flash en este momento, con muchos desarrolladores cambiando a JavaScript, CSS3 y HTML5 siempre que sea posible.
Así que hoy vamos a construir un hermoso sitio de fotografía con JavaScript con una presentación de diapositivas a pantalla completa. Literalmente, todo el trabajo pesado será realizado por un increíble recurso gratuito de jQuery, por lo que nuestro trabajo será principalmente personalización. ¡Empecemos!
Lo que estamos construyendo
Siempre es bueno ver a dónde va antes de llegar, haga clic en el siguiente enlace para ver una demostración en vivo de la página que construiremos hoy.
Haga clic para ver la demostración en vivo
Comenzando: Encontrando el complemento perfecto
Lo bueno de trabajar con jQuery es la inmensa cantidad de recursos gratuitos con los que tienes que trabajar. Otros desarrolladores se han ido antes que usted y han pasado horas creando complementos de calidad que puede utilizar de forma totalmente gratuita.
Hemos abordado la idea de un fondo de imagen de pantalla completa en Design Shack en el pasado, pero el complemento que utilizamos no tenía una función de presentación de diapositivas, por lo que nos quedamos atrapados con una imagen estática. Los sitios web de fotografía a menudo desean mostrar todo lo que pueden de su trabajo de inmediato, y nada hace una impresión tan fuerte como una presentación de diapositivas gigante que llena la ventana del navegador.
Después de realizar una pequeña búsqueda, encontré un complemento simplemente fantástico de los chicos de BuildInternet llamado Supersized, es posible que haya notado este complemento en el resumen gratuito de esta semana.
Si desea seguir adelante, descargue este complemento y duplique? Default.html? archivo ubicado dentro. Hay algunos ejemplos de archivos HTML incluidos y este proporcionará el mejor lugar para comenzar nuestro proyecto.
A continuación, abra este archivo en su navegador para tener una idea de con qué tenemos que trabajar. Como puede ver, ya hay una impresionante presentación de diapositivas a pantalla completa y algunos controles realmente ingeniosos en la parte inferior.
Realmente me encantan estos controles, pero para mostrarte que no estás atrapado en este diseño, los eliminaremos y permitiremos que la presentación de diapositivas se ejecute de forma autónoma. Entraremos en las implicaciones de usabilidad de esto más adelante. Primero, dejemos de lado el complemento por ahora y diseñemos algunas diapositivas.
Diseño de diapositivas
El diseño de nuestra página de inicio básica será casi completamente retomado por nuestra presentación de fotos. Si tiene una buena fotografía con la que trabajar, su trabajo como diseñador tiene el potencial de volverse mucho más fácil porque solo necesita aprovechar esa imagen correctamente.
Para facilitar las cosas, incluiremos el pequeño mensaje que deseamos en las diapositivas. No será texto en vivo, por lo que SEO definitivamente sufre un poco, así que puedes incorporar texto real y colocarlo sobre las diapositivas si crees que este es un problema importante. Básicamente, solo crearías un div posicionado absolutamente, rellénalo con algo de texto y asegúrate de que se destaque adecuadamente en tus imágenes de fondo. Veremos este proceso en acción más adelante con nuestro menú de navegación.
Para empezar, crearemos las diapositivas de contenido. Básicamente, solo ayudan a presentar el sitio y realmente no contienen ninguna información que no pueda encontrar en la página Acerca de en un formato más fácil de usar. Estas diapositivas se dispersarán entre las diapositivas de fotos y ayudarán a dividir un poco ese contenido.
Cree un nuevo documento de 1200 píxeles por 800 píxeles en Photoshop y rellénelo con # 0e1120. A continuación, aplique una sombra interna muy pesada para darle una sensación de viñeteado agradable como en la imagen de abajo.
Ahora llene esta diapositiva con texto y un logotipo para presentar el sitio. En la diapositiva de abajo creé un simple mensaje de bienvenida. Para el tipo más pequeño usé Trajan (cliché pero efectivo) y para el logotipo usé una fuente gratuita llamada Angelic War. Puede descargar esta fuente en DaFont.com.
Note que le di un ligero brillo externo al logo. esto ayuda a diferenciarlo del resto del texto y produce un efecto agradable en el fondo oscuro.
Luego, duplicé este diseño dos veces y coloqué mensajes alternativos en estas diapositivas en las que se discutían los otros servicios ofrecidos por la compañía de fotografía. El texto sigue de cerca el mismo formato que la primera diapositiva. La repetición es un aspecto simple y muy importante del diseño y siempre debe buscar formas de implementarlo.
Escogiendo las fotos
Para el resto de las diapositivas, obviamente querremos usar algunas fotografías. Después de la primera diapositiva de introducción (bienvenida / boda), colocaremos algunas fotos de la boda. Después de la segunda diapositiva de introducción (participación) colocaremos algunas fotos de parejas felices y después de la tercera diapositiva de introducción (familia / senior), colocaremos algunas fotos de familia.
Nuestro negocio de fotografía es ficticio, pero resulta que soy un fotógrafo, así que tomo algunas imágenes de mi propio portafolio para usarlas como relleno para este proyecto. Elegí las siguientes seis imágenes y las guardé en el mismo tamaño que nuestras diapositivas de introducción.
Desechando los controles de presentación
Ahora, hacer que la presentación sea completamente autónoma podría asustar un poco a la usabilidad de la policía. Si no está de acuerdo, simplemente deje los controles allí. En lo más profundo del sitio donde estarían las presentaciones de proyectos individuales, definitivamente pondría controles para que los clientes y los clientes potenciales puedan ir y venir fácilmente y seleccionar imágenes específicas.Sin embargo, en la página de inicio solo quiero un mensaje de desplazamiento agradable y simple que se repita sin la interacción necesaria del usuario.
Para lograr esto, ingrese al archivo Defautl.html y comente o elimine todo lo que se encuentra debajo de? Supersized? div y por encima de la etiqueta de cierre del cuerpo. El siguiente código debe ser todo lo que hay en tu cuerpo.
Inserción de sus propias diapositivas
Ahora desplácese hasta la parte superior de la página HTML donde se encuentran todas las etiquetas de script. Aquí encontrará los controles para la presentación de diapositivas, debería ser fácil detectar la lista de diapositivas. Tenga en cuenta que las diapositivas actuales tienen títulos, enlaces, etc. No queremos que nuestra imagen se vincule en ningún lugar y desechamos la barra inferior que mostraba el título para simplificar drásticamente esta sección y enumerar nuestras diapositivas de la siguiente manera:
Observe que he establecido el? Ancho de inicio? y? startheight? al tamaño de nuestras diapositivas. También he establecido el? Slide_interval? a 6000. Esto ralentizará un poco la presentación de diapositivas desde su configuración predeterminada. Puede dejar el resto de estos ajustes justo donde están, simplemente asegúrese de que sus diapositivas aparezcan en la parte inferior y que los JPG de diapositivas se encuentren en la carpeta de diapositivas.
Navegación HTML
Ahora su presentación de diapositivas debe estar lista y funcionando con sus propias diapositivas personalizadas. Sin embargo, no es una página de inicio hasta que tenga una forma de encontrar el resto del contenido. Para finalizar nuestro sitio, crearemos un menú de navegación simple y lo ubicaremos en la parte inferior de la página donde solían estar los controles de presentación.
El HTML aquí es súper simple, solo lance una lista desordenada debajo de? Cargando? div en tu cuerpo
CSS de navegación
Ahora, queremos diseñar esto para que sea una barra en la parte inferior. Afortunadamente, ya había una barra en la parte inferior cuando descargamos el plugin por primera vez, así que podemos robar algo de este estilo y modificarlo para nuestros propios fines. A continuación, hice la barra de 40 píxeles de alto y configuré su color con RGBa para que pudiera tener algo de transparencia.
A continuación, debemos aplicar muchos estilos a diferentes partes de la lista desordenada. Necesitamos diseñar la lista en sí, flotar los elementos de la lista para que aparezcan en línea y definir los colores de enlace / desplazamiento.
Ahora, para mi truco final, quiero diseñar el primer elemento de la lista de manera un poco diferente. Esto servirá como un identificador permanente del sitio y un enlace a la página de inicio. Al diseñar el primer hijo de la lista, puedo darle a este elemento diferentes márgenes y un tratamiento de tipo diferente para diferenciarlo de los demás.
Puedes ver el efecto de esto en la imagen de abajo. El elemento todavía tiene el mismo propósito básico que todo lo demás en la lista, simplemente se le da un tratamiento visual especial porque también es el nombre del sitio.
Conclusión
Con eso, todos hemos terminado. Desde aquí, podría codificar el resto de las páginas para que coincidan con el diseño que ha configurado en la página de inicio. Una vez más, asegúrese de pasar por la demostración para verla en acción.
Deja un comentario y dinos cómo mejorarías lo que he hecho aquí. Me encantaría escuchar lo que cambiarías y lo que crees que debería seguir igual. ¡Gracias por leer!