Edificio Mac OS 9 en WordPress (usando oxígeno)

Esta publicación es un poco un “diario de proyecto”: no un tutorial, no una entrada de cartera, solo unas pocas palabras. A medida que nuestra cartera crece, y nuestro blog se sigue mejor, la agencia isotrópica se está preparando para lanzar una nueva versión de nuestro sitio web en el primer trimestre de 2021. Hicimos mucha actividad de investigación y estrategia, que incluye echar un vistazo a otros Sitios web de agencias bien hechas. En esta búsqueda, me encontré con una colección saludable de sitios web que reflejan los sistemas operativos de escritorio más antiguos. Completo con ventanas, tirar y colocar más.
El sitio de la sede central

Eatsleepwork, otro impresionante, decidí que esta no es la dirección en la que quiero llevar la marca de la agencia, pero fue una gran idea. Tuve algunas horas gratis en un fin de semana reciente y decidí ver si podía crear algo como esos sitios web de agencias que usan oxígeno. Esta página/generador de temas es perfecto para esta aplicación, porque puede crear una página desde cero. La ideología de diseño de este experimento se realizó para reflejar de cerca Mac OS 9, con un poco de inspiración en Windows 95 y la edición temprana de XP. La característica principal de ambas páginas web fue que puede extraer los Windows y los archivos/controles alrededor de la página, como en un escritorio.
Estos sitios web también tenían modos/ventanas que aparecieron al hacer clic en las deficiencias/pedidos respectivos.Además, el diseño y la apariencia de cada sitio web fueron relativamente simples.Era una altura completa llena de ventana que estaba diseñada para parecerse a un escritorio.Ambos sitios tenían barras superiores que mostraban información y navegación.Con la idea general en mi cabeza, comencé a construir el sitio.Debía ser un sitio web de una sola página y, debido a que no tenía semanas para invertir en él (no está disponible, solo algo divertido que quería construir), se debería dejar parte de la funcionalidad de ventana/moderna.Afuera. Lo primero que debía hacer fue crear varias clases globales de CSS, haciéndome mucho más fácil diseñar cada elemento.Utilizo los colores que se encuentran en Mac OS 9, ilustrados a continuación.
Estos son algunos de estos estilos:. Window-Base {Box-Shadow: INSET 1PX 1PX 1PX White, 1PX 1PX 0PX #9C9C9C; Antecedentes: #cence; } .Window -Button -uter {ancho: 20px; Altura: 20px; Borde: sólido 1px negro; Box -shadow: -1px -1px 0px #9c9c9c, 1px 1px 0px blanco; } .Window-Button-Inner {box-shadow: 1px 1px 1px rgba (156, 156, 156, 0.5), -1px -1px 1px rgba (255,255,255.0.5); Ancho: auto; Altura: Calc (100% – 4px); margen: 2px; Antecedentes: RGB (130,130,130); Antecedentes: gradiente lineal (-45deg, RGBA (130,130,130, .85) 0%, RGBA (255,255,255, .85) 100%); } Una vez que generé los colores y el estilo CSS, lo siguiente que debía hacer fue instalar la fuente. Después de investigar un poco, me di cuenta de que la fuente se llama Chicago, la encontré en línea (es gratis) y la instalé en el sitio utilizando las fuentes elegantemente recomendadas por oxígeno. Hay otra fuente más delgada en uso, pero la omito de este proyecto. El primer aspecto de la página que se construirá es el encabezado.

No pude hacer nada, pero probablemente agregaría una función de menú de mega a los iconos del menú a la izquierda del encabezado si entra en producción. Esto se haría utilizando estilos CSS Hover, que se esconden y muestran submenus absolutamente posicionados. El lado derecho del menú muestra el tiempo que utiliza PHP, la ubicación de los usuarios (FLAG de EE. UU.), Que utiliza la IP del usuario y la página que están navegando actualmente, utilizando la función de datos dinámicos en Oxygen.

Ahora es el momento de construir el escritorio en sí mismo en Oxygen Builder. Se coloca debajo del menú con una altura calculada (100VH – 40px), lo que asegura que la página permanezca en una pantalla completa y ayude a posicionarse.

La ventana rastreable hay dos elementos principales que puede encontrar en esta página, los enlaces que pueden deslizarse y las ventanas que pueden ser rastreables. En este caso, las ventanas ya están abiertas cuando el usuario llega a la página, pero podemos configurarla para que los enlaces que se puedan cambiar a cada ventana por separado. Nunca pude hacer esto, pero se puede hacer simplemente con JavaScript. Elegí draggabilly.js, que es una biblioteca que “hace que [eso] sea rastreable” y se está riendo porque IE10+ y dispositivos táctiles “. En primer lugar, lo agregué al jefe del sitio web utilizando scripts avanzados. (Puede hacer esto con fragmentos de código, que es gratuito).

Aquí está la etiqueta de script: <script src = "https://unpkg.com/ogemail protegido] /dist/draggabilly.pkgd.min.js”> Después de haber agregado la biblioteca a la biblioteca Sitio, debe inicializarlo. La biblioteca tiene varias opciones y se puede inicializar utilizando Vanilla JavaScript o JQuey. Seguí un ejemplo preexistente que está en el bolígrafo de código que hizo una inicialización fácil. Todo lo que tiene que hacer es copiar y pegar esto en un bloque de código o fragmento de bacalao.

Primero, especifique la clase que hace que el elemento sea rastreable. Me quedé con predeterminado

.Gragable lo siguiente que debe hacer es elegir en qué área de su sitio se puede dibujar su artículo. De manera predeterminada, si elige la contención: True selecciona el elemento principal. Quería usar columnas para distanciar inicialmente los elementos en el escritorio, por lo que agregué una clase personalizada a ese contenedor de escritorio en oxígeno y especifiqué en JS de la siguiente manera:. Cada vez que agrega la clase personalizada de .dagagable a su sitio web de oxígeno ( Dondequiera que se inicialice la biblioteca), el elemento y todo lo que contiene será rastreable. Muy genial. Como una representación visual de la forma en que usan columnas de oxígeno para colocar inicialmente los elementos:

Además de esa sola biblioteca, el resto es solo JS y CSS Pure Style. Por ejemplo, las ventanas individuales tenían muchos de los mismos divs y estilo que los componen. Usaron muchos bordes, divs de 1 px de altura y sombras de cassette (usando interior y exterior) para agregar el estilo de profundidad que puede encontrar en el hueso 9.
El producto final fue muy fuerte y no tan difícil de construir.