Transcripciones
1. Introducción: Hola, mi nombre es Dan Scott, y en este video te vamos a sintonizar de Web zero a web hero y buscar construir tu primera página web receptiva usando Dreamweaver. Ahora puedes seguir este tutorial a la
perfección y solo necesitas descargar los archivos de ejercicios, hay un enlace abajo en el escritorio de descripción, gratis para descargar, ir y conseguir eso, pausar el video, volver una vez que tengas los expedientes. El objetivo de este tutorial es exponerte al diseño web moderno. Vamos a ver términos como HTML5 responsive y CSS3. Suenan extravagantes, pero en realidad son bastante fáciles una vez que los entiendes. También vamos a ver cómo Dreamweaver hace que esto sea súper fácil para nosotros. Pero en realidad lo que realmente quiero que obtengas de este video es llegar a un punto ojalá y seas como, en realidad, no es tan difícil como pensé que era. Estoy bastante emocionada por salir y aprender más y construir mi propio sitio. Entonces ese es mi objetivo. Entrémonos ahora y empecemos a trabajar.
2. PROCESO: Entonces, en primer lugar, hablemos del proceso. Por lo que primero, necesitarás diseñar tu sitio web primero en algo como Photoshop o Illustrator. Entonces puedes ver aquí he diseñado cómo se ve mi sitio web en un escritorio, cómo se ve en una tableta, y cómo se ve en un móvil. puede ver que son muy similares, pero cada diseño toma el mejor uso de los tamaños de los dispositivos. Por lo que solo hay algunos cambios en el tamaño de la fuente y algunos reordenamientos de cajas para que se vea raro en los diferentes dispositivos. Esto es lo que llamamos responsive. El sitio web va a cambiar de forma y cambiar de forma un poco dependiendo de si es móvil, tablet o escritorio. Entonces ese es nuestro primer gran término fuera del camino. diseño web responsive solo significa que el sitio web cambia para usar mejor el dispositivo. Entonces no importa Photoshop o Illustrator, pero he diseñado el mío aquí en Photoshop. Ahora tenemos que traducirlo en esto. Esta es la versión terminada de nuestra página web donde puedes verla coincide con mi maqueta de Photoshop para escritorio. Pero cuando baje, mira esto, mira esto hasta la tableta, ¿puedes ver que cambia ahí? Estoy arrastrando mi navegador dentro y fuera, porque el tamaño de la fuente cambia, se centra, las columnas van de tres cerca a dos. Entonces ese es nuestro término responsividad. Vamos a construir esto y bajar al móvil donde sólo está estirando uno a través. También haremos algunas cosas donde notarás que hay seis en la tableta, pero solo cuatro en el móvil. Entonces vamos a desactivar algunos de ellos. También vamos a cambiar el menú a lo largo de la parte superior aquí puedes ver en mi maqueta de Photoshop que están rectas en el escritorio pero colapsan en esta otra versión en los dispositivos más pequeños. Entonces hemos resuelto lo que significa responsive, y sabemos lo que vamos a estar construyendo. Salgamos ahora y empecemos a construirlo.
3. Comienza a construir: De acuerdo, entonces lo primero es abrir Dreamweaver. A menudo en un principio te haría unas preguntas como, ¿de qué color quieres en el fondo? ¿ Si quieres ser diseñador o desarrollador? Lo que quieres hacer es escoger desarrollador para este caso. Si no has escogido la opción correcta, solo sigue pasando y luego puedes cambiarla de nuevo y aquí en la parte superior derecha y solo escoge desarrollador y debería parecerse algo a la mía. Lo siguiente que tenemos que hacer es definir un sitio. Acude a un sitio y acuda a un sitio nuevo. Tenemos que hacer esto por cada nueva página web. Si solo tienes uno, sólo tendrás que hacer esto una vez. Pero si te gusta el edificio principal, muchos sitios web, tendrás que definir este sitio para cada uno nuevo. Dale un nombre, estoy llamando a la mía “Rugido Ciclos”. Está bien. Esa es empresa para la que estamos trabajando y necesitamos decidir en qué parte de un disco duro vamos a mantener este sitio web. Porque todas nuestras imágenes y todas de HTML, todas las cosas que hacemos para este sitio web necesitan mantenerse en la misma carpeta. Lo que vamos a hacer es ir a la carpeta del sitio local, clic en este pequeño botón de “Examinar” y podrías hacer uno propio. Pero como ya tengo algunos archivos de ejercicios, podrías descargarlos. De acuerdo, entonces los que has descargado del enlace en la descripción van a los archivos de ejercicios responsivos y solo elige esta carpeta aquí. No hay necesidad de ir más profundo, ¿de acuerdo? La otra cosa que debes hacer antes de pasar es ir a ajustes
avanzados y aquí arriba dice carpeta de imágenes por defecto. Ve a eso y solo escoge la carpeta de imágenes que he creado para ti. Si estás haciendo tu sitio por ti mismo, harías tu propia carpeta con tu propia carpeta de imágenes. Solo estamos ahorrando tiempo para saltar a las cosas receptivas en este curso, vamos a hacer clic en “Elegir” y a “Guardar”. Lo que he hecho es solo para acelerar las cosas, es que he empezado el sitio web, ¿de acuerdo? Sólo tienes que ponernos en marcha para que podamos saltar a las partes receptivas. Vayamos a index1.html y así es como se ve nuestra página en código. Queremos ver cómo se ve en un navegador. Abajo abajo justo aquí se pesa abajo aquí hay uno llamado navegador
en tiempo real anterior a este ícono de extrema derecha. Haga clic en eso y luego haga clic en “Google Chrome”. Si no tienes Chrome instalado, lo mejor es ir e instalar eso ahora, vale, alguien está llamando al navegador web y es el que deberías estar haciendo, mayoría de tus pruebas en, no puedes usar Safari o cualquiera de los otros, pero Chrome es amen. Esto es lo que he hecho por ti hasta ahora. Es solo previsualizar localmente en mi navegador, ¿de acuerdo? He editado un logo, he agregado esta navegación y esta gran caja rosa solo para que la estructura sea correcta, que podamos empezar a mirar lo que la hace sensible. Porque por el momento si agarro el borde aquí, no responde en absoluto, al igual que se sienta ahí. De acuerdo, así que vamos a entrar en Dreamweaver y añadir nuestro primer bit de HTML.
4. Construir el HTML: Pongámoslo adentro. Nos vamos a poner en el hitting, Vamos a ponerlo ahora tenemos nuestro encabezado aquí, que contiene mi logo y mi navegación. Ve esos tres botones de ahí. Entonces tengo este otro trozo, que es principal. Principal es la parte media
del hitter del sitio web está fuera dándome sólo un logo y navegación. Principal aquí ya tiene mi caja de héroe, y esa es la gran caja rosa que ya han creado. Es este tipo de aquí. Dentro de esto donde quiero mi bateo. Vamos a estar diseñando este bateo aquí. Este es RoarX. Pida en preventa ahora. Para poner un bateo, necesitamos poner algo llamado H1. H1 es como golpear uno y el golpeador es el golpeteo más importante en nuestra página. La sintaxis funciona así, igual que decir este principal aquí, dice principal, y está dentro de estos corchetes angulares, luego hay una slash hacia adelante hecha para cerrarlo. Tenemos que hacer lo mismo para H1. Los soportes angulados se colocan junto a su llave en clave, escriba H1 y luego ciérrelo. Esa es la parte inicial, al igual que la mía aquí. Se puede ver que la segunda parte es de la misma manera, pero tiene una inclinación hacia delante delante delante de ella. Vamos a escribir entre corchetes angulares tipo y slash hacia adelante y útil todo lo que Dreamweaver tiene va a llenarlo para nosotros, esa es una de las bondades de Dreamweaver. El texto va dentro, va en medio de estos dos aquí, puede causar parpadeo entre las dos etiquetas, y vamos a escribir en RoarX, que es el nombre de nuestra nueva moto que estamos lanzando. Vamos a decir pre-orden ahora. Hits “Guardar”. Archivo guardado, y quiero que vayas a revisar tu vista previa del navegador en tiempo real. Ahora puedes revisar retrocediendo a Chrome, se actualiza automáticamente o si quieres,
puedes hacer clic aquí abajo y volver a hacer clic en Google Chrome. De cualquier manera, lleguemos a nuestro navegador. Se puede ver aquí está mi H1 RoarX. Pida en preventa ahora, y por defecto es negro y negrita y un tamaño particular. Que mis amigos, es nuestra primera escupir HTML. Si eres nuevo en el diseño web bien hecho. Esta es nuestra primera parte de codificación, lo has hecho. Lo siguiente que tenemos que hacer sin embargo, es ir y cambiar estos colores y tamaños predeterminados y fuentes a algo que coincida con nuestro marcado en Photoshop. Entonces vamos a hacer eso ahora aprendiendo algo llamado CSS.
5. Construir el CSS: Hemos aprendido lo que es HTML, hemos editado un h1 y le hemos agregado algo de gusto. Ese es el HTML. Para darle estilo a esto, usamos algo llamado CSS. He creado aquí una hoja CSS. Aquí lo puedes ver. Está en el expediente de “documentos relacionados”. Vamos a darle click. Ya he hecho algunas cosas básicas. Ya he dicho esa caja de héroe que hicimos. Yo le di una altura y le di ese color de fondo para flotar encima de ella de rosa. Tengo algunas cosas para que empecemos. Echemos un vistazo a crear nuestro propio CSS ahora. Debajo de este corsé rizado, pulsa “Return”. Las devoluciones no importan en CSS o HTML, no
necesitas ese retorno, puedes tenerlo, solo
me gusta espaciarlas un poco solo para que te sea fácil ver. Cuando se trata de CSS, hay alguna sintaxis básica que necesitamos seguir. Básicamente puedes copiar lo que hay aquí arriba, digamos cuerpo. Ahí está el nombre h1 no dos, h1. Ahí hay un espacio y se puede ver que hay un corsé rizado al principio y al final. Eso es lo que vamos a hacer. Vamos a teclear el primer corsé rizado y [inaudible]. Nunca tienes solo una abertura sin un cierre, así que la llena ahí para ti. Es poner el final para nosotros, pongamos “Retorno”. El “Retorno” sólo nos da un poco de espacio para escribir cosas como esta, como la altura y el color. En primer lugar pone en texto, llaves. No olvides el principio y el final o no los borres. Lo siguiente que vamos a hacer, es que vamos a darle a este bit un CSS, lo que se llama un atributo. Un atributo sólo significa : “Voy a darle una cosa como un color o podría ser el tamaño de fuente”. A estos se les llama atributos. puede ver ahí escribo CO y se prerellena en color y le
pego “Return” y lo que hizo es que lo llenó y edite ahí el colon. El colon necesita entrar. Lo siguiente es escoger un color. El genial de Dreamweaver es que tiene un recolector de color o puedes elegir de tus bibliotecas, lo cual es realmente genial. Hagamos clic en “Selector de color” y lo que queremos hacer, es arrastrar este pequeño círculo aquí. Podemos arrastrarlo, podemos jugar con tonalidades, pero lo que quiero es que esté en la esquina superior izquierda. Eso va a ser blanco. Arrástrelo hasta ahí y vamos a usar el blanco. Si sale horriblemente mal, solo puedes escribir, libra, f,
f, f, f, f, f, f, f ese es el código para el blanco. Lo último y lo que mucha gente olvida cuando son totalmente nuevos CSS es que necesitas golpear punto y coma al final. Esa es toda la sintaxis que necesitas para CSS. Ahí hay tirantes rizados, hay uno al principio, uno al final. Escribes el atributo, en nuestro caso, va a ser el color de la fuente, y te pones un colon después, en nuestro caso Dreamweaver hizo eso por nosotros y no olvides el punto y coma al final. Vamos a guardarlo, pero usemos el “Archivo, Guardar todo”. Eso es útil porque guarda tanto el CSS como el HTML al mismo tiempo. En realidad son archivos separados, así que cambias al código fuente, que es HTML y este de aquí es mi CSS. En realidad son archivos separados en mi página web. Encuentro cuando estás aprendiendo, es mejor simplemente ir a “Archivar y guardar todo”, asegurarme de que todo esté guardado, y luego saltar a tu navegador. ¿Estás listo? Agregamos un poco de HTML, nuestro h1 y agregamos algo de texto, después hemos ido con estilo o h1 usando CSS. Estás a punto de convertirte en diseñador web. Ya estás listo, listo, vamos. Impresionante. Has agregado HTML y has podido darle estilo a ese HTML usando CSS. Esos son los fundamentos de todo el diseño web. Vamos a hacer algunas otras cosas solo para asegurarnos de que coincida con nuestra maqueta, pero luego vamos a seguir adelante y empezar a buscar un diseño web receptivo específico. Vamos a terminarlo.
6. Hacer que tu sitio sea de aspecto: Para que coincida con nuestra maqueta, queríamos un par de cosas, después conseguimos la herramienta de tipo aquí en Photoshop, voy a dar click. Sé que quiero 62 puntos para la fuente. Yo quiero empujarlo hacia abajo desde arriba y lejos de la izquierda aquí. Vamos a hacer eso ahora en CSS. Dreamweaver aquí, pongamos un retorno y es tipo en fuente. puede ver que me está dando algunas opciones precargadas. Es todo lo que tamaño de fuente, y lo puedes ver poner el color ahí dentro para nosotros. Ahora en nuestro caso queremos un 62. En realidad cambié de opinión. Voy a usar 55 pixeles, solo quería un poco más pequeño, sólo porque y no me olvidé de agregar el punto y coma al final, cuando sabías que eso pasa mucho. Pero retener, vamos a hacer un par de cosas más. Vamos a teclear en el acariciamiento. He escrito PhD y se puede ver Dreamweaver súper útil va, ¿te refieres a estos? Dije que sí, haga clic en “Top”, y para la parte superior, vamos a hacer 120 pixeles, recordar un punto y coma al final, y el último va a estar acariciando y voy a hacer a la izquierda. Voy a querer un camino desde la izquierda, unos 60 pixeles. Vamos a golpear “Guardar” y hacer el establo, y vamos a saltar a un navegador y comprobarlo. Eso es básicamente todo lo que tiramos en nuestro HTML, que es H1, y luego pasamos mucho tiempo en estilo CSS en conseguir que se vea como queremos. Pero ahora es el momento de mirar lo que hace el diseño receptivo. Ahora la capacidad de respuesta es un término paraguas usado para describir algunas cosas que hacemos en código para que se ajuste para los diferentes tamaños de pantalla. Una de esas cosas que hacemos en código, y probablemente la principal es algo llamado consulta de medios. Ahora toda una consulta de medios es tan piénsalo como un disparador, y solo la saca cuando se activa un tamaño de pantalla. Echemos un vistazo a algo que he hecho antes. Esto es lo que vamos a crear algo llamado consulta de medios. Simplemente dice desencadenar este H1, cuando el tamaño de la pantalla es de 768 píxeles o menos pero si es más grande que eso, no te
preocupes por ignorar las cosas. Eso es lo que es, es un disparador, sólo cuando se activa cuando la pantalla es de un ancho específico. Se puede ver aquí abajo hay una versión móvil también. Activa este H1 sólo si es extraño a los píxeles o menos. Vamos a crear eso ahora en nuestra visión, ¿a dónde va? Lo vamos a poner debajo de nuestro H1. Ponlo en un par de rutinas, y esta es la más caliente, pero una sintaxis que vas a tener que montar, te lo prometo. No es tan difícil, pero vamos a tener que escribirlo y seguirme textualmente, este es el símbolo 'At' y vamos a escribir en medios. Después de eso, vamos a escribir un conjunto de corchetes. Dentro de esos corchetes, vamos a escribir el guión “Mex” “Ancho”. Tenemos que poner un colon en nixed. Asegúrate de que sea un colon y no un punto y coma, y ahora tenemos que decidir qué tan grande va a ser nuestra tableta. Ahora puedes escoger cualquier tamaño aquí, un tamaño de tableta realmente común o un tamaño de iPad es de 768 píxeles de ancho. Solo estamos diciendo esta consulta de medios, aquí va a ser para tablet y eso es lo que supongo que es el tamaño. Ahora con el paso del tiempo, este valor predeterminado cambiará y encontrarás diferentes sitios usan anchos de píxel
ligeramente diferentes para tablet, pero sí, es tamaño realmente común, así que usa eso por el momento pero no, it no es una regla absoluta. Lo último que tenemos que hacer después de este último corchete aquí se pone en un corsé rizado. Agregamos un corsé rizado, y lo ponemos en un retorno, eso es consulta inmediata. Ahora, supongo que es un poco difícil. Hay mucha sintaxis que entra en eso, pero lo que puedes hacer en el futuro es simplemente copiar y pegar eso como lo hago yo en todos los demás trabajos. Ahora lo que va dentro de esta consulta de medios, cualquier cosa que quieras hacer, pero solo se active en tablet. Lo que me gustaría hacer es cambiar el tamaño de la fuente. Si puedes ver aquí mi visión, y va de alineación izquierda y tamaño de fuente
bastante grande hasta el tamaño más pequeño y centrado. Eso es lo que quiero hacer en un sitio cuando el ancho se baje a tablet, quiero que cambies este H1 para solo cambiar el tamaño y el posicionamiento. No quiero que cambies el color, el color está bien, dejaría que sólo el tamaño y el posicionamiento. Vamos a ver eso en CSS. Todo lo que hacemos es siempre y cuando esté entre estos dos tirantes rizados. Justo aquí voy a teclear en H1. Al igual que lo hicimos aquí arriba, necesitamos poner nuestros frenos rizados, poner retorno, y ahora vamos a ir a darle estilo. Me gustaría decir algo así como el tamaño de fuente. Dónde estás tu tamaño de fuente, me gustaría que estuviera abajo a 40 píxeles, y ellos invierten punto y coma al final. Asegúrese de que la sintaxis sea correcta. Tienes llaves a ambos lados, y tienes un colon y un punto y coma aquí. Vamos a guardar una cera. Es seguro. Preparémonos, porque estamos a punto de entrar en territorio receptivo
inexplorado, tal vez para ti. Vamos a comprobarlo en un navegador, y la forma de probarlo, es que estamos viendo la vista de escritorio aquí. Es bastante ancho, pero cuando bajamos a 768 píxeles, donde está,
solo sigue arrastrando hasta que lo averigües, pero mira esto, baja. Al mirar esta fuente, la estoy señalando. No me puedes ver señalando así. Que mis amigos es todo el diseño web responsive es. Hay otras cosas, pero esa es la parte principal principal del mismo es que las consultas de
medios se activan en ciertos anchos que entra,
los cambios que verás asisten tu HTML es exactamente el mismo. El tics no ha cambiado, sólo cambiando el CSS por ello, y eso se activa sin consulta de medios. Bien hecho usted. Voy a estar emocionada, estoy dentro pero cuando lo descubrí por primera vez, estaba bastante emocionada. Vayamos a hacer algunas otras cosas. Vuelve a Dreamweaver. Lo que me gustaría hacer también es recordar que teníamos que hacer algunas cosas. Teníamos que hacer garrapatas la línea. En código es texto. Alinear ahí está en la parte superior ahí, y voy a dar clic en “Centro”. Se puede ver esto es lo bonito de Dreamweaver es que no
tengo que escribirlo ni recordar la sintaxis. Simplemente puedo hacer click en esto y todo lo que tengo que recordar que hacer, qué es lo último que va en el intervalo estas líneas que todo el mundo olvida, punto y coma. Impresionante. Hit “Guardar”, guardar vista previa. Ahora centrando. Se está centrando. [ inaudible] es como flotado sobre el ish centrado. Es porque mira esto arriba y H1 aquí. Este H1, es el que se dispara para mi tablet, pero este H1 en la parte superior aquí le está diciendo que haga pedding lift de 60 pixels. Está usando eso también. Se ha centrado más 60 pixeles en el costado. Podemos anular eso. Di en realidad, no quiero eso. Vendimiento-izquierda, me gustaría ser cero pixeles, por favor. Punto y coma al final, guarde, échale un vistazo. Ahora estamos bien. Impresionante, por lo que un centrado, es un nuevo tamaño de fuente, arrástralo, quedate impresionado. Ahora vamos a entrar en una consulta de medios más para móviles porque nada cambia mucho excepto el tamaño de la fuente se hace más pequeño. Eso es todo lo que tenemos que hacer. Saltemos a Dreamweaver. Dentro de Dreamweaver, podríamos teclear volverá a agregar esto, o simplemente podríamos ser perezosos y seleccionarlo todo. Consulta de medios, incluyendo el último corsé rizado, olvidará eso todo el tiempo. Consigue 'Copiar' o editar 'Copiar'. Voy a poner un par de devoluciones y aquí abajo y pegarle a “Pegar”, y lo que quiero hacer es un par de cosas. Una es que quiero cambiar este ancho máximo. Quiero cambiarlo de 768 para tablet a un tamaño móvil genérico real que es de 400 píxeles. Ahora bien este cambio es bastante también. Hay tantos tamaños diferentes de teléfonos móviles que encuentro 400, es una cobertura realmente buena para todos, creo que los nuevos iPhones tienen 375 pixeles de ancho, pero algunos de los grandes teléfonos LG Samsung son un poco más anchos. Yo sólo lo hago un poco más grande solo para cubrir todos esos teléfonos. ¿ Qué necesito que me quede. No necesito relleno a la izquierda, y no necesito Tics Align. Todo lo que quería hacer era cambiar el tamaño de la fuente. Lo estoy borrando todo excepto quiero cambiar debido a 20 píxeles. Debería ahorrar. Vamos a checar en navegador, escritorio, tablet, móvil. Probablemente sea un poco pequeño. Pero este lado 28 pixels, creo que eso es lo que quería, un poco más grande. Esa es nuestras consultas de medios para todos nuestros diferentes tamaños. Nosotros sólo hacemos tres en esta clase para mantenerlo simple y a menudo para sitios web más pequeños, eso es todo lo que hago. Algunos sitios web van un poco más duro sin embargo, describe siete tamaños diferentes. Tengo siete consultas de medios diferentes. Depende de ti, pero me gusta apegarme solo a lo básico, escritorio, tablet y móvil. Algo que haría en CSS, y antes de seguir es añadir algunos comentarios CSS. Todo esto significa es que yo sé porque acabo de hacer esto, qué hace esta cosa y qué hace este tipo aquí, pero me gustaría agregarme algunas notas a mí mismo, a mi futuro yo ordenado para decir justo cómo recuerdo lo que hacen estas cosas. Con tu cursor justo delante de la consulta de medios para este de aquí, este CSS, es que voy a por el lado izquierdo aquí, pulsa y mantén presionada la que dice “Aplicar comentario. Eso es un comentario en CSS. Haga clic en él. No pasa nada mucho. Se puede ver que hay una barra inclinada y dos actrices, pero dentro de aquí, si escribo “Tablet” esto sólo significa que esto es ignorado por el navegador. Nadie lo ve. Son solo los humanos pesados, es para otros diseñadores web, es para ti y el futuro saber de qué estás hablando. Voy a copiarlo, usarlo aquí abajo, y voy a llamar a este móvil. Vamos al archivo, Guardar todo, cheque está funcionando en el navegador. Si el tuyo no va a bajar a la tableta y luego a los tamaños móviles para este H1, solo
puedes pulsar el botón de reinicio. Hagámoslo todos. No tienes que hacerlo, si el tuyo está funcionando
, sigue. Yo lo voy a hacer. Por lo que puede cerrar el índice 1, y abrir el índice 3 en realidad. Haga clic en ese de ahí, vista previa en un navegador, y debería verse exactamente como lo teníamos hace un segundo. Agradable. Entonces si el tuyo simplemente sale horriblemente mal, abre éste aquí arriba y vamos a reiniciarlo y tenemos de vuelta a esta parte de aquí. La siguiente parte de nuestro paraguas receptivas, hemos mirado las consultas de medios que se consideran capacidad de respuesta. Otra son las imágenes responsivas. Lo que solo significa es que si reviso uno de mis ejemplos finales aquí, significa
que cuando redimensiono el navegador, o va a diferentes dispositivos, la imagen en realidad se redimensiona para que se ajuste mejor. Se puede ver este fondo se mueve aquí en la parte superior, y todos estos de abajo cambian de tamaño también para que se ajusten mejor al espacio proporcionado. Primero vamos a ver esta imagen de fondo, y luego veremos estas imágenes abajo aquí abajo. Ambos son ligeramente diferentes en la forma en que lo abordamos. Así que salta de nuevo a Dreamweaver, abre nuestros estilos, y lo que estamos buscando es el hero-box. Esa es la caja grande que tengo aquí. Echemos un vistazo al que estamos trabajando. Se puede ver que esa es la gran caja rosa que ya he creado para nosotros. Todo lo que hice fue darle una altura, y le di un color de fondo de rosa. Pero también me gustaria hacer a ello es, me gustaría darle un trasfondo. Estoy escribiendo en segundo plano. Se puede bajar aquí a imagen de fondo. Lo que quiero decir es que estoy destinado a usar URL, pulsa “Return”. Este es el largo camino. Imágenes, empecé a escribir Im, esto es realmente útil, esta pre llenando cosas. Especialmente cuando llegas aquí abajo, cuando llegues a recoger estas imágenes. Se puede llegar a flotar por encima de ellos, entonces se previsualizarlos por ti. Incluso hay una forma más rápida que usa el Dreamweaver. Voy a deshacer todo eso. Depende de ti. Puedes escribirlo en ese largo camino. Hay algunos muy buenos indicios de emisión de código. En este caso es BGI, por lo que imagen de fondo. Todo lo que necesito hacer, en lugar de golpear “Return”, o hacer clic en una de esas opciones, solo para presionar “Tab” en mi teclado. Puedes verlo lleno de colon de imagen de fondo, agrega la URL que necesitaba, y estoy listo para escribir. Si eres nuevo, podría estar escribiendo lo completo, solo para acostumbrarte. Pero una vez que te pongas en marcha, escribiendo toda la palabra imagen de fondo y URL. Recordarlo también puede ser duro. Entonces solo escribo BGI, y presiono “Tab” en tu teclado. Lo que queremos hacer es que quiero agarrar mi imagen de mis carpetas de imágenes, así que escribí un I. Gracias, Dreamweaver. Entonces sólo mira mi carpeta de imágenes y ve las imágenes que tengo. Yo quiero este llamado Imagen de fondo. Pasa por encima de ella, y esa es la que quiero en segundo plano. Incluso agregó el punto y coma al final. Voy a guardarlo y revisarlo en el navegador, no va a funcionar. Está ahí, pero no responde. Yo quería que fuera capaz de estirar, llenar el fondo. Hacemos eso usando una propiedad CSS, y es una propiedad CSS3. Cuando la gente habla de HTML5 y CSS3, lo que realmente significan son solo algunas de las cosas nuevas que
podemos hacer en CSS que no podíamos hacer antes. Antes de esto, era HTML4 y CSS2, por lo que solo una versión más reciente. Pero sí suena bastante elegante e intimidante, pero en realidad son sólo cosas nuevas como esta. Entonces una de las nuevas características de CSS es de fondo, y quiero la llamada background-size, ahí está, y hay una opción llamada cover. Esa es una nueva característica de CSS3 realmente genial. Agrega el punto y coma al final, pulsa “Guardar” cheque en el navegador. Ahora estamos hablando. Ahora todo es receptivo, y llena el espacio proporcionado, se pone todo elástico y es la característica CSS3 llamada cubierta y tamaño de fondo. Por lo que hemos desvelado uno de los secretos del nuevo diseño web moderno y es esta cosa llamada CSS3. Se ve en muchas partes, pero en realidad son solo algunas cosas nuevas que llegamos a hacer que no podíamos hacer antes en la nueva versión de CSS. Ahora si eso salió horriblemente mal y el tuyo no funciona, abre, voy a guardar y cerrar ese. Abre el índice 4, y eso debería llevarte de vuelta al mismo lugar exacto, igual que una pequeña comprobación de reinicio en el navegador, y sí, está funcionando perfectamente. Si el tuyo está funcionando bien, no necesitas restablecer, solo
puedes seguir adelante con tu índice 1 a lo largo del curso. Si te pierdes, puedes seguirme con estos pequeños reajustes. Lo siguiente que quiero hacer es que quiero construir estas cuadrícula de imagen más pequeña abajo aquí. Entonces vamos a tener que poner en una caja para que entren estas imágenes. Echemos un vistazo a Dreamweaver. Por lo que estas cajas generalmente se llaman Divs. Ya tenemos un div. Ahí hay uno llamado div hero-box, eso es lo que era rosa, pero ahora tiene los fondos de imagen elásticos, así que tenemos que crear uno de estos para nosotros mismos. Entonces debajo de nuestro hero-box, pon un retorno, y vamos a escribir un div. Entonces vamos en el paréntesis, y escribimos div, y también le damos un nombre de clase. El tipo es sólo el nombre único que le damos. Toda la sintaxis debe estar prerellenada para usted. Se puede ver que a medida que escribo la palabra, como escribo la clase de palabra, solo
puedo hacer clic en ella con el ratón, y llena la sintaxis, y voy a darle un nombre. Se llega a darle cualquier tipo de nombre. Simplemente tienes que asegurarte de no usar mayúsculas ni espacios. Vamos a llamar a nuestro col, abreviatura de columna. Es muy común usar ese término. Termínalo, tenemos que poner entre corchetes y luego abrir los últimos corchetes, y al igual que en H1 ,
ponemos esa barra delantera, y nos lo termina. Entonces eso es exactamente lo que se hizo hero-box. Acabamos de hacer nuestra propia visión llamada col. Ahora si agregas un poco más avanzado con HTML, y estás como, hombre, ese es un largo camino de hacerlo, ojalá hubiera un camino más corto. Hay, si solo tecleas punto col. Dot al principio solo se refiere a que sea un nombre de clase, y si golpeas “Tab” en lugar de regresar, solo asume que te refieres a una clase div con col y se llena en absoluto, y tan súper rápido y fácil, o puedes simplemente teclearlo en el largo camino si eres nuevo solo para acostumbrarte a la sintaxis. De cualquier manera, Dreamweaver es impresionante por ayudar. Dentro de esto, me gustaría poner en mi imagen. Entonces he hecho la caja, pero la caja realmente no hace nada todavía. Es sólo una caja vacía. Yo quiero poner una imagen dentro de ella. El camino para hacerlo, el largo camino. No quiero que lo hagas de esta manera, porque este es un camino realmente largo. Escribimos en corchete cuadrado y escribimos en IMG, luego escribimos en SRC. Entonces dentro del SRC salimos y encontramos nuestra imagen luego agregamos todos los textos y hay todo tipo de cosas que necesitamos hacer solo para poner una simple imagen vieja. Se puede ver ahí arriba, ya lo hice. Entonces imagen, SRC, ahí está la imagen entonces tenemos que poner en el texto todo. Es un poco largo. Entonces lo voy a deshacer, y lo que voy a hacer es usar nuestro super secreto, genialidad de
Dreamweaver y solo teclear IMG hit “Tab”, Enter, y puedes ver que pone todas esas cosas ahí para mí. Ahora dentro de la fuente, ¿de dónde viene mi imagen? Escribo en mi carpeta I para imágenes. Gracias Dreamweaver. Entonces se ve mi carpeta de imágenes y di, ¿te refieres a esto? Digo, sí, me refiero a esa de ahí, imagen 1 por favor. Vamos a golpear “Guardar todo”, y vamos a saltar a nuestro navegador, comprobarlo, y él está ahí dentro. Todavía no responde, porque acabamos de poner una imagen HTML, no
hemos hecho nada más. Pero esa es la primera parte. Ponemos en nuestra imagen. Ahora tenemos que hacerle sensible, y eso lo hacemos haciéndolo en CSS. Echemos un vistazo. Lo hacemos de una manera ligeramente diferente a la primera forma en que lo hicimos, porque la primera opción queríamos que fuera una imagen de fondo. Recuerda a este tipo aquí, necesita ser un fondo, funciona un poco diferente. Entonces lo que queremos hacer es saltar a nuestro styles.css, luego abajo, quiero poner en el estilo para la vista de escritorio, no en tabletas. Por lo que puse algunas devoluciones debajo de mi top H1, pero antes de la tableta. Ahora espero que estés listo, vamos a aprender algo elegante llamado selector compuesto. Eso es un selector, nuestro H1. Eso también fue un selector, estos son todos selectores. Entonces lo que me gustaría hacer es hacer un selector compuesto. Me gustaría hacerlo a las imágenes. Por lo que quiero hacer que todas las imágenes respondan, pero no todas las imágenes. Yo quiero las imágenes que sólo están dentro de nuestras columnas. Por lo que a eso se le llama compuesto seleccionado. Simplemente significa imágenes, pero no todas las imágenes en cada página y cada sitio web. Apenas las imágenes que están dentro de esa cosa que llamamos col. Recuerda que lo llamamos una clase llamada col. Ahora en CSS, te refieres a clases al tener un poco de parada completa al principio. Las cosas que escribes tú mismo que hicieron de la nada tienen un poco de paradas completas al frente. A menudo, los que preexisten en HTML no lo hacen. Se puede ver esta de aquí, yo inventé esta cosa llamada hero-box, así que tiene una parada completa en el frente. Pero como H1, no me maquillé, es solo un selector HTML preexistente, así que no lo tenemos. Entonces imágenes que están dentro de col, lo que me gustaría hacerle. Voy a poner mis llaves y regresar. Para que responda, lo que me gustaría hacer es que me gustaría que fuera un ancho. Apenas tecleó WI, baja, y quiero hacer un ancho del 100 por ciento, no
olvides el punto y coma al final. Ahora eso hace la mayor parte, pero hay un par de cosas más para que sea un poco mejor soportado en todos los navegadores, pongamos en altura. El alto necesita ser punto y coma automático. Lo último que tenemos que hacer es algo llamado display, y bloquear punto y coma. Simplemente hazlos porque ayudarán a todos los navegadores a lidiar con imágenes receptivas. Ese es el tipo que hace la mayor parte del trabajo, con 100 por ciento. Echemos un pequeño vistazo en un navegador. Ahí está. Él es una imagen sensible si los escala hacia abajo, se puede ver, se
hace más pequeño con el navegador y se hace más grande a medida que un navegador se hace más grande. Aún no es exactamente lo que queremos. Vamos a tener que hacerlo llegar a cierta altura y no más grande. Pero así es como se hacen las imágenes receptivas. El genial de usar un selector compuesto, donde dijimos imágenes dentro de columnas, no
es meterse con esta imagen de aquí arriba, que es mi logo o esta imagen en el fondo de esto. Es sólo tratar con las imágenes que están dentro de mi columna. Antes de ir y darle un ancho para que coincida con nuestra maqueta, lo que vamos a hacer se duplica un par de veces para conseguir todas las imágenes en ellas. Vuelve a Dreamweaver, y salta a nuestro código fuente. El código fuente es HTML. A esto se le llama código fuente en su lugar y lo que
queremos hacer es que queremos duplicar este col, así que quiero que seis de ellos coincidan con mi maqueta aquí. Se pueden ver alrededor de seis de estas cajas. Lo que vamos a hacer es copiar y pegar toda la línea. La forma más fácil de hacerlo en Dreamweaver es hacer clic en cualquier lugar de tu imagen, y presionar “Control D” en una PC o “Command D” en una Mac. Se puede ver que sólo hace un duplicado, porque lo que quiero no es sólo un duplicado de la imagen, sino también la columna del exterior. Voy a dar click aquí, Control D, queremos seis en total. Entonces quiero que pases por la imagen 1, hay una imagen 2. Aquí abajo hay una imagen 3, tienes que dar click fuera, volver a dar
click en 4. Se puede ver que es previsualizarlo para mí, o algo en Dreamweaver cinco y seis. Impresionante. Vamos a golpear “Guardar”, previsualizarlo en un navegador. Ahora tengo la primera imagen responsiva, pero ahora las tengo todas. Estamos listos para irnos. Vuelve a Dreamweaver, toca “Guardar”. Si el tuyo está funcionando, impresionante, sigue adelante. Si el tuyo no lo está, y no está funcionando totalmente, cierra el que tenemos abierto, y abre el índice 5. Eso nos llevará de vuelta, previsualizarlo en un navegador, vuelta a donde estamos ahora.
7. Agregar capacidad de respuesta: Lo siguiente que tenemos que hacer es que si nos fijamos en nuestra maqueta, se
puede ver ahí en realidad, puede ver esta imagen sólo es así de grande, pero en nuestra maqueta actual, es restricción a todo el tamaño. Lo que tenemos que hacer es el contenedor en el que está, recuerda que lo llamamos una clase de col. Tenemos que decir: “Oye col, necesitas ser 33 por ciento, no 100 por ciento como estás en este momento”. 33 por ciento compone nuestro bloque, 33.3, así que vamos a ver cómo hacer eso ahora, saltar de nuevo a Dreamweaver. En Dreamweaver, entremos en estilos y lo que quiero hacer en mi vista de escritorio, no en tablet. Encuentra tablet justo delante de él, voy a poner unos retornos dentro. Voy a poner una.col. Me gustaría col aquí, calibraciones. Me gustaría que fueras un ancho y voy a usar porcentaje de 33.3 por ciento. Después el punto y coma al final. Asegúrate de tener la sintaxis correcta. A menudo cuando estoy enseñando a la gente sin embargo, 30 cosas de ancho con 33.3 por ciento. Tan solo asegúrate de que parezca que la mía golpeó “Guardar” va a funcionar. Vamos a tomarlo, navegador. Dice trabajando, había 33.3 por ciento y muchas gracias, pero por defecto se apilan uno encima del otro. Bloquean en la parte superior. Podemos anular eso por debajo, llamarlo, poner un escrito justo debajo de ancho y decir flotar mis amigos,
flotar a la izquierda, punto y coma,
guardar, previsualizar y ahora todos se están pegando uno al lado del otro. Oh Dios mío, eres impresionante. Son 33.3 por ciento no importa en qué vista esté. Eso es todo para la vista de escritorio, agregaremos algo de relleno más adelante, pero así es cómo cambiar el tamaño de nuestro para nuestra vista de escritorio. Bien hecho lo siguiente que tenemos que hacer es que se puede ver en mi maqueta aquí, realidad
es 33.3 por ciento en escritorio en una tableta, toma en 50 por ciento, ¿verdad? Cuando se trata de un móvil, es 100 por ciento de ancho. Eso es lo que vamos a hacer ahora. En Dreamweaver, lo que vamos a hacer en tablet aquí, debajo de la derecha antes de la de cierre porque puedes ver Dreamweaver lo resalta de manera útil. Ya puedes ver si vuelvo a hacer clic en alguna de estas empezando y puedes ver que es la rapa, así que queremos asegurarnos de que todo se quede dentro de estas dos calibraciones debajo de cada una. Pero antes de este cierre, vamos a decir que me gusta.col. Vuelven las calibraciones. A mí me gustaría que fuera un ancho, porque al igual que hicimos arriba allá. Vamos a decir que el ancho de en nuestro caso es del 50 por ciento para el tipo a punto y coma al final. No necesito decir flotar ya se fue, porque es uno de los top ya lo dice. Sólo tenemos que decirlo una vez. Pero cuando se trata de ancho, queremos decir en realidad tableta anula el 3.3 y se convierten en 50 por ciento. Echemos un vistazo. 33.3 por ciento manifestando que tenía que decir abajo a tableta manera 3D. Ahora es cubierta voluntad como queríamos en Photoshop y es 50 por ciento de ancho. Ahora, quiero que paren esto ahora y vean si pueden ir y hacerlo por móvil todo por su cuenta. Pausa, ve, hazlo, lo hago aquí. Si no te ofrecen el d es vamos a hacerlo juntos o si le salieron horriblemente mal, con el mío. Si el tuyo no lo hizo y lo haces y lo pones como trabajando, siéntete muy orgulloso de ti mismo, has aprendido mucho diseño web
responsive en muy poco tiempo. Eres impresionante. De lo que voy a hacer en móvil, quiero usar el mismo col y calibraces. Yo sólo voy a decir con mis amigos de ustedes con el 100 por ciento. Recuerda, no olvides el punto y coma, guárdelo y previsualizar en el navegador. La tableta es de 50, el móvil es de 100 por ciento. Somos diseñador web responsive del nuevo siglo. Me emociona, pero ojalá estés un poco bombeado también porque realmente estamos aprendiendo los fundamentos del diseño web responsive. Todo lo demás vamos a hacer cosquillas y vamos a hacer que funcione, pero ya tenemos las fundaciones reales hechas
y esas fundaciones son consultas de medios, ¿de acuerdo? Después miramos los fondos receptivos. Lo hicimos por aquí, un fondo. Recuerda que hicimos una imagen de fondo y utilizamos esta nueva opción CSS3 llamada cover. Eso fue impresionante. Pero entonces queríamos usar un poco diferente no como fondo, sino como una imagen antigua regular. Lo que teníamos que hacer es aprender un selector compuesto. Pero realmente la parte principal fue esto donde decimos con 100 por ciento. El alto del auto y el bloque de visualización, eso es imágenes receptivas. Lo último que acabamos de aprender fue que dijimos: “Hey columna en escritorio, queremos que seas este ancho. Pero cuando uso mi consulta midi de fantasía, quiero que seas 50 por ciento”. Básicamente los demás cambios sensibles que vamos a hacer, voy a ser solo iteraciones al hacer esto. Escogiendo consulta inmediata, escogiendo qué controla lo que queremos
cambiar y luego solo haciendo algunos cambios dependiendo si estamos en tablet o móvil. Si el tuyo todavía totalmente no funcionó y no está funcionando. Hagamos un reinicio y sigamos adelante. Cerremos ese índice cinco y abramos el índice seis, acercándonos al final. Esperemos que si previsualizo y un navegador ahora, todo está despertando 100 por ciento. Tabletas, 30 por ciento, 33. 3 por ciento para escritorio.
8. Completar nuestro sitio: Lo siguiente que me gustaría hacer es que quiero lo que realmente me molesta es que
no hay huecos entre aquí mientras que en mi diseño hay buenas brechas amplias entre todo. Vamos a editar porque estoy en cuarto margen, en Dreamweaver aquí vamos a ir a nuestro styles.css y lo que queremos hacerlo es alrededor de la columna. Tenemos tres columnas ahora, ahí está esta de arriba aquí, que es mi versión de escritorio. El top, también se le conoce como el global, la versión top luego en aquí mi tablet hay otra columna y hay otra columna. Lo que voy a hacer es a esta de arriba aquí y lo que voy a decir está en esta columna, me gustaría que tuvieras un margen a la minúscula, margen de 1 por ciento. Se va a poner 1 por ciento justo alrededor del exterior de cada columna y nos va a causar un pequeño problema inicial. Para salvarlo asegúrate de que el punto y coma al final, te hartas de que diga eso, ¿no? Vamos a saltar al navegador y funciona. Hay una frontera alrededor del 1 por ciento pero porque ahí hay 1 por ciento, 33.3 por ciento aquí, más 1 por ciento más otro 1 por ciento más simplemente no hay espacio suficiente. Todo equivale hasta a más de un 100 por ciento lo que no podemos hacer. Siempre que añadas un margen de 1 por ciento, necesitas restarlo del ancho. Hay 1 por ciento en cualquiera de los lados, se
puede ver hay 1 por ciento ahí, 1 por ciento ahí, así que queremos menos 2, a par, así que es 31.3 por ciento. Vamos a golpear guardar, echa un vistazo y ahora tiene suficiente espacio para caber. Enfriar. Tenemos que hacer lo mismo por todos ellos porque si bajamos a la tableta, hace lo mismo. No hay suficiente espacio así que lo que tenemos que hacer es menos 2 de nuestra tableta. Bajemos al 48 por ciento, comprobémoslo, podemos encontrar todos los encajes. Ahora bajemos al móvil. Móvil sigue funcionando, no estoy seguro de por qué. No debería. Vamos a bajar al 98 por ciento, así que todos encajan y podemos ver las fronteras alrededor de los bordes. Buen trabajo. Ahora, si el tuyo es como el mío y puedes ver 90 allá arriba, creo que es solo porque tengo una mejor versión de Dreamweaver, hit reset y se ha ido. Me pasa un poco por el momento pero estoy seguro de que eso es solo un error en mi máquina. Otra cosa que podrías estar viendo en bichos yo también es porque hemos puesto un margen alrededor de esto, ya
no se alinea con eso y eso se pone un poco más grande desde arriba así que solo
necesitamos agregar un borde del 1 por ciento a este div etiqueta en la parte superior aquí. ¿ Recuerdas cómo lo llamábamos? Se llamaba caja de héroe. Encontremos caja de héroes aquí, ahí está y tú amigo mío, consigue un margen también. Un margen de 1 por ciento, punto y coma, guardar. Ahora todo se ve un poco más bonito, hay un margen a su alrededor también. Porque no le dimos un ancho, no necesita ser menos de todo lo que se puede ver no tiene un ancho ningún donde, así que si lo hiciera, tendrías que menos fuera como hicimos estos otros pero no lo hacemos así que él está bien. último pero no menos importante, lo que quiero hacer es echar un vistazo a la navegación. Se puede ver aquí en mi maqueta está atascado lado a lado aquí en el escritorio, pero en tablet y móvil están uno encima del otro. Por el momento sin embargo, todos se están pegando uno encima del otro. Lo que me gustaría hacer es decir en vista de escritorio, mi navegación, ya
he hecho una clase, una clase compuesta aquí para almacenar mi navegación solo para ahorrar tiempo al principio. A lo que me gustaría hacerle es que estás buscando el que diga nav ul li, ahí está mi lista para mi navegación. Lo que quiero decir es que me gustaría que
exhibieras y me gustaría que hicieras este llamado inline-block. Eso significa que se van a pegar uno al lado del otro, no
olvides el punto y coma, pega guardar, echa un vistazo. Impresionante. Ahora el problema es cuando se baja a la tableta, también
se queda el bloque en línea y se pone un poco desordenado y no hay lugar para ello con un logo por lo que se pega debajo así que necesitamos cambiarlo de nuevo cuando llegue a la tableta, a eso apilados uno encima del otro método que teníamos. Todo lo que necesitamos hacer es encontrar nav ul li, aquí
abajo en tableta, que no existe. Lo que vamos a hacer es debajo de columna voy a poner en este llamado nav ul li, click blaces y me gustaría decir cuando llegue aquí sin embargo, me gustaría que ahora exhibieras bloque y eso significa que se apilarán encima de cada uno. Vamos a golpear guardar para previsualizar en el navegador, impresionante. Escritorio apilado en línea y aquí apilado bloque, mismo con móvil.
9. Conclusión: Amigos míos, ese va a ser el fin de éste. Hemos cubierto mucho en nuestro tiempo juntos, centrándonos
principalmente en el diseño web responsive. Sólo para recapitular, el diseño web responsive es un término paraguas que cubre algunas cosas diferentes que hacemos cuando estamos construyendo un sitio web. Las principales son las consultas de medios, donde logramos que se activen en diferentes tamaños de navegadores. Dentro de esas consultas de medios, podemos hacer algunas cosas divertidas con cosas como los anchos de columna, para ajustarnos
a diferentes tamaños y cambiar cosas como los tamaños de fuente y el posicionamiento. También respondieron nuestras imágenes, recuerda que les hicimos un ancho del 100 por ciento para las imágenes. Eso es imágenes responsivas. Hicimos imágenes de fondo responsivas, donde hicimos nuestra imagen de fondo más esta cubierta de tamaño de fondo. Para que puedas ver cuando se trata de diseño web responsive, mucho del trabajo se hace en nuestro CSS y HTML se mantiene agradable y limpio. Hay muy poco que realmente le hayamos agregado,
pero se ha hecho mucha funcionalidad usando nuestro CSS. Muy bien, nos vemos después. Que tengas un gran día.