Share
¿Soy un gran fan de los diseños de sitios centrados en las fotos? así que hoy estoy entusiasmado con el lanzamiento de un nuevo tutorial de "sitio completo" que está dirigido a fotógrafos, ilustradores y otros creativos visuales. En el Día 1, diseñamos la plantilla en Photoshop usando algunos trucos y técnicas especiales. Hoy, en el Día 2, recorreremos la fase de diseño final y luego haremos una preparación previa al vuelo para la fase de codificación, que veremos en detalle en el Día 3. En el Día 4, mostraremos Cómo crear tres sitios completamente diferentes utilizando el mismo HTML sin formato.
¿La sesión de hoy va a ser relativamente rápida en términos de trucos técnicos? Pero nos vamos a poner pesados en las sugerencias de "flujo de trabajo", así que presta atención si tienes curiosidad acerca de la fase de un proyecto que ocurre después del diseño y antes de que comience la codificación..
Comencemos la sesión de hoy con algunas notas generales sobre qué "antes del vuelo"es: cuando haya terminado de diseñar un sitio web, hay algunos pasos cruciales que deberían tener lugar antes de comenzar el proceso de codificación real. El primer paso es comenzar a cortar nuestro diseño.
La guía completa paso a paso escrita está a continuación. Comenzaremos con el documento de Photoshop que creamos el día 1, pero también puede descargar la PSD de demostración para verificar su trabajo con el mío..
Ok, con nuestras metas ahora claramente definidas, comencemos!
El primer paso es cortar cualquier imagen que se requerirá en la plantilla codificada. En nuestro caso, este proceso es bastante simple: analice detenidamente la plantilla y señale todos los elementos de diseño que no se pueden duplicar con CSS u otros trucos de codificación. Aquí está nuestra lista:
Etiquetemos dónde están estos en nuestro diseño (haga clic para ver la imagen a tamaño completo):
">
Cortar estos no es difícil, así que no profundizaré demasiado, pero antes de comenzar vale la pena considerar si algunas de estas imágenes se pueden combinar en una sola. CSS Sprite.
¿Qué es un CSS Sprite?? En pocas palabras, un sprite es un método para usar una sola imagen como medio para almacenar varias imágenes más pequeñas. Por ejemplo, eche un vistazo al sprite que se está utilizando en Webdesigntuts:
Cuando comenzamos a codificar, simplemente podemos usar el posicionamiento CSS y el recorte de la imagen para mostrar la pieza del sprite que queremos..
Por qué usar un CSS Sprite? ¡Velocidad! ¿Usar sprites para almacenar imágenes reducirá el tiempo que lleva cargar una página web completa? cuando las imágenes se reutilizan una y otra vez en varias páginas, esto puede significar una gran cantidad de tiempo ahorrado.
Los sprites se utilizan mejor con imágenes más pequeñas que se utilizan una y otra vez. Por ejemplo, la mayoría de los activos mencionados anteriormente pueden reducirse a este sprite:
En un solo sprite, ¿ya hemos preparado la mayor parte de nuestro diseño para la codificación? y todo está bajo 19kb! No mal derecho?
Para crear su propio sprite, simplemente cree un documento en blanco (comience con cualquier tamaño, finalmente lo recortará para que se ajuste a cada elemento del sprite), luego agregue los elementos de diseño con una cantidad razonable de relleno entre cada elemento. Aquí hay algunos trucos adicionales:
Para las imágenes restantes, simplemente podemos crear nuestros propios segmentos genéricos. Los enumeraré a continuación y describiré cada uno (y por qué no es un sprite):
La superposición de sombra interior para el Slidedown. No es un sprite porque es grande (lo que significa que aumentaría innecesariamente el tamaño del sprite).
Las esquinas superior e inferior redondeadas: Estos no son sprites por algunas razones: 1) como el ejemplo anterior, son grandes y difíciles de manejar; 2) es probable que estos se vuelvan a ajustar o cambien de tamaño en una fecha posterior, lo que significa que cargarlos en un sprite solo sirve para un trabajo adicional y 3) hay una buena posibilidad de que decidamos abandonar estas imágenes para métodos CSS en el futuro.
La imagen de fondo: Este no es un sprite porque 1) es probable que se intercambie con otra imagen BG y 2) necesita repetirse indefinidamente, lo que a los sprites no les va bien.
Otros "No-Sprites": Obviamente, no cargaremos nuestras miniaturas ni ninguna otra imagen de contenido como sprites. La razón principal aquí es la practicidad? ¿Los Sprites están destinados a elementos básicos de interfaz de usuario y de marca que pueden cargarse rápidamente y acelerar un sitio? si cargáramos TODAS las imágenes en un solo sprite, se obtendría un tiempo de carga extra largo, incluso si acelerara las cosas después de cargarlas. Piense en los cargadores previos para esos enormes sitios web de Flash hace unos años;)
La otra razón obvia es que estas imágenes de contenido probablemente cambiarán cada vez que alguien actualice el sitio. La imagen de Sprite está destinada a permanecer prácticamente sin cambios siempre y cuando el diseño del sitio siga siendo el mismo..
Notas finales de corte: Probablemente no hace falta decirlo, pero hay otras formas de cortar este diseño en particular. ¿Diferentes enfoques pueden tener sentido para su propia variación de este diseño? así que no te limites a usar las ideas de arriba. Si quieres atacar las esquinas redondeadas y la sombra de fondo usando CSS3, la propiedad z-index y un PNG transparente, hazlo por todos los medios.!
Ahora que tenemos nuestros recursos de imagen listos para usar, es hora de reunir nuestros scripts en un solo lugar para que cuando nos sentemos en la codificación difícil, estemos listos para la acción. Revisando nuevamente nuestro diseño, identifiquemos las áreas clave que requerirán scripts o complementos adicionales:
¿Toda plantilla de buen fotógrafo necesita una caja de luz? y hay algunos mejores que prettyPhoto por ahí ahora mismo. Es fácil de instalar / personalizar, y ofrecerá bastantes características adicionales que otras cajas de luz no tienen, como la navegación de miniaturas, complementos personalizados para compartir y más.
Este es un problema bastante simple usando algunos jQuery básicos? así que en realidad usaremos un script ligero y personalizado para este. Vuelve al día 3 para ver cómo funciona.!
jQuery Cycle manejará el trabajo pesado de nuestros deslizadores de imagen. Es un complemento increíblemente bien documentado, lo que significa que será fácil de configurar (y personalizar) para adaptarse a las necesidades de nuestra plantilla.
He utilizado la fuente Museo en el diseño, por lo que tendremos que encontrar una manera de usar esto en la versión codificada. La forma más rápida de configurar esto es con @ font-face. Entonces, ejecutamos la fuente a través de Font Squirrel (http://www.fontsquirrel.com/fontface/generator) para crear nuestros archivos de fuentes que podemos usar en el Día 3.
Asegúrese de descargar el complemento prettyPhoto y de copiar los recursos necesarios en sus respectivas carpetas (javascript en la carpeta "js", hojas de estilo en la carpeta "css", etc.), el complemento de ciclo se puede vincular desde Github y jQuery se puede vincular de las API de Google.
En este punto, ahora deberíamos estar listos para iniciar la conversión de HTML / CSS. Diseñamos la plantilla de nuestro sitio, dividimos las imágenes que necesitaremos usar y reunimos todos los scripts de terceros que vamos a necesitar para que el sitio funcione como queremos. ¿En la siguiente etapa, vamos a hacer la codificación real? así que prepárate para el día 3!
Accentsconagua