Cómo usar Premiere Pro y Dreamweaver 2017 para crear un sitio web con un video de fondo

1. Fondos de video de 01 introducción: Hola, mi nombre es Dan, y en este curso, lo que haremos es crear un video, luego iremos a construir un sitio web, y agregaremos un video como fondo. Se ve realmente elegante, pero es bastante fácil de hacer. Construí este curso para principiantes. No hace falta saber codificar o trabajar con video antes, empezaré justo en los súper básicos. Este podría ser totalmente tu primer sitio web de la historia. Sería un primer sitio web bastante impresionante. Pasaremos por el proceso completo. Te mostraré cómo encontrar algún video, pasaremos por cómo editar en Premiere Pro. Haremos efectos de video geniales como desenfocos, y tintes, y transiciones. Te mostraré cómo exportar el video para que puedas obtener el tamaño del archivo súper pequeño. Una vez que hayamos creado nuestro video, vamos a ir a través y construir juntos un sitio web básico, y hacer que nuestro video se vea fresco y lleno de pantalla. También crearemos una segunda opción con las selecciones de video a través de un pequeño cuadro específico en desarrolladores. También estoy feliz de ayudar. Soy bastante útil para responder a los comentarios que están en las diferentes páginas. Aléjate, te daré una mano. También hay una hoja de trucos que puedes imprimir, seguir adelante, y si eres profesor, también hay algunos recursos didácticos disponibles. Y lo mejor de ello? Es en realidad no es tan difícil, pero el resultado final es bastante impresionante. Entonces, ¿qué tal? Yo, tú, y unos videos e iremos a hacer algo de magia de Internet juntos. Sí, pero creo que dije cool e impresionante unas 100 veces en esta introducción, eso consigue un nuevo récord. 2. 02 Recursos y lo que está cubierto en el curso: Hola, ahí. Hablemos de lo que estamos haciendo y de los recursos que tengo. En primer lugar es lo que estamos haciendo es que va a ser un fondo de video con texto e imágenes, básicamente todo un sitio web sobre la cima. No va a ser como esos pequeños videos incrustados como YouTube o Udemy con botones de reproducción y ese tipo de cosas como parte de un sitio web, definitivamente es como un fondo abstracto, como un gran efecto en el fondo y la web por encima de la parte superior. También haremos el video real en lugar de simplemente saltar a hacer el sitio web, te mostraremos cómo realmente conseguir ese video bonito y pequeño editar, arreglar, todo eso, y Premiere Pro. En After Effects funcionan las mismas técnicas, pero vamos a usar Premiere Pro en esta, así que lo haremos y me saltaré al final del sitio web. Ahora, hay archivos de ejercicios, por lo que puedes jugar. Habrá un enlace en esta página, puedes descargarlos y jugar junto con los videos. También hay algo llamado los archivos completados. Simplemente significa que cuando llegue al final de cada video, hay alrededor de 15 impares en esta serie, pero al final del video, lo que haré es, voy a guardar mi proyecto, voy a codificar que estoy hasta escribir, que si estás teniendo problemas tratando de mantenerte al día o algo no funciona del todo igual que el mío, puedes descargar ese archivo completado y solo revisar el tuyo versus el mío, y vamos a ver dónde podrías haber ido mal, así que habrá un enlace en esta página también. Cuando termines, ¿podrías publicar tu proyecto? Apenas en un enlace en algún lugar de la página, alguna forma de ponerse en contacto conmigo, o capturas de pantalla. No tiene que ser un sitio de trabajo completo. Yo sólo quiero ver lo que has hecho. Mencioné que estarás realmente orgulloso de ello, porque cuando eres nuevo en ello, es un trabajo mucho más duro, pero me gusta verlo como profesor. A mí me gusta ver lo que has hecho y solo es bueno otras personas vean cómo lo has hecho y adaptarte al curso, así que publica tus proyectos. La otra cosa que realmente me gustaría que hicieras es que me hicieras una reseña. Es un poco temprano en el video para estar diciéndome, dame una reseña, pero dependiendo de diferentes sitios, van a aparecer temprano, a veces tarde al final, sobre ofrecer una reseña. Para que lo sepas, esas críticas es como miden el éxito de un curso, podrías llegar al final, mucha gente llega al final y o más bien [inaudible] lo hago yo prefiero revisar, y eso también está bien. Pero si sí pusiste una crítica, honesta, no quiero nada de honestidad, pero ese tipo de cosas ayudaron a mis rankings y mi curso podría hacer un poco más y traerme un poco más de ingresos para mí como maestra. Este curso, también he hecho una hoja de tramposos. Habrá una versión en video y una versión en PDF imprimible. También habrá un enlace en la página, esas hojas de tramposos. Para que puedas salir e imprimirlas y pegarla junto a tu computadora solo para que, cuando seas nuevo, acostumbrarte a las cosas, compartir esas cosas también y hacerlas compartir alrededor. Así que publícalos y compártelos si te gustan. último bit es, si eres profesor, viendo esto para enseñarlo, tienes una clase mañana y tienes que enseñar fondos de video, tengo página de recursos docentes donde puedes conseguir notas impresas, ver estos cursos, hacer las notas impresas, echa un vistazo a eso también, habrá un enlace en la página, hay muchos enlaces en esta página. Eso es todo por recursos y cosas que vamos a hacer en este curso. 3. 03 ejemplos de fondo de video de pantalla completa en los sitios web: Hola, ahí. En este video, vamos a ver lugares geniales para obtener ejemplos de videos de fondo de pantalla completa y este es probablemente el mejor sitio que uso. Se llama Awwwards, pero tiene dub-dub-dub, así que son los premios dub-dub-dub. Aquí hay un montón de cosas y la inspiración de Kenten. El camino más fácil es, ¿ves esta búsqueda en la parte superior izquierda? Simplemente puedes escribir video, poner en segundo plano y buscará a través de sus bóvedas todas esas. Entonces lo que haces es abrir un puñado de ellos, solo echar un vistazo. Para abrirlas. Si se ciernen arriba, ¿pueden ver esta pequeña flecha aquí? ¿ Eso abrirá esa página web? De acuerdo, lo sé. Lo que puedes hacer es hacer clic en él y salta a esa página. [ inaudible] Si mantienes presionada la tecla de comando en un Mac o la tecla de control en un PC, antes de hacer clic en ella con el ratón, mira esto. Puedes ver que se abren en una pestaña separada. A mí me gusta hacer eso, me gusta simplemente pasar, ir y hacer click, click. Apenas abriendo un puñado de ellos. De acuerdo. sí, solo pasando por ahí y ver qué te gusta y usas buscando, supongo, videos inspiradores, estilos, cómo los han hecho lavarlos o diferentes efectos. Sí, solo para que tus jugos creativos fluyan. Ahora ten cuidado como ver a este tipo aquí, ver la cosita hablada aquí. Está tocando música, northy. Nunca hagas esto. Está bien. No tengas sonido yendo por defecto. Está bien. Porque te castigan por ser apagados y no vigilados. Sí. Por lo que sólo lo buscas ahora. El caso es que algunos de ellos son un poco viejos. Se puede ver que esto ya no parece tener el video reproduciéndose. De acuerdo, así que paga, eso no lo es. Ah, otro con sonido. Vete. Muy bien, así que cierra estos, eso es todo. Así es como encontrar videos de fondo realmente geniales. Ahora el sitio aquí, no sólo obviamente hace sitios de video. Me encanta el sitio, sólo tiene cosas realmente cool y se pone sitios del día y simplemente hermoso diseño web termina en este lugar. Para que no tengas que usarlo solo para nuestras cosas de video. Lo uso para todo tipo de cosas. Está bien. Te veré en el siguiente video. 4. 04 Dónde conseguir un video para tu fondo: Ahora vamos a empezar a hacer los videos antes de irnos y empezar a codificarlo. Si quieres meterte directamente en la codificación, puedes saltarte esta sección. Ahora si obtienes tus videos de, obviamente, puedes dispararte a ti mismo. Viene cada vez más fácil. Disparo muchas de mis cosas. Pero también hago lo que hay frente a nosotros aquí y uso cosas como Stock Library imágenes prefabricadas. Ese es el que voy a usar para este tutorial. Bueno, es metraje que ha sido hecho por otra persona y podemos comprarlo. En realidad los costos son bastante buenos, como conseguir un video de aquí, ya sea este sitio, Adobe Stock o de iStock. Parecen ser uno de los más populares. Te van a costar entre unos $50 y 200 dólares, dependiendo del video. Lo que he hecho es que he ido y escogido uno de Adobe Stock. Es igual que uno designario, es más una fotografía pero me gustan bastante las antiguas unidades de diseño al respecto. Una vez que lo hayas escogido, puedes hacer clic derecho y guardarlo. O si estás usando Adobe Libraries, que son impresionantes, puedes hacer clic en esto y descargarlo a tu biblioteca o descargarlo a tu computadora. Hay un par de opciones si sabes usar bibliotecas, de lo contrario, solo tienes que pulsar descarga y simplemente guardarla en tu escritorio. Ese es el video que vamos a usar. Ahora si nunca has usado Adobe Stock y quieres, y vas a ir a probarlo, voy a poner un enlace en la pantalla aquí. Ahí está. Pondré un enlace en las notas abajo aquí abajo. No es otra cosa que, si vas a la página web usando mi enlace, obtengo una pequeña comisión de bebé por enviarte a ellos. Se puede ir directamente al sitio, es stock.adobe.com. Pero si quieres ayudarme, haz clic en eso antes de irte. Ya no te cuesta. Genial. Ahora que tenemos algún video con el que trabajar, vamos a hacer algo de edición básica y prepararlo para nuestra página web. Vamos a utilizar Adobe Premier. Entonces vamos a cargar ese. 5. 05 configurar tu fondo en video y la edición básica en Premiere Pro: Está bien. Hola a todos. En este video, lo que vamos a hacer es hacer algo de edición básica en Premiere Pro. Vamos a hacer esto. Al inicio de mi línea de tiempo, pulsa “Barra espacial”. Se va a desvanecer. Voy a voltear eso al revés. Esta cosa juega, va por unos 15 segundos. Se juega, y se baja a negro. Vamos a hacer eso. Está bien, ahora es el momento de hacer nuestro video. Lo que hemos hecho es que abrimos Premiere Pro. Ahora puedes hacer tu edición de video y lo que quieras. Especialmente para los fondos de video, no estamos haciendo un montón de cosas. En nuestro caso, sólo vamos a conseguir algo que bucle, así que vamos a usar Premiere Pro. Si estás más en casa con After Effects, hará exactamente el mismo trabajo para lo que lo necesitamos por ahora. Lo que vamos a hacer es que vamos a crear nuevo proyecto. Se abre esta ventana, vamos a darle un nombre. El top aquí, voy a llamar a mis Diseñadores Antecedentes. Ubicación, démosle un lugar donde vivir. Pondré el mío en mi escritorio. Voy a ponerlo en una carpeta nueva. Voy a llamar a la mía, Premiere Pro- Designer Antecedentes. Genial. Haga clic en “Elegir” y no se preocupe por ninguna de estas otras cosas. Vamos a hacer clic en “Ok”. Genial. Estamos en Premier Pro. Ahora para que sigas adelante, solo asegúrate de estar debajo de Ventana, Espacios de trabajo, estás en Edición. Si el tuyo todavía se ve diferente al mío, baja a uno que diga Reset Save Workspace, y va a rechazar y se verá como el mío. Ahora, Premiere parece desalentador. Cuando lo abres, la gente se asusta. En realidad no es tan difícil. Simplemente parece que debería ser, pero no lo es. Vamos a importar nuestro video. Vayamos a Importación de Archivo. Importación. Ahora bien, esto no va a ser un tutorial completo sobre cómo hacer todo en Premiere Pro. Tengo otro curso para eso. Es como una cosa de edición de video corporativa, así que ve a ver esa si quieres hacer un conjunto completo de la misma. Esta sólo va a ser la versión rápida para hacer nuestros videos, conseguir que sean agradables y pequeños, y luego subirlos a nuestro sitio. Archivo Importa y echa un vistazo a los archivos de ejercicios si aún no los has descargado. Yo los he descargado. Se trata de los archivos de Ejercicio. Entonces aquí lo que busco es video, y vamos a usar este de aquí. Voy a importarlo en. Es el que obtuvimos de Adobe Stock. Hagamos clic en “Importar”. Genial, así que hemos importado nuestro video. Lo primero que tenemos que hacer es crear algo llamado secuencia. Una secuencia es igual a la página del documento. No se puede simplemente tener un video sentado por ahí. Necesita ir en algo o en algo, un contenedor, y eso se llama secuencia. Al igual que una página en un documento, necesitamos esa página para pegar nuestras palabras. Tú mi video son las palabras, tipo de. Para hacer una secuencia, Archivo, Nuevo, y podrías ir a la secuencia, pero es mucho fácil porque entonces tienes que intentar adivinar cuál debería ser la secuencia. Tienes una secuencia y estás como, “Santo moly, ¿cuál de estos ajustes debo usar para mi secuencia? Se pone un poco confuso”. El camino fácil es hacer clic derecho en él y decir, ¿puedes ver aquí? Dice Nueva Secuencia De Clip. Lo bueno de eso es que usará todos los ajustes que han venido de ese video y creará la secuencia, y la volcará en mi línea de tiempo. Este pequeño ícono de aquí, ¿ves éste de aquí? Esa es mi secuencia. Este es el video que he importado. Lo que está pasando es que tienen el mismo nombre que puede ser un poco confuso cuando estás empezando de, ese es el titular, y ese es el video que está atascado en la línea de tiempo. Ahí está mi secuencia, y ese es el video que está ahí encendido. Ahora puedo tener una secuencia, y puedo seguir importando muchos videos y seguir agregándolos a esta línea de tiempo. Podría tener 10 videos en una secuencia. Recuerda, esto es lo básico. Golpea “Barra espacial”, empezará a jugarlo. Ahí puedes ver a mi pequeña guía. Te darás cuenta de que la mía tiene el Adobe Stock por el medio aquí, es porque aún no he pagado por esto, principalmente porque si lo compro y viendo eso fuera con estos archivos de clase, estoy bastante seguro de que estoy rompiendo montones de leyes y voy a conseguir en problemas. Yo solo voy a usar el positor uno, y es fácil de ir y obviamente pagarlo, y podrías estar trabajando del mismo tipo de manera. Podrías estar trabajando con un cliente, puedes pasar y burlarte tal vez tres fondos diferentes usando esta versión burlada con el Adobe Stock, y cuando un cliente escoge uno, entonces puedes ir de y pagarlo. Es realmente fácil actualizar aquí en Premiere después. Ahí está mi video. Dura alrededor de cuánto tiempo? Dura unos 15 segundos. Ahora, digamos que quiero recortarlo, es bastante fácil, ya sea al principio o al final, todo lo que haces es pasar por encima de tu ratón. Se ve que puedo arrastrar esto, y lo recorta. No lo ha borrado. Simplemente lo recortó. Todavía está aquí, mira. Hola. Pero aquí puedo recortar los extremos, y podría recortar al principio, y mover esto al principio. Lo que he hecho es, lo he cortado unos segundos. Depende de ti y de tu clip. Ahora bien, ¿cuánto tiempo debe ser? Depende totalmente de ti, pero cuanto más tiempo sea, el tamaño del archivo se hace más grande. A lo mejor podrías hacer una carrera rápida y solo ver qué tan grandes son los tamaños de archivo. Los tamaños de archivo se están haciendo grandes cuando se acercan a 10 megabytes. Son pequeños cuando son de un megabyte. Si tienes algo de 30 segundos de duración, se va a subir ahí en cuanto al tamaño del archivo. Voy a usar este bonito pequeño corto. El cool de éste es, le pegaré a “Deshacer” un par de veces, es que, deshacer un poco más, no demasiados, es que tiene un bonito tipo de bucle. No necesito todos esos últimos segundos, porque se le va las manos. Este pedacito de aquí, podría recortarme sólo porque ya no puedo ver la mano, así que realmente no importa. Da la vuelta la postura, bucles. Genial. Digamos que quieres deshacerte del pedacito donde empezó a escribir. Yo sólo quiero llegar al bit donde acaba de empezar a moverse. Voy a rebanar ese poquito. Lo que puedo hacer es que vas a usar esta herramienta aquí. Tu barra de herramientas está en este trozo medio aquí, y la que vas a usar es esta cosa llamada la Herramienta Razor. Su trabajo es, mira esto. Mi cabeza de juego ahí, le doy clic, y como que la he rebanado en dos piezas. Voy a volver a mi herramienta de selección, y se puede ver que son dos trozos. Realmente no he rebanado en el video. Todo sigue ahí dentro, reloj. Hola. Yo como que acabo de hacer un poco de edición. Voy a volver a mi Herramienta Razor aquí, y me voy a deslizar hasta que termine de escribir. Ahí mismo, voy a rebanar ese pedacito. Después agarré mi herramienta de selección. Puedo hacer click en esto, pulsa “Eliminar”. Puedo o arrastrarlo a través o un buen truco en Premiere, es que puedo dar click en esto. Ves que se pone blanco y acabo de presionar “Eliminar” en mi teclado y lo recorta. Ahora, tengo esta cosa, se coloca a través. Empieza a escribir, pero en realidad sólo salta al pedacito donde ha terminado de escribir. Es un poco raro en realidad, así que voy a deshacer eso. Fue más bien un ejemplo. Voy a deshacer, deshacer, hasta que conseguí este bonito bit de lo largo aquí. Recuerda, recortándolo, solo tira de estos ins y la Herramienta de afeitar para cortar bits. Si tienes un segundo video, mira esto. Voy a ir a File Import. Este video, voy a importar. Puedes ver aquí abajo, tengo otro video. ¿ Se puede ver la diferencia entre estos dos iconos? Este de aquí tiene ambos, vamos a acercar un poco aquí, es éste tiene video, pero no audio, éste tiene video y audio. Se pueden ver los dos pequeños ícono ahí. Realmente no importa, pero lo que voy a hacer es que voy a arrastrar este. Ahora, tengo éste y se va a fundir en éste. Si tienes más de un video, quieres unirlos porque hay muchos cortes diferentes, solo sigues importándolos y sigue arrastrándolos en esta línea de tiempo. No puedo ver el final aquí, así que voy a alejarme un poco. Simplemente pulsa “Menos” en tu teclado. ¿ Ahora puedes ver esta línea azul por aquí? Esto sólo significa que este es el bit que está activo, y si voy a golpear “Menos”, puedes ver que se acerca. Si hago clic aquí arriba, puedo ver la línea azul está alrededor de esto, Se llama su ventana de programa. Esto es justo lo que se va a exportar. Si golpeo “Menos” aquí, puedo acercar la línea de tiempo en esta. Sólo tienes que asegurarte cuando estés aquí abajo, más y menos trabajo. Cuando estás aquí arriba, más y menos se acerca y sale de éste. Ahora que puedo ver más, puedo seguir agregando videos. Ahora en cuanto a la edición, sólo vamos a cubrir una o dos cosas más. El siguiente son las transiciones. Por el momento, esto es sólo un corte de salto. Simplemente va y salta al otro. Eso está bien, sólo un corte viejo y llano. Lo que queremos hacer es mirar tal vez haciendo una cruz que se disuelva o se mezcla a través. Lo que vas a hacer es que vas a encontrar tu ventana de Efectos. Ve a Ventana, ve a Efectos. Se abre abajo por aquí, y estás buscando Transiciones de Video. Salta hacia abajo, y hay algunos de ellos. Para ser honesto, si usas Page Peel, te encontraré, te cazaré y te quitaré tu Premiere. Wow, es un poco duro. Aquí se puede ver, hay un montón de transiciones diferentes. Para ser honestos, todos son un poco suficientes. Cross disolver es una buena o un dip a negro es una buena. En cuanto a disuelve, este de aquí Cross Dissolve va a funcionar muy bien. Voy a hacer clic, sostenerlo y arrastrarlo y ver esto. ¿ Se puede ver entre estas dos líneas de aquí, este pequeño hueco de aquí arriba? Voy a acercarme un poco, recuerda más, y esto es Cross Dissolve, es esto como pequeña cosa del bebé en el medio. No te preocupes si el tuyo termina de un lado o del otro o en el medio, no importa. El efecto, el final termina igual. Voy a pegarle a “Barra espacial” aquí. Se puede ver encantadora cruz disolverse. Di que quieres que sea un poco más [inaudible], puedes extender todas estas transiciones, cualquiera de ellas por, puedes ver, sostengo mi icono a través de esto y lo arrastro hacia fuera. Eso va a ser como el doble de tiempo ahora, así que van a ser un poco más días de nuestras vidas. Aquí hay un montón de otros. Page Peel, dije que nunca lo haría. Aquí vamos. Listo Página Pelar. De acuerdo a Page Peel. Otras transiciones, puedes pasar por todas ellas. Lo que voy a hacer es, en realidad voy a alejarme un poco, voy a eliminar este porque en realidad, mi pequeño bucle sólo va a ser este trozo aquí, y voy a meterme en ese bucle para siempre. Pero ahora en lugar de un salto, ¿ se puede ver el comienzo comienza con este bloc de notas por aquí? Deseaba que le quitara la mano porque entonces lo que pasaría es, iría hasta el final y también estaría apagado. No, no lo sería. De todos modos, lo que quiero hacer es que yo lo haga un bucle un poco más agradable en lugar de simplemente meterme al final y saltar de nuevo. Quiero agregar un poco de un fundido al principio y al final, y eso enmascarará un poco la transición. Para hacerlo, está bajo Disolver. Este tiene es Dip to Black, solo significa desvanecerse a negro. Si rondo por ese extremo, agárralo en ese extremo también, puedes ver sólo una especie de cerraduras en los extremos aquí. Mira esto ahora, espacio-bar, empieza negro, se desvanece, y va a pasar por todo. Me saltaré, Barra espaciadora, y se va a desvanecer otra vez. Porque voy a forzar esto a bucle en mi sitio web, va a tal vez un poco menos obvio. Tal vez prefieras el corte de salto. Está bien. Al igual que las otras transiciones, si hago zoom, puedo extender estos dip a los negros, solo para hacerlos un poco más largos. Eso te resultará muy difícil trabajar a menos que hagas zoom. Está bien, un poco más. El último pedacito de edición que vamos a hacer para este en particular antes de irnos y empezar a hacer más de esos puntos de estilo para Premiere Pro es, quiero voltear el mío boca abajo. ¿ Por qué? Porque esto en la parte superior aquí está interactuando con mi menú, así que quiero que ese tipo de estar en la parte inferior. Voy a voltear esto al revés. Lo que haces es hacer clic en él. Entonces lo tengo seleccionado en mi línea de tiempo y por aquí, hay algo llamado Effects Controls. Si no puedes encontrar eso, estas pequeñas pestañas son realmente difíciles de usar. Si no lo encuentras, lo pierdes, se ha ido para siempre, ve a Ventana, sube aquí, y ve a Effects Controls, y va a algo así como saltarlo de nuevo. Ya verás, si herramientas todo esto, tengo Movimiento, Opacidad, algunas cosas aquí que pueden ser realmente útiles para ti. Lo que vamos a hacer está bajo Motion, voy a bajarlo. Aquí hay uno llamado Rotación, y yo voy a voltear el mío 180. Simplemente significa que va a estar corriendo al fondo de mi cosa y va a parecer un poco más fresco, y al menos creo. Se pueden ver algunos de los conceptos básicos ahí como escalar, digamos que quieres recortar bits. Puedo escalar esto hacia arriba haciendo clic, sosteniendo y arrastrando hacia la derecha. Encuentro que es más fácil usar estos, lo que en realidad está en la ventana del programa, agarrando las imágenes. No sé por qué. Es solo que el programa funciona, pero torpemente así al intentar trabajar en el video, es más fácil hacerlo aquí con los números. Está bien, vamos a cerrar eso. Abramos eso de nuevo y solo pongamos la Escala de nuevo a un 100. Golpea “Guardar”. Ahora pasemos a agregar algunas texturas y fondo geniales, colores y cosas. 6. 06 Agregar opacidad del color de textura a tu video de fondo en Premiere: Hola ahí. En este video, vamos a ver cómo agregar un fondo texturizado, algunas cajas de colores, algunas borrosas a nuestros videos, y vamos a crear dos versiones. Uno con pantalla completa y el otro más de forma de buzón donde eso se va a poner dentro de un div. Sostén tus sombreros, vamos a hacer que nuestros videos se vean súper impresionantes. Entonces, ¿por qué agregamos todos estos detalles? ¿ Por qué salimos y lo coloreamos y agregamos fondos lavados, borrosas? ¿ Por qué vamos y hacemos esas cosas? Por un par de razones. Una es que simplemente se ve genial. El otro motivo es que lo estamos haciendo para poder ocultar parte de la mala calidad y mantiene el tamaño del archivo bajo. Bajas la cantidad de colores utilizados, como este de aquí, irá y bajará el tamaño del archivo. Ahí hay una conexión directa, y en realidad es bastante sustancial. Desenfocar es agradable cuando uno pasa, es sólo para esconderse. Ve cuándo quieres usar una imagen de res realmente baja y necesitas desenfocarla un poco como esta, puedes desenfocarla. Es realmente difícil ver la pixelización y ese tipo de cosas. Ahora, puede que sepas o no que puedes hacer mucho de esto con CSS, pero no deberías hacer con CSS. ¿ Por qué? Hay una característica de desenfoque, realmente no está bien apoyada, pero eso está al margen del punto. Lo que pasa es, si usaba decir la escala de grises, pero un CSS, y usé la función de desenfoque en esto y lo hago en código. Lo que va a pasar es que tengo que traer este tamaño de archivo realmente grande en términos de video, y luego aplicaré el CSS sobre la parte superior del mismo. tanto que si lo hago ahora en Premiere o After Effects, significa que llego a hacer eso de antemano y eliminar todos los colores baja el tamaño del archivo. difuminarlo, disminuye el tamaño del archivo. A lo mejor difuminando no tanto. Pero haciéndolo más adelante, sobre todo cosas como muting y esas cosas, se puede hacer en código, pero no lo hagas porque si lo hacemos ahora en el video, el video será más pequeño y cargará más rápido y todos estarán contentos. Echemos un vistazo a estos en Premiere. En Premiere, lo que voy a hacer es que voy a arrastrar mis hits de play está en el medio para que pueda ver las cosas pasando. Voy a abrir mi panel fijo, si no lo puedes ver, está debajo de Ventana, salta hacia abajo a Effects. Los que voy a usar van a estar bajo Video Effects. Empezaremos con el desenfoque. Bajo desenfoque aquí, hay unas cuantas diferentes. Vamos a usar el desenfoque gaussiano. ¿ Por qué? Porque todo el mundo usa esa. Ya verás por aquí, se ha añadido, desenfoque gaussiano. Lo que voy a hacer sólo para que sea un poco menos confuso ya que voy a torcer el movimiento y sólo ver desenfoque gaussiano. Todo lo que vamos a hacer es hacer clic en mantener y arrastrar esto hacia la derecha. Lo que sucede en Premiere es que muchas cosas son lavables, por lo que haces clic en mantener pulsado y arrastrarlo hacia la derecha. Verás que mi video se está desenfocando. Súper borrosa, un poco borrosa. Tú decides, y luego te vas y lo exportas. Tienes un fondo fresco. Ahora, el desenfoque se usa para ocultar píxeles malos. Si tienes una imagen de res realmente baja donde se baja la compresión realmente baja, es menos probable que desenfoque muestre esos artefactos. El otro motivo es, digamos que podrías tener gente en él, di que es un café diciendo que no quieres ver a Bob y Ginny y Norm, Norm lo es, pero si ves a estas personas que en realidad son personas reconocibles, si lo desenfocas, se vuelven como en la noticia cuando están hablando de gente genérica. Desenfocan el fondo o filman solo sus pies, solo para deshacerse de esa sensación personal por ello. Se acaba de convertir en el pueblo. Está borrosa. Voy a dar clic en la palabra desenfoque gaussiano y eliminarla. Otra cosa que hacer en cuanto a ocultar píxeles es usar un poco de grano de película. Justo ese ruido que va por encima de él. Encontrarás que aquí dentro hay una opción que dice ruido y grano. Voy a desplazarme hacia abajo y voy a usar el que dice ruido y voy a editar haciendo clic, sosteniendo, y arrastrándolo aquí a la línea de tiempo. Ahí se puede ver, hay ruido. Cantidad de ruido, manivela al igual que desenfoque. Depende de ti lo lejos que vayas. Usas ruido de color, lo apagué, me gusta un poco más blanco y negro. Voy a acercarme aquí. Por el momento está en forma, para que puedas acercar. Sólo tienes que tener un sentido a eso, eso es demasiado. Va a estar dependiendo de tu película, pero si añades este ruido, te da esa calidad de grano de película y también que esconde parte de la mala pixelización que puede suceder si estás usando un video de resolución realmente baja, como nosotros llegó aquí. Está agregando algo de ruido, así que me voy a deshacer del ruido, adiós. Lo siguiente que veremos es hacerlo en blanco y negro y jugar con algunos de ellos, tal vez la coloración, filtros de Instagram que puedes hacer para que se vea genial. Voy a volver a encajar y voy a abrir algo llamado Lumetri color. Ahora, lo puedes encontrar aquí, pero hay una forma más bonita de usar esta cosa llamada color Lumetri, y está debajo de la ventana. Ahí está éste llamado Lumetri color. Son lo mismo excepto que consigues este bonito panel grande por aquí. En lugar de tratar de pelear con él en este diminuto panel de efectos, se obtiene este bonito y grande aquí. Lo que vamos a hacer es corrección básica es si necesitas corregir tu video, no vamos a pasar por la calibración escolar cuando estás arreglando video. No vamos a pasar por eso en este caso, pero es bastante fácil si has hecho algún diseño de fotografía, esto no va a ser demasiado difícil de hacer, pero lo que queremos hacer se hace aquí en saturación. Se puede ver que lo puedo manivela hacia abajo, me puedo poner blanco y negro. O puedo quedármelo así es un poquito al igual que se ha lavado. Ahora, lo que quiero hacer es que quiero renderizar dos versiones o renderizar esta versión que está completamente saturada. Eso está sobresaturado ahora y después voy a hacer uno en blanco y negro. Voy a saltar a este bit y sólo te mostraré el resultado final. Haremos renderizado en su propio video. No quiero que este video sea demasiado largo. Magia. Yo he ido y renderizado estos dos y se puede ver que hay una versión gris y una versión no gris. Se puede ver por aquí, esta es una diferencia significativa de tamaño de archivo. Ahora, podría ser como, “Eso es sólo como dos megabytes en un poco”. Cuando se trata de video de fondo, bajo tiempo es nuestra némesis. Si vas en escala de grises, obviamente no vas en escala de grises solo por el tamaño del archivo, sino que sepas que hay una ramificación. Si baja los colores, el tamaño del archivo se vuelve más bajo. Genial. Volver a Premiere, voy a volver a poner mi saturación a 100 y voy a cerrar la corrección básica. Este es uno que se llama creativo, y eso podría ser interesante. ¿ Se puede ver creativo? Mira aquí esta pequeña flecha. Puedo hacer click en esto y pasará y me dará una pequeña idea de lo que esto va a hacer. Lo que puedo hacer es solo hacer click en él. Ya lo verás aplicado a mi video. Eso te da ese look solarizado de verano. Parece cosas al estilo de Instagram, o en realidad sólo mencionaba perfiles de cámara. Aquí hay algunas cosas geniales. Voy a volver atrás y apagar mis miradas. No vamos a pasar por todo aquí. Si sí quieres pasar por mucho más video de fijación, tengo un video tanto de after effects como de Premiere para calibrar. Pero en este caso, lo último que quiero mostrarles que es bastante guay, todos les encanta, es un poco de viñeta. viñeta es la cosa helada alrededor del exterior, claro esto. Tenemos que bajarlo. Si lo levantas, obtienes una viñeta blanca y nadie quiere una viñeta blanca. Voy a bajar esto y se puede ver este glaseado en el exterior. Simplemente hace que parezca un grado especial de película aquí. Se puede jugar con un montón de cosas diferentes para que sea más o menos aparente, pero las viñetas son bastante geniales. Sí, eso está bien. Enciende y apaga la garrapata aquí, puedes ver qué ha hecho? Enfriar. Eso es una viñeta. Lo último interesante que podemos hacer es que queremos ver esto porque si he escrito sobre la parte superior de esto, te puedes imaginar como, echemos un vistazo a algunos de estos otros videos. Este de aquí, Barrel funciona lo suficiente. Se puede ver que se está perdiendo un poco de fondo, pero no lo suficiente. Yo diría que está bien, pero empiezas a mirar este de aquí. Esto se ve bien sólo porque la imagen de fondo, donde el video de fondo en este caso se ha embotado hacia atrás, los blancos han sido eliminados. Lo mismo con este de aquí es un poco diferente. Todavía se está embotando, pero no una cantidad enorme, pero este tipo de aquí es un poco ilegible, se podría argumentar. Este de aquí definitivamente ha sido embotado atrás. Entrémonos en este. Lo mismo para este de aquí, pero lo han hecho, en lugar de negro, lo han hecho con amarillo. Vayamos a hacer eso. Lo que voy a hacer es que voy a cerrar, voy a hacer clic derecho en Lumetri y decir cerrar panel. Adiós. Lo que me gustaría hacer es, voy a arrastrar esto. En realidad no sé por qué eso está atascado por ahí. La forma más fácil de hacer eso es crear algo llamado archivo, nuevo y vamos a usar esta cosa llamada color mate. Ahora, un color mate es solo una caja de color grande. Va a coincidir con la configuración de video. En nuestro caso, es 1080 para 1920. Adivinará exactamente el tamaño de tu video por lo que no deberías tener que cambiarlo. Vamos a dar click bien. No importa si los tuyos son diferentes. Vamos a cambiar los tamaños de los archivos más adelante. Haga clic en OK. Escoge una fuente de color. En nuestro caso haremos la versión negra. Haga clic en OK. Voy a darle un nombre. Color mate no tiene mucho sentido. Vamos a llamar a ésta una cubierta negra. Cubrir. Haga clic en “Ok”, y no pasa nada. Termina en tu proyecto. Por el momento, estamos en los efectos. Se puede cambiar a través de estas cosas. Es un poco difícil de conseguir, sobre este proyecto. Si no puedes llegar fácilmente, salta la ventana. Ahí está ese proyecto que se encenderá y apagará. Estos son mis videos. Puedes ver aquí, ahí está mi cubierta negra, y lo que haces es arrastrarlos hacia fuera. Voy a pegarlos justo al principio. Por el momento, lo cubre todo, y luego los voy a extender. Cubre todo el asunto y luego simplemente baja la opacidad, y así es como lavamos el fondo. Seleccionemos en él en tu línea de tiempo aquí arriba bajo Opacidad, abajo. Entonces solo tienes que decidir qué tan oscuro tiene que ser. Dependerá de tu imagen y de lo que pase por arriba, ya sea que estés usando sombras de gota en el texto y HTML. Es posible que tengas que volver y experimentar un poco con esto, pero así es como logras que sea de color fundido así. Ahora si quieres que sea amarillo como este de aquí, hacemos lo mismo. Pero en lugar de ser negro, ¿ves el globo ocular aquí? Eso lo apaga de la capa negra. Podría borrarlo, pero en realidad voy a usar eso en un segundo así que lo voy a dejar ahí. Entonces lo que queremos hacer es hacer otro, File, New, y vamos a ir a Comment, mismo tamaño. Ahora obviamente los puedes adivinar. Tengo un color específico que estoy usando para mi sitio web. Déjame mostrarte un pequeño truco. Lo que tengo es que tengo mi photoshop Mockup que he usado para crear el diseño para esto y ver esto. Puedo mover Premiere al revés y ver esto. ¿Ves este cuentagotas? Esta es una de las muestra que he estado usando, o podría moverla a través. En realidad, puedo usar el cuentagotas aquí y pasar y decir recoger el rojo y recoger todos estos colores. Esa es la muestra que quiero usar. Haga clic en “Ok”, truco astuto. Voy a llamar a ésta la cubierta verde, y puedo traerla de nuevo. Es posible que tengas el logotipo en el fondo o algo así, o quizá conozcas el número hexadecimal, solo lo escribes. Recuerda, está por aquí, cubierta verde. voy a meter por encima de la parte superior, y los voy a estirar. Se va a cubrir por completo, luego voy a bajar la opacidad. Ahora lo que notarás es que está bien y se ve un poco como lo quiero, y probablemente es lo que he hecho aquí, solo tírelo por encima. Pero para hacerlo un poco más rico y más de una cosa tonal, quiero hacer dos cosas. Yo quiero usar el negro y el verde, y me parece más bonito. Podrían estar en desacuerdo, pero voy a encender este. ¿Se puede ver encendido y apagado? Sigue siendo así de verde pero está aplanado un poco más, así que podrías usar una de ellas. A mí me gusta usar dos de ellos. ¿ Qué tan oscuro debe ser? De nuevo, depende de lo que quieras hacer. Genial. Comienza por el principio, juega a través, y luego finalmente llega al final. Se puede ver en lugar de sumergirse a negro, es sumergirse a ese verde. Si quería que se sumergiera negro, puedo agarrar a estos tipos, copiarlos y pegarlos, y pegarlos en esta parte superior yacía aquí, y luego nos sumergimos al negro real, pero estoy feliz de que se sumerja a ese verde. Creo que el negro podría ser un gran cambio obvio. Genial. Entonces eso va a ser en cuanto a colorearlo y texturizarlo. Lo que voy a hacer en este tutorial es que voy a estar haciendo un fondo completo como este, pero también voy a hacer más de un estilo de buzón donde es solo una rebanada, eso solo va a ser para una caja de héroe o solo uno de los div. Te mostraré rápidamente. Esto es todo aquí. Ya puedes ver que estoy usando esta caja de héroes de un tutorial anterior, y la he puesto aquí. Necesito hacer algunas cosas un poco diferente. Una de ellas es que voy a usar ese negro en lugar del verde. Se va a sumergir hasta los extremos, y también va a ser un poco borrosa en el fondo para que pudiera poner tipo sobre la parte superior. Si solo quieres hacer el fondo completo, puedes saltar para el resto de este tutorial. Para el resto de nosotros, volvamos a saltar de nuevo a Premiere. Para hacerlo, lo que vamos a hacer es que puedas ver que estas son mis portadas, este es el video en el que estamos. Este es el video ejemplo que he traído para ti, voy a borrar ese. Lo que voy a hacer para que sea un poco más claro es que voy a renombrar este. Tienen el mismo nombre, así que voy a hacer doble clic en él, y voy a llamar a éste mi secuencia completa. En realidad, cuando estés nombrando estos, aquí los vamos a nombrar correctamente porque cuando exporte, va a usar este nombre de la secuencia para darle el nombre del archivo. Porque estamos usando cosas del sitio web, vamos a tener que usar cosas especiales. Entonces vamos a llamar a esto un diseñador-fondo completo. Encantador. Lo que vamos a hacer es que sigue siendo un video que va dentro de él. Entonces voy a duplicarlo, puedes hacer clic derecho en él, y bajar a Duplicar. Ya tengo dos de ellos. El segundo aquí, voy a renombrar. Este va a ser llamado todavía diseñador-, y éste va a ser buzón. Vamos a llamarlo hero-box. Buzón sólo porque va a ser una cosa larga, delgada. [ inaudible] dejarlo pasar, probablemente lo conseguiste. En cuanto a la caja de héroes, por el momento, son exactamente iguales. Mira esto, este mi diseñador lleno. Justo antes de que sigamos con el nombre, he puesto guiones aquí. Si pones espacios dentro, vas a causar problemas cuando intentes vincularte a él en tu sitio. Por lo tanto, aléjate de los espacios. Utilice guiones bajos o guiones. Tengo este trasfondo completo. Se puede ver esta es mi secuencia aquí llamada fondo completo. Si hago doble clic en éste, se podría ver que tengo una caja de héroe uno. Ahí está ese tipo, ahí está ese tipo, y ahí está ese tipo, y ahí está ese tipo. Son exactamente iguales en este momento, pero puedo hacer cambios a uno. Ahora voy a trabajar en esta caja de héroes, y en particular, voy a encogerme el tamaño. En primer lugar, voy a eliminar esta cubierta verde. Ahora será más fácil saber que esa es, y esa es esa. Entonces lo que pasa en Premiere es que si estás trabajando en muchos archivos, digamos que necesitas tres o cuatro versiones diferentes, es que puedes seguir duplicando la secuencia y al final, puedes decir exportar todas mis secuencias para mí y se renderizará todos al mismo tiempo. Pero ahora son como pequeños trabajos separados. Yo quiero que sea negro, quiero que sea borrosa, así que voy a seleccionar en mi video. Voy a encontrar a Lumetri Color. Ya basta de Lumetri Color. En realidad no los usé. Voy a ir a mis Efectos. ¿ Dónde están los Efectos? Tenemos los efectos de ventana. Voy a encontrar el desenfoque, recuerda que usamos Desenfoque Gaussiano. Arranca hacia arriba, ¿cuánto? No estoy seguro. Aquí hay tapadera negra, voy a hacerla un poco más oscura. Enfriar. Ahora quiero rebanar esto, y tú lo haces por aquí, vuelta en tu panel de proyecto. Ahí está en proyecto de ventana, y puedo hacer clic derecho en este tipo, caja de héroe. Entra aquí y en la parte inferior aquí, Ajustes de secuencia. Ahora, ignora este de aquí abajo. Se parece al obvio. No lo toques. Es éste de aquí, el tamaño del marco. No te preocupes por tu salida final ahora lo haremos más adelante, se trata sólo de la relación ahora. Simplemente estás mirando la altura frente a la anchura. Podemos escalar hacia arriba y hacia abajo y jugar con tamaños de archivo en el proceso de exportación. Así que manténgalo lo más alto que puedas en este momento y lo haremos físicamente más pequeño más adelante, excepto por el cultivo. Por lo que horizontal es 1080 al otro lado de la parte superior aquí. Si estamos lidiando con el video, no puedes llamarlo 1,080 por alguna razón, tiene que ser 1080 sólo porque es genial. ¿ Qué tan alto va a ser, 500? Vamos a experimentar. Tengo una idea de cómo se va a ver, recuerda, en esta cosa de aquí. Pero lo que quieres hacer es no hacerlo perfecto, no tomes una captura de pantalla e intentas calcular la relación porque, mira esto, va a ser sensible. Va a cambiar dependiendo de un montón de cosas, así que sólo vas a acercarte a eso más o menos a lo que quieres. Voy a dar click en “Ok” en 500. Se va a eliminar todos mis archivos de vista previa, está bien. Se puede ver por aquí ahora es que un poco raro, pero es mucho más mi tipo de estilo. Ya puedes ver que he cortado todo el buen metraje. Entonces lo que me gustaría hacer es que aquí abajo y seleccionarlo, y arrastrarlo por la ventana, sorprendentemente duro. Es más fácil hacerlo aquí en posición de movimiento en esta de aquí. Ya puedes ver que puedo seguir arrastrándolo hasta que pueda ver el fondo de eso. Ahora una de las cosas con el Desenfoque Gaussiano, que no mencioné antes, se puede ver que lo está haciendo a los bordes y se están poniendo todo helado, solo pone como un goop alrededor de los bordes y escarcha y lo desdibuja. Ahí está esta una aquí bajo desenfoque gaussiano, dice repetir pixeles de borde, y se va a poner directamente en el borde ahí y eso es más lo que quiero. Entonces los voy a bajar. Ahí lo tienes, está golpeado. Ahora cuando juego, puedes ver que puedo frotar. Espera un momento. ¿Puedes ver esto? Te darás cuenta de que la mía sube y baja y podrías haber estado revisando esto antes y viéndolo, no lo noté hasta ahora, es que bajo mi opacidad, si giro esto hacia abajo, en realidad hay esta pequeña cronómetro, se ha iniciado. Entonces ahora cuando estoy moviendo mi cabezal de juego, significa que puedo levantarlo. Se puede ver que empezamos por ahí, vamos y entonces tal vez lo hagamos totalmente negro ahí. Estos pequeños fotogramas clave, no es lo que quiero hacer. Simplemente significa un tiempo sin embargo ahora, es que acabas de tener la introducción más cagada al keyframing. No vamos a hacer eso en este curso porque hay mucho que hacer. Voy a eliminar a esos tipos y simplemente apagar eso por defecto. Ahora lo que significa es cuando selecciono en cubierta negra, solo puedo seleccionarlo y decir que eres ese color ahí. Los fotogramas clave son confusos y no lo que necesitamos en este momento. Genial. Juega a lo largo, borroso, negro, y es la forma correcta. ¿ Por qué recortamos la parte superior y la inferior? Un par de razones es que va a hacer más fácil posicionarse en esa etiqueta div. El otro motivo es que muchas veces esta parte superior y esta inferior no se van a ver nunca en el video. Es solo desperdiciar mucho buen tamaño de archivo, así que quieres recortarlos. Tenemos dos versiones, tenemos el fondo completo del diseñador, y tenemos esta aquí. Pasemos al siguiente video y probablemente la parte más importante de esta edición de video, es conseguir el tamaño del archivo tan buena calidad como podamos para algunos tamaños de archivo súper pequeños. 7. 07 Cómo hacer que tu video de fondo de fondo de html sea el tamaño de un archivo súper pequeño: Hola ahí. En este video, todo se trata de elegir el formato correcto para nuestro video y conseguir el tamaño de archivo super-duper pequeño. Lo que haremos en este video es que vamos a hacer un grupo de videos como este, montón de versiones diferentes para que podamos ver las diferencias en tamaño de archivo, y vamos a ver este. Este, de 10 megabytes, y luego cae de un acantilado a 1.7 y aún queda bien, te lo prometo. Vamos a hacer eso ahora. ¿Qué tan grande es grande? Un megabyte es realmente pequeño y bueno, y 10 megabytes se está volviendo bastante grande. Cualquier cosa por eso, tendrías que tener una explicación bastante buena para convencerme de que necesitabas un video de fondo que fuera tan largo. A menos que sea su producto real y en realidad esté haciendo cosas su mayoría estos videos de fondo son gráficos de apoyo y un tamaño de archivo realmente grande va a hacer que ese sitio web se cargue muy lentamente y que en términos de experiencia del usuario es malo. Trata de conseguirlo lo más pequeño que puedas. Intento mantenerlo alrededor del nivel de dos megabytes. He visto cosas como si saltas al sitio web de PayPal, como aquí, puedes ver su fondo uno es, están usando un tamaño de archivo bastante grande y es realmente largo y si eliges a través de su sitio web, puedes ver que es alrededor de 10 megabytes. Han decidido que esta página en particular vale 10 megabytes para ellos. De vuelta aquí en Premiere, vamos a empezar a exportar esta cosa ahora, y necesitamos exportar un par de formatos de archivo diferentes. Los principales son o el grande es un MP4, es el más utilizable, fácilmente compartido. Las otras que vas a tener que hacer es una llamada WebM. Es W-E-B y una M, así que WebM. Google lo hizo, y por el momento es el formato de video de reserva más común. Ahí hay otros como el Ogg, O-G-G u OGV. Ahora eso estaba destinado a ser el estándar pero por el momento, nadie lo está usando. Todo el mundo está usando WebM en su lugar. Mi consejo para ti en este momento de 2017 es que los MP4s seguidos de un WebM, los dos formatos que vamos a necesitar. Lo que vamos a hacer es exportar esta versión de fondo completa y haremos esta también, pero enfocaremos este video en hacer la versión de fondo. A ambos les aplican las mismas reglas. Cuando exportamos un video, necesitamos ir a su ControlM o CommandM en un Mac. Es File, ¿dónde está? Exportación y sus Medios. Esto lo exportará de este documento. Ahora bien, si está gris y no puedes ver, está lavada como estas significa que tendrías uno seleccionado porque no podemos tener diferentes secuencias. Si tienes algo seleccionado aquí arriba, no sabe a cuál te refieres. Vas a Archivo, Exportar y vas, porque no sabe a cuál te refieres, así que vas a dar click aquí y puedes decir que has hecho clic en él, ver la línea azul alrededor del exterior que indica, me refiero a este tipo o también puedes seleccionarlos en la ventana del proyecto. En el CommandM, esto se abrirá. Ahora puedes usar esta ventana aquí, está bien. Lo que vamos a hacer es que vamos a golpear a “Q”, y podemos llegar exactamente a la misma pantalla en Adobe Media Encoder. Si hago clic en “Exportar”, ese pequeño botón de ahí, va a apagar y exportarlo y tendré un MP4 cuando termine pero lo que me gusta hacer es pasarlo a la cola y eso sólo lo pone en cola en algo llamado Adobe Media Encoder. Va a tener lo mismo, que es si hago click en la fuente WebM estoy de vuelta a la misma pantalla exacta. Realmente no importa si lo ajustas directamente de Premiere o lo haces aquí en Media Encoder, pero verás algunas fotos para esta, se va a cancelar. Lo que pasa es que Adobe Media Encoder se ve así y lo agrega a esta cola aquí y lo que pasa es, es que puedo hacer cola muchas versiones diferentes. Mi versión de caja de arena, y tengo 10 tamaños diferentes que quiero hacer, es que los pueden hacer cola aquí arriba y puedes seguir trabajando en Premiere. Eso es lo bonito de Media Encoder es que si golpeas “Exportar directamente desde Premiere”, Premiere no se puede usar hasta que esté terminado. Este de aquí, esto funciona en el fondo bonito. Lo que vamos a hacer es empezar a buscar tamaños de archivo versus comparaciones. Lo que vamos a hacer es mirar primero los formatos. Quieres un MP4, y naturalmente quieres ir a este MPEG4. Si haces click en él, lo que encontrarás es, consiste en un 3gp. Supongo que como un teléfono viejo y formatos de archivo. Ese no es el que queremos. Quieres este llamado H.264. ¿Esto se puede ver aquí? Te da un MP4 y este es el códec que tenemos que usar cuando estamos poniendo cosas en línea. Ahora, las grandes cosas que necesitamos cambiar es esta fuente de coincidencia va a ser exactamente como lo descargaste, y nos va a dar un tamaño de archivo realmente grande, pero lo vamos a usar en términos de comparación. Si has descargado algo del stock de Adobe y su 4K, que es sólo cuatro veces el HD estándar, igual 4K es, tiene que ser enorme. Tenemos que hacer algunos cambios. Ahora si estás viendo este video porque tienes un trabajo que hacer y su debido en unos 10 minutos, omita este video, haz clic en “Match Source”, ve a donde dice presets, y ve a este que dice preajuste de importación, y luego ve a buscar las que he hecho para ti. En tus archivos de ejercicio y hay uno aquí llamado preajustes de codificación. El primero que tienes que traer es en este caso, va a ser MP4, haz clic en él, haz clic en “Abrir”, ya tengo uno así que voy a dar clic en “Cancelar” y aparecerá, ¿ puedes ver esto es preestablecido? Aparecerá en esta pequeña lista aquí, haga clic en eso, haga clic en “Ok”, haga clic en “Jugar”, y obtendrá algo bastante pequeño y funcionará para su trabajo. Ese es mi preajuste de trampa, pero para el resto de nosotros, necesitamos aprender un poco sobre ello solo para que podamos conseguir que nuestros tamaños de archivo se ajusten según nuestro video. Vamos a dejar este como principal. Alta tasa de bits. Lo que vamos a hacer es seleccionarlo y ves que esta es una opción que dice duplicar, esta es una buena manera. Esto va a exportar el mismo video pero en diferentes configuraciones. Lo que voy a hacer es hacer clic donde dice “Match Source” y conseguir aquí esta gran ventana, y lo que voy a mostrarles ahora es cómo conseguir el tamaño del archivo súper pequeño. El primero y el más fácil es el audio. Si apago el audio, bajará el tamaño del archivo y nos dejará de tener que hacerlo más tarde cuando se trate de nuestra codificación, tendremos que pulsar el botón de silencio, hay una opción de silencio en el código para hacerlo silenciar, pero no tendremos que hacerlo porque no habría audio de exportación. Para ser honesto, realmente no quieres reproducir audio en segundo plano. Odio cuando un sitio web se inicia con audio reproduciendo automáticamente en segundo plano. Busco el botón de pausa. Si no hay un botón de pausa, es página web de adiós. Lo que vamos a hacer es sólo hacer algunos ejemplos. Vamos a llamar a éste, es el mismo nombre. ¿Dónde lo voy a poner? Voy a ponerlo en mi escritorio, bajo mis videos de ejemplo, y éste va a ser diseñador-fondo completo y éste va a ser llamado, sin audio. Justo como comparación, y voy a dar clic en “Ok” luego voy a seleccionarlos, duplicarlos, y vamos a hacer algunos otros bits. Haga clic en “Personalizado”. No tenemos audio. Echemos un vistazo al grande. El más grande para reducir el tamaño del archivo está aquí abajo debajo de la pestaña de video, desplácese hacia abajo, desplácese hacia abajo. Este pequeñito de aquí, configuración de bitrate va a devastar los tamaños de archivo. Por el momento, es todo lo que se llama de alta calidad. Se establece en 10 y 12. Cuanto más bajo vayas, menor será la calidad, pero cuanto menor sea el tamaño del archivo, y lo que encontrarás es, es que es realmente difícil decir la diferencia entre digamos 10 y abajo en algo así como uno. No es HD full K, calidad increíble más pero un poco show. En la pantalla de tu laptop no notarás la diferencia. El tamaño del archivo es de 15 megabytes. Esta es una estimación. A veces puede estar salvajemente apagado, así que no uses esto como tu medidor absoluto, pero veamos esto. Lo primero que tenemos que hacer es establecer una velocidad de bits variable de 1 pase. Simplemente significa que la velocidad de bits constante significa que todo se va a establecer en 10. No revisa, no sube y baja. Da clic en Bitrate personalizado y solo lo pones a uno y no le importa, va a ser uno todo el camino, pero si vas a tasa de bits variable, va a pasar y decir, es por defecto a esta antes recordar fue a las 10 y 12. Significa que subirá y bajará dependiendo de lo que esté en la pantalla. Bits de video realmente detallados. Voy a usar la velocidad de bits más alta, de alta calidad, y las cosas que no se mueven solo obtienen la tasa de bits más baja porque no necesita y eso puede reducir drásticamente el tamaño de su archivo. En cuanto a esta codificación, 1 pase solo significa que pasa una vez y lo comprueba todo y dice : “Sí, estás alto, estás bajo”. Esta cosa de aquí dice 2 pases, lo hace una vez, vuelve, y lo hace de nuevo, y con lo que terminas es tamaños de archivo más pequeños y mejor calidad. No sé por qué predeterminados a 1 pase. Lleva más tiempo, eso es lo grande. Si solo quemas esta cosa muy rápido, puedes ponerla en 1 pase, pero no tiene sentido realmente. Ahora tasa de bits objetivo, ¿cuál debería ser? Es lo más bajo que puedes ir y puedes hacer algunas pruebas con tu video. Si tienes un video súper impresionante de un sitio de biblioteca de valores, probablemente se vaya a poner realmente bajo y se vea realmente bien todavía. Si te lo has disparado tú mismo en tu teléfono asqueroso, cuanto más bajo lo hagas, se va a quedar bastante mal. En nuestro caso, casi siempre tipeo en uno y 1.5. Se dirigirá a uno pero si es necesario, subirá a 1.5. Las vertiginosas alturas. Simplemente le da un poco de espacio de meneo. Aquí se puede ver abajo un megabyte, eso son números mágicos, y todo tiene que ver con este bitrate. Vamos a hacer clic, en realidad darle un nombre. No hay audio y éste no va a haber audio y ¿qué es éste? Baja tasa de bits. Genial. Hagamos click en “Ok”. La mayor parte de ese trabajo se realiza en la tasa de bits. Lo que voy a hacer es mostrarte algunas otras cositas solo para bajarlo aún más. Podrías estar lidiando con ese video largo de dos minutos realmente grande y vas a tener que intentar sacar todo lo que puedas de esto, así que voy a duplicarlo de nuevo. Se hace click en “Personalizado”. En este caso, el audio está apagado, mi bitrate ya está bajo, voy a hacer un par de cosas. Una es la velocidad de fotogramas. ¿Qué es la velocidad de fotogramas? Tu video en realidad es solo un montón de imágenes estáticas y si parpadean frente a ti lo suficientemente rápido, el ojo humano y el cerebro humano cree que son una acción en vivo, pero no lo son. No son cosas del mundo real, es sólo un montón de imágenes como un libro de volteo. Veinticinco fotogramas al segundo, todos estamos de línea gancho y [inaudible] convencidos de que son imágenes en movimiento, pero son sólo un montón de flashes de fotogramas separados. Cuanto más bajo vayas, más saltador se pone. Cuanto más alto vayas, más suave se pone. Digamos, mi GoPro dispara, creo, a 50 o 60 fotogramas por segundo, y se puede obtener 1,000 fotogramas por segundo matriz de tiempo de bala buscando cosas fuera del alcance de esta, obviamente, pero 25 fotogramas por segundo es lo que esto se fijó en. Puedes ir más bajo. Ahora bien, si bajas a 10, es razonablemente perceptible. Encuentro un buen compromiso a los 15. En mi caso, nuestro video es bastante básico. Tan grande y verde, mira esto. Debí haber tenido esto hace mucho tiempo. Se puede ver que me he deslizado esto porque en realidad me da un pequeño adelanto de dónde estoy en mi video. Lo que pasa es que cuando cambio las cosas en, digamos, mi configuración de bitrate, esto se actualizará. Es una explicación razonablemente buena de ello. Voy a poner esto a Fit para que pueda verlo todo. Quince fotogramas por segundo, dudo que lo noten tanto, sobre todo si es de fondo y está borrosa, está bien. Se puede bajar a 10, darle un cheque a eso. Voy a dar click en este. Este va a ser sin audio, baja tasa de bits, va a ser un nombre de archivo realmente largo. Este va a ser velocidad de cuadro 15. Genial. Hagamos click en “Ok”. ¿Qué más podemos hacer? Vamos a dar click en este, así que los duplicó, haga clic en este tipo. El siguiente que vamos a hacer es que vamos a jugar con nuestra altura y anchura. Vamos a cambiar tal vez la altura de éste. Haremos 500 píxeles de alto. A lo que me refiero con eso está bajo la pestaña Video, la parte superior aquí, en realidad lo está exportando calidad HD, y eso no es lo que necesitamos en este caso. Podrías, no hay nada realmente malo en eso, el único problema con eso es que la forma en que vamos a hacer esto en código, hay algo que vamos a usar llamado la altura mínima y el ancho mínimo, y simplemente significa que no va a ser tan sensible, va a parecer un poco extraño. Tiene que ser un poco más pequeño. Mi consejo aquí sería no ir full HD. ¿ Por qué? Porque vas a tener gente mirando esto en diferentes dispositivos y no van a poder ver esta HD por lo que es desperdiciado tamaños de archivo, página va a tardar mucho tiempo en cargarse. El más alto al que probablemente quieras ir es 720, que es la alta definición original, más como la definición estándar. Siete veinte de alto y ese es el ancho. Lo que vamos a hacer es que vamos a bajar aún más abajo, y se puede ver que va a encajar. Vamos al 100 por ciento, te da una idea del tamaño. Todavía se puede ver, a 720 de altura , sigue siendo un video bastante grande. Entonces voy a conseguir esto aquí y voy a cambiar esto a 500. Ahora, es en un tamaño pequeño, pero va a poder estirar y expandirse para ajustarse al fondo, y me parece que para fondo completo funciona para mí. El tamaño del archivo, es bastante vago aquí abajo, sigue siendo un megabyte. ¿ Cuánto perdimos? Ya veremos cuando vayamos a exportar este. Cambiar el tamaño aquí no es solo hacer que el tamaño del archivo sea más pequeño, es solo la técnica que tenemos que usar en este momento en el código. Alturas y anchuras mínimas subieron 100 por ciento. Lo veremos más adelante, pero hay que hacerlo lo suficientemente pequeño para poder ser utilizado. Ahora, hay algunas otras cosas que puedes empezar a hacer aquí. Puedes empezar a jugar con el encuadre clave y hay algunas otras cosas, y se están poniendo bastante nerdy, y puedes jugarlas alrededor de perfiles y niveles y orden de campo. Ahora, eso va a ser en cuanto a cómo hacer que el tamaño del archivo sea más pequeño. Ahí abajo hay un par de cosas más como velocidades de fotogramas, carga progresiva. Eso es meternos en esa minutia súper nerdy, y no vamos a pasar por ello en este curso porque no vas a ver mucha diferencia. Habría gente de video ahí fuera burlándose de mí diciendo cómo me atrevo, pero para mí, me encontré con esos son los grandes, esos son los buenos. Hagamos click en “Ok”. Ahora, tenemos todos estos videos diferentes. Lo que probablemente vas a hacer es simplemente saltar a este último. Esto es a lo que mi preset lo configuró. Entonces si quieres usar mi preset, va a saltar a este 500, 15 cuadros, baja tasa de bits. Trabajo realizado. He puesto en cola todas estas hasta solo para mostrarnos tamaño de archivo y comparación de calidad. Es por eso que me encanta ser más duro kickback. Pulsa el botón “Play” y solo elige a través de todos ellos. En realidad, está tratando de renderizarlos todos al mismo tiempo. Si yo estaba haciendo esto en premium y golpeo el botón “Exportar”, tengo que hacerlas todas de una a la vez lo cual no es gran cosa, no son súper largas, pero se puede ver este beneficio. Si estás trabajando en un video realmente largo, me encanta [inaudible] puedes irte, tomar un café, volver. Si es súper largo y tienes una computadora realmente asquerosa, tal vez tengas que volver, tal vez tengas que irte a la cama y despertar por la mañana y el evaluador aún podría estar funcionando. Eso me pasó cargas. Por el poder de Internet, hagamos subir este zoom. ¿ Listo? Uno, dos, tres, vamos, zoom. Eso probablemente tardó unos dos minutos de mi lado. Ahora, vamos a ver qué archivos se crearon. Olvidémonos de estos dos de abajo aquí, en realidad los voy a abrir. Estas son las cosas que se hicieron. Vamos a pedirlas hasta en tamaño de archivo. En realidad, voy a traer de vuelta a esos tipos porque ese era el original. Este soy yo haciéndolo gris. Esta es una buena prueba. Sí, ese es el video original. Dieciocho megabytes, haciéndolo gris, estamos quitando algo del color, 16. Entonces lo hicimos sin audio. Ahora, el audio no hace ese gran salto. Una de las otras cosas que hicimos es que lo hicimos bastante verde oscuro. Esa fue una de las cosas que hicimos así que perdimos un poco de tamaño de archivo ahí. Estas son algunas cosas extra. Pero luego fuimos baja tasa de bits y ese es el gran cambio. ¿Puedes ver aquí? Puedes meterte con las velocidades de fotogramas y esas cosas, pero en realidad, todo se trata de esta tasa de bits que va de 10 y 12 a 1 y 1.5. Ya puedes ver un tamaño de archivo súper manejable. Ahora, en cuanto a la calidad, echemos un vistazo. En realidad, lo que haremos es abrirlos a los dos, pegaré uno al lado del otro. No es un ejemplo súper científico, pero conseguirás una sensación de estos dos. Por aquí, pongamos este en la parte superior aquí. Este es el de alta calidad sin audio. Echemos un vistazo. Sé que nos alejamos un poco y no es un ejemplo justo, pero tendrás que confiar en mí, se ven bien, sobre todo para una imagen de fondo y sobre todo porque no estamos buscando super alta def, estamos buscando para el tiempo de carga de página. Oye, tiene que quedar bien, no terrible pero todo se trata de tamaño de archivo y se puede ver que el bitrate es bueno. Velocidad de cuadro, lo bajó un poco más. Por lo que la velocidad de fotogramas bajó a 15 segundos. Echemos un vistazo entre estos dos. Sólo echa un vistazo. Se puede decir que es un poco jumpier, pero mi caso, porque mi video, no pasa mucho, la chica sólo está escribiendo un poco en el bloc de notas. Entonces son 15, está bien para mí. Además, a veces, ese look puede ser bastante cool. Podrías bajar a 10 fotogramas, y tiene esa cosa borrosa de grano de película jumpy va, así que obtienes ahorros en tamaño de archivo y se ve genial. Se puede ver aquí abajo, los píxeles reales haciendo que los píxeles sean mucho más pequeños, tampoco ha hecho mucho por el tamaño del archivo. Entonces, ¿por qué vamos así de pequeño? Es para que podamos hacerlo sensible más adelante. Posteriormente, en un par de años, hay un nuevo trozo de etiqueta que sale y voy a hablar de eso más adelante, eso lo hará totalmente sensible pero por el momento, estamos atascados con min-altura, min-width, así que necesitamos para hacerlo un poco más pequeño que podríamos realmente quererlo. Enfriar. Ya casi terminamos. Ya hemos hecho nuestros MP4s, lo que haremos es cortar este video aquí y saltaremos al siguiente usando el formato WebM. No tanto tiempo, pero voy a cortar eso aquí para que este video no sea épicamente largo. Está bien, nos vemos en el siguiente. 8. 08 Cómo hacer un archivo de video de WebM en Adobe Media Encoder y Premiere Pro y After Effects y After Effects: Hola chicos. En este video, lo que vamos a hacer es que vamos a buscar para mostrarte cómo instalar este formato WebM. Probablemente notarás que en realidad no está instalado por defecto, así que vamos a instalar un plugin y lo vamos a hacer, ir a través de la configuración para que sea realmente pequeño y explotarlo, y terminaremos con este tipo encantador; .webm y mira lo pequeño que es. Vayamos a hacer eso. ¿Por qué necesitamos un formato WebM? MP4s cubren prácticamente todos los navegadores excepto un par de casos de uso, y esos casos de uso se pueden llenar con el formato WebM. Ahora si me hubieras preguntado hace un par de años, ¿qué formato de video deberíamos estar usando? Habría sido OGG; el formato OGG. Ahora eso ha cambiado. Ahora el WebM es el formato a usar, así que si estás viendo este video, ya es 2017. Si es 2024, obviamente va a haber un formato de video diferente, pero así que solo ve y comprueba lo que es común, pero ahora mismo el formato WebM es el bueno para uno de atrás. Google lo hace o al menos patrocina el desarrollo de la misma. Es un formato de código abierto, así que tenemos que ir y hacerlo, pero Adobe lo han hecho un poco difícil de hacer. Yo lo he hecho un poco más fácil ojalá para ti, así que vamos a hacer eso. ¿Por qué es difícil? Es porque el formato real no está integrado en Adobe Media Encoder ni Dreamweaver ni After Effects, no lo instalamos. El genial de esto es que hay un plugin gratuito. Aquí habrá un enlace arriba en la pantalla. Aquí está. Ir a los enlaces es aún más fácil. Es este lugar aquí en fnord y luego consigo un WebM. Se descarga la versión para Mac o Windows. Ahora he incluido el plugin. Puedes verlo aquí, está en tus archivos de ejercicios, es el plugin WebM. Podría estar poniéndose un poco viejo. Quizás quieras ir al Sitio Web y descargarlo caso hay una versión más nueva, pero he incluido ahí solo para que sea útil para ti. Lo que tienes que hacer es descargarlo o hacer clic aquí, y solo lo ejecutas. Se puede ver aquí está mi versión DMG, y se ejecuta eso, ese es mi Mac. Esta versión MSI es para tu PC. Haga doble clic en ellos y se instalarán. Lo que sucederá mágicamente es que tendrás que reiniciar Premiere, o After Effects o Media Encoder o lo que sea que uses, reiniciarlo. Lo que pasará es que, ahora si voy a Archivo, Exportar, y voy a Media, bajo Formato, ahora hay uno llamado WebM que no estaba allí antes. Haga clic en “WebM”. El genial de esto es que solo es un formato de archivo diferente. Utiliza muchas de las mismas cosas. Tiene altura y anchura, y tiene variable ligeramente diferente, pero justo abajo aquí, pero esencialmente las mismas cosas. Ahora si quieres chip, tengo un preset, puedes instalar. Recuerda desde aquí, vas a este dice Importar preajuste y hay uno llamado Dans Web Video WebM Preset, así que trae esa. En lugar de pasar por todo y volver a explicarlo todo, es exactamente lo mismo en el video anterior. Si no has hecho el video anterior, es la versión MP4 de este. Es exactamente lo mismo. No vamos a volver a pasar por todo porque ese fue un video épicamente más largo. Lo que vamos a hacer es, el tuyo probablemente empezará a fallar. Tendrá unos de audio, apagas eso, cambias la altura y el ancho. Cambie la velocidad de fotogramas a 15 y establezca la codificación. Esto es lo único que es un poco diferente es el códec. Este es el nuevo, ese es el viejo. Creo que el nuevo es bastante bueno en la mayoría de los navegadores. Voy a usar el más viejo porque funciona en más browses y el tamaño del archivo se ve muy similar, y la calidad se ve igual de buena. Ahora en cuanto al bitrate, pon esto en mil. Eso es lo que he encontrado que es bueno. Puedes ir más bajo, puedes ir más alto, pero aumenta o disminuye los tamaños de archivo en consecuencia. Aquí abajo, 2-Pass Encoding muy similar al MP4, y eso es todo. Vamos a añadir cola, vamos a cambiar el nombre del archivo aquí. Voy a meter este dentro. Se va a entrar en mis videos. Me está dando exactamente lo mismo excepto que tiene la extensión WebM. Haga clic en “Guardar”, presione “Jugar”. Ya ves que estas están terminadas, entonces volveré a correr. Este de aquí ahora juega, pasa y lo codifica. Ahora WebM tarda una eternidad en codificar. Tomó el mismo tiempo codificar como cinco versiones del MP4 como una WebM, así que vamos a acelerar esto de nuevo. Listo, listo, vamos. Ya está hecho. Vayamos a revisar el expediente. Aquí lo puedes ver. Es aún más pequeño que nuestra versión MP4. A menudo se puede jugar con los ajustes en MP4 y WebM. No es como si fuera formato de archivo más pequeño, es solo la configuración que recogí terminó convirtiéndose en un pequeño video. Lo que he encontrado es que puedo meterme con el MP4 y conseguirlo tan pequeño como un WebM, y igual de buena calidad. Esta gente que discutiría ese punto sin embargo, pero saben que no es solo como la mitad del tamaño usando WebM, es porque mis configuraciones eran diferentes a las que eran como paralelas. Ahora instalar el plugin es un dolor en el culo, porque se siente como Adobe Media Encoder o Premiere o After Effects, todos deberían tener esa función. Lo que puedes hacer es saltar a este de aquí y ayudarme. Acude a éste que se llama Adobe.com productos/wishform, ve a aquí y lo que puedes hacer es escoger tu producto, escoger Premiere y escribes una pequeña lista y dices, por favor pon en WebM. Lo que pasa es que los desarrolladores obtienen estas listas y quien más grite, la parte superior de la lista obtiene estas características y esa es una característica que quiero, así que vamos al equipo. Lo último que vamos a hacer es que te voy a dar, porque este es un video un poco más corto que los otros de esta serie, lo voy a llenar de algo de asombro. En Adobe Media Encoder, solo una cosita que me parece bastante útil es decir que quiero este WebM y lo voy a subir a mi página web. Lo que pasa es que lo voy a duplicar. Cuando entro en Custom, hicimos esto antes, jugamos por aquí, pero mira esta opción por aquí que dice Publicar. Esto puede ser realmente útil. Puedes publicarlo tu cuenta de Creative Cloud si estás usando eso. Simplemente puedes volcarlo en tu disco compartido con gente y al instante está ahí arriba tan pronto como sale. Eso es realmente útil cuando dices que te vas a la cama, y renderices todos estos y luego se chupan y pasaron horas renderizando, pero cuando hayan terminado, van a empezar a subir a Creative Cloud. Puedes ver que se puede subir a tu cuenta de Behance, puede ir a Facebook. Hay tantos y este es el que uso. FTP va a mi servidor web donde hospedo mi sitio web, y acabo de tirarlos en una carpeta de video allí. Ponlos en el camino remoto, el video. Días felices, Vimeo, YouTube, que quiero usar bastante también. Si estoy subiendo directamente a YouTube, trae eso directo a YouTube, días felices. Está bien, eso es todo. Ahora vamos a ir y empezar a construir un sitio web real, y en realidad le agregamos este material de video. Vayamos a hacer eso. 9. 09 que consigue la configuración de la sitio web de Dreamweaver: Hola a todos. En este video, vamos a ir por y configurar nuestros ajustes de Dreamweaver para que podamos empezar a construir nuestro sitio. Entonces lo primero que tenemos que hacer es dejarnos que nuestros espacios de trabajo sean los mismos, para que puedas seguir adelante. Se puede trabajar en estándar, eso está bien. Voy a trabajar en este nuevo llamado desarrollador. Sólo voy a dar click en eso. Es solo una versión más limpia. Vamos a trabajar más en código en este video, en tutoriales anteriores trabajo mucho más en estándar y eso está bien, pero éste, cambiemos a desarrollador y trabajemos en éste. Ahora, antes de empezar en cualquier proyecto, necesitábamos encontrar nuestro sitio. Entonces ve al sitio, ve a un nuevo sitio. Todo esto hace es decirle a Dreamweaver dónde vas a guardar los archivos para este proyecto. De acuerdo, entonces mi nombre de sitio, vale, le voy a dar un nombre. Esta se va a llamar Agencia de Diseño de Laptop Trae Your Laptop. ¿ Dónde lo voy a guardar? Aquí es donde se encuentra el sitio local. Hagamos clic en navegar. Voy a poner el mío en mi escritorio. Voy a hacer una carpeta nueva y voy a llamar a ésta BYOL. Esta va a ser página web. Haga clic en Crear. Vamos a dar click Elegir. Una cosa que puedes hacer cuando estás definiendo un sitio, es realmente útil, vas a configuraciones avanzadas y luego donde dice carpeta de imágenes por defecto, haz clic en navegar. Se puede ver que está por defecto dentro de esa carpeta que acabamos de hacer, y dentro de aquí vamos a poner imágenes. Simplemente significa que si hago clic en elegir, significa que cada vez que agarro una imagen, digamos de los archivos de ejercicios en esta clase, lo va a agarrar del aire y ponerla en la carpeta correcta y no tener que preguntarme cada vez. Simplemente lo sabe haciendo esto. Ahora no vamos a pasar por sentar servidores ahora y conectarnos a la red. lo haremos en el video final cuando vayamos a publicar. Pero por ahora esto es todo lo que tenemos que hacer para configurarnos. Hagamos clic en Guardar. En mi escritorio aquí, si tengo un vistazo rápido, ahí está mi escritorio, ahí está la carpeta que hice. Dentro de ella no hay nada más que una carpeta vacía para imágenes. Genial. 10. 10 Agregar un video de fondo de pantalla completa a un sitio web con Dreamweaver: Hola a todos. En este video, vamos a poner un video y hacer que haga esto. Míralo. Ese es el objetivo de este video. Vámonos a saltar a Dreamweaver y empecemos. Lo primero que hay que hacer es crear una página. Suba a Archivo, vamos a Nuevo, y haga clic en “HTML. No vamos a estar usando Bootstrap en este caso, vamos a ponerlo en Ninguno. Demos un título a nuestro documento. Esta va a ser la Agencia de Diseño de Laptop Trae Your Own. HTML5. Hagamos clic en “Crear”. Lo siguiente que hay que hacer es guardar el archivo, así que vamos a archivar y guardar. Está incumplida en la carpeta correcta. Esta mi carpeta web BYOL y esta va a ser homepage, por lo que tiene que llamarse index, minúscula i, sin espacios. Recuerda, nuestra página de inicio tiene que llamarse índice y esa es la página que se carga primero en cualquier sitio web o páginas posteriores se puede llamar cualquier cosa que quieras, siempre y cuando no haya espacios, hay que usar guiones o guiones bajos. Haga clic en “Guardar”. Ya verás por aquí, esta es mi estructura de carpetas. Si no lo tienes, tal vez tengas que trabajar esto hacia abajo. Ahí están mis imágenes y ahí está mi documento HTML. Una mirada rápida en el escritorio, ahí está ahí, mi carpeta de imágenes sin nada en ella, y ahí está mi página de índice. Genial. Actualmente nuestra página de índice no tiene mucho. Vamos a agregarle nuestro video. Para agregar una etiqueta de video, necesitamos hacerlo al cuerpo no a la cabeza. Todo lo que los usuarios no ven, pero es lo que usa Google y el navegador. Al igual que este título a lo largo de la parte superior aquí, no vemos, solo se usa en la pestaña superior del navegador y Google también lo usa para listar tu sitio web. Esto solo le dice qué teclado y personajes estás usando, estamos usando letras latinas. Cuerpo es todo lo que ve el usuario, en el momento no hay nada ahí. Lo que vamos a hacer es poner un retorno entre los dos. Lo vamos a tabular a lo largo. No hay razón para la pestaña más que hace que se vea bonita y la equilibra y hace que sea un poco fácil trabajar con. Vamos a poner una etiqueta de video. Mi etiqueta de video es corchetes angulares abiertos, escribe video. Se puede ver que tiene mucha pintura. Se puede ver que Dreamweaver va, yo he escrito vid, y se va, ¿te refieres a esto? A menudo solo puedes pulsar Return en tu teclado y lo llenará. Aquí lo vamos a cerrar con corchetes angulares. Entonces cada etiqueta necesita una apertura y un cierre. El cuerpo tiene un abierto y luego tiene un cierre de listón delantero. El cabezal tiene un abierto y un cierre. El HTML tiene un abierto y luego abajo hay un cierre. Entonces el video es el mismo. Para cerrarlo, necesitamos unos corchetes angulares y luego esta varilla hacia adelante. Se lo puede ver en estos tipos de aquí. Quieres hablar hacia adelante slash, Dreamweaver es inteligente que dice, probablemente pretendas cerrar la etiqueta y acaba de terminar ahí para ti. Es así como se agrega una etiqueta de video. Ahora, necesitas decirle a la etiqueta de video qué video reproducir. Lo haces agregando una fuente. Justo después de la palabra video aquí, ponemos en src. Se puede ver que se le ha incumplido. Si golpeas Retorno, rellena el resto de los iguales y los signos de cotización. Impresionante. También ves que obtienes este navegar. Voy a dar click en Navegar. De momento, solo tengo mi carpeta de imágenes y tengo este índice. Ignora esto.DS, es una cosa de marca. Lo que vamos a hacer es ir y encontrarlo de los expedientes de ejercicios. Está en mi escritorio. Ahí están los archivos de ejercicio de fondo de video. Aquí hay uno llamado video, y éste es el que estoy usando para todo el fondo. Ahí está éste, fondo completo, y luego está la versión de casita de datos. Voy a usar este, ese es el original. Hagamos click en “Ok”. Se va a decir, este archivo no está en mi sitio local actual. Simplemente significa, recuerda que solo tenemos imágenes e índice y Dreamweaver sabe que para que un sitio web funcione, todos los archivos necesitan estar en la misma carpeta. Voy a pasar, ¿te gustaría que lo copiara ahí ahora? Usted dice, sí, por favor. Impresionante. Podrías simplemente volcarlo aquí con tu archivo de índice, pero sería muy común ir a New Folder, poner videos, hacer clic en “Crear”, y lo voy a poner ahí. Ahora, tu formato de archivo se está haciendo en los videos anteriores. Una cosa que no cubrimos enormemente es solo asegurarnos de que no podías tener esto. No podías tener diseñadores fondo de espacio completo. Terminarás con errores y el navegador no lo puede encontrar. Necesitas usar guiones o guiones bajos, no importa cuál. Los superiores y los bajos están bien, pero solo alguna sintaxis básica allí. Genial. Hemos editado un video y vamos a revisarlo. Lo que vamos a hacer es previsualizar en el navegador. Vamos a usar la vista previa del navegador en tiempo real en la parte inferior aquí. Así es como se llega a ella, y se puede previsualizar en todos los diferentes navegadores, Google Chrome es, con mucho, el más común. Si no lo tienes instalado en tu máquina, ve e instálalo y aparecerá en esta lista. Si estás en un Mac, Safari, si estás en un PC, probablemente tengas Edge o Internet Explorer. Pero definitivamente probar Chrome esa será tu base porque tanta gente tiene Chrome en comparación con todo el resto de ellos. Guarde esto por favor. Lo que pasa es que, en mi uno se abrió en mi otra pantalla. Trabajo en dos pantallas aquí en la oficina. Antes de mirar el video, y lo que termina pasando es, mira este video aquí. Vamos a cambiar en esta clase entre esto, atrás entre el video, atrás entre esto, y de ida y vuelta, sólo porque estamos pegados a una pantalla para este video. Pero cuando estoy trabajando, lo que hago es tener esta app en otra pantalla, y estoy probando al final. Se actualiza en vivo, así que significa que no tengo que cambiar entre los dos bordes. Acabo de actualizar el código y se actualiza en esta otra pantalla de ahí. Pero te da una buena excusa para salir y comprar un monitor nuevo. Te ves impresionante con dos pantallas arriba. Este es nuestro video, está ahí, lo puedo ver. No pasa nada sin embargo. Hay un poco de sintaxis que necesitamos agregar a este video para que haga las cosas. Hay un montón de cosas diferentes que puedes hacer, no vamos a cubrir cada una de ellas. Anda y echa un vistazo y ve qué otras cosas puedes hacer con el video. Pero lo básico el que queremos es, ¿ puedes ver si pongo un espacio justo después de video? Dreamweaver es realmente útil, te da todas las cosas que potencialmente se pueden aplicar al video. Algunos de ellos tienen sentido. Hay cosas como autoplay, es la que quiero a continuación. Pero también hay cosas aquí como controles. Si enciendo eso y luego lo guardo y reviso en mi navegador. Pongo estos controles, y estos son solo controles HTML5 estándar. Vete. Controles no es lo que quiero porque no quiero eso para el video de fondo. Yo quiero reproducción automática. Volver a, poner una O, poner en un espacio, y me da estos, reproducción automática. Encantador. Ahora si guardo, previsualice mi navegador, míralo. Se autoreproduce. Enfriar. El video HTML5 es bastante fácil. No hay plug-ins, solo funciona con casi todos los navegadores modernos. Se puede ver en este caso llega hasta aquí y luego se detiene y espera para siempre. Eso podría ser lo que quieres, entonces no tienes que agregarle ninguna otra sintaxis. posible que solo quieras que se reproduzca una vez y se siente ahí para el resto del video. Este es sólo el marco final. Podría ser un llamado a la acción o simplemente estás contento de que eso lo haga. No me importará hacer bucle. Probablemente lo vas a adivinar. Dices el bucle de palabras. Demasiado fácil. Ahora, esta cosa se va a poner en bucle para siempre. Sólo tienes que confiar en mí, no vamos a volver a verlo. Esa cosa seguirá dando un lazo. ¿ Alguna otra cosa útil ahí dentro? Ahí hay mudo. Si tienes sonido en el tuyo silenciado, mi consejo es ir y volver a renderizar el video, codificarlo de nuevo con el audio apagado, te ahorrará un poco de tamaño de archivo. Si eres perezoso o no quieres hacer eso o simplemente te has metido en este tutorial solo para hacer videos y quieres silenciarlo, solo dale a Mute, está bien. No lo necesitamos porque no tenemos audio en nuestra pista ni en nuestro video, así que no lo necesitamos. Echa un vistazo a través de la otra cosa. Esos son los principales que queremos. Hay un par de cosas más que vamos a hacer más adelante, pero eso es lo básico para meterlo en el HTML. Ahora tenemos que hacerlo a pantalla completa. Eso se hace no aquí en el HTML, sino en un CSS. Voy a pegarle a “Guardar”. Vamos a crear otro documento CSS. Ahora, no vamos a cubrir una enorme cantidad de CSS en este curso. Si eres nuevo y dices: “Hombre, ni siquiera sé qué es un CSS”, sube a uno de mis otros cursos, hay mucho detalle en CSS. Pero vamos a ser rápidos en este. En primer lugar es crear un documento CSS. Vamos a Nuevo, y HTML, CSS. HTMLs consiguen las cosas, los conceptos básicos en la página, escriben las imágenes, los videos. El CSS es lo que haces para peinarlos, diles qué hacer. Vamos a decirle al CSS que lo estire. Bueno, vamos a usar CSS para decirle a un video qué hacer. Vamos a decirle que sea a pantalla completa. Haga clic en “CSS”, haga clic en “Crear”. Con un archivo de cremallera aquí, lo voy a guardar. Va a entrar en mi mismo expediente. Algunas personas ponen en una carpeta llamada CSS, yo no. Póngalo aquí. Llámalo lo que quieras, pero casi todo el mundo lo llama styles.css. Eso es lo que un documento CSS luce como nuevo. Voy a cerrarlo porque lo que vamos a hacer es cuando lo cerremos, recuerden que son dos archivos separados. Ahí los puedes ver, este tipo y este tipo, no se conocen existe. Lo que necesitamos hacer es conectar los dos y lo hacemos por en este HTML, en la cabeza. Recuerde cabeza es donde van las instrucciones para la página y el cuerpo son las cosas que realmente aparecen en la página. Aquí abajo en título, decimos, vamos a añadir el enlace al CSS. Esta es una larga. Lo que vamos a hacer es usar un pequeño truco. En lugar de poner toda la sintaxis para vincular un documento CSS, vamos a usar un pequeño atajo en Dreamweaver, y si presionas Return, no hace nada, pero si pulsas Tab en su lugar, mira esto, impresionante. En lugar de tener que escribir brackets angulares link rel es igual a hoja de estilo, href es igual, todo eso sólo se puede hacer con tab, mismo con esta etiqueta de video. Hicimos esto antes, donde escribimos al principio y al final. Pondré otro justo debajo, solo para darte un poco de ejemplo, nunca teclearía en fuente de video igual, tipeo en video, golpeo Tab y ves que lo pone todo ahí para ti. Voy a deshacer eso. Aprende algunos atajos, impresionante. ¿ A dónde se va a enlazar? Está en esta h-referencia, esta es la referencia de hipervínculo, ¿y a dónde va a ir? Vamos a empezar a escribir. Si elimino eso y lo vuelvo a meter, por algunas razones, a veces cuando estás usando ese pequeño truco, no carga este pequeño pre-cargadores. A veces lo que hago es simplemente borrar la primera cita, volver a ponerla, y luego eso vuelve a la vida. Seguro que es un bicho, seguro que desaparecerá. Lo que voy a hacer es, voy a escribir styles.css. Ese es el expediente con el que se vinculaba. Se puede ver en la parte superior aquí, esto cambió. Esta es la barra de documentos relacionados. En lugar de tener dos pestañas abiertas, tienes como dos pestañas diferentes aquí y está vinculado a ella. Ahora HTML y CSS están casados, están conectados. Enfriar, eso es lo que necesitábamos hacer, para conectarlos al menos, ahora tenemos que ir y agregar algo de CSS para darle estilo a este video. Vamos a darle estilo en nuestro CSS, haga clic en styles.css en la parte superior. Ahora vamos a poner en nuestro primer bit de CSS. Lo que podríamos hacer es entrar aquí y darle estilo a la etiqueta de video, ese era el nombre que se le dio por aquí así que es aproximadamente el mismo video y por aquí podría empezar a peinarlo y ponerme mis llaves, y luego empiezo a peinar y eso está bien siempre y cuando solo tengas un video por sitio web entero, lo cual es poco probable, bueno podría no serlo. Al igual que para mis sitios de tutoriales de video, hay millones de videos, por lo que peinar esta etiqueta va a afectar a todos ellos. Todos los videos de cada página tiene que ser esta cosa de pantalla completa y eso no es lo que quiero, así que lo que voy a hacer es que voy a ser un poco más específico. A lo que me refiero con eso es que voy a agregar una clase, y una clase es algo que consigo crear y llego a editar a las cosas a las que quiero que se aplique. Una clase es algo que consigo escribir, solo necesito asegurarme de que tenga un punto al principio o una parada completa. Voy a llamar a la mía pantalla completa, puedes llamarla como quieras, solo no hay espacios. Voy a copiar las palabras porque mi ortografía es terrible, y luego necesito ir e implicarlo. Pondré eso y me pondré los tirantes rizados. Tan solo para empezar, todas las propiedades para CSS necesitan ir dentro de estas llaves. Para conectar estos dos arriba, necesito ir a fuente porque por el momento es solo video de llamada y no tiene conexión con esa cosa de pantalla completa que acabo de hacer. Lo que haces, justo después de la palabra video, pones en el espacio, comienzas a escribir cl para clase, pulsa Return, pone un poco de sintaxis para ti. Recuerda que igual y comillas marca tiene que estar ahí dentro y se puede ver incluso útil de Dreamweaver dice: “¿Te referías a pantalla completa?” Dije “Sí, por favor”. Te darás cuenta, no pones en el periodo aquí. A pesar de que copié el mío para entrar y pegarlo, no lo necesitaba porque Dreamweaver fue súper útil hoy. Eso conecta a los dos arriba, así que están haciendo cosas juntos. Ahora necesito decirle qué hacer, y para que esto funcione, necesitamos hacer un par de cosas. El principal es altura mínima y anchura mínima. He escrito min y luego guión, puedes ver que me da todas las cosas dentro de mi internet. Haré una altura mínima y el colon entra ahí automáticamente y ponemos al 100%, no es de extrañar. Siempre terminamos nuestras propiedades CSS con punto y coma. Haremos el ancho mínimo también. Solo estoy escribiendo y uso mis teclas de flecha para bajar, pulsa Retorno, 100%, punto y coma. Vamos a ver a dónde nos lleva eso, aún no está terminado pero echemos un vistazo. Enfriar. Es un video de estiramiento. Una de las cosas con ancho mínimo es que, puedes ver, llega a un mínimo. Esos son los 500 píxeles originales que tengo, y esa es solo una de las cosas con las que necesitamos vivir en este momento con lo del fondo elástico. Si este es el futuro, lo que quieres hacer es, decir que es de un año o dos a partir de ahora, quieres ir y echar un vistazo a algo llamado el ajuste del objeto y la cosa se llama cover y hace un realmente cool, cosa fácil donde se estira hasta el fondo, no tienes que hacer esta cosa de ancho mínimo. El problema es que, por el momento, no es utilizado por un montón de navegadores, por lo que no es tan práctico. Será en unos años así que ve y comprueba eso, podrías encontrar algo como ajuste de objeto versus ancho mínimo y solo comprueba si funciona. Agradable y elástica, impresionante. Pero hay algunas cosas como estas barras de desplazamiento aquí y hay algunos huecos blancos en los bordes. Vamos a arreglar eso en Dreamweaver. Algo que no expliqué, solo pensando, es que en el ancho mínimo es, si hice esto como una película de cuidado completo, en realidad va a ser enorme. El mínimo va a ser del 100% y probablemente más allá la pantalla por lo que nunca va a cambiar de tamaño, solo va a estar ahí a pantalla completa y está bien, si quieres eso, podrías terminar solo con la esquina superior izquierda, porque es imagen es tan grande, está fuera de la pantalla y no se pondrá más pequeña que su mínimo. En nuestro caso, he hecho el mío 500 pixel, así que es un poco de dar, y mantiene un tamaño de archivo más pequeño. Ojalá eso lo explique mejor. En cuanto al ancho mínimo, hay algunas otras cosas que necesito hacer. El primero es, voy a hacer auto el ancho y la altura. ¿ Por qué? sólo porque. Hay casos en los que no va a hacer ninguna diferencia. En nuestro caso, el video va a verse exactamente igual, pero hay casos en los que se necesita esto, así que solo agréguelo, no causa ningún daño y te ayudará en ciertas circunstancias. Otras cosas que podemos hacer es querer deshacernos de estas barras de desplazamiento, ver estas barras de desplazamiento a un lado aquí? Ya terminamos. Echemos un vistazo a algo llamado posición. Aquí puedes ver las opciones. Vamos a mirar a dos de ellos. Vamos a mirar absoluto y fijo. Miraremos a fijo primero y lo que haré es mostrarles un par de ejemplos que tengo. Acabo de hacer. Este es el sitio terminado. Obviamente aún no estamos aquí, pero éste de aquí está fijado para arreglarlo. Hablamos de fijo y el otro va a ser absoluto. Fijo nos permite hacer esto. He agregado un montón de copia aquí, solo una copia en blanco. Se puede ver que el video está fijo al fondo, no va a ninguna parte. ¿Dónde está absoluto? Está ahí, pero mira esto, cuando me desplaza hacia abajo, puedes ver que se queda donde está y hay usos para ambos casos, por lo que es fácil cambiar. En este caso con nosotros, si voy a fijo y previsualizo en el navegador, y cerraré estos dos que hice como ejemplos, realmente no importa porque no tengo ningún contenido en mi página, así que me di cuenta a mostrarte así. Vamos a dejar la nuestra como está arreglada. Lo siguiente que vamos a hacer es poner en una posición superior de cero píxeles y una posición izquierda de cero píxeles. Da un punto de referencia para más adelante cuando necesitamos poner tipo e imágenes sobre la parte superior de la misma. Si no lo tienes, no va a funcionar, no va a notar ningún cambio ahora. Sólo mételo porque yo lo dije. Echémosle un vistazo. Ahorra, vamos a echar un vistazo. Cuando dije, no hizo ninguna diferencia, realidad lo es, se puede ver en la parte superior aquí, hay un poco de default que viene junto con la etiqueta body, que lo empuja hacia abajo desde arriba y un poco fuera de la izquierda por lo que se aclaró la pequeña frontera blanca que estaba ahí. No lo dijimos antes, probablemente lo hice pero solo quiero dejarlo claro. ¿ Ves un borde blanco? Puede que no lo hayas notado. Pero él está ahí. Esto lo obliga a subir a la esquina superior izquierda. Encantador. Eso, mis amigos es una cosa de fondo de video de rasquetas que es realmente pequeño y tamaño de aves. Esto te hace separarte del camino. Dejaremos aquí este video, siguiente video, vamos a ver agregar tipo por encima, porque eso es otra cosa. Ya es bastante fácil, pero vamos a hacerlo juntos en el siguiente video. 11. 11 texto básico e imágenes sobre el fondo del video: En este video, vamos a terminar con algo como esto, donde tenemos algunas cosas por encima. Tengo un poco de nav yendo y un logo en la parte superior. No parece mucho. Si miras cuánto tiempo va a ser este video, pero no te preocupes, si solo miras en las cosas gruesas sobre la parte superior, esos serán los primeros 10 segundos y el resto del tiempo nos estamos metiendo en algún HTML básico, y estamos va a construir nuestro sitio, que podrías saltarte si quieres. Empecemos. Para agregar texto a un documento, eso obviamente es muy fácil, justo debajo de aquí en el video, realidad agreguemos nuestro logotipo. Yo quiero pegar el logo sobre la parte superior. Aquí está mi ejemplo terminado que quiero hacer. Eso es lo que quiero. Yo quiero que traigas tu laptop por encima y estos de navegación, y este texto y este botón. Empecemos. Entonces lo que quiero hacer es ponerlo en una imagen. Ahora, poner una imagen puede llevar una eternidad. Es img space src entonces tienes que poner en texto alt, hay mucho que hacer. Pero recuerda nuestro truco, img luego hit tab. Oye, lo llena, y gracias a Dreamweaver. El origen, de donde quiero sacar mi logo, voy a teclear i, para imágenes. Se puede ver que va a imágenes, genial, haga clic en eso. Ahora no hay nada en mi carpeta de imágenes. Acabamos de llegar a navegar, así que voy a usar eso. Voy a ir a buscar los archivos de ejercicios que descargamos. Si no puedes encontrar los Archivos de Ejercicio, probablemente ya lo tengas, pero habrá un enlace en alguna parte, en esta página. Vamos a Video Background y vamos a ir a debajo de las imágenes, y tengo un SVG aquí, podría ser png, jpeg. Utiliza los SVG si sabes cómo hacerlos, fuera de Photoshop e Illustrator hacerlos. Son gráficos vectoriales escalables y son impresionantes para redimensionar. Agradable y crujiente. Por el momento no está dentro de mi página web. Está diciendo advertencia. ¿Te gustaría que copiara ahí? Dices: “Sí, por favor”. ¿ Dónde te gustaría que lo pusiera? De las imágenes, por favor. Lo mismo con los archivos de imagen. Necesitan tener guiones, sin espacios. Golpea “Guardar”, ahí está. El texto alt necesita entrar cada vez que se pone una imagen. Esto lo usan los lectores de pantalla para personas con discapacidad visual, y también se usa para, Google lo usa. Alguna vez has hecho una búsqueda de imágenes en Google, así es como sabe de lo que estás hablando. Esto me va a llevar a donde traigo nuestro top logo. Genial, vamos a revisar en el navegador. no está ahí. ¿Dónde está? En realidad está ahí, en realidad está debajo de aquí. Lo que pasa es que cuando pones las cosas cuando se arregla la posición, todas están fuera de sincronía y no saben quién está arriba, y todos están apareciendo para combatirlo. A veces los logotipos en la parte superior y a veces los videos en la parte superior. Es más o menos quien sea el primero en esta pequeña lista de aquí. Lo que necesitamos hacer es ir a nuestro CSS y en realidad decirle a nuestra pantalla completa, nuestro video que haga algo llamado índice Z. Z índice, y por defecto todo es cero. Ya sabes que la imagen va a ser cero por lo que cualquier cosa bajo cero se va a resbalar por debajo. Algunas personas ponen 100 y algunas son 999. Realmente no importa, sea cual sea el destello. Ahora vamos a revisar en el navegador. Ahí está. Hola, ahí está, mi logo en la parte superior. Esencialmente, eso es todo. Si ya sabes cómo entrar y posicionar las cosas, haz sitios web receptivos y pon un encabezado, y el logotipo en. Ya puedes saltarte al siguiente video, porque en ese video lo que haremos es cubrir cosas como cosas móviles y receptivas. Pero en este video voy a arar, vamos a construir nuestro sitio. Es bastante básico. Si eres nuevo o simplemente estás empezando, sigue adelante, construyámoslo, sube tus habilidades. Entonces en Dreamweaver, lo que vamos a hacer es ir al código fuente y vamos a construir esto ahora. Este logo aquí, en realidad, quiero que el video esté en la parte inferior. Sólo porque yo quería, realmente no importa adónde vaya. Ya basta de esta pantalla completa, al menos. Entonces lo voy a cortar y ponerlo debajo de este tipo y principalmente, porque quiero que mi sitio web se cargue por encima de él y el video sea lo último en cargar, solo para que esta garrapatas en la pantalla primero y luego esta cosa se pueda cargar al final. Si tienes un video realmente largo, puede tomar mucho tiempo y entonces va a esperar a que esto se cargue antes de las cosas que hay debajo. Genial. Entonces lo que vamos a hacer es construir una estructura HTML5 áspera. Dentro de nuestro cuerpo, lo primero que necesitamos es un encabezado. Entonces estoy poniendo en la pestaña de encabezado de encabezado, y eso es todo lo que va en la parte superior de mi página. En este caso, va a ser, llamémoslo mi maqueta. Simplemente va a ser el logo va dentro de ella y mi navegación. Si quieres llamarlo BYOL en la parte superior aquí, eso sería considerado tu cabecera. Adentro, cabecera voy a poner mi logo, lo tenemos, ahí vas, y dentro vas. Se puede ver que sangra las cosas bien para ver dónde se encuentra. Voy a meter algunas devoluciones. Las devoluciones no hacen nada en código. Sigue revisando, ¿lo he roto? No, todavía se ve bien. Voy a meter mi navegación. Por lo que la navegación entra en una etiqueta llamada nav, hit tab. Ahora vamos a poner en esas tres palabras que tuve en mi ejemplo aquí. Ahí los puedes ver, van adentro. Construyendo un nav, lo construyes así. Se pone en el ul, que es una lista desordenada. Eso es como una lista puntiaguda de bala y vamos a quitar esa lista puntiaguda de bala que se estaba instalando en un segundo. No lo pongas, empuja tabulador. Pon un ul, y dentro de eso, porque la ul es igual que la envoltura, dentro de ella hay li. Esos li son los diferentes puntos de bala aquí dentro, y necesito un par de ellos. Para que pudiera hacer esto, y así necesito un par de elementos de lista. Dentro de ese elemento de la lista, necesitamos un enlace en el que se pueda hacer clic. eso se le llama una etiqueta. Si un entrar a, un href es lo que le da un hipervínculo. ¿A dónde se va a ir? Puse un hash porque no tengo manera de que vaya todavía. Esto sería, podríamos escribir nuestro contacto page.html, pero no tenemos eso, así que lo vamos a dejar como hash. Te metes, no puedo recordar cuál es nuestra fase 1, ¿cuál fue esa fase 1? Portafolio. Portafolio, guardar. Vamos a comprobarlo en el navegador. Se puede ver ahí está mi primer pequeño nav. Tiene un poco de aspecto feo, pero así es como se construyen las navegaciones. Están construidas con URLs. Pero quitamos los puntos de bala y el azul, y el subyacente y los hace clicables. Eso hace un buen nav. Volver a Dreamweaver. Lo que puedes hacer es, puedes tener tus claves dentro de esto, un duplicado, que es Command-D en un Mac o Control D en un PC, o puedes copiarlo y pegarlo, eso depende de ti. Puedes seguir haciendo eso. Te voy a mostrar una manera súper cool, voy a tratar de impresionarte con mis súper habilidades. Mira esto. Hemos estado usando esto, y golpeando “Tab”, y yo estoy como, “es bastante guay, te ahorra un poco de tiempo”, sobre todo para un nav. Lo que quiero es un ul. Dentro de ese ul, así que voy a usar el mayor que símbolo, y dentro de eso, ul, dentro de eso en un li. ¿ Cuántas li me gustaría? A mí me gustaría cinco de ellos por favor. Dentro de la li, me gustaría una a, etiqueta. Sé que parece un poco raro. Si eres nuevo, no lo hagas de esta manera, solo lo haces por el largo camino. Pero si estás seguro ahora, has hecho algunos de los tutoriales, y estás empezando a ponerte bastante guay, puedes hacer esto. Se llama imagen. Entonces es como cosas insinuando código y solo significa tal vez un hit tab. Construye todo ese sistema para nosotros. Construye un li con un montón de ellos. Dije cinco, de verdad sólo quería tres de ellos. Simplemente lo arroja y son bastante geniales. Me encanta cuando puedes ahorrar tiempo así. La otra cosa es que podemos hacer es, y es algo genial para Dreamweaver, es múltiples cursores. Yo quiero poner un hash, para todos estos. Recuerda cuando no tenemos forma de que vaya, ponemos el letrero de hash o libra, pero no es tan difícil. Podría poner en hash abajo hash. Está bien, está bien. Pero lo que puedo hacer es que puedo mantener pulsado el comando en mi teclado y hacer clic un par de veces y se obtiene este cursor múltiple. Ver un cursor gigante. Simplemente significa que cuando tab, puedo hacer eso. Va de uno a la vez. Se pueden tener estos cursores en todas partes, que pueden ser cursores que yo pueda tener. Hasta que te alejes. Eso no es particularmente útil, pero es genial cuando estás agregando clases para diferentes etiquetas. En fin, consejos y trucos. Entonces este de aquí necesita ir dentro de la etiqueta a. Recuerda, esta es la CARTERA. ¿ Cuáles eran los otros? Precios y Contáctenos. Por lo que PRECIOS y CONTACTANOS. Comprobando el navegador. Ahí están, grandes y feas. Ahora lo que queremos hacer es llevarlos a la cima aquí. Bueno, los pondremos uno al lado del otro y nos desharemos de todo este feo formato. Eso se hace siempre CSS. Entonces vamos a dejar aquí a este tipo. Vamos a saltar a nuestro styles.css. Lo primero que hacemos es empujarlos hacia arriba a la derecha. Entonces vamos a darle estilo al nav. Recuerda las etiquetas que no, recuerda esas son las que nombramos, estas las prefabricadas. Entonces no hay parada completa en el frente. Ponemos nuestros tirantes rizados y para conseguir que vayan en la parte superior derecha, es algo llamado flotar. Vamos a decir, “Flota a la derecha, amigo mío”, punto y coma. Guardar, comprobar en el navegador. Boom, míralo. Todo el camino por aquí. Flota a la derecha. Echemos un vistazo a lo que necesitamos hacer. A continuación, quiero darle estilo a mis ul. Entonces lo que hacemos es decir, no sólo todos los ul de la página. Yo quiero hacer los que pasen estar dentro de este nav. Porque si hago todos los ul, podría tener una lista en otra página y le va a hacer algunas cosas raras que no lo quiero. Entonces solo los ul que están dentro del nav, por favor. A mí me gustaría que tú, amigo mío, te deshicieras de los puntos de bala. Esa es la primera cosa más fea. Entonces he escrito lista y hay uno aquí, llamado list-style-type. Ahora si no estás seguro de lo que hacen algunos de estos, puedes ver aquí abajo, Dreamweaver es bastante útil. Me dice lo que hace esta cosa. Te voy a dar click. Entonces me da algunos ejemplos de lo que puede hacer. En nuestro caso, se puede poner un punto decimal, se puede poner en un disco. Voy a meter, ninguno. De acuerdo, y luego punto y coma, guárdalo. Entonces mira, genial, los puntos de bala se han ido. Quién va a seguir pasando por eso y seguir quitando parte del estilo. Entonces, lo siguiente que quiero hacer es que lo quiero hacer a los ítems de la lista. Entonces quiero hacerlo a estos aliados, pero sólo quería hacerle a los aliados que pasó estar dentro de URLs que están dentro de la n-av. ¿ De acuerdo? Entonces, chicos, quiero que sean un tamaño de fuente? Tamaño de fuente de 0.8 em-es. De acuerdo, si nunca has usado em-es antes, puedes usar pixeles.No lo es, no es buena práctica. EM-ES es responsive y bit error y muchas maneras, todo lo que significa es, y por defecto, un sitio web está configurado 16 em-es y el usuario puede apagarse y cambiar ese valor predeterminado si es necesario. Entonces si escondes píxeles de código, eso les permitirá hacerlo.Así que tenemos que dejar que escojan la fuente, nadie lo cambia. No somos mucha gente al menos, pero necesitamos acatar las reglas para las personas que necesitan un poco más de ayuda usando un navegador. Entonces, si pongo un em-e, está bien, obtendría 16 pixeles. Entonces quiero 14 em-es, que es alrededor de 14 píxeles, que es alrededor de 0.8 em-es, vale, así que usa 16 base de usuario y obtenemos algunos casos ásperos a partir de ahí, muchas veces tienes que ir a probar y comprobar. Entonces ese será el tamaño de fuente. ¿Qué más debemos hacer? Jugué por ahí con un poco de espaciado entre letras, solo para separarlas entre las letras. Entonces voy a usar em-es de punto cero. Guárdalo. Echemos un vistazo. Se puede ver que está espaciado las letras hacia fuera. Y qué más le hice al tamaño de fuente o un poco más pequeño de lo normal, pero quiero subrayar en ello, así puedo hacer una línea y quiero ir a ticks la línea. Marca la línea y ve a la derecha. Punto y coma, luego el alineamiento de esta manera, tal vez te guste tu estilo de esa manera. Lo que quiero hacer es ponerlos uno al lado del otro, y es algo llamado “display”. Y hay algunas opciones. Bloque en línea. Por el momento están usando inherente, guardar trabajo en la mano. Se puede ver “inline-block”, esto significa que van a estar en una línea. Y quiero poner un poco de espaciado entre ellos. Entonces voy a meter un poco de relleno y pongo un poco de relleno a la izquierda. Si lo pongo a la derecha, se va a ver un poco raro. Te mostraré lo que quiero decir en medio. He decidido que 50 píxeles se ven bien. Lo pongo en el lado izquierdo. Entonces esto tiene, eso tiene así que contáctame a la izquierda. Analizando a la izquierda.Este de la izquierda, no te das cuenta. Te lo pones a la derecha, va a empujar el contacto lejos del borde.Es posible que quieras eso. Vámonos. Vamos a mover los colores y los subrayados. Ahora no podemos ir a quitar el color y subraya de este pequeño grupo de aquí, simplemente no funciona. El elemento de lista es el tipo de lista, pero no las fuentes reales en sí. Por lo que necesitamos bajar un poco más abajo. Y en nuestro caso, es la etiqueta a. Y si no estás seguro de qué etiquetas estar estilizando a menudo, puede ser realmente útil, si hago clic dentro de aquí, puedes ver que está mi una etiqueta que está dentro de un aliado, que está dentro de una URL, que está dentro de agregar widgets dentro de mi cabeza, que está dentro de mi cuerpo. Podrías escribir todo eso. Entonces acabamos de hacer el aliado. Se podría escribir todo esto, pero no tiene sentido real. Y eso es lo suficientemente único como navegación, por lo que se detiene ahí. Y así quiero empezar mi una etiqueta, que está dentro de ésta y dentro de ésta. Entonces vamos a hacer eso. Entonces me gustaría darle estilo, amigo mío, cosas que unas etiquetas, que están dentro de los aliados, que dentro de las URL, que están dentro de un n-av, y llaves. Yo quiero hacer un text-decoración como la primera, y se puede ver se puede poner un overline, subrayado, line through. Yo quiero ir a ninguno porque por defecto tiene un subrayado. A nadie le gusta. Y el siguiente va a ser el color, coloreado solo por sí mismo, ¿la fuente? Puedes usar tu recolector de color. Escoge cualquier color que quieras. Si conoces el número hexadecimal. Estoy usando RGB aquí, Porque puedes usar transparencia y es nuevo y es impresionante y funciona en pequeños browses.Podrías solo usar Hicks si estás acostumbrado a usar esos pequeños hashtags. No hay nada malo en eso. No es demasiado vieja escuela. Incluso puedes hacer esto cuando realmente, puedes escribir blanco.Eso también funciona. De acuerdo, entonces, ahora tengo algunos enlaces que se pueden hacer clic, no fui a ninguna parte porque tengo esos pequeños hashes en el interior.No hay ningún error como si tampoco, algún espaciado porque esto es interlineado. Echemos un vistazo a hacer la fuente. Ahora podríamos detener aquí la fuente. Para que pudiera entrar aquí y decir familia de fuentes, y puedo decir qué ser. Ahora, el único problema con eso es que lo siguiente que haga, que va a ser este trozo de texto en bloque aquí, va a ser la misma fuente. Entonces tendría que decirlo de nuevo. Entonces esta etiqueta p diciendo “botón de fuente, misma fuente”. Toda la página web va a usar Aerial. Entonces lo que hacemos, es decir, en lugar de peinar cada etiqueta individual, está en la parte superior aquí. Y tenemos una etiqueta corporal. Te decimos mi cuerpo, me gusta todo lo que está dentro de esta etiqueta corporal, que es todo en mi página. Recuerda, voy a tener una familia de fuentes de, y qué vamos a escoger, hay un montón de grupos aquí. No me gustan estos pequeños grupos. Prefiero solo tener Aerial, poner en coma y luego voy a tener una espalda llena de Sans Serif, punto y coma, bonito. Ahora bien, si quieres usar otras fuentes, Mao Open Sans, Soil Sands, como la Nueva Aérea. Puedes usar las fuentes de Doby o bien puedes apagarte y usar las fuentes de Google. Y no lo vamos a cubrir en este porque de todos modos tiene que ser bastante apicamente largo. Pero echa un vistazo a cualquiera de mis otros cursos, especialmente el de Bootstrap para Dream-weaver, que cubrirá fuentes y mucho más detalle. Entonces así se hacen las fuentes. Por todo lo que aparece en el documento. Entonces lo siguiente que vamos a hacer es que me gustaría a mi ejemplo de Cs lo metió desde la pulgada. los niños les gusta un ancho fijo y el medio y el estiramiento exterior.Eso es lo que quiero hacer en este momento. Mi ejemplo aquí es, que tipo de disfraz disparando todo el camino a la derecha y todo el camino a la izquierda. No es del todo lo que quiero. Por lo que quiero poner algunos como fronteras falsas aquí. Entonces vamos a hacer eso. Es bastante fácil. Podemos hacerlo solo el cuerpo. El cuerpo es el medio de todo. Nosotros decimos “tu cuerpo, me gustaría tener un ancho máximo de”, le toca a ti lo que metes, y lo voy a poner en 1024 píxeles. Es eso o 1200 de eso, como realmente, tamaños comunes. Y así, 1024 es el ancho máximo que puede ser la caja. Y echemos un vistazo. Va a ser una especie de trabajo. Entonces se lo fija a ese tipo de tamaño, pero como moroso a la izquierda, así que queremos pegarlo para que esté estrictamente en el medio. Por lo que todavía se puede ver max-width es realmente agradable para sitios receptivos. Entonces no lo pongas en el ancho porque eso te dirá físicamente para siempre ser 1024, mientras que max-width dice ser lo que sea hasta que un ancho máximo obtenga 1024. Responsividad. Entonces, y para conseguir que se centre, es algo llamado “Orden del margen”. Entonces puedes poner en margen a la izquierda y poner en orden, y poner en margen a la derecha, poner en orden, y eso sólo significa que voy a estar centrado. De acuerdo, entonces lo que haremos es dejar esto aquí. Sé que aún no hemos terminado pero lo que voy a hacer es que voy a romper esto en dos macetas, así que no es tanto tiempo. Entonces seremos nosotros por el momento que pasemos, y haremos el resto del sitio. Si te sientes como “No sé qué estoy haciendo ahora”, vuelve a saltar al siguiente, y uno después de esto, y puedes mirar el material móvil sensible del video. Porque ahora sólo estamos entrando en el diseño web básico, lo cual es genial, y subiendo nuestras escalas. Pero puedes saltarte si quieres. De acuerdo, nos vemos el próximo. 12. 12 video de producción construyendo el resto de nuestro sitio web: Hola a todos. En este video vamos a terminar de construir nuestro sitio, sólo añadiendo algunos textos, algunas filas horizontales, hacer un pequeño botón, y va a ser todo responsive y video-ey. Vayamos a hacer eso ahora. Lo primero que haremos es que tenemos nuestro encabezado, tenemos nuestro nav ahí dentro, y ahí está nuestro logotipo de imagen. Lo que vamos a hacer ahora es agregar la parte principal de la página web. Por suerte, la etiqueta HTML se llama main. Aquí es donde van todas tus cosas principales. Ahora, nuestra sección principal, si nos fijamos en nuestra maqueta aquí en Photoshop, es bastante básico. Este sitio web es probablemente un poco poco poco realista. Vas a tener un poco más de contenido aquí. A menudo divides tu principal en diferentes secciones. Nuestra sección principal, aquí vamos, va a ser ésta. Entonces puedes tener dos secciones. Podrías tener la sección para la imagen del héroe y debajo podrían haber algunas miniaturas y podrían ser algunos testimonios. Todos pueden estar en diferentes secciones. También puedes simplemente llamarlos etiquetas div. Solo estamos usando un lenguaje HTML más estandarizado aquí, pero div también está bien. Dentro de esto va a ser mi gran rumbo. ¿Dónde está el rumbo grande? Esto de aquí, “la creatividad es una mente salvaje y un ojo disciplinado”. Lo que voy a hacer es tipo en h1. Agregar pestañas. Por lo que nuestro h1 es nuestro rubro 1, nuestro rubro más importante de la página. Necesitas tener un h1. Ahí está. Vamos a comprobarlo en el navegador. Ahí está. Eso es lo que parece un h1 sin estilo. Normalmente es Times New Roman. Pero es Arial porque recuerdan que pusimos a Arial al cuerpo, así que todo dentro está siendo Arial, pero hay un buen estilo que tenemos que hacer. Necesita ser mayúscula y blanco. Necesita ser empujado desde arriba. Empujémoslo de arriba primero. Echemos un vistazo a eso. En Dreamweaver, lo que queremos hacer es que podríamos poner algo de relleno en la parte superior de h1, el único problema con eso es que cada página necesita un h1 y no todas ellas, de nuevo, necesitan ese relleno. Lo que podemos hacer es en realidad podemos decir la sección, podemos darle un poco de clase y decirle a esa sección que tenga algo de relleno, solo para empujar el h1 hacia abajo. Vayamos a hacer eso. Podría darle estilo a una sección, pero recuerda probablemente las páginas van a tener más de una sección, así que queremos darle un poco de especificidad. No importa si creas la clase aquí y luego la construyes en el CSS después o la construyes en este CSS y la aplico aquí en segundo lugar. Voy a darle una clase a esto, tal vez lleguemos a nombrarlos nosotros mismos. Voy a llamar a éste mi caja de héroes. De acuerdo, en realidad voy a poner héroe. Tiene un nombre de clase aquí, y yo tengo mis estilos. Voy a hacer una clase abajo aquí. Ahora, ¿qué va frente a una clase? Así es, parada completa o un punto. Yo lo voy a llamar héroe, tirantes rizados. Empuje retener, los separa. Lo que me gustaría hacer es hacer algo de relleno en la parte superior. ¿Cuánto? Ya lo he arreglado jugando un poco, y esto va a tener un relleno de 80 píxeles. Guardar. Echemos un vistazo. Aquí vamos. Empujarlos hacia abajo desde arriba. Vamos y estilo h1 ahora. Entonces mi CSS abajo por aquí, y poner en mi h1. Porque un h1 es una etiqueta existente, no es clase la que creamos, simplemente no tenemos periodo al frente. Vamos a agregar algunas cosas a la h1. Lo que haremos es ir al tamaño de fuente, fuentes, ahí está él, tamaño de 4.6em punto y coma. Genial. ¿Qué más? Vamos a darle un color de blanco, es #FFF. Podemos usar el recolector de color ahí, teclearemos en blanco. Yo lo voy a hacer en mayúsculas. Entonces es transformación de texto es la que quiero. Ahí se puede ver, yo puedo hacerlo en minúscula. Voy a forzar que todo sea mayúscula. Agradable. En mi caso, quiero el margen justo debajo de él. Un pequeño margen debajo de él para ser un poco más grande de 20 píxeles. Esto me permitirá, lo que podría hacer. Hay un poco de espacio debajo quiero empujarlo hacia abajo donde entra esta regla horizontal. Entra en el navegador. Enfriar. Estamos una especie de ahí. Es grande, es audaz, esto es exactamente lo que quería hacer. Lo único es que quiero aplastar en este lado izquierdo. Echemos un vistazo a Photoshop. Yo quería alinearme con esto. Voy a añadir algo de relleno a la caja. Lo hicimos antes de agregarlo a la parte superior de nuestra caja de héroes para empujarlo hacia abajo. Podemos hacer lo mismo para que el relleno del lado derecho lo empuje. Dreamweaver. Lo hicimos aquí en mi caja de héroes. Yo sólo voy a agregar algo de relleno a la derecha, y van a ser 250 píxeles. También voy a añadir algo de relleno a la parte inferior solo para empujarlo en la parte inferior, porque de lo contrario todo el texto se aplastó en la parte inferior ahí. Yo quiero que se lo levante un poco. Echemos un vistazo. Impresionante. Un giro de 50 píxeles por ahí, ¿ y qué fue? 80 a lo largo de la parte superior allá, y hay un poquito aquí abajo en la parte inferior solo para mantener todo fuera del fondo. Volver a Dreamweaver. Lo siguiente es la regla horizontal. Yo quiero poner una línea justo debajo de ella. Hay un par de formas de hacerlo. El camino fácil está justo debajo de este h1. Poner algo llamado tabulador hr. Lo raro de un hr es que todo lo demás tiene una abertura y un cierre, el hr no. Es solo por sí mismo. Vamos a comprobarlo en el navegador. Ahí está. Ahí está mi gobernante horizontal. Se estira todo el camino. Lo que podemos hacer es darle un estilo un poco. Ahora vamos a usar un práctico truco nuevo dandy. Hemos estado saltando entre esto, y esto, y esto, y esto. Dreamweaver 2017 al menos tiene esta nueva característica. Si hago clic con el botón derecho en él y voy a esta cosa llamada “Edición rápida”, es impresionante. Lo que hace es que abre este pequeño aprieto capricho a tu CSS. Lo que hace es que diga: “Por el momento no hay estilo para este hr. ¿Te gustaría hacer uno?” Usted dice: “Sí, por favor Nueva Regla”. Se puede ver que en realidad estoy en mi hoja CSS en la línea 55. En realidad se pone en la sintaxis que necesito en las llaves listas para ir. Enfriar ¿eh? Voy a poner en una altura de la misma. Por el momento era solo un píxel, voy a poner en 10 pixeles, eso es un poco más grueso. Guardemos eso y veamos cómo se ve. Ya ves así es como se ve nuestra horizontal con una altura. Hay un par de cosas que tenemos que hacer para que se vea bien. Tenemos que poner en un color de fondo. Color de fondo de blanco o FFF con un hash, punto y coma. El único problema es que quizá no puedas verlo aunque acerquemos. Ves que hay una frontera rara alrededor del exterior. Es solo por defecto en una regla horizontal. Lo que vamos a hacer es ajustar el borde a cero píxeles. Ahora, puede que no se vea muy diferente, pero me molesta esa cosa. De todos modos, eso es todo. Puedes darle un ancho también si quisieras. Por el momento, le hemos dado una altura pero sin anchura, lo estoy dejando ir a ese relleno que se ha ido de lado aquí, puedes meterlo en ser pequeño si quieres, solo dándole un ancho, voy a dejar el mío. A continuación se presenta el texto que va por debajo. Vamos y agreguemos eso. En realidad antes de hacer eso, vamos a cerrar esto. Vamos a echar un vistazo a los estilos y se puede ver el fondo aquí es mi regla horizontal. Simplemente te ahorra entrar ahí para cambiarlo. Lo crearemos al menos, volvamos al código fuente y pongamos nuestro trozo de texto. Ahora, el texto, Jimly, está contenido en una etiqueta p. Ese es el texto de copia de cuerpo en una página. decapitaciones de H1 y prácticamente todo lo demás, pero no es un H1, 2, o 3, encabezamientos importantes, es una etiqueta p. Lo que vamos a hacer es dentro de esta etiqueta p, vamos a poner un montón de texto. Podrías aplastar el teclado y poner en texto falso, eso funcionaría. Pero hay una forma más agradable de hacerlo usando Lorem ipsum. Si eres diseñador y estás como, genial, voy a ir ahí, es en lipsum.com y ve a buscar ese texto desde ahí. No es una gran manera de hacerlo porque copiar y pegar desde ese sitio puede traer a través de código que no queremos en nuestro sitio web. Lo que vamos a hacer es que está incorporado a Dreamweaver. Si escribo Lorem y golpeo tab, mira eso, es un Lorem ipsum incorporado. Enfriar. Sé cuántas palabras, digamos que estás trabajando con un copyrighter y el copyrighter está escribiendo a un horario de escritura, así que está escribiendo 200 palabras para la página principal y estas muchas palabras para esta página. Entonces tienes una idea aproximada cuando estás diseñando, bueno, cuántas palabras va a ser. Digamos, sé que mis palabras son en realidad 52. No lo sé. Es bastante preciso. Nunca vas a ser tan preciso. Pero lo genial de este pequeño atajo en Dreamweaver es Lorem y pones 52, hit tab, eso son exactamente 52 palabras, realmente útiles. Vamos a guardarlo, revisa en el navegador, ahí tienes, ahí está mi etiqueta p. Por defecto, es negro, 16 píxeles, o un em. Vamos a arreglar eso ahora. Usaremos nuestro truco astutivo. Haga clic derecho en él, edición rápida, no hay regla, crearlo con una etiqueta p, y voy a hacer color. El color por sí mismo, recuerda, es este blanco, fff lo hace. Lo único que quiero cambiar es probablemente la altura de la línea y va a ser 1.5 em, por lo que el espaciado de una línea y media. El valor predeterminado es uno em y estoy contento con eso con la copia del cuerpo, es un buen tamaño, pero estoy poniendo la altura de la línea, el espacio entre líneas, todo lo [inaudible], vamos a comprobarlo. Agradable. Ahora, una cosa que acabo de notar en la parte superior aquí es esto, esa es la sintaxis de esto, no tengo ni idea de por qué está eso aquí. Vayamos a revisar. En primer lugar, voy a refrescar esta página. Desaparecidos. Eso es bueno. Entonces mi pequeño adelanto aquí tenía un pequeño bicho, creo. No tengo idea de cómo llegó eso. Voy a cerrarlo. Impresionante. Creo que es esa cosa de edición rápida, que tal vez haya un pequeño bicho con eso, pero todo se ha ido bien ahora. Encantador, así que pongamos un botón de búho debajo. Se ve así en mi maqueta. Es solo un texto con algunas cosas a su alrededor, pero se puede hacer clic, y cómo se construye un botón así. Todo eso es una etiqueta, como hicimos para un hipervínculo, lo que hemos hecho aquí arriba. Recuerda nuestra una etiqueta, así que una, y pulsa “Tab”. ¿ A dónde va a ir? Vamos a poner en nuestro signo de libra de posición. ¿ Cuál es el texto? Dice revisar nuestro portafolio. Eso nos va a dar algunas cosas, echemos un vistazo. Grande y azul. Vamos a hacer lo mismo que hicimos aquí arriba y simplemente quitar el estilo, además vamos a añadir algunos bordes a su alrededor. Para que esto suceda, necesito agregar una clase, porque si empiezo todas las etiquetas a, cada una de las etiquetas en cada página se va a estancar y no quiero eso. Recuerda que vamos a añadir una clase. Genial. Voy a darle un nombre, voy a llamar a este mi clase de botón. A veces llamar a un botón no es una gran idea si estás usando, digamos, bootstrap porque usan esa sintaxis. Podría llamarlo otra cosa, podría llamarlo mi llamado a la acción. Ese es un nombre un poco largo. Esa es mi clase. Voy a entrar aquí en mis estilos, abajo abajo, hacer una clase, y luego las clases tienen una parada completa frente a ella. Después, pon ahora tirantes rizados. Lo que le voy a hacer es, en primer lugar, color de fondo, color de fondo. Es que lo estamos haciendo a un enlace, pero lo que nos va a permitir hacer es agregar ese borde rojo. Podrías hacer una caja y poner el texto dentro de ella, pero es fácil usar el texto y hacer un borde alrededor de ella, si sabes a lo que me refiero. Sé que estoy usando f1474c, punto y coma esto, ese color rojo. Algo genial en CSS ahora en Dreamweaver, si pasas por encima, él, debería darte un pequeño ícono. Práctico. Otras cosas que quiero hacer, realidad, vamos a revisar en el navegador, ya puedes ver, ahí está ese color rojo, pero, para hacerlo más como un botón, necesitamos agregar algo de relleno a su alrededor. Se puede pasar y decir relleno superior, relleno izquierdo, relleno derecho, relleno inferior. Tengo esos mezclados, pero puedes editar las cuatro de esas propiedades, pero ahora en CSS, lo que puedes hacer es solo agregar relleno, y lo que pasa es, asume, puedes ponerlas en orden, te mostraré tú, así que quiero que la parte superior sea de 18 píxeles. Se puede ver ese pequeño popup aquí. Ya puedes ver si lo dejo así, se va a aplicar a los cuatro, así que voy a tener relleno por todo el camino. Pongo mi punto y coma, guárdalo, echa un vistazo. Se puede ver este 18 todo el camino, en lugar de tener que definir a los cuatro. En realidad puedes ponerte un poco más inteligente porque quiero que el tamaño sea así que el top es de 18, pero quiero que el derecho sea de 30, casi el doble. Se puede ver aquí, ahora dice arriba a la derecha es 30, abajo es 18 y 30 duplica estos. Esencialmente, va en el sentido de las agujas del reloj, comienza en la parte superior, va a la derecha, va de izquierda a abajo. Lo que podría hacer ahora es ir 18 píxeles y 30 píxeles, solo para que tal vez sea más claro para ti, en lugar de escribir arriba, izquierda, abajo. De todos modos, vamos a guardarlo. Vayamos a revisar. Impresionante. Yo quiero poner algo de espaciado entre estas líneas, así que lo que voy a hacer es ponerle una altura de línea, A veces se puede poner un relleno arriba, pero en este caso, la altura de línea va a funcionar mejor para nosotros. Cuatro ems, guárdalo. Agradable. Empujarlo de ahí. Cambiemos el color de la misma, a fff, y deshagamos de lo subrayado, y lo hicimos temprano, recuerda. Decoración de texto y nos vamos a ir ninguno, por favor. Deshazte de ese subrayado. Echemos un vistazo. Se ve bien. Haga clic, se puede hacer clic. Es un bonito botoncito. Bastante simple de hacer, un poco de CSS en tu código HTML, bonito y limpio. Acabas de conseguir esto una etiqueta con la clase a su alrededor. Agradable. Muy bien, amigos míos. Hemos hecho un pequeño sitio fresco. Ese es el final de ello, porque prácticamente todo lo demás si quieres agregar más, puedes agregar otra sección. No vamos a entrar en enorme detalle en este, sólo un poco de ejercicio para construir ese sitio. Entonces ya lo hemos hecho. El siguiente paso es mirar algunas cosas receptivas. ¿Qué hemos hecho? Hemos hecho este sitio. Es una fuente vieja aburrida, Arial, lo sé, pero tenemos un bonito y genial video de fondo. Si cambio de tamaño, va en segundo plano, consiguió un enlace clicable. Es bastante guay. Una cosa antes de irme, no puedo evitarme, ves relleno en la parte superior aquí, está demasiado cerca. Lo que podemos hacer es agregar algo de relleno al encabezado. Aquí, mi styles.css, voy por abajo y voy a crear encabezado, y dentro de aquí, voy a decir relleno. Simplemente haré la parte superior en este caso y quiero agregar 30 pixeles por favor. Está fuera de lo alto. Encantador. Está bien. Ésos vamos a ser nosotros. Sí, saltemos al siguiente video. 13. 13 Haz que un fondo de video de pantalla completo: Hola a todos. En este video, vamos a ver cómo hacer nuestro video de fondo listo para el móvil. Lo que vamos a hacer es, se puede ver que el video se está reproduciendo en segundo plano aquí, pero cuando lo contrajo a simulación móvil o móvil, entonces se puede ver el video real se apaga justo con el fondo coloreado ahí. Ahora, ¿por qué solo estamos haciendo un video listo para el móvil? Principalmente porque los fabricantes de móviles o al menos sus sistemas operativos no dejan reproducir videos. No los dejan auto-play, aún puedes tener videos en tu sitio, y con tu anfitrión y tú mismo o YouTube. Esos siguen bien porque esos permiten a los usuarios presionar “Play” y decir: “Sí, voy a usar eso reproduciendo este video”. tanto que los videos automáticos de fondo, comienzan a reproducirse sin ningún control. Por lo que no quieren por un par de razones, una es datos. Podrías estar fuera viajando y simplemente no te das cuenta de que estás masticando muchos datos de video porque este sitio web está reproduciendo este gran video largo en segundo plano, así que esa es una de las razones. El otro motivo es el uso de la CPU. Si alguna vez has visto un montón de videos en promedio buscando laptop, puede arder a través de la potencia de procesamiento y la batería bastante rápida de una laptop, y en un teléfono obviamente, es mucho más un trato. En realidad es realmente fácil hacer versiones móviles o versiones responsivas de este fondo de video, porque simplemente lo apagamos realmente, y lo reemplazamos por un color de fondo. Vayamos a hacer eso ahora. Saltemos a Dreamweaver. Lo que tenemos que hacer es saltar a nuestro styles.css y vamos a poner en nuestra primera consulta de medios para este trabajo. Ahora si no estás familiarizado con las consultas de los medios, sólo realmente vamos a cubrirlas básicamente aquí. Si quieres entrar directo a un sitio web receptivo, ese es el trabajo de otro tutorial. Para obtener mi codificación para diseñadores con Dreamweaver 2017, cubrimos completamente [inaudibles] versiones de escritorio de tablet móvil, pero la versión flaca es, como pones en algo llamado @media, y eso es consulta inmediata. Ponemos algo llamado max-width, y en nuestro caso vamos a recoger 400 pixels. Ahora van a poner mis llaves. Lo que hace una consulta de medios es que el navegador comprobará para ver qué tan ancho es el navegador, y si ese navegador tiene 400 píxeles o menos, va a activar el código que está aquí. Para nosotros, eso va a significar, vamos a decirle a un video que se apague en esa cosa. Eso es todo lo que son las consultas de medios y eso es re-quarter responsive diseño web, es que tienes un muy rígido consultas inmediatas que dicen las cosas para encender y apagar dependiendo del tamaño de la pantalla. Entonces lo que me gustaría hacer es añadir esa etiqueta de video, así que estoy de vuelta aquí en código fuente. Ahí está, esa etiqueta de video aquí. Lo que me gustaría que hicieras es que se apagues cuando llegue al móvil. Si lo haces de esta manera, si apagamos toda la etiqueta de video, solo significa que cada video de nuestra web, va a apagar un móvil y eso podría no ser necesario a lo que queremos, así que vamos a inhibir esta clase que editamos antes llamado a pantalla completa, lo añadiremos también para que sea un poco más específico. Video y luego poner en una parada completa y poner en una pantalla completa, más llaves llaves, y lo que vamos a decir es mostrar a mi amigo? Ninguno, punto y coma. Ahora lo que debería pasar es que, cuando llegue a un ancho de pantalla de 400 píxeles o menos, va a activar este bit de código sólo en ese momento y va a convertir la pantalla a ninguna para esta cosita específica aquí, ese video.fullscreen. Vamos a comprobarlo. Entonces aquí está el escritorio, bajando, y va a ser una pantalla móvil al día, se ha ido. Bueno, funciona. Mi texto es blanco aunque sobre un fondo blanco. Se puede ver el texto es un poco desordenado aquí, así que debemos pasar a un sitio totalmente receptivo, pero vamos a mantener esto enfocado más sobre los fondos de video. Si quieres un sitios completos, hay un montón de tutoriales que tengo para hacer sitios completos, pero vamos a intentar cambiar eso para tener un color. Tan agradable y fácil. Lo que haremos es el cuerpo aquí, diremos que tienes un color de fondo. ¿ De qué color? Tengo una aquí en mis bibliotecas CC. No estamos usando bibliotecas CC. No tienes que hacerlo, son impresionantes, pero ese es el color que quiero. Si paso por encima de él, puedes ver que es el color, así que vamos a comprobarlo en el navegador. Por lo que aquí arriba para video, vamos a meternos en el móvil, un bonito fondo de color de carga rápida y rápida. Ignora el texto, esos todos, lo estropeé un poco. Así es como lidias con los videos que están en el móvil. Podría ser un color de fondo, podrías buscarlo a una imagen de fondo si quisieras, hasta ti. Entonces eso somos nosotros las personas encantadoras del diseño web, tenemos nuestro video yendo en segundo plano, y se apaga por un fondo de color cuando se baja a la pantalla del móvil. 14. 14 Añade video de fondo a un cuadro de etiqueta específica en tu sitio web: Hola ahí. En este video, vamos a hacer un fondo de video pero dentro de la etiqueta div contenedora aquí. Se puede ver este aquí en lugar de ser completamente de fondo, está dentro de esta bonita forma de caja de arena de luz aquí. Lo que puedes ver aquí es cuando lo redimensiono, puedes ver que el video se hace más pequeño y cambia. Ahora este video existente es de un tutorial anterior donde construimos un sitio en Dreamweaver usando Bootstrap. Simplemente vamos a saltar al final de ésa y atascar este video de fondo. El genial de esto es que si has hecho los tutoriales anteriores, es prácticamente exactamente lo mismo pero un par de pequeños cambios. Es mucho más importante adónde va esto. Tenemos que averiguar en qué etiqueta div va a entrar, y miramos esto, son como caja de héroes. Este sitio web que estoy mirando aquí acaba de saltar a un viejo tutorial que he hecho, si has hecho mi tutorial de Dreamweaver Bootstrap, aquí es donde terminamos. Entonces lo que queremos hacer es que quiero encontrar la caja de héroes, y ahí es donde quiero quedarme en este video. ¿A dónde va? Es posible que tengas que jugar con esto, depende de cómo formateaste tu sitio. Si me seguiste exactamente, va entre fila y esta columna grande aquí 12. Pero si has hecho algo diferente con tu diseño, que probablemente tengas, tal vez tengas que copiar y pegar esto alrededor. Podría ser que vaya en el contenedor, justo debajo del contenedor, o justo debajo de la fila, o dentro de la columna, o dentro de otra sección div que tengas, así que simplemente juega con él. Es como si fuera antes. Vamos a poner en video parejo y luego SRC para la fuente. partir de aquí vamos a conseguir este video y dar clic en “Navegar”. No tengo uno en el sitio, pero tengo mis archivos de ejercicios, mi escritorio bajo video, y ese es el que hice antes en premiere pro. Diseña una caja de héroes, haz clic en “Abrir”. No está en mi sitio actual. ¿ Te gustaría copiarlo? Sí, por favor, ¿dónde me gustaría ponerlo? Voy a hacer una carpeta llamada videos. Genial. Ahorra, fresco casi hecho. Queremos como antes, queremos que éste se reproduzca automáticamente y nos gustaría que se bucle, por favor. De acuerdo, y cerraremos esa etiqueta de video. Comprobemos cómo se ve eso en un navegador. Oye, funciona. Eso es sólo un corte agregar un video a una página. No como fondo, así que hagámoslo a continuación, pero con un mejor trasfondo. Ahora para que esto suceda, saltemos a Dreamweaver, lo que tenemos que hacer es ponerlo como fondo y necesitamos darle, podríamos usar la etiqueta de video. Pero de nuevo, si usamos la etiqueta de video en otros lugares de mi sitio, podríamos terminar configurando cada video de este sitio web en un fondo y no queremos hacer eso. Entonces lo que vas a hacer es darle una clase, recordar nuestras clases, algo que lleguemos a agregar y nombrar que lleguemos a escoger. Podemos llamar a esta cosa como nos guste. Fondo elásticos cosita. Nunca una columna tan larga, no hay nada malo en ella excepto como yo, he desarrollado unos amigos que terminan abriendo mi sitio web y ríen o lloran por cuanto tiempo son algunas de mis clases. Yo estoy en main.css. Lo que haré es que voy a poner la mía cerca de mi caja de héroes aquí. Entonces justo debajo, tenemos un punto al principio, y luego lo pegamos para una clase, calibraciones. Dentro de aquí, aquí es donde vamos a sumar algunas de las cosas. Esto necesita ser establecido posición en primer lugar. Por lo que la posición va a ser donde usábamos arreglada hasta ahora y los demás ejercicios. Entonces echemos un vistazo a fijo. Significa que siempre va a estar ahí, lo cual es un poco raro para lo que queremos. Queremos sentarnos dentro de este div aquí, así que vamos a usar el otro llamado absoluto. Ahora si nos desplazamos , subirá y bajará con la página. Se puede ver posicionando absoluto, en realidad está metido ya detrás de esto. No está del todo arriba en las esquinas y todavía elástica, así que hagámoslo. Eso es como hicimos el video de fondo completo, ponemos en un mínimo ancho de 100 por ciento de punto y coma, y una altura min de 100 por ciento de punto y coma y luego ponemos en el ancho y la altura recordar solo por auto. No nos va a causar ningún problema en este, pero hay momentos en los que lo hace, así que solo mételo. Por lo que la altura y el ancho, son auto, auto. Echemos un vistazo y está funcionando, estamos llegando ahí. Está estirando toda la altura. Hay un par de cosas que tenemos que hacer. En primer lugar, lo necesitaremos atascado en esta esquina, porque se está perdiendo. Está usando esto algo de relleno en esta caja aquí, por lo que necesitamos un conjunto completo en la esquina. Puede que no tengas que hacerlo por el tuyo. Entonces esto es opcional. El mío definitivamente lo necesita. Entonces a la izquierda, me gustaría que fueras cero píxeles, así que va a estar todo el camino a la izquierda. Entonces vamos a poner la parte superior, a la misma, cero píxeles. Ahí hay borde final en la parte superior. Ahora lo que tenemos que hacer es atraparlo, está haciendo todo lo que queremos, está redimensionando, está respondiendo, pero necesita estar atascado y saber de qué está haciendo la etiqueta div de la que está dentro. Tenemos que hacer esto por el contenedor div. El contenedor div es esta banda de héroes. Si miro aquí, el tuyo podría ser diferente. Este es el de aquí que estoy como meterlo dentro de. Entonces lo que quiero hacer es que quiero decir esto aquí, “Tú mi amigo necesita tener una posición de pariente”. Se le dice que sea relativo, este tipo utiliza eso como su base. Tenemos una cosa de fondo receptiva. Eso es todo, si quieres simplemente pasar de en lugar de un fondo completo a solo uno dentro de aquí. Ahora, para nosotros, una cosa que no teníamos que hacer, y muchos ejemplos que vas a hacer es que debes jugar con el índice C. posible que tengas que establecer esto, realmente depende de cómo quieras trabajarlo pero digamos que el fondo elástico podría ser que tenga que establecerse en el índice Z de tal vez menos uno o menos 100 no importa siempre y cuando esté por debajo de cero y es posible que necesites hacer eso. Lo que pasa en mi caso es que está sentada detrás del tipo de aquí, el héroe de la banda ahora está en cero, así que este tipo está detrás de él. El grupo aquí en realidad tiene una imagen en ella por lo que no podemos ver el video. Entonces lo que tenemos que hacer en nuestro caso es, probablemente solo elimino el índice Z porque no parece que lo necesite. Pero podría hacer menos dos. Entonces detrás de eso, si el video no se carga en las pantallas móviles, cargará la imagen de fondo. Eso es bastante cool y bastante simple. Tú mi amigo ahora eres experto en video de fondo. Ahí es donde dejaremos este video, encabezados. 15. Hoja de trucos 15: Consejo número 1 para agregar videos de fondo de pantalla completa al sitio web, no puedes hacerlo desde el móvil. Apesta, pero a los fabricantes de móviles no les gusta que tengas videos de reproducción automática por datos, desperdiciará eso, y se quema a través de la duración de la batería. El CPU se vuelve loco cuando se trata de intentar reproducir videos. Básicamente solo apagamos el video cuando bajamos al móvil, lo apagamos con una imagen, y vivimos con él. Esa es la punta número 1. Consejo número 2 para hacer videos de fondo a pantalla completa es tamaño de archivo, y cómo conseguirlo super duper pequeño. Lo único que realmente necesitas hacer es agarrar tu video, ponerlo en Adobe Media Encoder. Ve a Personalizado, desplázate hacia abajo y lo que quieres jugar es algo llamado bitrate. Mételo a velocidad de bits variable 2, y hay opciones, hay dos pequeños deslizadores que conectan 1 y 1.51, y exportan. Pasarás de un archivo de 20 megabyte a un archivo de un megabyte. Es una locura buena, y la calidad es bastante buena. Ese es el consejo número 2 para hacer videos de fondo a pantalla completa. Consejo número 3 para hacer videos como fondo en un sitio web. Esto es para usar específicamente la versión de buzón pequeño, donde conseguiste caja pequeña, y pusiste el video en segundo plano. Cuando estás editando tu video en algo como Premiere Pro o Media Encoder, necesitas cortarte las tapas y los fondos. No tiene sentido estirarlo, así que solo cubre. Tendrás todas estas bandas que un desperdiciado y que es tamaño de archivo, y esa es nuestra némesis cuando se trata de videos de fondo. Cortarlas usando la función de recorte, o en Premier Pro, ve a ajustes de composición, ajustes secuencia incluso, y simplemente cambia la altura hacia abajo a algo más pequeño. Puedes hacerlo en Media Encoder al final también, así que esa es la punta número 3 de creo que tenemos ocho probablemente. Consejo número 4 todo de ocho para hacer fondos de pantalla completa de video en un sitio web. Éste es lo que se utilizan los formatos. menos, necesitas MP4, que es el más utilizable para compartir allí, y luego necesitas uno de respaldo. Olvídate de OGG oggs ahora. Todo se trata de WebM con una M, ese es el siguiente retroceso. Solo necesitas dos archivos de video. Esos son los dos que necesitas. El consejo número 5 para agregar videos de fondo de pantalla completa a un sitio web es agregar todo ese grano fresco, o borroso, o lavarlo un poco. Eso lo hacemos realmente por dos razones. Una es que se ve bastante cool, y podemos conseguir garrapatas de hasta la parte superior de ella si lo oscureces. Pero la otra razón es que tenemos que usar tamaños de archivo bastante pequeños, y se pone un poco pixelado. Lo que hacemos es desenfocarlo, o agregar los puntos, o el grano de película sobre la parte superior para ocultar eso. Hace que sea menos obvio que a propósito nos pusimos a la grilla en lugar de que sea un poco malo porque hemos tenido que usar baja calidad. Sí tenemos dos razones: cool y para ocultar los malos píxeles. Entonces esa es la punta número 5 de 8, creo. Hagamos el siguiente. El consejo número 6 para agregar videos de fondo a un sitio web, los de pantalla completa, es que no todos los videos son iguales. Si tienes un video con muchas cosas diferentes pasando, su acción, y hay cosas volando alrededor, muchos colores, muchos gráficos en movimiento, eso va a tener tamaños de archivo más grandes. Es sólo más colores, más pasando. Los colores se están moviendo, más datos, archivos más grandes. Lo que había hecho en este ejercicio de clase aquí es que tiene un poco de la mano moviéndose por ahí, y así se pone muy, muy pequeña. No todos los videos se crean iguales cuando se trata de tamaño de archivo. Estamos hasta 5, 6, 7. He contado mis manos antes de que empiece a correr la película porque nunca estoy seguro de qué propina estoy hasta, y parece que me he saltado la punta número 6, así que sólo vamos directo al 7. Este consejo es uno fácil. Tomas tu video, y haces que el fondo sea un poco más oscuro. Se ve bastante fresco y malhumorado, también baja el tamaño del archivo. Significa que puedes poner tipo sobre la parte superior. Algún blanco se apodera de la parte superior si la has bajado de un color oscuro. Ese es el consejo número 7 por poner videos de fondo de pantalla completa en un sitio web. Estamos hasta la propina número 8, ya lo he contado. Consejo número 8, este es el último de cómo agregar video a un fondo de sitio web. Es decir puedes hacer algunas cosas en CSS, cosas como difuminar, puedes silenciar el video. No hagas nada de eso en CSS. ¿ Por qué? Porque parte de ella no es compatible en todos los navegadores, así es [inaudible] de nuestra vida. Pero también la gran razón es que si tienes un video y tiene audio, ese tamaño de archivo se va a cargar. El hecho de que lo mueres más adelante, no cambia el tamaño del archivo. Sí lo muda y eso va a funcionar, nada de malo en eso. Pero el tamaño del archivo, todo ese audio está incluido en su tamaño de archivo. Lo mismo con cosas como difuminar. Lo desenfocas, eso en realidad disminuye el tamaño del archivo porque obtienes menos detalle a menos que se mezcle con píxeles. Haz todo ese tipo de cosas en el video primero y algo así como Premiere, o After Effects, o Media Encoder antes de llegar a CSS.