Curso Maquetación HTML 5 y CSS

bien lo primero que voy a hacer es seleccionar este diseño el cual queremos convertir a html queremos convertir un diseño gráfico en este caso hecho en illustrator y lo queremos pasar a maquetación web queremos convertir la maquetación web y lo que voy a hacer por tanto es en primer lugar convertirlo en píxeles para poder realizar mediciones de la manera más cómoda y más sencilla posible así que me voy a ir a archivo me voy a ir a la opción de exportar y por ejemplo en este caso lo que voy a hacer es en el escritorio crear una carpeta nueva llamada maquetación de momento vamos a empezar con la parte estática del proyecto voy a crear otra carpeta nueva llamada original y lo que voy a hacer es crear una imagen llamada una aplicación exportó por ejemplo a 62 píxeles por pulgada lo que desde luego más me interesa es que esté toda la maquetación ok y a continuación voy a abrir esa misma canción dentro de photoshop vamos a ver qué illustrator ya gana de atención muy bien simplemente para decirme que está correctamente exportado así que me voy al escritorio me voy a la creación me voy a original y voy a abrir el original vamos a ver la resolución con la que viene no quiero perfil de color y en este caso me dirá que la imagen tiene un tamaño de visto en píxeles de 1841 por mil 890 lleno en principio parece correcto bueno el fondo tiene illustrator era blanco me lo ha importado como transparente por tanto simplemente lo que voy a hacer es convertirlo realmente a blanco no he puesto en una capa nueva pongo a la cava por detrás y luego incluso lo que voy a hacer es colapsar para colapsar y por tanto que se me quede finalmente por detrás y lo primero que voy a hacer por tanto es ahora empiezo a medir en este proyecto porque suponemos que está a escala 1 1 y nos vamos a ir a abrir un editor o bien edit o bien sublime pero para en definitiva poder empezar a editar código en ebit creo que este equipo quedaba algún problema al abrirse bien con lo cual no puede abrirse así que lo que voy a hacer es abrir un programa como brackets o abrir un programa como sublime para que en definitiva un editor de texto para poder editar código por tanto me voy a ir a sacar un navegador web sublime sublime text y lo que haremos es descargar este editor de código donde me voy a ir a download lo encontramos tanto para mac como para windows como para linux me lo voy a descargar desde mac y me lo voy a instalar una vez que esté instalado voy a arrastrarlo hasta la carpeta de aplicaciones y una vez que esté en la carpeta de aplicaciones pues ya puedo en primer lugar de afrontar la unidad y en segundo lugar voy a llevar sublime igual el spotlight todavía no lo ha indexado con lo cual me voy manualmente a aplicaciones lo busco manualmente y lo ejecutó le digo abrir la primera vez únicamente que lo ejecute y a partir de ahí podemos empezar a trabajar bien es un límite que si simplemente esta interfaz es como cualquier editor de código voy a guardar una primera pantalla dentro de la carpeta de escritorio maquetación y voy a crear un archivo llamado index.hu ml este archivo index.html lo voy a dejar más o menos la primera mitad de la pantalla y el archivo index.hu pml también lo voy a abrir con un navegador web por tanto me voy a maquetación y voy a abrir ese archivo index html con un navegador web para en cualquier momento en todo momento estar viendo lo que vamos a estar trabajando a la pantalla así que antes de empezar a trabajar vamos a crear un doctor y html vamos a crear una etiqueta html vamos a crear un deber vamos a crear un budín dentro del jefe pues sabemos qué tenemos como obligatoria la etiqueta title maquetación web incluso a no ponerlo en varias líneas porque este proyecto quieres que no al cabo del rato va a ocupar unas cuantas líneas de código vamos también a decir que ponemos la etiqueta meta charset es igual efe 8 para que las heces y los acentos se representen muy correctamente y ahora vamos a analizar un poco el diseño que tenemos en pantalla el diseño lo que tenemos en pantalla básicamente tiene un jefe y tiene un banner tiene una serie de destacados tiene unos últimos proyectos y tiene un pie de página por tanto yo aquí realmente estoy viendo una etiqueta de heather estoy viendo uno que tiene un banner tres destacados hicimos proyectos y estoy viendo road footer por tanto incluso en este caso vamos a tener opción de tener un contenedor este dentro de cada uno de los elementos no fuera y esto lo necesitamos simplemente por el banner y es algo que está bastante vemos ahora así que voy a hacer lo siguiente dentro del gobierno voy a hacer una etiqueta heller voy a hacer una etiqueta y voy a hacer una etiqueta footer dentro de cada una de ellas voy a hacer un bip las ideas sino clase contenedor y esto lo hago por la sencilla razón de que voy a poner una etiqueta dentro de cada dentro de cada apartado por tanto tiene que ser clase y no ir ahora a continuación voy a hacer lo siguiente me voy a crear lo vínculo de red de tipo style sheets y el hr me va a llevar a la carta como decía por tanto dentro de la carpeta css vamos a crear un archivo llamado estilo css por tanto será conveniente que creemos un nuevo archivo una nueva pestaña lo voy a grabar como dentro de la carpeta una nueva carpeta que voy a llamar css y lo voy a llamar estilo css y que guardo y tengo ya que los archivos listos para trabajar continuó profundizando un poco en la estructura en este caso lo curioso de este proyecto es que va a haber por aquí un pibe con un disco ni de banner y ese día va a estar un poco libre de lo que sería el contenedor en este caso por tanto el contenedor va a hacer lo siguiente [Música] vamos a hacer lo siguiente en el body le voy a decir por qué en 0 píxeles qué margen cero píxeles voy a hacer además otra cosa y es que el punto contenedor un todo aquello que sea de clase contenedor va a tener lo siguiente y aquí es cuando abro photoshop y empezamos a medir así que empiezo a medir por ejemplo por aquí y digo bueno parece quizás con un poquito de para bing qué la altura más o menos que estaría por aquí me estoy dejando insisto un poquito que paguen la izquierda y la derecha y si ahora por ejemplo copio y lo pegó un nuevo archivo me dice que ese archivo tiene mil 263 píxeles por tanto 1.063 está muy cerca de 1280 así que voy a asumir una anchura de 1280 con padding de unos cuantos píxeles podría también medir la distancia que hay justo desde este objeto hasta este objeto y por tanto si ahora copio y pego en este caso lo que voy a hacer es pedir que la distancia es aproximadamente de 1200 por tanto en este caso lo que voy a hacer es poner una seguramente 200 y el parking me dará ese margen exterior así que hago lo siguiente de momento simplemente cerró photoshop y diego el contenedor de 1 with de 1200 píxeles y curiosamente el banner lo tiene el 100% de la página para verlo bien voy a hacer lo siguiente voy a poner aquí background es igual por ejemplo al rey y voy a poner aquí background es igual a ourense así que se hará guardo en el g ver voy a decir esto es el header simplemente para que aparezca algo de texto en pantalla esto es el banner esto es la sección de noticias y destacados y esto el pie de página así que guardo recargo y tengo esto bien ahora en el eje ver perdón para en el contenedor tengo que decir lo siguiente contenedor es igual a 1200 píxeles además que tengo que decir margen dos puntos auto para que se centre otra razón por la que no lo estoy viendo ahora mismo correctamente en la pantalla es simplemente porque el estudiando 1200 píxeles pero es que todo mi pantalla ocupar en 300 píxeles por tanto en el navegador voy a hacer un poco de zoom para previsualizar cómo se vería esto en una pantalla más grande y podemos observar ahora que todo aquello que es el contenedor se queda centrado en la pantalla y sólo el banner flota libremente por la pantalla se puede hacer un zoom más o menos así que con este zoom pues ya podríamos ver que el banner va a sobresalir por arriba tengamos en cuenta que he puesto el fondo de color gris simplemente para marcarlo simplemente para verlo creo recordar incluso he visto que el footer nova realmente dentro del marco sino que el footer va dentro de contiene una parte dentro del marco pero tiene otra parte completa por tanto sino que es lo que haría es lo siguiente el futuro va a tener un with me’ el 100 y de momento aunque sé qué el color [Música] no va a ser negro completamente y pronto lo voy a poner voy a poner así que guardo recargo y ahí veo como el footer llega hasta abajo del todo otra cosa que podríamos empezar a hacer es colores con precisión entonces me vengo aquí a el color me vengo aquí a la cuentagotas y en el cuentagotas lo que puedes hacer clic dentro de ese color para ver que ese color concretamente en rgb es 31 35 38 por tanto lo que voy a hacer es irme al footer y decirle que background es rgb 31 35 y 38 es decir para poder exactamente el mismo color que tiene realmente el balón así que recargamos aunque no lo parezca tenemos el mismo color y empezamos ahora a trabajar seguimos trabajando bien vamos a seguir trabajando en este caso con el banner por tanto vamos a continuación a definir qué es lo que tiene el banner el jefe quería decir qué es lo que tiene la parte principal de este sitio web nos preocupamos ahora del género y dentro del header lo que podemos observar es que aparece en primer lugar un logotipo y en segundo lugar aparece un menú de navegación así que esto quiere decir básicamente que vamos a poner un img src algo conveniente que pongamos alt alt carpas tierra o en definitiva el nombre el título de quien estamos haciendo ahora el diseño esto quiere decir que deberíamos ir al photoshop y por ejemplo extraer este elemento si no pasa los traigo directamente de la plantilla me voy a nuevo lo pego y lo guardó aquí voy a recortar un poco para alguno pixel que se me ha quedado ya que para el ajuste así que lo voy a guardar como atención porque lo voy a guardar en un formato png y lo voy a guardar dentro del escritorio maquetación y voy a crear una nueva carpeta llamada ing donde en un momento dado introduciré los recursos gráficos así que lo llamó luego punto p eje para web aconsejable poner entre lanzado por si hay problemas de carga la imagen cargue poco a poco así que quiero entrar dentro de la carpeta img y cargar el archivo luego punto png además el archivo luego punto png debería tener siempre un hipervínculo a la página principal por tanto voy a poner aquí una etiqueta a la etiqueta siempre me llevará a index e.html para luego probablemente lo cambiaremos a php cuando en un momento dado tengamos que hacer la página dinámica así que el logotipo siempre va a ser siempre va a ser un enlace a continuación haremos el menú de navegación donde yo siempre recomiendo a menos que haya alguna necesidad concreta especialmente para favorecer la parte responsive que el menú sea de tipo lista de tipo lista no ordenada así que en la maquetación original encontrábamos que tenemos inicio somos servicios clientes blog así que voy a crear una plantilla a ferré inicio quienes somos no calientes no y servicios 1 digamos que ésta nos llevaría a index.html digamos que ésta nos llevaría a quienes punto html ésta nos llevaría a servicios punto html está a clientes punto html hablo de html guardamos recargamos y vemos evidentemente de momento la clásica y típica lista con enlaces horrible pero ahora a continuación la vamos a maquetar lo primero que voy a decir es que al contenedor le quitó el break porque simplemente era para visualizar y ya lo hemos visualizado y ahora voy a hacer lo siguiente vamos a organizar un poquito la información volume y por tanto voy a hacer algo como lo siguiente introducir un separador para algo como estilos heaven así que él copio y pego y los estilos header los voy a poner aquí dentro de estos separadores por tanto nada un link vamos a ver una serie de estilos el estilo en este caso será cloud right voy a hacer que floten a la derecha para que se me vaya por allá derecho a acceder a un link para dejar claro que sólo tiene maquetar a ese elemento voy a decir flow de lectura he cuidado porque en este caso el uso igual tengo que decir un lic me ha quitado los los elementos voy a decirle que al lío tal skype es igual a 1 por otra parte álgebra es decir lo que hago es activamente el text decoration y decirle que eso no no para quitarle la decoración y probablemente el color de momento lo voy a poner negro con lo cual ahí tenemos ya el inicio de nuestro menú uno mixto concierto qué necesitamos la letra open usados por tanto a continuación vamos a introducir la letra o pensando dentro de este proyecto bien en este caso lo que he hecho decir me ha fuentes de google me dirá google.com font medido pensantes y dentro de open sans lo que voy a hacer es vamos a ver open science in google phone bien me voy a ir [Música] a una regla de importación para css así que copio lo que hago lo más arriba posible las importaciones de fuentes siempre las voy a pegar lo más arriba posible y por tanto al botín le voy a decir que font family en principio pensando vamos a ver el uso de 912 ss ahí está y voy a seguir el consejo de google que va a ser o pensando como sanserif es decir primero intenta poner open sans y si falla en este caso con una salsa vista asiste guardo recargo y por tanto ahora todo se me convierte en no pensar bien en primer lugar voy a ver lo siguiente vamos a verlo aquí el logotipo el logotipo el logotipo no tengo por aquí porque una parte por tanto hago los sillones esto va a ser y d y ojo para poder localizar correcta e inequívocamente dentro de fs es así que voy a decir ceder luego y quiero que flote a la izquierda [Música] no estoy cargando los elementos así esto flota a la izquierda y esto flota a la derecha en principio el banner se me queda un poco descuadrado pero no me preocupa no me preocupa porque ahora voy a decirle que el header va a tener una altura qué altura bueno pues la altura exactamente que haya que poner en photoshop así que miro por ejemplo desde aquí este ni voy a acercar un poco más a medir con más precisión y mido por ejemplo desde aquí hasta aquí copio y mide 57 píxeles en apariencia así que vamos a verlo si voy a poner presentable para redondear las seis piezas lo siguiente el género vimos que hai e 60 píxeles por tanto ahora guardo recargo tenemos ahí ya el menú vamos a hablar también del menú porque el menú está todo con mayúsculas eso lo puedo solucionar por ejemplo en el que voy a decir que t transforma es upper case aparcase para decirle que todo se convierta a mayúsculas y evidentemente lo que voy a hacer ahora es ponerle algo de margen cuando digo algo de margen quiere decir que me voy a photoshop voy a medir el espacio que hay entre el elemento voy a copiar y pegar para medir de ver que hay 67 pongamos que hay 66 pero eso quiere decir que le daría un margen de margin right de 30 el problema aquí no parece que esté alineado perfecto pues nada me voy al dar un libro y le digo martín left es de 33 píxeles y martín forfait es de 33 píxeles guardo recargo y comprobó como ahora los elementos del menú se ven directamente ahora mismo si saco las reglas y por tanto voy a sacar aquí las reglas y voy a hacer una regla por aquí veríamos que en principio el menú llegaría hasta el final ahora mismo no llega de hecho técnicamente el photoshop pero supongamos que quisiéramos que llegar pues en ese caso lo que haríamos sería algo como por ejemplo lo siguiente heather nada link dos puntos la child el último elemento dentro de esa lista y le diría por ejemplo martín john wright sería de 0 píxeles de esa manera puedo especificar qué es lo que le pasa a cada uno de los filamentos y ahora dejémonos como blog está perfectamente es honrado dentro de esa línea bien en este caso tendría ya le faltaría un poco la línea la línea que tengo aquí dentro donde este elemento bueno en este caso vamos a hacer la marcación estática de inicio así que una vez más nos acercamos aquí seleccionamos el color quiero un promediado no quiero tampoco algo demuestra y quiero ver que ese punto es de 12 11 así que voy a hacerlo señaló haré lo siguiente todo aquello que sea de clase activa y tendrá un color de rgb 13 141 211 voy a decir que esto es importante porque esto es una colisión y además quiero decir lo siguiente quiero decir que vamos a ver si quiero decirle que border botón va a tener un borde en la parte inferior de pues por ejemplo 3 píxeles solid y rgb de ese color la razón por la que colisiona hoy y no quiero cortar la razón por la que colecciona es que yo ahora lo voy a aplicar sobre un estilo sobre una etiqueta a la etiqueta a aquí arriba estaba diciendo color black mientras que le estoy diciendo color rgb así que hay una colisión pero lo más importante es que hay una colisión y llevo las de perder porque esto es una colisión aunque ésta ocurre después está este es un estilo aplicado por la etiqueta mientras que este es un estilo aplicado por clase y en la gran mayoría de navegadores los estilos por etiqueta mandan más que los estilos por clase por tanto por eso tengo que poner importante para asegurarme que éste prevalezca y ahora por tanto se ahora me voy a index y por ejemplo al inicio le digo qué activo guardo y recargo y vamos a comprobar como ahora el inicio aparece como activo bien en este caso lo que tendría que hacer es que a los elementos que tienen a les diría al igual que se lo diría al hebbel de 60 copio y pego para asegurarme que la barra aparezca correctamente vamos a inspeccionar un poco el elemento ese elemento debería tener un height de 60 píxeles vamos a verlo vamos a ver sus estilos el hi de 60 píxeles bien en este caso probablemente no lo tiene simplemente por la razón de que no es una etiqueta entonces voy a copiar lo voy a pegar en el libro podían inspeccionar ahora el link déjame que ponga esto en la parte de abajo ahora si el link tiene 60 píxeles en este caso lo que haría por tanto es poner también que el link de momento es de clase activo igualaría los siguientes igualaría activo y qué [Música] así que uno se queda el color y otros se queda este no aparece pero está por aquí bajo con lo cual lo que es poner por ejemplo 40 píxeles para asegurarme que aparezca vamos a verlo esto fuera una píxeles hasta que aparezca 10 píxeles hay algo que parece que no era postor ya no activo esto es realmente el y activo horas y horas cuando lo devuelvo por ejemplo a 50 bien hasta que cuadre perfectamente con la posición del menor otra cosa que voy a decir es que no me hace especial gracia el hecho de que haya tenido que usar dos estilos uno para y otro para el clase para él y lo que voy a hacer es lo siguiente quitar al arroz la clase y entonces el color azul no funcionará no funcionará porque aquí en el a le he dicho que el color es blanco así que no le voy a decir black le voy a decir mujeres es decir heredar hereda el color que tenga el superior así que corto aquí pero aquí me los paso nosotros mantengo el día activo y por tanto ahora al recargar no tengo todo en un solo estilo en lugar tenerlo en dos que es algo mucho más limpio y por tanto éste lo solucionado simplemente poniendo el color ingerido a una oliva tenemos ya por tanto el menú más o menos estilizado vamos a verlo y quizás lo que haría es ponerle un border bottom algo más grande algo más grueso para que tuviera más presencia de más me ha pasado voy a poner 5 píxeles y se ajustaría un poco la posición no continuamos acabo de copiar la imagen de carpa en valencia atención porque no es conveniente que tenga espacios para la web así que la voy a llamar como banner punto jpg o podría poner guión bajo en lugar de espacios y voy a hacer ahora lo siguiente esta imagen la voy a introducir directamente dentro del banner por tanto donde pone esto es el banner y pondré img src entramos dentro de img y cargo banner punto jpg vamos a guardar vamos a recargar no ha cargado correctamente y eso porque así que vamos a guardar de nuevo vamos a recargar y ahora si la tenemos bien aparece de color naranja simplemente porque tenía la imagen de esta manera así que voy a hacer lo siguiente en el banner le voy a decir va con links y ahora me voy a hacer un apartado nuevo y por tanto copio pero sí digo estilos banners todo este apartado me lo voy a copiar me lo voy a pegar y así vamos organizando y estructurando un poco la información bien dentro del banner por eso hemos dicho que 100% y ahora al logotipo que está por aquí le voy a decir lo siguiente por si suena absoluto y álgebra le voy a decir position relative relativa con esto lo que consigo es que el logo se quede por encima de la imagen es decir el logo es absoluto y por tanto flota por encima y por tanto no empuja al banner pero también lo que necesito muy importante no se vaya por aquí arriba por eso es importante y muchas veces la gente lo olvida el poner por una parte que luego sea absoluto y por otra parte que su padre inmediato que es el jefe evidentemente sea relativo para que no se escape entonces cuando se me ha descuidado un poco el menú no pasa nada ahora luego lo vuelvo a cuadrar una cosa que necesito ahora dentro del gbb es simular no este elemento de navegación dentro de él no saberlo está aguardando por efe el elemento de navegación del banner si no se abre aquí es este elemento de éxito incluso lo que hacer también es tirar una línea a grace por aquí así que bajo el banner voy a introducir un hr un separador horizontal y por encima o detrás del separador horizontal que vamos a quedar por delante voy a hacer con diva puntos por ejemplo y dentro de punto voy a hacer un divo class diapositiva si quieres para localizarlo mejor voy a llamar una diapositiva o puntos diapositiva porque ahora dentro de dentro de ellos pero realmente claro esto sería 13 diapositiva y esto sería punto diapositiva para cada uno de los puntos y ahora por ejemplo por si tenemos cuatro puntos en la mayor acción no sé cuántos teníamos pues voy a poner cuatro de estos días [Música] ahora que visualizo evidentemente me queda ahí una barra y voy a utilizar un poco banner uy 100% margen autor en este caso voy a decir también que banner y mgm with 100% martín auto igual hace que la imagen semestre ya veremos vale y ahora voy a hacer lo siguiente banner hr y diego padding 0px él es ya que por defecto tiene padre martín 0 píxeles blue me voy a photoshop tímido me dio tanta altura como con una parece claro que tiene 6 píxeles y el color va a ser este de aquí así que me vuelva a sublime y le digo s speech él es y le digo qué back home rgb 189 a 204 a 212 así que guardo recargo y comprobamos como en este caso claro además voy a poner un borde de cero píxeles ya que tengo hay una especie de relieve causado por el borde ahora si se me queda una línea blanca en la parte de arriba apoya pero un poco porque puede ser esa línea ahora mismo no estoy acabando de ver de momento voy a dejar la línea ahí si no lo consigo averiguar debería averiguarlo ahora mismo no había ningún motivo aparente pero siempre podría hacer lo siguiente que es posición relativa y top por ejemplo menos 3 píxeles con eso lo que conseguiría es subirlo hacia arriba hasta que llegar a un punto en el que corrigió la suposición bien continuamos con el banner y en este caso nos queda maquetar la parte de puntos diapositiva por tanto voy a hacer lo siguiente los puntos y positiva el siguiente estilo background y wilde voy a decir lo siguiente vas con ping simplemente para verlo para ver por dónde para ahora mismo en la pantalla es decir que wifi es igual a 400 píxeles vamos a decirle que height es igual a 40 píxeles lo tenemos muy bien y por tanto le voy a decir ahora un poquito más tienes el banner el que está muy bien voy a decirle que marquen auto para que se me quede en el centro de la maquetación bien ahora lo que voy a hacer es lo siguiente le voy a decir que border reviews es igual a por ejemplo 20 píxeles bien muchas demasiado 10 píxeles y ahora lo que voy a hacer es que posición relativa top menos 11 píxeles esto lo que va a hacer es que este elemento se monte allá encima y por tanto si se me vaya encima menos todavía bien si se monta encima ahora le puedo cambiar el fondo rosa por un fondo blanco simplemente porque lo quería para verlo este ejemplo nos como aparece una pestaña que se come esa parte de la imagen 400 píxeles nos ha igual son demasiados le pongo 200 y ahora aquí dentro lo que haré es meter los puntitos de cada una de las diapositivas así que vamos allá ahora es punto ya positiva aceite cuidado esto es una idea pero estos son clases asiste punto diapositiva de hecho fijarme no lo tenemos positiva y digo lo siguiente los puntos diapositiva son estos de aquí y voy a el color que básicamente creo que es el mismo de antes creo que es el mismo que el de abajo prácticamente igual no es exactamente el mismo pero igual es un problema del jpg de la exportación que en todo caso lo que parece claro es que son puntos así que wef es igual a 15 píxeles es igual a 15 píxeles background es igual algo mismo hr bordes radios muy grande para que se hagan redondos bien y ahora les digo que flot left tengo que calcular un poco el margen que deben tener se puede calcular a ojo o se puede calcular haciendo un poco de matemática lo que pasa es que finalmente se acaba mucho antes por cierto que en la maqueta original no tenía cuatro diapositivas sino que tenía cinco así que las muy adecuadas y ahora pues igual lo que haría ponerle unos 8 píxeles para decir que no en punto diapositiva 2 puntos jon kyl y le voy a decir que martín inglés de 20 píxeles carlos y que se me queden en el centro 30 píxeles estoy viendo un poco consumo al verlo con una y distorsionando con los píxeles pero más o menos por ahí lo veríamos para verlo así y continuamos trabajando y continuaríamos ahora con la parte no estoy haciendo las interacciones todavía ni con los puntos vamos primero a cavar una situación y luego hacemos las interacciones enfocamos el final de la maquetación de la página principal joya bueno incluso no cerrar esto pero lo voy a abrir con un navegador original no voy a abrir aquí en una pestaña nueva y así un poco vamos viendo lo que tenemos y lo que queremos no es justo comparar verdad porque esto para comparar debería estar más o menos así ahora bien y estamos va quedando por tanto ahora por una parte los destacados y por otra parte los últimos proyectos así que dentro del contenedor el main me voy a hacer un live y d destacados hay un vivo y d últimos proyectos dentro de destacados voy a hacer etiquetas arctic él de hecho voy a hacer 3 voy a ser una plantilla entonces hago un bieber y d icono que sería cada uno de estos iconos que hay aquí y luego voy a poner por ejemplo un h 3 y voy a poner un texto por ejemplo alquiler y venta de carpas y aquí voy a poner pues servicio integral es de fabricación coma como alquiler y montaje de carpas cualquier evento elimina un puntito de aquí y ya está y ahora voy a usar esta plantilla para cortarla no para copiarla y pegarla dos veces más el guarda recargo no aquí sino aquí bien en este caso por tanto voy a convertir este elemento y ahora digo lo siguiente me creó una nueva sección y digo en esto es estilos destacados me creo secciones para que todo esté más ordenado y ahora digo destacados arctic en cada uno de los dos artículos va a tener un with del 33% otra cosa que suelo hacer en este caso sobre olvidado con cliff habrá en este caso los artículos ahora me están frotando cuidado con las flotación es porque luego tenemos problemas de que el fútbol se nos mueve hacia arriba ahora arreglamos eso pero lo que voy a hacer muy importante es que dentro de cada uno de los artículos vive clase contiene artículo no nos olvidemos de que si abrimos un libro pues tenemos que cerrarlo también y no nos olvidemos también de si podemos poner sangrías correctamente me vuelvo a copiar y pegar la plantilla en principio parece que nada ha ocurrido también otra cosa que digo es que vamos a poner el clásico div que nos permite terminar la flotación para que el pie de página se vuelva a ir bajo y ahora contiene artículos te voy a decir por ejemplo un padding de 20 píxeles esto hace que el contenido tenga para que por tanto haya margen sin que al empujar el tercero se me vaya hacia abajo que es un efecto clásico del css lo que he hecho por tanto es que si yo pusiera un padding por ejemplo al artículo original dejémonos que el tercero saltaría porque yo estaría aumentando el margen exterior de cada uno de los artículos por eso lo que he hecho es crear en primer lugar cuidado 23 en primer lugar en el html he creado dentro del artículo un contenedor artículo parece un divertido para fundir que no aporte nada pero sí que aporta porque lo que está aportando es que si a ese padding interior es elemento interior le pongo el padding fijémonos como existe un padding existe un margen entre ellos pero el tercero no se me baja hacia abajo es decir se respeta la anchura del 33% no empuja a esa altura sino que lo que ocurre es sino que lo que ocurre es que simplemente no baja sino que se queda arriba ahora voy a maquetar algunos de los elementos que teníamos dentro de ese artículo y dentro de ese artículo tenemos vamos a verlo aquí el icono destacados contiene artículo icono icono debería ser una clase pues no es un nivel y debería ser una clase porque se va a repetir así que no pasaría nada y acepta maquetar múltiples clases pero si lo hacemos bien pues mejor que mejor así que guardo recargo icono y ahora al icono le voy a decir lo siguiente wyss de 30 píxeles de 30 píxeles bordes radios de 30 píxeles y le voy a decir un background con este color con el mismo color para mantener el color corporativo de esta manera vemos cómo tenemos los puntos ya ese caso pues sería una cuestión de ampliar los tanto como hiciera falta incluso midiendo los puntos originales le decimos también que floyd led para qué los puntos floten a la izquierda y les puedo decir por ejemplo algo como martín top de 30 píxeles margin-bottom de 30 píxeles para asegurarme que fuerzan al texto hacia la derecha e incluso un márgenes right de 20 píxeles para también empujar un poquito el texto hacia la derecha ahora debería lo siguiente destacados contiene artículo h 3 un par en el tercero píxeles un margen de 0 píxeles y creo que voy a hacer poco más simplemente lo que quiero es que el texto se quede mejor maquetado dentro de lo que es la maquetación ahora tendríamos esta zona de aquí donde permíteme ponerle un pequeño grito así que esto es estilos destacados en estos últimos proyectos propio tengo lanzo un poco hacia abajo y voy a hacer ahora lo siguiente espero tener tengo estas tres imágenes entonces voy a abrirlas en diseño en imágenes vamos a index y voy a por ejemplo las voy a copiar muy bien pues las copio las pego las pongo dentro de img y esto sería [Música] proyecto 1 para quitar los espacios esto sería proyecto de los y esto sería proyecto 3 por tanto ahora me voy a ir a últimos proyectos dentro de últimos proyectos voy a maquetar bueno aquí dentro de arte que él directamente copio y perro y ahora dentro de últimos proyectos los iconos los voy a cambiar por img img src y voy a decir que img barra el proyecto 11 jpg copie tengo copia pero eliminó el h3 porque los proyectos no requieren título según cómo está la maquetación ahora mismo ahí tenemos los proyectos y ahora tengo que decir lo siguiente proyectos blount left proyectos de arte que él realmente a tener un wifi del 33% vamos a ver vamos a verlo técnicamente no lo que pasa es que es últimos proyectos últimos proyectos y ahora sí empieza a flotar recordamos que deberíamos copiar ya que estamos flotando aquí el pie de página se vuelva a ir bajo y ahora dentro d últimos proyectos contiene artículos y decimos que alguien de 20 píxeles pero tenemos y ahora la matización parece que más fuerte además diría lo siguiente últimos proyectos contiene artículo ing va a tener un wish del 100% por tanto ahora el padre no puedo tener más grande y así puedo ajustar las imágenes todo lo que necesite esto sería es el proyecto 3 para que cada una de las imágenes sea diferente cuidado porque cada una de las imágenes parece en apariencia que tiene un estilo diferente y lo voy a corregir simplemente con una altura voy a probar primero con 200 píxeles así esfuerzo que todas las imágenes tengan exactamente la misma altura y se marquen mejor lo último que voy a hacer dentro de esta sección no me quedaría quizás los textos en azul un pequeño recuadrito en fin pero lo último que voy a hacer es últimos proyectos cerrado el photoshop con lo cual lo voy a hacer manualmente pero creo que antes hemos visto el concepto de color con cuentagotas os voy a 220 220 220 247 47 24 72 47 bardo recargo es que no se ve mucho he hecho 247 es casi 255 más oscuro de lo que tocaría para verlo estos últimos proyectos escrito bien inspeccionar los elementos últimos proyectos bien el problema de este últimos proyectos es que él el parón de la flotación el puesto fuera y lo voy a poner dentro también y así se verá un gris demasiado fuerte entonces creo que era los 4 724 7.247 guardamos recargamos para que el color sea exactamente el que esperábamos vamos a ver a quién debe ocupar todo debe ocupar todo en ese caso le voy a decir déjame ver un segundo porque entonces últimos proyectos no debe estar dentro del contenedor entonces voy a últimos proyectos y lo voy a sacar fuera para que no esté cubierto por el contenedor y ahora nos fijaremos como últimos proyectos bien ahora cuidado últimos proyectos le voy a decir que wish es igual a 1200 píxeles y margin es auto para asegurarme allí en el centro y por último un poquito del pie de página hacer lo siguiente de página y el pie de página lo recupero del futuro que tenía antes pero voy a hacer algo tan sencillo como un de 400 píxeles por supuesto un color aunque técnicamente creo que he visto que era más bien gris pero en fin aquí tenemos el pie de página tengo por aquí una parte que sobresale tendría que ver que es ahora mismo y así simplemente voy a leer más cuando las listas y ya está pues lo dejamos así directamente y no sabe cómo podríamos matarlo vamos a convertir este proyecto en dinámico y para convertirlo en dinámico lo primero que tenemos que hacer vamos a trabajar con php pasarlo de acb así que voy a cerrar aquí voy a cerrar aquí voy a el proyecto de maquetación simplemente index lo voy a pasar a extensión php utilizar php a continuación debería tener instalado en mi equipo un servidor web como el sampler así que me aseguro de que en aplicaciones de engels amp tengo la carpeta hp docs y dentro de la carpeta hd ox voy a mover directamente el proyecto de maquetación para modificar es necesario no me administrador autenticar y en mi caso mi usuario que no tiene contraseña y ya tengo ahí maquetación por supuesto a continuación voy a arrancar el panel de control de sant para arrancar apache para arrancar mysql y para darme cuenta de esa manera como ya tengo el servidor ejecutándose y para darme cuenta por tanto que se abra y me voy a localhost maquetación pues tengo ahí la web ya está preparada para ti vamos a verlo bien tamaño así vamos a seguir editando vamos a ir metiendo la vista incluso probablemente con el sublime pero ya no sí ya lo sé porque lo hemos dejado sin adaptar ahora héctor cúper 100% entonces vamos a aplicaciones vamos a eso es porque he hecho lo siguiente vamos a ver h maquetación y eso es por las encierra el contraste con pero abierto con él creo que debería aplicaciones h que brooks la aplicación index.php abro también el css y eso es por la sencilla razón el index php aquí donde pone últimos proyectos voy a tener un contenedor cojo últimos proyectos y aquí dentro meto un contenedor cuidado seguro ver cerrar todos los días que abra y ahora en estilo css digo por tanto últimos proyectos no va a tener un wifi en 1200 píxeles va a tener un wing del 100% viene por defecto así que hago así y fijémonos ahora como tiene un wifi al 100% pero como le he puesto un contenedor como le he puesto class contenedor el contenedor es el que tiene el wifi de 1200 píxeles concentrado automático vale por tanto hemos conseguido nos faltaría ahí darle al futuro un poquito más de caña pero básica y ya lo tenemos en este proyecto una de las cosas primeras que vamos a trabajar es la traducción así que la traducción muchas veces no es sencilla se puede hacer de múltiples maneras voy a ilustrar una manera bastante sencilla pienso con matrices las matrices en este caso evidentemente el concepto de matriz es complejo pero creo que la implementación en este caso no lo va a ser especialmente porque las matrices entre hp son muy sencillas de trabajar así que crea un nuevo archivo lo voy a guardar como por ejemplo dentro de la carpeta php o incluso lo que sea voy a guardar un archivo llamado traducción punto ahora dentro de traducción php por supuesto voy a abrir y voy a cerrar y voy a hacer lo siguiente por ejemplo título en español el título no realmente es navegación inicio sería igual no hay mucho misterio con esto lo divertido evidentemente como te puedes imaginar esto es una matriz de dos dimensiones donde la primera dimensión tenemos el idioma en la segunda dimensión tenemos un identificador que es un identificador propio nuestro inicio equivale sobre allí ahora digo en inicio voy a llamarlo home este localizador muchas veces en programas que están en inglés el propio localizador está en inglés pero como lo estamos haciendo en castellano pues podemos elegir que el localizador esté en castellano y en francés por ejemplo creo que es aquél quiero recordarlo de memoria así que ahora qué haría bueno en primer lugar dentro de index php voy a javier un ph p incluye php traducción php ahora voy a forzar de momento porque tengo un navegador no tengo múltiples navegadores en múltiples idiomas por tanto voy a forzar el que el navegador es igual a es por tanto esto lo estoy forzando pero más adelante lo sacaremos de la cadena del navegador así que yo cuando veo aquí inicio lo voy a poner inicio me voy a escapar y voy a poner eco eco que te co navegación y voy a decir atención ahora viene lo interesante navegador no han dejado idioma idioma eso quiere decir que será vengo aquí tengo un error idioma idioma idioma idioma idioma porque me dice es que tengo error en principio en el joven tim spector idioma en la línea 3 esto es muy curioso porque si estoy en php no es necesario declarar una variable pero el problema es este el problema es que no he puesto punto y coma en la línea anterior ahora sí así que pongo inicio fijémonos como pone inicio pero si lo divertido es que si pusiera en ahí pondría home simplemente por hacer eso vale si hacemos esto déjame que borre la parte de francés porque no voy a saber traducirlo toda francés esencialmente entonces voy a decir pues es quienes somos sería quienes somos es en perdonando que somos por ejemplo about us who we are lo que sea y por último bueno lo que realmente se hizo igual inicio y servicios propio pego de servicios y servicios de amor white widow es que en cada país se dice de manera diferente work obviamente clientes clientes y digo client eso costó merz y por último esta va a ser muy sencilla blog blog sí ahora bueno de recargo no pasa nada de momento porque ahora tengo que venir al sublime y simplemente voy a copiar y pegar voy a copiar y pegar [Música] este código php voy a pegar simplemente para decir que esto quienes somos esto es y servicios esto es clientes y esto es pero entonces es muy curioso porque fíjate que yo estoy en castellano todo está cuidado en cábala estoy en inglés estoy en inglés ha dejado en en todo traducido directamente a inglés pero en cambio ahora lo cambio es y fíjate como todo se traduce al castellano bien de momento lo que he hecho es forzarlo lo que he hecho es tocarlo pero lo que voy a hacer ahora realmente detectar el idioma del navegador lo que hemos hecho hasta ahora realmente es tocar el idioma pero en lugar de tocar el idioma lo que voy a hacer es usar esta variable del servidor de php que es el access language pues en axotlán which y lo pego si quieres incluso voy a decirle eco idioma para que en maquetación web aquí arriba aparezca ese vale en este caso lo que quiero hacer es quedarme sólo con las dos primeras letras ya que me está cogiendo toda esta cadena y eso lo quiero las dos primeras letras entonces voy a hacer lo siguiente php trim entonces haber esperado no pues muy bien bhp sube str entonces con su bcr al devolver parte de una cadena pues lo que voy a hacer es lo siguiente idioma es sube spr elijo la cadena que quiero cortar y a continuación específico lo que quiero cortar por tanto voy a decirle como 2 yo guardo recargos 0.2 ahora si es lo que he hecho es decirle que me quiero quedar desde el carácter cero hasta el carácter dos lo cual quiere decir que me quiero quedar con los dos primeros caracteres del idioma en este caso de esa cadena los dos primeros caracteres equivalen a ese y por tanto el idioma se convierte en hasta ahora el idioma lo hemos traducido directamente mediante la detección del navegador estaría bien para una primera aproximación pero a continuación lo que quiero hacer es también poder traducir la web a voluntad el usuario pueda elegir cómo traduce la web bien en este caso lo que voy a hacer es lo siguiente voy a copiar me un par de entradas más voy a hacer cuidado aquí voy a hacer un img src y dentro de img voy a poner en punto png ahora pongo directamente en texto voy a poner en y voy a poner directamente es para aquí a la derecha en esa de traducir y esto lo voy a meter dentro de por ejemplo la propia misma página en la que éste sea interrogante interrogantes sea donde sea donde estás y voy a decir la pnc es igual a en primer lugar y ahora voy a decir la pnc es igual eso quiere decir que señora pincho estoy en la misma web en la que esté pero el lenguaje en español lenguaje en inglés y con esto me voy a ir a la parte superior y voy a hacerlo 7 en primer lugar voy a arrancar una sesión sesión start a continuación voy a decir si no existe si no sé si no está puesto la variable de sesión que me acabo de sacar de la manga llamada idioma en este caso idioma es el idioma del navegador si nadie te ha dicho nada el idioma es el idioma del navegador pero si alguien te dice algo en ese caso en ese caso el idioma en este caso del idioma es gay el alma esto quiere decir pues que señora recargo la página como yo no he especificado ninguna variable de sesión cuidado y sesión también es igual a gerland porque si no nunca existirá la variable de sesión bien yo guardo y recargo fíjate que está en castellano porque ha detectado que este navegador está en castellano pero qué pasa si le doy a lang en este caso vamos a probarlo idioma es igual a blanco sino isep sesión idioma si no y se obsesiona idioma o es cierto que no hice qué la pnc porque aquí básicamente estoy diciendo si alguien te está diciendo gay trans mira lo que te dicen vale pues le digo en otra vez estaba haciendo correctamente ahora sí fijémonos que estoy con es y ésta entiende somos estoy con él y está en inglés lo puedo cambiar y si ahora por ejemplo que lo dejo en inglés y si ahora me abro otra pestaña es decir no cierro la sesión es que estaba con la en vale bien al no poner lenguaje ahora no puedo poner en castellano porque es por defecto el idioma del navegador pero yo con él lo puedo cambiar y lo puedo cambiar pues ahora fíjate que le cambio vamos a ver qué pasa a mi find index land bien en este caso no está puesto el idioma es decir se está yendo hacia abajo pues le voy a decir blanco me lo pongo aquí dentro es decir lo que estoy haciendo es un poco procurar que pase lo que pase no falle inglés castellano borro el idioma y bueno vamos a verlo en la línea 9 en la línea 9 lo siguiente que en ese caso ahora voy a decir esto habrá un segundo y pegó al es claro aquí ha dejado de funcionar antes castellano e inglés castellano y si quito el idioma me aparece por defecto en español por tanto ahora vemos cómo lo ve almacenado en una pequeña estructura de control que se encarga de definir de tu me dices el idioma pues pongo el idioma que tú me digas no me dices el idioma pues en ese caso el idioma será el que venga por defecto en el navegador y todo esto guardado como variable de sesión para que lo recuerdes de página a página en cuanto a la parte responsable de esta plantilla observamos que como esta el 50% observamos que se hago esto más pequeño pues es evidente hacerlo un poco más grande es evidente que está ese tamaño más o menos se ve bien pero en cuanto lo empujamos pues hay cosas que desaparecen el menú desaparece los destacados desaparecen así que si todo desaparece lo que voy a hacer es una cosa muy sencilla le voy a decir que dentro de estilo css madre mía todo lo que he dicho prácticamente todo lo que he dicho va a estar dentro de etiquetas medias bueno vamos a ir poco a poco porque puedo hacer diferentes etiquetas media yo como siempre me voy a sacar la chuleta mi antigua página web vamos a ver con el fuente de la página y esto lo hago para sacarme esta etiqueta media así que por ejemplo por ejemplo dentro de lo que sería por ejemplo destacados voy a hacer lo siguiente media screen y anchura mínima de 1200 píxeles y va a tener todas estas propiedades pero sin embargo sangría para que se vea quién depende de quién pero sin embargo ahora le voy a poner otra regla con la que le voy a decir y perdón esto es imax guys 1200 y lo que voy a hacer es lo siguiente te voy a decir que vamos a ver el wef va a ser del 100% a la hora de cargo y fijémonos cómo cambia el 100% es decir si luego así se cambia a 3 pero se hago así automáticamente me ocupa el 100% el 100% de que bueno pues el 100% de el contenedor el problema del contenedor está en que el contenedor está pensado otra vez sabes que también pero o así y lo que voy a hacer es ir creando etiquetas media para cada cosa que me interese así que max width le voy a decir que el wifi es del 100% vamos a verlo ahora empecé monos que ahora funcionará 3 pero se hago así date cuenta cómo se re escala y el texto baja de 8 ves que ya no hay un scroll en la parte de abajo así que poco a poco poco a poco lo vemos vamos a hacer lo mismo exactamente con estos tres elementos que hay en vertical se quedan demasiado feos así que no sé qué entonces voy a hacer un segundo copió estilos de últimos proyectos y simplemente copia y pega y ahora copia de perú porque me cuesta sólo un momento y marx wef entonces en marx wef le voy a decir que el arctic él al 100% por tanto simplemente por hacer eso para cada artículo se me queda mucho mejor mientras que ahí tendría que ver qué pasaría con las imágenes bien ya sé qué hacer con las imágenes con las imágenes les voy a decir que con el max with la imagen no este de 200 píxeles o igual sí que lo esté porque en ese caso me puedo eliminar el height y cada imagen ocuparía lo que realmente le correspondería 3 quizás demasiado grande no lo sé porque igual lo que había es un wifi de 400 píxeles un hide de 300 píxeles a riesgo de que algunas se metan y quizás un text align center que se centren y un martín auto creo que esto no va a hacer nada porque la imagen no se frotaba pero bueno incentiva se podría centrar para que quedara en el centro de la pantalla y vamos ahora a trabajar con el menú responsivo para que se quede un menú tipo de dispositivo móvil el responsivo no solo se puede utilizar para escalar elementos sino que se puede utilizar para decidir qué elementos quieres y qué elementos no quieres dentro de una maquetación así que por ejemplo yo voy a decidir que el banner vamos a verlo donde estas maneras claro efectivamente entonces en el banner lo voy a decir media screen y lingüista max with me mini wheats de 1200 y hago todo esto esto lo voy a y ahora voy a hacer algo tan sencillo como simplemente decir y en el caso de que sea max guys 1200 simplemente al banner voy a copiar sólo ese estilo les voy a decir display no es decir y estoy hablando de una plantilla pequeña así que hago así y fijémonos como sí y estoy hablando de una plantilla grande aparece el banner y por lo que sea puedo decidir qué es la plantilla es pequeña no quiero simplemente lo que tendría que hacer en ese caso es que bueno a ver le pondría un margin-bottom de igual 100 píxeles para asegurarme que empuje hacia abajo porque si no esta parte de aquí se me metía dentro del logotipo entonces para el menú responsivo voy a hacer lo siguiente en el menú donde estás menú déjame que te encuentre así que hacer esto voy a copiar esta etiqueta y con el menú esto 97 copio y pego y digo mínimo y maxwell vale el nab google le voy a decir que no quiero que flote a la derecha no creo que falte nada de hecho los list voy a hacer lo siguiente jackson black color wald having martín botón un píxel vamos a verlo with muy importante del 100% en este caso lo que voy a hacer es que el logotipo también lo voy a incluir así que heather luego no le voy a decir posición absoluta sino que debería decir que esté allá arriba vamos a ver qué pasa aquí max weber luego le he dicho que ya no rebote con tengo que ver porque este logotipo está rebotando en general luego flow left dónde está en la línea de 48 pero no debería flotar flotar en la línea 48 porque esto está dentro de mí y de maxwell no me importa mucho pero sí que me importa así que el menú voy a decir de momento de margin de margin top 50 40 lo que sea píxeles simplemente para empujarlo un poco hacia abajo hasta que averigüe qué pasa con el logotipo tengo ahora este menú vamos a verlo otra vez inspeccionado y en este caso quiero que tenga claro muy bien tengo que decirle que un parking prefiero píxeles un margen de 0 píxeles y un week del 100% si conseguiré que el menú se mete de arriba del todo claro al haber hecho esto pues evidentemente pierdo un poquito la posición relativa y ahora por tanto es decir top de 180 píxeles pero tengo tengo un poquito de margen para luego lo arreglamos ahora lo que tengo que hacer aunque no nos guste en un principio es decir que el height del menú es igual al height de uno de los elementos los elementos no veo cuánto tienen pero eso voy a decir hai es igual a 60 píxeles y por tanto height es igual a 60 píxeles vamos a hacer esto quizás en la atención es demasiado voy a poner 30 así mejor y ahora muy importante atención porque voy a decir overflow es igual a heaven es decir que sólo saber 40 vamos a ajustarlo hasta que se vea el menú con lo cual ahora necesitamos aparte de empujar esto un poquito hacia abajo pero necesitamos que yo reconozca que en el momento en el que pulso ahí el javascript pues bien para esto necesito descargar la librería de jquery y me lo voy a descargar en versión 2 vamos a pasar ya directamente a la versión 2 de la librería me voy a copiar me voy a 72 me voy a maquetación voy a crear una nueva carpeta llamada js js y dentro de js voy a copiar tanto la librería como un archivo nuevo que voy a hacer yo este archivo lo voy a guardar como dentro de js código punto js era por tanto dentro de index la parte de html voy a poner el script js jquery js es decir cargo la librería y luego por otra parte voy a copiar y pegar a esta etiqueta y voy a llamar al código primero cargo la librería y luego cargo el código que voy a desarrollar de esa manera voy a hacer la clásica estructura de control de jquery document ready y voy a hacer lo siguiente directamente una función local function y ahí empiezo a escribir es lo mismo que llamar a la función de inicio y empiezo a escribir y ahora digo lo siguiente cuando sobre 1 haga clic en ese caso voy a ejecutar otra función local que hará lo siguiente 1 hyde será igual voy a decir por ejemplo 400 espero que no me dé error porque no recuerdo ahora mismo se puede decir con soul punto love hasta aquí llegas simplemente para comprobar si en la consola aparece algo bien ahí está el problema el problema está que no me está reconociendo jquery punto j s porque no lo sé j cody js está adentro s jquery js punto j s vamos a verlo hace falta recarga unas cuantas veces vamos a inspeccionar vamos a ver incluso fíjate que se pensó aquí yo cargo tiene acceso prohibido ese es el problema el acceso prohibido simplemente lo que nos va a hacer es que voy a maquetación le digo obtener información desbloqueo los permisos es bloqueo no tengo contraseña y aplicó a los sitios incluidos con lo cual simplemente ahora cierro por tanto ese era el problema eso en windows no dará ningún tipo de problema pero en maxis te lo puede dar entonces ahora sí de hecho cuando pinchó aquí aparece correctamente y por tanto aparece la opción de hasta aquí llega así que simplemente lo que tendría en este caso es un menú de navegación donde en el momento en el que pincho vamos otra vez en el momento en el que pincho aparece el elemento ahora lo que tendría que hacer es intentar ver si puedo utilizar alguna de las animaciones de jquery para que eso no fuera tan brusco sino que fuera algo más amable y para hacerlo algo más amable simplemente aparte de efectivamente de que empuje lo que podría hacer es usar un atlas usando css a continuación lo que voy a hacer es usar jquery para permitir que el menú se puede abrir se pueda cerrar para eso lo que voy a hacer es un contador al contador es igual a cero por ejemplo y voy a hacer lo siguiente en lugar de el height lo que esto es preparar una clase y llamar a menú abierto y aparte de menú abierto decirle una altura de 42 píxeles he dicho al header transition all de un segundo que le ponga transición importante en el código voy a hacer lo siguiente cree una estructura de control que dice ese contador es igual a cero en ese caso voy a hacer algo y si no voy a hacer otra cosa lo que voy a hacer es que al le voy a dar clase el nombre de la clase que he creado que me acuerdo cómo se llama que se llama menú abierto por tanto le digo que le añado la clase menú abierto en caso contrario y por supuesto contador es igual a 1 en caso contrario le voy a decir ritmo class y le voy a decir contador es igual a cero de esa manera ahora sí unas cuantas líneas que me sobran conseguir qué en el momento voy a poner index punto en el momento en el que pincho sobre el menú el menú se abre y contador es igual a 1 por tanto en el menú en el momento en el que vuelvo pulsar el menú el menú se cierra y de esa manera puedo tener un menor responsivo bastante bonito y bastante agradable y ahora por último vamos a ver el tema del icono del menú y para eso pues voy a buscarlo por ahí cómo va el menú hay con el típico menú que usará todo el mundo para móvil el que impulsó google voy a éste demasiado grande probablemente pero el más pequeño fantástico la imagen aunque no lo parezca por tanto que está con transparencia así que me voy a aplicaciones me voy a de sant me voy a archete box me voy a maquetación me voy a img y la guardar como menú directamente voy a hacer lo siguiente y es que en el estilo css solo en el menú móvil al pool le voy a decir que background es igual a url img menú punto png en este caso porque estilo css está en la carpeta css tengo que bajar a veces la gente no se da cuenta guardo recargo no se ve pero ahora pongo background size es de 20 píxeles 20 píxeles vamos a verlo no está por ninguna parte vamos a ver si lo podemos [Música] con el menú y nada un lucky es tan claro – abierto img menú no las está cogiendo es menos como yo era llamado aplicaciones de los errores se producen siempre por este tipo de organizaciones 1 punto png pues y mgm bien y probablemente sea un problema probablemente sea un problema de que la imagen no está encontrando porque no quiere encontrar la ecológico que no quiere encontrarla lo que realmente quiero decir es que tengo que poder ver cómo he pegado la imagen desde fuera tengo que volver a aplicar los permisos y qué acepto a los ítems incluídos estoy seguro vuelvo a cerrar y vuelvo a recargar por tanto ahora en el pool y vuelvo aquí de hecho creo que no la podría cargar por qué vamos a recortes antes [Música] el problema no no tenemos que encontrarla estoy en deuda skill ofreces no aparte de que esto no va entre paréntesis ahí está entonces ya sé lo que está pasando está pasando esto realmente en el gba y dos puntos no tiene que ver la luna es un poco gigante por tanto le voy a decir background size 20 píxeles 20 píxeles y cuidado porque en este caso además round y repite es igual a no y voy a necesitar porque fíjate que no lo parece pero ahí está es decir también para left de 30 píxeles y el problema no tengo con el fondo entonces para acabar de arreglar esto bueno técnicamente no pero eso un poco igual un segundo te arranco photoshop simplemente para crear mira un fondo negro de suerte negro grande fantástico de 1024 x 1024 1400 por 1400 algo la recuerdo guardo fondo negro jpg igual tengo que aplicar el tema de los permisos y ahora bueno backup url menú punto png ya digo como ing fondo negro punto j esto no es viaje esto es url así que ahora guardo recargo tengo que ver quizás me está fallando otra vez el tema de los permisos tener información abro contraseña aplico ahí tenemos incluidos cargo un segundo que vea qué pasa aquí fondo negro punto jpg negro punto jpg me faltan los dos puntos barro ahora sí vamos a ver tengo el fairchild casi lo que falta es que él tenga claro el problema haya estado en él en la imagen por tanto quería decir esto y la imagen y la vemos ya que rehacerla en photoshop habrá un segundo en un la imagen más en tamaño de imagen por 30 metros donde esté hay ser píxeles debería guardar encima por tanto ahora puedo ir a la web y ahora si ya empiezo a estar y maquetado ya tengo el icono solo en la principal me haría falta cuadrar lo un poquito pero básicamente vemos que ya empieza a estar

Deja una respuesta

Tu dirección de correo electrónico no será publicada.