# GUÍA MINUCIOSA — ROLAVI website estilo PIX4Dcatch Hermano, esta versión está preparada para abrirse en VSCode con **Live Server**. La idea es mantener la web ligera: las imágenes se cargan desde la carpeta `assets/img/` y los videos vienen de YouTube. ## 1. Cómo abrir el proyecto en VSCode 1. Descarga y descomprime el ZIP. 2. Abre la carpeta `rolavi_website_pix4dcatch_refined` en VSCode. 3. Instala la extensión **Live Server** si no la tienes. 4. Haz clic derecho en `index.html`. 5. Selecciona **Open with Live Server**. 6. Prueba también estas páginas: - `products.html` - `manual.html` - `videos.html` - `software.html` - `about.html` - `contact.html` No abras el sitio solo con doble clic si quieres probar YouTube correctamente. Es mejor usar Live Server. --- ## 2. Estructura principal de carpetas ```txt rolavi_website_pix4dcatch_refined/ ├── index.html ├── products.html ├── manual.html ├── videos.html ├── software.html ├── about.html ├── contact.html ├── assets/ │ ├── css/styles.css │ ├── js/main.js │ ├── img/ │ │ ├── brand/ │ │ ├── flags/ │ │ ├── hero/ │ │ ├── products/ │ │ └── sections/ │ └── pdfs/ │ ├── products/ │ └── manuals/ └── docs/ └── GUIA_IMAGENES_VIDEOS_ES.md ``` --- ## 3. Cómo cambiar el logo de ROLAVI El menú superior usa este archivo: ```txt assets/img/brand/rolavi-logo-black.png ``` El footer usa este archivo: ```txt assets/img/brand/rolavi-logo-white.png ``` ### Forma más fácil Reemplaza esos archivos por nuevos logos con el mismo nombre. Recomendación: - Logo negro: PNG transparente, ancho entre 1200 px y 2000 px. - Logo blanco: PNG transparente, mismo tamaño que el negro. - No uses JPG para el logo porque genera fondo blanco o manchas. --- ## 4. Cómo cambiar las imágenes de productos Las tarjetas usan estas imágenes: ```txt assets/img/products/rl-hl01.jpg assets/img/products/rl-hl02.jpg assets/img/products/rolavicam.jpg assets/img/products/rolaviscan.jpg assets/img/products/rolavi-geostudio.jpg ``` ### Forma más fácil 1. Exporta tu imagen real en JPG. 2. Usa exactamente el mismo nombre del archivo. 3. Reemplaza el placeholder. 4. Refresca el navegador. ### Tamaño recomendado Para productos: ```txt 1600 x 1100 px ``` También funciona: ```txt 1200 x 900 px 1920 x 1200 px ``` Consejos: - Usa fotos con fondo limpio. - Deja aire alrededor del producto. - No coloques texto pequeño dentro de la imagen; mejor ponerlo en HTML. - Si la imagen pesa más de 500 KB, comprímela. --- ## 5. Cómo cambiar las imágenes del workflow Estas imágenes aparecen en la sección de flujo de trabajo del Home: ```txt assets/img/sections/workflow-capture.jpg assets/img/sections/workflow-rtk.jpg assets/img/sections/workflow-process.jpg assets/img/sections/ecosystem.jpg ``` Reemplaza cada archivo con imágenes reales de campo, screenshots de software o renders de producto. Tamaño recomendado: ```txt 1600 x 1100 px ``` --- ## 6. Cómo cambiar el video del celular Samsung en el Home El video está dentro del celular inclinado en `index.html`. Busca esta línea: ```html ``` Para cambiar el video, solo reemplaza el ID: ```txt 0-s2XhRrj0Q ``` Ejemplo: si tu video es: ```txt https://www.youtube.com/watch?v=ABC123XYZ ``` Entonces el ID es: ```txt ABC123XYZ ``` Y la línea queda: ```html ``` ### Importante sobre el audio El video se carga sin audio porque en `assets/js/main.js` está configurado con: ```js mute: '1' controls: '0' loop: '1' ``` Eso mantiene el video más limpio, sin controles y en silencio. --- ## 7. Cómo evitar que el video se salga del celular La parte clave está en `assets/css/styles.css`. No elimines estas clases: ```css .phone-screen-mask { overflow: hidden; clip-path: inset(0 round 40px); } ``` Esa máscara recorta el video dentro de los bordes redondeados del Samsung. Si se elimina, el video puede verse encima de las esquinas. El iframe está un poco más grande que la pantalla para que llene todo sin bordes negros: ```css .phone-screen-mask iframe { inset: -9%; width: 118%; height: 118%; } ``` Si tu video se ve demasiado ampliado, cambia a: ```css inset: -4%; width: 108%; height: 108%; ``` Si tu video deja bordes negros, vuelve a aumentar esos valores. --- ## 8. Cómo cambiar la inclinación del celular En `assets/css/styles.css`, busca: ```css .phone-device { transform: rotateZ(8deg) rotateY(-15deg) rotateX(3deg); } ``` Opciones: ### Más inclinado ```css transform: rotateZ(12deg) rotateY(-18deg) rotateX(4deg); ``` ### Menos inclinado ```css transform: rotateZ(4deg) rotateY(-8deg) rotateX(2deg); ``` ### Recto ```css transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg); ``` --- ## 9. Cómo cambiar los videos en la página VIDEOS Abre: ```txt videos.html ``` Busca bloques como este: ```html
``` Cambia el ID de YouTube en: ```html data-youtube-card="0-s2XhRrj0Q" ``` También cambia el título dentro de: ```html

ROLAVICam field capture demo

``` Para agregar otro video, copia y pega el bloque completo. --- ## 10. Cómo cambiar PDFs técnicos de productos Los botones **Technical PDF** usan estos archivos: ```txt assets/pdfs/products/rl-hl01-datasheet.pdf assets/pdfs/products/rl-hl02-datasheet.pdf assets/pdfs/products/rolavicam-datasheet.pdf assets/pdfs/products/rolaviscan-datasheet.pdf assets/pdfs/products/rolavi-geostudio-datasheet.pdf ``` ### Forma más fácil Reemplaza cada PDF usando exactamente el mismo nombre. No necesitas tocar HTML si mantienes el nombre del archivo. --- ## 11. Cómo cambiar manuales Los manuales están aquí: ```txt assets/pdfs/manuals/rl-hl01-manual.pdf assets/pdfs/manuals/rl-hl02-manual.pdf assets/pdfs/manuals/rolavicam-manual.pdf assets/pdfs/manuals/rolaviscan-manual.pdf assets/pdfs/manuals/rolavi-geostudio-manual.pdf ``` Reemplaza los PDFs placeholder por los manuales finales. --- ## 12. Cómo cambiar precios y links Shop Abre: ```txt products.html ``` Busca el nombre del producto, por ejemplo: ```html RL-HL01 ``` Para cambiar el precio, busca: ```html US$1,699 ``` Para cambiar el botón Shop, busca: ```html ``` Cambia el `href` por el link de compra final. --- ## 13. Cómo cambiar colores generales Abre: ```txt assets/css/styles.css ``` Al inicio están las variables: ```css :root { --green: #00e676; --cyan: #29d3ff; --ink: #07111f; --night: #111a26; } ``` Puedes cambiar solo esos valores y el sitio completo cambia. Para mantener estilo tipo PIX4Dcatch/viDoc, se recomienda: - Fondo hero: azul oscuro / negro. - Acento principal: verde brillante. - Acento secundario: cyan. - Secciones internas: blanco y gris suave. --- ## 14. Cómo editar el ecosistema ROLAVI La sección más importante está en `index.html`, busca: ```html
``` Ahí están los pasos: 1. Capture 2. Position 3. Validate 4. Process 5. Deliver Cada paso usa esta estructura: ```html
01

Capture

Texto descriptivo...

ROLAVICam Photos
``` Puedes cambiar: - Título del paso en `

` - Texto explicativo en `

` - Etiquetas en `` Esta sección debe explicar muy bien cómo se conectan hardware, app, software y entregables. --- ## 15. Cómo publicar en www.rolavisurveyor.com Cuando todo esté aprobado: 1. Entra al hosting o cPanel. 2. Abre el administrador de archivos. 3. Entra a `public_html` o la carpeta raíz del dominio. 4. Sube **el contenido interno** de la carpeta, no la carpeta completa. 5. Asegúrate de que `index.html` quede directamente en la raíz. 6. Prueba: ```txt https://www.rolavisurveyor.com/ ``` --- ## 16. Nota sobre el correo El sitio usa el correo que pasaste: ```txt contact.rolavi@rolavisurveyor.com ``` Si el correo correcto lleva la letra **t**: ```txt contact.rolavi@rolavisurveyor.com ``` cámbialo en: - `contact.html` - el footer de todas las páginas - `docs/GUIA_IMAGENES_VIDEOS_ES.md` si deseas mantener la guía actualizada