Topics

todos"Oficina Verde¿Conoces el sitio web llamado...?

Todo el contenido que publicamos, incluyendo nuestro sitio web corporativo, es esencialmente un banco de pruebas. (¡Excepto la solicitud de accesibilidad del Sr. Futamata! Por cierto, este sitio aún no cumple con las WCAG 😭)

Todo comenzó hace unos 5 o 6 años, durante la pandemia de COVID-19, cuando un director ejecutivo aburrido decidió realizar algunas mejoras ecológicas por su cuenta en su oficina.https://yurulog.liberogic.jp/posts/qx9nibr59）

La primera petición irrazonable @2023

Requisitos

• Tuve un cliente que quería crear una página web de afiliados, ¡así que pensé que sería divertido hacer un pequeño experimento! (Al final, el cliente desistió, así que solo fue un experimento).
• ¿Qué tal si intentamos ver si podemos calificar para el programa de afiliados de Amazon sin tener una página propia, indexando la página que se despliega dentro de la ventana modal? (¡Compramos muchas cosas para hacer la oficina más ecológica, así que usémoslas como material!)
• No tengo mucha experiencia con trabajos que impliquen rotar grabaciones de 360°. Hay bibliotecas y parece fácil, ¡así que vamos a intentarlo!
• No me importan las ganancias ni nada por el estilo, así que si funciona, lo publicaré como un experimento y una experiencia de aprendizaje.
• Nuestro sitio web es un conejillo de indias para nuestros clientes, ¿sabes? ¿Lo entiendes? (❓)

Esos fueron los requisitos que me impusieron poco después de incorporarme a la empresa.

La implementación comenzó en febrero de 2023, ¡y este documento detallará el historial de mejoras y adiciones de contenido hasta la fecha!
¡Démosle a Liberogic Office Green su momento de gloria! ☀️

Conjunto de tecnologías

• Vanilla JS (ES Modules)— Sin marco,import/exportDivisión de módulos personalizados
• Pannellum- Biblioteca de visor panorámico de 360 ​​grados (disponible localmente)pannellum/(Instalado como carpeta, autoalojado, no a través de CDN)
• HTML / Sass- Estilo de marcado

API y servicios externos

Ante todo, la característica principal de este sitio es el contenido giratorio de 360°. Usaremos una cámara RICOH "THETA SC2" para fotografiar la oficina.

Aquí está la foto original que se tomó.

La implementación de 360° esPannellunEsta biblioteca se utiliza. Simplemente configurando la imagen capturada, puedes verla en 360°.

Descargué la biblioteca directamente en lugar de usar una CDN porque quería realizar varias personalizaciones.

Personalización

Coloca una "i" junto al producto que deseas presentar y, al pasar el ratón por encima, el nombre del producto se mostrará en una burbuja emergente.

Al hacer clic, se mostrará una ventana emergente de presentación del producto, que lleva a un enlace de Amazon Associates. En la esquina inferior derecha, el plano de la oficina mostrará marcadores de estrellas que indican la ubicación.

Las reseñas de productos son totalmente imparciales e incluyen la opinión sincera del director ejecutivo.

También puedes cambiar a una vista con las luces de la habitación apagadas usando el interruptor en la parte superior izquierda, ¡y hacer clic en la flecha para ir al escritorio del director ejecutivo!

Gestionamos nuestros productos mediante hojas de cálculo en lugar de un CMS, para facilitar la edición y modificación.

La razón es,

"Los clientes prefieren un funcionamiento más sencillo, ¿verdad? ¡Intentemos integrarlo usando hojas de cálculo!"

Estoy obteniendo datos de una hoja de cálculo y cargándolos en una ventana modal, pero... funciona, pero...

"Esta página es muy lenta~"

…………

La API esPunto de acceso personalizadoUtilicé el código fuente de [nombre de la fuente] como base. La referencia original solo permitía colocar una marca en cualquier ubicación y mostrar texto al pasar el cursor sobre ella, pero añadí varios elementos originales, como la visualización de ventanas modales y el cambio de vistas.

¡Por fin está terminado! 🎉
¡Estaba tan contenta cuando lo terminé que no paré de navegar por la página una y otra vez!

Programa de afiliados de Amazon

Como probablemente ya sabrás, se trata de un servicio de afiliados para productos de Amazon.

El procedimiento es el siguiente.

• El contenido del sitio web debe ser reciente (generalmente actualizado en los últimos 60 días / el sitio debe estar claramente operativo).
• El número de artículos y elementos de contenido es de 10 o más.
• Una vez que podamos incluir enlaces a productos, añadiremos un aviso sobre el uso del programa de afiliados de Amazon a nuestra página de política de privacidad.
• Se requieren tres ventas dentro de los 180 días posteriores al registro (no se permiten ventas entre miembros de la misma cuenta o de la misma familia).
• La URL introducida es correcta y el sitio se puede verificar.

Etcétera.

Una vez que hayas realizado tres ventas en un plazo de 180 días, tu solicitud será revisada y, si se aprueba, podrás ganar comisiones como asociado.

No revelan sus criterios de evaluación, así que no obtendrás respuesta aunque preguntes. ¡Parece que su proceso de evaluación es más estricto que el de otros sitios de afiliados!

¡Y he superado con éxito el programa de afiliados de Amazon! ㊗️
La principal fuente de ingresos es el sitio web de afiliados de compras de mi madre y del presidente de la empresa.¡Y así nació! 💥

* Sé que no es buena idea comprar esto para familiares, pero... lo siento si esto provoca que me revoquen mi membresía de Amazon Associates m(_ _;)m

Las ventas avanzan a paso de tortuga, ¡pero los resúmenes y las tasas de conversión son bastante interesantes!

Próxima misión en 2024

Lo dejé de lado por un tiempo, lo que provocó una pausa en mi trabajo. Y entonces llegó la siguiente tarea...

Requisitos

• ¿No es un poco deficiente la indexación de páginas?
• Añadamos también algo de espacio para oficinas.
• Ya que estás en ello, ¿por qué no te cambias a Next.js?

Otra petición irrazonable.

Conjunto de tecnologías

Estoy usando los archivos JS y CSS de Panellum en un directorio público, pero ¿es más común importarlos usando npm?
Parece que recientemente se ha lanzado una librería para Next.js; la implementación habría sido mucho más sencilla si la hubiera tenido durante el proceso.

También tuve en cuenta la accesibilidad web e hice posible su funcionamiento mediante teclado.

Los modales son indexados por el SEO de Google./item/{num}Se añade el parámetro y se implementa utilizando las rutas paralelas de Next.js para que se cuente como una sola página.

¿El cambio de RSC a RSC mejorará el SEO?

Los pedidos continúan.

Requisitos

• Lo siento, pero tuve problemas con seguridad, ¡así que eliminé el espacio de oficina! (Completado: lo agregué, pero lo marqué en la lista negra).
• Es demasiado lento... ¿Está fallando el renderizado? (Casi terminado)
• Ya que tenemos LLM, ¿por qué no automatizar algo? ¡Quiero incorporar un concepto completamente diferente! (ImaKoko: ¿Qué significa eso?)
• Si añades algunos productos...

Un sitio web de afiliados experimental y en constante evolución.Liberogic office green ¡Y eso es todo!

Me encanta el confeti de la pantalla de inicio y la ilustración del CEO en la ventana emergente, ¡que le dan un aire de tienda pequeña e independiente! También me gusta añadir estas pequeñas modificaciones por mi cuenta cuando tengo tiempo libre, pensando: "¡Esto podría ser divertido!". ¡Probablemente seguirá evolucionando!

¿Resumen?

Cuando lo desarrollé inicialmente con JavaScript puro, implementé la mayor parte yo mismo, pero a medida que realicé varias revisiones, el anidamiento de funciones se volvió más complejo. Quizás hubiera sido más fácil si la IA hubiera estado tan avanzada como ahora cuando lo rehíce con Next.js, pero, por otro lado, he acumulado conocimientos."Utilizamos la IA con pleno conocimiento de sus capacidades."Me pregunto si está funcionando.

Es uno de mis sitios favoritos, pero ¿qué opináis vosotros?

¡No dude en echar un vistazo y hacer un recorrido por nuestra oficina!