Rebuille un sitio web de 2004 Flash para 2018

En 1999, construí mi primer sitio web utilizando Web Studio 1.0. Web Studio fue una interfaz gráfica de usuario. Fue posible crear un nuevo página de destino y arrastrar y soltar elementos en él. Luego configuré un dominio gratuito y alojamiento con Geocities y Voila! Tuve un sitio web. Avance rápido a 2004, quería ir más allá y así, como muchos otros, me propuse construir un sitio web de una banda.

• 12 preguntas comunes de JavaScript respuestas

Mucho ha cambiado desde entonces. En este artículo, voy a tomar un viaje por Memory Lane y recrearme el mismo sitio para la web hoy.

Obtener los archivos Para este tutorial.

Entonces, vamos a empezar! En primer lugar, en general, cada proyecto nuevo para mí comienza con MKD seguido de G Init. Para aquellos de ustedes que me conozcan, en algún momento, probablemente haya mencionado los dotfiles para usted. Los dotfiles son archivos que simplemente comienzan con un punto (¡me tomó un tiempo sorprendentemente largo para hacer esa conexión!) Y pueden usarse para varios propósitos. Dos de mis dotfiles favoritos son .aliasas y .funciones. Déjame elaborar ...

En Bash, es posible crear un nuevo directorio utilizando el comando MKDIR, después de eso, tendría que cambiar el CD de directorio al directorio que acaba de crear. Usando el código que tengo en mi archivo funcionamiento, ahora es posible ejecutar MKD. Esto no solo creará el nuevo directorio, sino que también se ha cambiado a ese directorio. Esto puede parecer demasiado exagerado, pero me encantan estas microsas victorias. Con el tiempo, especialmente si se ejecuta estos comandos varias veces al día, pronto se suman a un montón de tiempo guardado.

 # Crear un nuevo directorio e ingresarlo
función mkd () {
    mkdir -p "$ @" & amp; & amp; CD "$ _";
} 

El siguiente comando, si está familiarizado con GIT, es simplemente git init, lo que nos permitirá controlar la versión del proyecto. ¡Utilizo mucho git, incluso para las listas de compras! Entonces, en lugar de tener que escribir git cada vez, agregando alias g = "git" a .aliases de nuevo es un buen ahorro de tiempo para mí.

En estos días, hay una gran cantidad de diferentes marcos y tecnologías. Para este proyecto, quiero mantener las cosas simples. Voy a usar HTML, CSS y, si se requiere una pizca de JavaScript. En primer lugar, vamos a crear el marcado HTML básico. ¡Pero espera! Vamos a detenernos y pensar por un minuto.

A veces, los desarrolladores, que yo incluyeron, se pueden superfocar con un proyecto y querer que se agrieten de inmediato y vaya directamente al teclado para escribir código. Sin embargo, me parece que esto a menudo no es el mejor enfoque. Me encanta tener una visión general en mente del proyecto primero. Al hacer esto y tener una visión mucho más clara del proyecto en su conjunto, me parece que permite una mejor toma de decisiones. Por ejemplo, si me desvíe directamente al código, podría encontrar un problema que luego tendría que volver y refactor. Hay algunos resultados diferentes con este enfoque. Primero, podría ser que tengo que eliminar el código por completo y comenzar de nuevo; En segundo lugar, si continúa de esta manera, puedo terminar con el 'código de espaguetis' haciendo que sea difícil en el futuro actualizar, depurar y dar como resultado la pérdida de rendimiento; En tercer lugar, a veces funciona bien y terminas con un mejor código, pero tendería a decir que los primeros y segundos resultados son mucho más comunes.

Este proyecto es bastante pequeño; Cuenta con algunas páginas: hogar, noticias, conciertos, medios, álbumes, enlaces y piezas comunes entre estas páginas: encabezado, navegación, contenido de tipografía, listas, imágenes, videos. Cuando se construyen originalmente el sitio de Flash en 2004, las cosas eran mucho más simples en términos de pruebas. El sitio se construyó en Flash, para Flash en una computadora de escritorio con un mouse y un teclado. En estos días, el uso de Internet móvil y la tableta es más común que en una computadora de escritorio, y esta tendencia continúa aumentando.

Para que esto sea una mejor experiencia para quien vea el sitio, voy a tomar algunas cosas en cuenta al inicio del proyecto y usaré una primera estrategia móvil. Para hacerlo, y nuevamente, antes de escribir cualquier código, voy a sacar una buena pluma y papel con anticipación. Primero, escribo el mapa del sitio; Al hacerlo, hay algunas áreas clave en las que creo que se puede mejorar. Por ejemplo, mi sitio original consistió en diferentes páginas para cada uno de los álbumes de la banda. En ese momento tenían tres álbumes y, por lo tanto, encajaba muy bien en la navegación. Ahora tienen mucho más y potencialmente más por venir, así que ya en mi mente, estoy pensando en las formas de hacer que el sitio sea más probable (un Oldie, pero un Goodie es de Dan Cederedolm. Diseño web a prueba de balas ).

Ahora tengo una idea aproximada en mi cabeza del mapa del sitio y las páginas, la siguiente es crear algunos fértiles de alambre bajo. Desde la experiencia anterior, construyendo muchos sitios sensibles, el móvil viene con desafíos de diseño interesantes, a saber, cómo crear una navegación, pero aún así permitir que las personas vean el contenido principal del sitio. Voy a acompañar el resultado del diseño, todos hemos crecido para amar / odiar: el enfoque del menú de la hamburguesa. Sin embargo, voy a añadir un pequeño giro. La obra de arte original usó aves, por lo que en lugar del icono del menú de la hamburguesa estándar, voy a usar las ilustraciones de aves que activará el menú y abrirá y cerrará sus alas como una forma de indicar si el menú está activo o no.

Las cosas en mi mente ahora están empezando a tomar forma, con una idea de cómo la gente podrá navegar por el sitio. Ahora voy a pensar cómo se pueden ver las páginas. Comenzando con la página de inicio, es bastante simple, con contenido de tipografía. A continuación, noticias: nuevamente el contenido de la tipografía, potencialmente imágenes y luego algún tipo de navegación para ver las publicaciones más antiguas. GIGS: una lista de los próximos conciertos con enlaces para comprar boletos. Para los medios, mirando hacia atrás en el sitio anterior, tenía 'imágenes' y 'videos' como dos secciones diferentes, pero aquí creo que hay espacio para mejorar y consolidar como 'medios'. Álbumes, AH, sí Álbumes - Ahora, aquí es donde hacer este tipo de cosas. Usted ve, la página de los álbumes tiene tipografía y una imagen, y va a necesitar algún tipo de navegación para ver las publicaciones más antiguas. ¿Suena familiar? ¡Suena mucho como la misma estructura que la página de noticias! Tener esta descripción general de nivel superior, puedo mirar y pensar las cosas en un componente más granular, algunos incluso podrían decir diseño atómico Nivel, si estás familiarizado con el trabajo de Brad Frost.

Ahora tengo una idea de cómo el sitio va a trabajar en dispositivos más pequeños y elementos reutilizables, es hora de repetir el proceso con dispositivos más grandes. Como el sitio es bastante simple, y con los WireFrames ya creados para Mobile, veo que los dispositivos más grandes son bastante similares, aparte de ahora, tenemos una habitación adicional, por lo que podemos ampliar las áreas de contenido y también incluir una navegación lateral.

La navegación lateral es la broca del sitio que desde el desplazamiento estoy más emocionado. Tomando inspiración de las ilustraciones originales de la banda, construí la navegación como una silueta de árbol con hojas. Cada hoja era un botón que vinculado a una página diferente del sitio. Además, a medida que se desplazaba y se alejaba de la hoja, la hoja animaba, cayendo al suelo. Flash fue genial en esto; Se llamó Tweesing. Puede establecer un elemento en un fotograma clave en la interfaz en la línea de tiempo, cree otro fotograma clave más a lo largo de la línea de tiempo y agregue una ruta para seguir el elemento. Tomando cosas un poco más, variando los caminos, la duración y la velocidad de las hojas que caen, terminé con algo con lo que estaba muy satisfecho.

Pero ahora no estamos usando Flash, ¿cómo hacemos esto? Muy a menudo voy a saltar a Codepen o JS Bin. Para aquellos de ustedes que no están al tanto, Codepen y JS Bin son servicios en línea que le permiten codificar y guardar rápidamente. Tiendo a ver a Codepen como más diseño de diseño, y JS Bin se enfocó más JavaScript. Para este proyecto, usaré Codepen para crear la navegación del árbol por algunas razones. Primero, quiero comenzar a construir la versión móvil principal del sitio, y de hecho haciendo esto, si las cosas eran de tiempo críticas, podría terminar con un MVP. Aunque hay mejoras al sitio que se podría hacer agregando la navegación y la animación de la hoja agradable, esto tardará más en producir. Una ventaja de trabajar en Codepen para la navegación del árbol significa que está aislado del sitio principal y la base de código. Si las cosas se vuelven complicadas con completarlo, puedo salvar dónde estoy, continúe con la construcción principal del sitio y luego vuelva a la navegación. A veces, me parece que al salir de un problema, o incluso durmiendo en él, mi subconsciente puede continuar pensando en ello. Luego, al regresar al problema, se presenta una solución.

Svgs! Amo a svgs. Anteriormente en Flash, dibujé los activos de la hoja en Illustrator. Sorprendentemente, todavía tenía un CD trabajador con la obra de arte original y pudo abrirla. En estos días, uso boceto e hizo un gran trabajo para abrir el archivo. Ahora tengo los activos de la hoja, todos listos para ser exportados como SVGS. ¿Por qué SVGS? Hay muchas razones. Si tuviéramos que usar un JPG, o GIF en un dispositivo de retina, también tendríamos que suministrar activos más grandes, de lo contrario, se verían borrosa. Además, con SVGS, podemos usar CSS. Esto es genial y nos permite simplemente cambiar el color de la SVG utilizando un poco de CSS en lugar de tener que crear otro activo de imagen. Esto significa que es más fácil de mantener, y como un bono también es más actor. Si no está familiarizado con SVG, recomiendo encarecidamente leerlos y el increíble trabajo de mi buen amigo, Sara Soueidan .

Con los activos de árbol y hojas ahora en su lugar, la última cosa para agregar es la animación. Hay algunos enfoques que podría llevar con esto. Uno sería mantenerlo fiel al camino flash original entre los Tween. Esto significaría replicar los caminos y usar SVG y luego potencialmente un trabajo SVG con caminos y animatemotion. Me gusta bastante esta idea desde un punto de vista nostálgico, pero CSS ha llegado mucho a lo largo de los años, y ahora nos hemos transformado y traduzco a nuestra disposición, por lo que este podría ser otro enfoque. Tomando las cosas un paso más allá, incluso podríamos agregar un poco de javascript que al azar las hojas que caen.

Ambas opciones suenan bien, pero me estoy moviendo hacia la ruta más CSS. Aquí hay otro beneficio de usar Codepen, puedo ir rápidamente y probar un enfoque. Si resulta que es más complicado de lo que pensé originalmente, o no se siente bien, puedo probar otro enfoque con poco tiempo desperdiciado. De hecho, esto resultó ser una gran idea! Todavía estoy buscando opciones para esto, consulte el proyecto en GitHub para el resultado final.

Con la navegación del árbol ahora ordenada, me volví al primer enfoque del móvil, construyendo la navegación. Si está familiarizado con SASS, es más que probable que se encuentre variables. ¿Pero sabías que las variables están ahora disponibles en CSS? Ellos tienen Soporte bastante decente del navegador En Chrome, Edge, Safari y Samsung Internet también! Como estoy tratando de conservar CSS básicos y evitar la necesidad de cualquier dependencia adicional, esta es una gran noticia. Entonces, ¿cómo implementaríamos esto? En la parte superior de la hoja de estilo, declaro mis variables:

: raíz {
  --Grey: #ccc;
  --red: # FB0F0C;
  - Tamaño de Grido: 10px;
} 

Ahora que son declarados, puedo llamarlos, así que, por ejemplo, configurar el color de fondo del cuerpo se vería así:

 Cuerpo {
  Fondo: var (- gris);
} 

Tomando esto un paso más allá y para ayudar con la alineación de la cuadrícula, el espacio en blanco, el ritmo vertical, es posible que haya notado que también he definido una variable de tamaño de cuadrícula. Las variables trabajan extremadamente bien con Calc y eso se ve un poco así:

 // Se está utilizando la variable estándar, salidas 10px.
PADDING-TOP: VAR (- Tamaño de la cuadrícula);

// Agregar calc para multiplicar la unidad variable por 2, salidas 20px.
Padding-Fondo: Calc (VAR (- Tamaño de la cuadrícula) * 2); 

Con los estilos de navegación móvil completos, vamos a abordar la funcionalidad para ocultarlo y mostrarlo. Para el botón de conmutación, aplicaremos una etiqueta de etiqueta, luego en la etiqueta NAV, agregaremos una entrada:

& lt; encabezado clase = "encabezado" y gt;
  & lt; H1 Class = "Header_Title" & GT; Sitio web de la banda & LT; / H1 & GT;
  & lt; H2 Class = "Header_CurrentPage" & GT; Home & Lt; / H2 & GT;
  & lt; etiqueta for = "mobilenav_toggle" class = "mobilenav_toggle" & gt; toggle & lt & gt;
& lt; / encabezado y gt;

& lt; nav clase = "mobilenav" & gt;
  & lt; type = "Checkbox" ID = "MobileNav_toggle" rol = "Button" & GT;
  & lt; ul class = "mobilenav_list" & gt;
    & lt; li clase = "mobilenav_listitem" & gt; & lt; a clase = "mobilenav_listitemlink" href = "#" & gt; home & lt; / a & gt; & lt; / lt; / li & gt; / li & gt;
    & lt; li clase = "mobilenav_listitem" & gt; & lt; & lt; a clase = "mobilenav_listitemlink" href = "#" & gt; sobre & lt; / a & gt; / lt; / lt; / li & gt; / li & gt;
    & lt; li clase = "mobilenav_listitem" & gt; & lt; a clase = "mobilenav_listitemlink" href = "#" & gt; portafolio & lt; / a & gt; / li & gt; / li & gt;
    & lt; li class = "mobilenav_listitem" & gt; & lt; a clase = "mobilenav_listitemlink" href = "#" & gt; noticias & lt; / lt; & lt; / lt; / li & gt; / li & gt;
    & lt; li clase = "mobilenav_listitem" & gt; & lt; a clase = "mobilenav_listitemlink" href = "#" & gt; contacto & lt; / a & gt; / lt; / li & gt; / li & gt;
  & lt; / ul & gt;
& lt; / nav & gt; 

Usando los siguientes CSS, podemos mostrar y ocultar el menú de navegación; Debido a que queremos la etiqueta en el encabezado, podemos usar ~ AKA TILDE o (U + 007E), por lo que funciona, mientras que no es inmediatamente sucedido por el primer elemento.

 #mobilenav_toggle [tipo = checkbox] {
  Pantalla: Ninguno;
}

#mobilenav_toggle [Type = Checkbox]: Comprobado ~ .mobilenav_list {
  bloqueo de pantalla;
} 

Con la navegación móvil completa, es hora de implementar algunos diseño web adaptable . Agregando el contenido principal del sitio, luego usando la vista sensible en las herramientas del desarrollador de Chrome, puedo aumentar el ancho de la vista hasta que siento que hay suficiente espacio para mantener adecuadamente la navegación del árbol. Esto termina siendo en 600px, y para esto podemos usar una consulta de medios:

 .TreenAV {
  Pantalla: Ninguno;
}

Pantalla @media y (Min-Anchth: 600px) {
  .TreenAV {
    bloqueo de pantalla;
  }
} 

¡Casi ahí! Finalmente, para que la navegación del árbol se siente junto al área de contenido principal, voy a hacer uso de FlexBox:

 .Container {
  PANTALLA: FLEX;
}

.TreenAV {
  Pantalla: Ninguno;
  Min-ancho: 140px;
} 

Ahora la navegación de los árboles ocupa un 100% de altura, con el contenido que hace lo mismo y sentado a la derecha de la misma. Esto significa que no importa cuánto tiempo se vuelva el contenido, nunca fluirá debajo de la navegación del árbol. Si desea saber más sobre FlexBox, recomendaría registrarme FlexBox.IO por uno y solo wes bos. ¡Hay mucho que puede hacer!

Eso es todo lo que tengo tiempo en este momento, pero todavía hay muchas cosas que podríamos hacer para mejorar este proyecto. Si tiene alguna pregunta, o le gustó el artículo, por favor diga hola. en Twitter o a través de mi sitio , o envíeme una solicitud de extracción en GitHub!

Este artículo fue publicado originalmente en el número 304 de neto , la revista más vendida del mundo para diseñadores web y desarrolladores web. Comprar emisión 304 aquí o Suscríbete aquí .

Artículos relacionados:

• 5 consejos para CSS super rápido
• Animar svg con javascript
• Entendiendo la propiedad de visualización de CSS