3

Antes de nada os muestro mi código. Se trata de una introducción a una página web. La he hecho con un video y unos textos por encima para resumir de que trata, con sus botones de redes sociales... etc.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Intro con vídeo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="Pelayo">
    <meta name="owner" content="Pelayo">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="IMAGES/logo-siade.png">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Montserrat:300">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body,
        html {
            width: 100%;
            height: 100%;
            min-height: 667px;
            min-width: 100%;
        }
        
        body {
            font-family: 'Open Sans', Arial, sans-serif;
            position: relative;
        }
        
        #zonaIntro {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        
        #video {
            top: 0;
            left: 0;
            min-height: 100%;
            min-width: 100%;
            position: absolute;
            pointer-events: none;
            filter: brightness(55%);
        }
        
        .centrado-porcentual {
            position: relative;
            height: auto%;
            width: 100%;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        
        #cajaQuotes {
            padding: 0.5% 6%;
            width: 100%;
            height: 40;
            text-align: center;
            position: relative;
        }
        
        .centrado-porcentual h2 {
            margin: 0;
            position: relative;
            font-family: 'Montserrat', sans-serif;
            font-size: 70px;
            color: white;
            text-transform: uppercase;
        }
        
        .centrado-porcentual h2:nth-child(2),
        .centrado-porcentual h2:nth-child(3) {
            display: none;
        }
        
        #cajaSep {
            width: 55px;
            height: 3px;
            background-color: white;
            position: relative;
            left: 50%;
            transform: translate(-50%, 0%);
        }
        
        #eu {
            position: relative;
            left: 50%;
            transform: translate(-50%, 0%);
            padding: 0.5%;
            margin: 0;
            color: white;
            width: 300px;
        }
        
        #eu p {
            position: relative;
            font-size: 11px;
            margin: 0;
        }
        
        #flecha {
            font-size: 40px;
            color: white;
            position: absolute;
            left: 50%;
            top: 90%;
            transform: translate(-50%, -50%);
        }
        
        #flecha:hover,
        #flecha:active,
        #flecha:focus {
            text-decoration: none;
        }
        
        #RRSS {
            position: absolute;
            Left: 85%;
            top: 90%;
            transform: translate(-50%, -50%);
            border-bottom: 3px solid white;
            padding: 7px;
            width: 90px;
        }
        
        .redes {
            width: 45%;
        }
        
        .red1 {
            position: relative;
            float: left;
        }
        
        .red2 {
            position: relative;
            float: right;
        }
        
        @media (min-width: 768px) and (max-width: 1199px) {
            .centrado-porcentual h2 {
                font-size: 60px;
            }
            #eu p {
                font-size: 10px;
            }
        }
        
        @media (max-width: 767px) {
            .centrado-porcentual h2 {
                font-size: 40px;
            }
            #cajaSep {
                height: 2px;
            }
            #eu {
                width: 200px;
            }
            #eu p {
                font-size: 8px;
            }
            #RRSS {
                border-bottom: 2px solid white;
            }
        }
        
        @media (max-width: 480px) {
            #RRSS {
                width: 70px;
            }
            #flecha {
                font-size: 30px;
            }
        }
    </style>
</head>

<body>
    <section id="zonaIntro">
        <video id="video" autoplay loop muted poster="IMAGES/videoIntro.jpg">
            <source src="https://www.siade.eu/VIDEOS/cabecera.mp4" type="video/mp4"> </video>
        <div class="centrado-porcentual">
            <div id="cajaQuotes">
                <h2 class="quotes">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
                <h2 class="quotes">Integer ultricies dolor ac enim blandit dapibus ac id arcu.</h2>
                <h2 class="quotes">Interdum et malesuada fames ac ante ipsum primis in faucibus.</h2> </div>
            <div id="cajaSep"> </div>
            <div id="eu">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies dolor ac enim blandit dapibus ac id arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc ullamcorper sem non erat consequat feugiat. Donec vel facilisis est. Donec vel ullamcorper sem. Curabitur a aliquam orci. Quisque in fringilla lorem. Aenean ullamcorper euismod est, at porta ligula posuere nec. Mauris sagittis vestibulum nisi et pulvinar.</p>
            </div>
        </div>
        <a href="#zona2" id="flecha" class="fas fa-angle-double-down" aria-hidden="true"></a>
        <div id="RRSS"> <img class="redes red1" src="https://www.siade.eu/IMAGES/in.png" alt="Cuenta linkedin"> <img class="redes red2" src="https://www.siade.eu/IMAGES/tw.png" alt="Cuenta twitter"> </div>
    </section>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function () {
            var vid = document.getElementById("video");
            var quotes = $(".quotes");
            var quoteIndex = -1;

            function showNextQuote() {
                ++quoteIndex;
                quotes.eq(quoteIndex % quotes.length).fadeIn(1300).delay(3400).fadeOut(1300, showNextQuote);
            }
            showNextQuote();
            $(document).ready(function () {
                setInterval(function () {
                    $('#flecha').animate({
                        top: '91%'
                    }, 400);
                    $('#flecha').animate({
                        top: '90%'
                    }, 400);
                }, 0)
            });
        });
    </script>
</body>

</html>

Mis preguntas son las siguientes:

  • Cuando hago un análisis de mi sitio web, me pone que el contenido superior tarda en cargar, y supongo que es por utilizar javascript(jquery) al principio, con el cambio de textos. El video no creo que sea porque esta optimizado y ahora pesa muy poco. ¿Sería conveniente utilizar css para hacer esos cambios de texto?, y de ser así, ¿Cómo lo haría?.
  • Me gustaría que esos textos, los h2, debido a la información que contengan (mas o menos palabras) no cambien de tamaño. Así no arrastraría al texto que esta situado debajo. ¿Qué debería hacer?. He pensado en meterlo todo dentro de un div y darle un tamaño fijo, pero no se hasta que punto eso será peligroso para el responsive design...
  • ¿Algún consejo sobre el responsive?. Antes utilizaba queries a diestro y siniestro, ajustando diferente contenido al pixel. Al final en mi código tenía como 7 u 8 queries. He intentado hacerlo bien, y creo que estas son las "medidas estándar" que toda web responsive debe tener.

MODIFICACIÓN

  • ¿Cómo podría ajustar el tiempo de cada frase, al tiempo total del video?. ¿Podría recoger la duración del video y dividirla entre tres?
3
  • 1
    Estás cargando el css completo de fontawesome (use.fontawesome.com/releases/v5.0.7/css/all.css). No ocupa mucho pero algo te ahorrarías con el minificado
    – Kiko_L
    Commented el 12 abr. 2018 a las 12:55
  • @Kiko_L gracias por decírmelo, no me había dado cuenta. Saludos
    – Mr Robot
    Commented el 12 abr. 2018 a las 13:00
  • 2
    Otra cosa, estás llamando dos veces a $(document).ready(function (){});
    – Kiko_L
    Commented el 12 abr. 2018 a las 13:12

2 respuestas 2

1

Cuando hago un análisis de mi sitio web, me pone que el contenido superior tarda en cargar

Lo más seguro es se refiera al vídeo, aunque pese poco (~ 4 megas), para el analizador el hecho de que algo pese más de 1.5mb es demasiado. Por lo que puedes ignorar el mensaje, ya que no es cuestión del código o tratar de optimizar más el peso del vídeo o al menos su forma de visualizarlo.

Lo otro que recomiendo es que debería haber un color de fondo en el contenedor del texto, ya que lo ideal es que el contenido al usuario sea visible siempre y pasa que mientras este no cargue parece un error como si no haya ningún contenido.

supongo que es por utilizar javascript(jquery) al principio

Es mejor colocar el Jquery justo antes del cierre de la etiqueta body, si no tienes mucho manejo de js, es más que conveniente.

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--Contenido-->
  <script src="jquery.js"></script>
</body>

He visto el código y así lo tienes, pero te lo recomiendo sin dudas.


¿Sería conveniente utilizar css para hacer esos cambios de texto?, y de ser así, ¿Cómo lo haría?.

Es preferible si es dinámico que sea en Jquery o Javascript, ya que aunque es posible realizar el mismo efecto con css, no sería igual de dinámico, ya que tendrías que calcular los tiempos manualmente y ajustarlo en el css en todas las propiedades y clases que haga falta. En pocas palabras No es que no se pueda, es que se complica demasiado administrarlo o configurarlo. Ejemplo:

En el html

<h2 class="animacion titulo">
  <span class="texto1 texto"> Texto 1 </span>
  <span class="texto2 texto"> Texto 2 </span>
  <span class="texto3 texto"> Texto 3 </span>
</h2>

En el CSS

.animacion.titulo .texto{
  animation: texto-titulo ease infinite;
  animation-duration: 3s;
}

.animacion.titulo .texto1{
  animation-delay: 0s;
}

.animacion.titulo .texto2{
  animation-delay: 1s;
}

.animacion.titulo .texto3{
  animation-delay: 2s;
}

@keyframes texto-titulo{
  5%, 30%{
    opacity: 1;
  }
  0%, 35%, 100%{
    opacity: 0;
  }
}

Que quiere decir lo anterior? 1) pues que si quieres que cada titulo dure en escena al menos un segundo, tienes que multiplicar este número por 3 y tienes el animation-duration: 3s;.

2) A cada título, le estableces un tiempo de atraso o de cuando aparece en pantalla empezando por 0 e ir incrementando el tiempo de salida por la duración de cada título, es decir, el primer texto, aparece a los 0 segundos, el segundo texto aparece a1 1 segundo y el tercero aparece a los 2 segundos.

3) Creas la animación definiendo los tiempos en pantalla que va a durar por cada texto, entonces, son 3 textos, es decir: 100% / 3 = 33.3%, entonces cada texto debe aparece cada 33.3% del tiempo definido, pero ademas de esto tienes que sumar el tiempo en transición (es decir que se anime de opacity 0 a 1) y así puedes definir que:

0% { opacity: 0; } 
5% { opacity: 1; } 
33.3% { opacity: 1; }
35% { opacity: 0; }
100% { opacity: 0; }

Que yo lo resumi arriba y sin complicarme usando decimales así:

5%, 30%{ opacity: 1; }
0%, 35%, 100%{ opacity: 0; }

Es decir, si agregas algun otro texto, tienes que calcular lo de arriba, si quieres que la duración por cada titulo sea mayor, digamos 5 segundos por cada uno, tienes que realizar la modificación en cada una de las propiedades, cosa que si dominas custom-properties y tienes mucha experiencia usando css podrás hacer el cambio cada vez que sea necesario, pero si lo que quieres es no tener que modificar el código cada vez que agregas un titulo o quieres aumentar los tiempos de cada animación, lo mejor es usar jquery.

Ejemplo de si quieres aumentar a 4 los textos y a 3 segundos cada titulo:

.animacion.titulo .texto{
  animation: texto-titulo ease infinite;
  animation-duration: 12s; /*Multiplicas 3 segundos por 4 textos*/
}

/*Aumentas de 3 segundos cada tiempo de aparición*/
.animacion.titulo .texto1{
  animation-delay: 0s;
}

.animacion.titulo .texto2{
  animation-delay: 3s;
}

.animacion.titulo .texto3{
  animation-delay: 6s;
}

.animacion.titulo .texto3{
  animation-delay: 9s;
}

/*Divides el 100% del tiempo en 4 = 25% y calculas los otros porcentajes a partir de allí*/
@keyframes texto-titulo{
  5%, 20%{
    opacity: 1;
  }
  0%, 25%, 100%{
    opacity: 0;
  }
}

Aquí la demo en vivo:

*{
  box-sizing: border-box;
}

body{
  background: dimgray;
  color: white;
  font-family: arial;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  min-height: 100vh;
  margin: 0;
}

.titulo{
  padding: 1em;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  line-height: 1.5em;
  height: 3em;
  justify-content: center;
  align-items: center;
}

.titulo .texto{
  opacity: 0;
  width: 100%;
  padding: 0 1em
}

.animacion.titulo .texto{
  animation: texto-titulo ease infinite;
  animation-duration: 12s;
  position: absolute;
}

.animacion.titulo .texto1{
  animation-delay: 0s;
}

.animacion.titulo .texto2{
  animation-delay: 3s;
}

.animacion.titulo .texto3{
  animation-delay: 6s;
}

.animacion.titulo .texto4{
  animation-delay: 9s;
}

@keyframes texto-titulo{
  5%, 20%{
    opacity: 1;
  }
  0%, 25%, 100%{
    opacity: 0;
  }
}
<h2 class="animacion titulo">
  <span class="texto1 texto"> Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 </span>
  <span class="texto2 texto"> Texto 2 </span>
  <span class="texto3 texto"> Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 </span>
  <span class="texto4 texto"> Texto 4 Texto 4 Texto 4 </span>
</h2>

<p>
  lorem ipsum
</p>


Me gustaría que esos textos, los h2, debido a la información que contengan (mas o menos palabras) no cambien de tamaño.

Es un comportamiento normal y preferible si el largo del contenido del h2 siempre va a cambiar y no tener las misma cantidad de palabras o letras, sin embargo si aún deseas que no cambie la altura, lo mejor es definir una altura fija con la medida en ems y tratar de calcular cuántas líneas de texto máximo habrán, centrando siempre al centro el texto. Ejemplo:

h2{ /*No hay necesidad de agregar un div*/
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.2em /*Altura máxima entre cada linea (el Interlineado)*/
  height: calc(1.2em * 4); /*Siendo 4 el número máximo de líneas posible y 1.2 el interlineado definido arriba, use **calc** pero tu puedes usar sin problemas la medida total: 4.8em*/
}

Aclaración: Un "em" es una medida tipográfica y equivale a la altura y anchura definida para la letra "M" de la tipografía escogida como fuente de letra, es dinámica y variable dependiendo del "font-size" elegido en el padre o ancestro. También puedes usar "Rem" de esta forma no tomara en cuenta la medida del contenedor sino el que definas en la raíz del documento, (el body o html). Por ejemplo si el font-size del h2 es de 18px, entonces el line-height: 1.2em equivale a: 21.6px, en cambio si fuera de 24px, el mismo 1.2em equivaldría a: 28.8, esto permite que solo definas una medida y cuando cambies el tamaño de la letra todo lo demás se ajuste a este cambio y no tengas que cambiar la medida en cada una de los atributos que dependen de ello. Si aún tienes dudas sobre ello, escribemelo en los comentarios.


¿Algún consejo sobre el responsive?

Si nos comparas a la situación anterior, donde tenías 7 breaking points y ahora usas solo 3 mediaqueries, pues has mejorado bastante.

Aunque yo te recomiendo y aconsejo:

  • Pensar más first-mobile (primero diseñó para smartphones y luego lo agrandas). Es decir, no usar: max-width, sino min-width.
  • Usa medidas estándar para los media queries y haz que tu diseño se adapte a ella, un ejemplo son las de Bootstrap o las de foundation.
  • Aprende a usar bootstrap una vez domines la técnica anterior (muchos te recomendarán lo contrario, pero por experiencia, así solo usas la herramienta pero no la dominas).

Sí te queda alguna duda, usa la caja de comentarios. Espero que lo anterior sea de ayuda.

0

hay algunos patrones de esta estructura que podrían ser modificados para una potencial mejora.

-Personalmente de recomiendo poner tus estilos en un archivo CSS separado, no por velocidad si no debido a futuras ediciones y para trabajar en múltiples paginas.

-Para aumentar la velocidad de carga de la pagina prueba a cambiar los formatos de las imágenes y vídeos a formatos mas antiguos, esto lo puedes hacer con programas de edición como GIMP o desde paginas web. Te recomendaría usar el formato BMP para las imágenes(Permite transparencias).

-Al definir tamaños de divs intenta no usar px, personalmente recomiendo usar escalado porcentual como vm/vh o %. Para el escalado de la caja de h2 usa un tamaño porcentual ejemplo: 20vm asegurandote de que en el momento de máximo texto nos se sobresale.

-El analisis web es una buena herramienta para localizar errores pero no es exacta, esta la pagina ya en un hosting, si es así prueba tu mismo los tiempos de carga y respuesta, no siempre son tan malos como podrían parecer.

Espero que ayude.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.