Screencasts de video 2025, Enero
Tenemos estas ocho pestañas de navegación de nivel superior, pero Inicio es la única que "funciona". Para tener algunas páginas con las que trabajar, eliminamos algunas páginas para "
Desde que tengo memoria, utilicé Google Code Prettify para aplicar el resaltado de sintaxis en el bloque de código en CSS-Tricks. Ya sabes, en una línea como "
Acabamos de instalar Prism.js y lo hicimos funcionar. En este screencast encontramos un tema llamado Tomorrow Theme e integramos sus colores en la sintaxis "
Hemos trabajado un poco en los encabezados, pero profundizaremos más en ellos en este screencast. Los encabezados son un aspecto muy importante de cualquier sitio. Bien hecho,"
Ahora que tenemos un área de publicación de blog con la que trabajar, realmente podemos entrar en la tipografía de publicación de blog. Podría decirse que es la tipografía más importante del sitio, ya que "
Creo que es muy bueno tener un archivo individual (.scss) que sea para la gran mayoría de la tipografía del sitio. Normalizar tiene bastante tipografía "
Typecast (en versión beta en el momento de esta filmación) es una aplicación web realmente genial para jugar con la tipografía web. Te brinda una excelente interfaz para jugar "
Continuando con el concepto de "No pienses demasiado en las cuadrículas", conseguimos que las canaletas funcionen en la cuadrícula simplemente usando un relleno simple. Mantenemos el número de relleno "
Antes de hacer un trabajo de tipografía, pensé que arreglaríamos lo molesto en el que las imágenes están saliendo del área del artículo y de la cuadrícula. Usando"
Ahora que estamos ejecutando un dominio local personalizado, podemos usar PHP. La "P" en MAMP es para "PHP" =). Usar PHP significa que podemos usar incluye. Por ejemplo: Nuestro "
Podríamos escribir nuestro propio Sass @mixins para ayudar con las cosas de CSS3 (como degradados), pero ya existe un marco Sass llamado Compass que "
El diseño del sitio se perfila como una cuadrícula. Nuestros módulos se distribuirán de forma muy limpia en una cuadrícula. ¿Pero no son las cuadrículas complejas y extrañas? Y tal vez nosotros "
En este screencast súper rápido, usamos MAMP para configurar una URL que podemos usar para el desarrollo local. Esto es útil por varias razones: podemos vincular a "
Introducimos el concepto de consultas @media en CSS. Mucho de lo que el uso de Sass en este proyecto nos permite hacer es permanecer SECOS (no lo repitas). Lo hicimos"
Comenzamos ajustando un poco el tipo de logotipo, pero luego saltamos a agregar íconos en la navegación principal. Cuando estábamos diseñando la navegación en Photoshop (Video "
Configuramos un nuevo kit en Typekit para v10. Para la marca, usaremos Proxima Nova Soft por ahora y algunas otras fuentes que se parecen mucho a las fuentes HF&J en nuestro "
Hasta ahora, el sitio web real no se parece mucho a nuestro diseño de Photoshop. En este screencast nos enfocamos en hacer precisamente eso, comenzando desde la parte superior con "
Utilizamos algunos trucos de posicionamiento para alinear el borde izquierdo del logotipo y el área de contenido principal, mientras que el encabezado toca el borde izquierdo del "
Eliminar el CSS del agente de usuario (predeterminado) de la mayoría de los elementos suele ser una buena idea. Esto se ha hecho durante mucho tiempo mediante reinicios "universales" o cosas como Eric "
Mientras miramos nuestra maqueta de Photoshop, escribimos, comenzamos a escribir HTML para describir lo que estamos viendo. Por supuesto, usamos HTML5 siempre que hace "
Comenzamos a colocar el texto en la navegación principal, solo para ver cómo encaja, trabajar en el tamaño, los colores, etc. Parte del texto se ajusta bastante "
Ciertamente no hemos "terminado" en Photoshop para siempre para este diseño, pero tenemos suficiente trabajo para comenzar a crear este diseño en el navegador. Después"
Comenzamos a diseñar la navegación de nivel superior (principal) del sitio. Comenzamos con la pantalla del tamaño de un escritorio (con un ancho ciertamente arbitrario) pero estamos
Agregamos algunas capas adicionales debajo del encabezado principal / cuadro de marca para darle el aspecto de "pila de papeles". No es una gran metáfora ni nada por el estilo, solo agrega algo visual "
Todo el sitio se basará en "módulos". Cada pequeña cosa estará literalmente en una caja (tanto visualmente como en el código, en última instancia). Nosotros"
Esta es una grabación de audio de una llamada de Skype entre Erin Kissane y yo. Erin escribió el libro sobre estrategia de contenido, así que tuve la suerte de obtener su ayuda y "
Diseñar en el navegador es genial y todo, pero comenzar en Photoshop me mantiene en mi momento más creativo cuando más lo necesito: cuando estoy frente al lienzo en blanco ".
¡Bienvenida! Este será un gran viaje y, como todos los viajes, este comienza con un solo paso. Nuestro primer paso es hacer un inventario de un poco de "
Este rediseño no es un rediseño solo por rediseñar. Quiero mejorar el sitio en todas las formas imaginables que pueda mejorar un sitio. Uno de los"
Ya hablamos de optimizar SVG a mano. Tomar decisiones manualmente sobre los detalles y qué tipo de cosas se pueden combinar o eliminar. En esto"