Screencasts de video 2025, Enero
El diseño de los comentarios puede parecer muy simple. ¡Y es! Pero creo que lo simple es efectivo en este caso. Los comentarios son una parte tan importante de CSS-Tricks "
Comenzamos a profundizar en Photoshop aquí y a diseñar el área de comentarios. Empezamos por la parte superior, es decir, los comentarios individuales en sí mismos (a diferencia de "
Comenzamos por observar algunos de los trabajos que hice entre bastidores para dar cuerpo a algunas cosas que debían hacerse. Como agregar el resto de "
Estamos bastante cerca de terminar de construir la página de inicio del área de Snippets del sitio. De inmediato, comenzamos a ajustar las cosas y a incluir más cosas en "
Con el diseño del área de fragmentos "hecho", ahora podemos pasar a algo de interactividad (leer: JavaScript). Agregamos un rollover super lento para los enlaces en "
Ahora tenemos un diseño de Photoshop desde el que trabajar para la página de inicio del área de Snippets. Se puede navegar mucho más que antes, pero mantiene el arcoíris "
¡Es hora de sumergirse en el área de Snippets! Es decir, el área de contenido real del mismo. Ya tenemos el encabezado en su lugar. El área de fragmentos es bastante popular ".
En este screencast concluimos la sección Almanaque. Hay una jerarquía bastante clara en el Almanaque. Va: Inicio> Inicio de almanaque> Propiedad o selector> "
Avanzamos un poquito aquí. Esta es una serie de screencasts bastante completa, pero son solo 40 horas y, por supuesto, este proyecto real "
Ya hemos estado trabajando localmente en un dominio local (v10.whatup). Ahora es el momento de comenzar a migrar a WordPress. Seguiremos trabajando localmente "
Tenemos todo el contenido que necesitamos en la salida de esta página y tenemos el encabezado en su lugar. Ahora podemos iniciar CSSin 'el contenido en el diseño que tenemos "
A medida que empezamos a trabajar en WordPress, será mejor que obtengamos una copia exacta de la base de datos en vivo para trabajar localmente. Algunos sitios web tienen cosas como "
Ahora que hemos luchado para obtener el contenido adecuado en la página de inicio del Almanaque, podemos profundizar en algunos estilos reales con CSS. Decidimos ir "
En este screencast nos ocupamos en gran medida de la "Photostar" naranja que domina el pie de página. Creamos la estrella en un archivo separado en Photoshop, para que podamos hacer "
Ha entrado el cabezazo para el Alamanc, esta vez de Giovanni Difeterici. Usamos muchas técnicas que ya hemos establecido para comenzar "
Ha llegado la ilustración del encabezado personalizado para la sección de videos, esta vez de Alyssa Nassner. Dedicamos un poco de tiempo a organizar el archivo de Photoshop y "
En este screencast final de la construcción del pie de página, trabajamos en el pie de página inferior donde están las áreas de CodePen y ShopTalk. Tenemos que cambiar el HTML a "
En este screencast nos enfocamos en las líneas debajo de los enlaces en la parte superior del pie de página. Nos tropezamos un poco al averiguar qué cosas deberían "
Ha llegado la cabeza de los fragmentos, esta vez de Reagan Ray. Pasamos un poco de tiempo en Photoshop, esta vez barajando las cosas un poco para asegurarnos de que "
Con la estructura HTML para el pie de página en su lugar, tenemos lo que necesitamos para comenzar a diseñar y hacer que este pie de página se vea como lo que diseñamos en Photoshop ".
Este es el último trabajo de Photoshop que haremos específicamente sobre el pie de página antes de pasar a construirlo. En este screencast nosotros "
Estamos trabajando para crear un diseño para el pie de página en Photoshop. Recordatorio rápido: trabajo en Photoshop porque me siento más creativo allí antes de saltar "
Pasamos a algunos negocios más de Photoshoppin en este screencast, presentando el pie de página más abajo con enlaces a mis otros dos proyectos más importantes, CodePen
¡Nos embarcamos en el gran viaje que es el pie de página! CSS-Tricks siempre ha tenido un gran pie de página elegante y este diseño no será una excepción. No es puramente "
Con nuestro diseño para el pie de página listo para usar en Photoshop, podemos comenzar a construirlo en nuestra maqueta de HTML y CSS estático. El primer paso es dar "
Tenemos otra zona BSA para integrarnos al sitio. Este debería ser un poco más fácil porque ya tenemos JavaScript en su lugar y es simplemente "
Tenemos una maqueta de cómo queremos que se vean nuestras zonas BuySellAds, así que empecemos a construirlo de verdad. El sitio web BuySellAds proporciona el código que necesitamos "
¡Lo único que falta ahora en el encabezado de los foros de aduanas es la parte que realmente dice "Foros"! Nick ilustró una mano sosteniendo un cartel que significaba "
Ahora que sabemos exactamente con qué zonas estamos trabajando, volvemos a Photoshop y nos burlamos de cómo queremos que se vean estas zonas publicitarias. Tenemos un precedente de "
Como saben, algunos de los anuncios de CSS-Tricks son "autogestionados", como el patrocinador principal de Treehouse. Lo asumí porque es solo un sencillo "