1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

[Ayuda] ¿Cómo dividir la pantalla en 4?

Tema en 'Tutoriales de la comunidad' comenzado por westa+, 13 de Octubre de 2016.

  1. westa+

    westa+ Nuevo Miembro

    Se incorporó:
    8 de Noviembre de 2015
    Mensajes:
    4
    Me gusta recibidos:
    1
    Puntos de trofeos:
    3
    Género:
    Hombre
    Buenas tardes. Disculpen la sencillez del título, es que no sé si me podré dar a entender bien, aunque no es difícil imaginarse a lo que apunto.

    Estoy interesado en crear un sitio web de astronomía, por lo que tengo como objetivo dividir la home principal en cuatro partes: La Tierra, Sistema Solar, Galaxias y Universo. Imagínense la pantalla de la computadora, dividida en cuatro secciones, es decir, cuatro rectángulos. ¿Eso se trabaja con divs? ¿O existe alguna otra manera de realizarlo? Tener en cuenta que, además, quisiera agregar animaciones en cada uno de esos contenedores o, de ser posible, un video "de fondo". ¿Es posible?

    No espero (ni pretendo) que me resuelvan el problema, pero sí agradecería que al menos pudiesen orientarme sobre cómo comenzar.

    Desde ya, ¡muchas gracias por leer!

    Saludos.
     
  2. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    653
    Me gusta recibidos:
    492
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Hola, si así es lo puedes realizar con divs, section o article (pero seria este mas para contenido) u otro tipos de elementos... Efectivamente igual puedes agregarle animaciones a cada unos si lo deseas.. ya sea con solo CSS3 o utilizando mediante jQuery...

    Pos mas que nada para poder comenzar un desarrollo de sitio web... Debes de analizar la maquetación (diseño) de como quieres que este el sitio de tu página... ya teniendo en claro en mente que datos, forma, imagen u otro contenido, empiezas a realizar tu diseño utilizando la técnica de Front End (Html, css y javascript) para la parte visual del usuario... y luego puedes proseguir en la parte de la programación interna de tu sitio a través de una conexión de base de datos " Bueno no se, si utilizaras base de datos..."

    Saludos..
     
    A westa+ y AngelKrak les gusta esto.
  3. westa+

    westa+ Nuevo Miembro

    Se incorporó:
    8 de Noviembre de 2015
    Mensajes:
    4
    Me gusta recibidos:
    1
    Puntos de trofeos:
    3
    Género:
    Hombre
    ¡Hola! Muchas gracias por responder.

    Gracias por el consejo y por tu respuesta.

    Lo que hice fue comenzar a hacer un sitio "One Page" con cuatro sections; dentro de cada una de ellas, planeo insertar un video de fondo + títulos + descripción (Sistema Solar, Galaxia, etc..), y ubicar un botón que lleve al usuario a otra página en donde se desarrolle el tema. De todas maneras, la mayor parte del proyecto está en mi cabeza, primero quiero despejarme las dudas. Por lo que ahora debo centrarme en ver cómo inserto un video (busqué, probé, pero sólo se escucha y no se ve). Ya intenté con z-index, y demás. Debo tener algún error básico en la estructura.. jej.

    Muchas gracias por tu respuesta, Dawud.
     
    A Dawud le gusta esto.
  4. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    653
    Me gusta recibidos:
    492
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Jejeje eso es weno... Aquí te dejo un link de un pequeño video



    Solo te queda adaptarlo a tu sitio web ... Espero que sea de gran ayuda y suerte...
     
    A westa+ le gusta esto.
  5. westa+

    westa+ Nuevo Miembro

    Se incorporó:
    8 de Noviembre de 2015
    Mensajes:
    4
    Me gusta recibidos:
    1
    Puntos de trofeos:
    3
    Género:
    Hombre
    ¡Muchísimas gracias!

    La verdad que estuve viendo videos toda la tarde y en ningún momento pasé por ese, jaja. Inmediatamente lo veo.

    Nuevamente, ¡gracias!
     
  6. KaoruMishimaru_20

    KaoruMishimaru_20 Miembro conocido

    Se incorporó:
    11 de Agosto de 2015
    Mensajes:
    505
    Me gusta recibidos:
    318
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    KaoruMishimaru
    Localización:
    Argentina, Buenos Aires, La Plata
    Página web:
    J&G Proyectos web, tiene buenos vídeos. Ahora, si vas a poner en 4 divs (O sections, o articles), un vídeo de fondo en cada div, la verdad que no me gusta la idea. Primero que va a tardar muchisimo en cargar la web, y segundo por un tema de rendimiento.
    Ya de por si, cuando entro a una web con un solo vídeo de fondo, el mouse hasta va lento. Yo lo pensaría, y mi PC no es que sea mala, de hecho le acabo de mejorar un poco más.

    Con lo que respecta a tu problema, yo lo hice así: http://codepen.io/KaoruMishimaru/pen/ZpqGLX
    Ya se que lo solucionaste, pero por ahí te ayuda un poco.
     
    A westa+ le gusta esto.
  7. westa+

    westa+ Nuevo Miembro

    Se incorporó:
    8 de Noviembre de 2015
    Mensajes:
    4
    Me gusta recibidos:
    1
    Puntos de trofeos:
    3
    Género:
    Hombre
    Gracias por tu respuesta! La verdad es que sí, después de pensarlo no tiene sentido (no es útil, en realidad) cargar el sitio con tantos videos. Sigo manteniendo mi idea, pero ahora quiero colocar un video de intro (home) con cuatro secciones One Page, sólo con una imagen y algo de texto.

    Por cierto, el link que me pasaste es de mucha utilidad, de hecho lo voy a utilizar para una de las páginas, jej.

    Nuevamente, gracias.

    ¡Saludos!
     
  8. gyrutech

    gyrutech Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    99
    Me gusta recibidos:
    55
    Puntos de trofeos:
    18
    Género:
    Hombre
    Hola por si te interesa... Lo que puedes hacer es una animación con svg y quedaría mucho más chula y el rendimiento sería óptimo. En codepen.io tienes varios ejemplos. Observalos si te agrada la idea.
     
    A AngelKrak le gusta esto.

Comparte esta página