Curso Maquetación HTML5

bien lo primero que voy a hacer es seleccionar nuestro 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 a maquetación web lo 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 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 maquetació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 maquetación dentro de photoshop vamos a ver qué illustrator llamada de atención muy bien simplemente para decirme que está correctamente exportado así que me voy al escritorio me voy a la habitació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 891 en principio parece correcto bueno el fondo que en ilustrado era blanco vuelva importado como transparente por tanto simplemente lo que voy a hacer es convertirlo realmente a blanco no he puesto en una capa nueva ponga la cara por detrás y luego incluso lo que voy a hacer es colapsar voy a hacer 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 editar con vamos a intentarlo creo que este equipo quedaba algún problema al abrirse con lo cual pero puede abrirse así que lo que voy a hacer es abrir un programa como brackets o abrir un programa como sublime para marc en definitiva un editor de texto para poder editar código por tanto me voy a ir a sacar un navegador web [Música] oscar sublime sublime text y lo que haremos es descargar este editor de código donde me voy a ir a download 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 le voy manualmente a aplicaciones lo busco manualmente y luego 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.hr ml este archivo index.html lo voy a dejar más o menos la primera mitad de la pantalla y el archivo index html 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 en 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 como mujer vamos a crear un boeing norma dentro del jefe pues sabemos qué tenemos como obligatoria la etiqueta title maqueta señor 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 señas 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 y 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 y últimos proyectos y estoy viendo o 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 esto algo que está bastante de moda ahora así que voy a hacer lo siguiente dentro del body no voy a hacer una etiqueta género voy a hacer una etiqueta y voy a hacer una etiqueta footer dentro de cada una de ellas voy a hacer un bip las nueve sino class 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 un vínculo de red de tipo style sip 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 que valen cero píxeles que martín 0 píxeles voy a hacer además otra cosa y es que junto al contenedor común 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 de paguen a izquierda a la derecha y si ahora por ejemplo copio y lo pegó en 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 párking me dará ese margen exterior así que hago lo siguiente de momento simplemente cierro photoshop y diego el contenedor de un width de 1200 píxeles y curiosamente el banner el 100% de la página para verlo bien voy a hacer lo siguiente voy a poner aquí background es igual por ejemplo a gray y voy a poner aquí background es igual a orange 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 asiste guardo recargo y tengo esto bien ahora en el header perdonará en el contenedor tengo que decir lo siguiente contenedor es igual a 1200 píxeles además le tengo que decir margin 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 estudio de 2002 puntos 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 digamos 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 a ver si puedo 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 no va realmente dentro del marco sino que el footer va dentro de contiene una parte dentro del marco pero tiene otra parte completa por tanto si no que es lo que haría es lo siguiente el futuro no va a tener el 100% y de momento aunque sé qué el color [Música] 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 que estamos haciendo ahora el diseño esto quiere decir que deberíamos ir al photoshop y por ejemplo extraer este elemento si no pasa nada los traigo directamente de la plantilla me voy a nuevo pero pegó y lo guardo aquí voy a recortar un poco para alguno pixel que se me ha quedado voy a quitar 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 encontramos que tenemos inicio nuevos servicios que desbloquee así que voy a crear una plantilla para terrestre inicio que pensamos no calientes y servicios no no no digamos que ésta nos llevaría al index html digamos que ésta nos llevaría a quienes html ésta nos llevaría a servicios html esta a clientes 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 quito 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 group y por tanto voy a hacer algo como lo siguiente introducir un separador voy a poner algo como estilos heaven así que copio y pego y los estilos g de los de a poner aquí dentro de estos separadores por tanto nada un link vamos a ver tendrá 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 ahora voy a hacer header nada un link para dejar claro que sólo tiene maquetar a ese elemento voy a decir y cuidado porque en este caso por uso igual la tengo que decir me ha quitado los los elementos voy a decirle que al lío pero listo es igual a 1 por otra parte álgebra es decir lo que hago es activamente es el text decoration y decirle que eso 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 usadas por tanto a continuación vamos a introducir la letra open sands dentro de este proyecto bien en este caso lo que he hecho decir me ha fuentes de google medir a google.com fons medido pensantes y dentro de open sounds lo que voy a hacer es vamos a ver open sans en google phone bien me voy a ir [Música] aquí a una regla de importación para css asiste copio lo pego 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 pensamos vamos a ver el uso integrar esta web el css aquí está y voy a seguir el consejo de google que va a ser o pensando como san serif es decir primero intenta poner open sans y si falla en este caso con una salsa mismo asistir guardo recargo y por tanto ahora todo se me convierte en no pensar bien en primer lugar voy a ver los silleros la 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 ve 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] en este cargando los elementos así esto flota a la izquierda y esto flota a la derecha en principio el banner se me quedaba un poco que es cuadrado 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 mido por ejemplo desde aquí estén y voy a acercar un poco más con más precisión y mido por ejemplo desde aquí hasta aquí copio y mide 57 ixel es en apariencia así que vamos a verlo si voy a poner presentable para redondear así voy a hacer lo siguiente el género tenemos que height 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 él le voy a decir qué transforma es upper case acercase 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 eso quiere decir que le daría un margen de un margin right de 30 en el problema aquí no parece que esté alineado perfecto pues nada este negocio al dar un libro en vivo martín left es de 33 píxeles y martín por wright es de 33 píxeles guardo recargo y comprobó como ahora los elementos del menú se mueven directamente ahora mismo si saco las reglas por tanto voy a sacar aquí las reglas y voy a hacer una regla por aquí veníamos que en principio el menú llegaría hasta el final ahora mismo no llega hecho técnicamente en el photoshop pero supongamos que quisiéramos que llegar pues en este caso lo que haríamos sería algo como por ejemplo lo siguiente heather una link dos puntos la child el último elemento dentro de esa lista y le diría por ejemplo 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 sentado dentro de esa línea bien en este caso tendría ya me 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 promedio no quiero tampoco lo demuestra y quiero ver que ese punto es de 12 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 y vamos a ver si quiero decirle que borde el 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 formar la razón por la que colecciona no es que yo ahora lo voy a aplicar sobre un estilo sobre una etiqueta a la etiqueta a aquí arriba estaba diciendo el color black mientras que le estoy diciendo color rgb existe 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 la etiqueta mandan más que los estilos por clase por tanto por eso tengo que poner importante para asegurarme que esté prevalece 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 g ver un hack 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 ver los 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 voy a 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 había por tanto es poner también que el link del 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 puedo hacer 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 día activo y ahora es cuando lo devuelvo por ejemplo a 50 bien hasta que cuadre perfectamente con la posición del menú otra cosa que voy a decir es que me hace especial gracia el hecho de que haya tenido que usar dos estilos uno para y otro para el class para él y entonces lo que voy a hacer es lo siguiente de 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 black así que no le voy a decir black y mujeres a heredar hereda el color que tenga el superior así que corto aquí pero aquí me los paso a los dos no tengo 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 esto no 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 igual me ha pasado voy a crear 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 lo voy a introducir directamente dentro del banner por tanto le pone este 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 porque las echamos a guardar de nuevo vamos a recargar y ahora si pensamos bien aparece de color naranja simplemente porque tenía la imagen de esta manera así que voy a hacer lo siguiente en él en el banner le voy a decir va con links y ahora me voy a hacer un apartado nuevo por tanto copio pero digo estilos banners este apartado me lo voy a copiar me lo voy a pegar un y así vamos organizando y estructurando un poco la información bien dentro del banner por hemos dicho que voy 100% y ahora al logotipo que estaba por aquí le voy a decir lo siguiente por si suena absoluto y álgebra le voy a decir position relative compatible 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 pero 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 bueno se me ha descuadrado un poco el menú no pasa nada ahora luego lo vuelvo a cuadrar una cosa que necesito ahora dentro del gbb es simular este elemento de navegación dentro de él vamos a verlo está guardando por efe el elemento de mente de navegación del banner si no se abre aquí lo puedo abrir aquí este elemento que incluso lo que hacer también es tirar una línea gris por aquí bueno así que bajo del 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 gordo voy a hacer un divo class diapositiva si quieres para localizarlo mejor voy a llamar un auto diapositivas o puntos diapositiva porque ahora dentro de dentro de ellos no realmente claro esto sería puntos 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 tips ahora previsualiza evidentemente me queda ahí una barra y voy a utilizar un poco valer with 100% margin autor en este caso voy a decir también que banner ing wef 100% martín autor de la imagen vale ahora voy a hacer lo siguiente banner hr y padding 0px él es ya que por defecto tiene padre martín 0 píxeles me voy a fotos o tímido me dio tanta altura como color 1 parece claro que tienen 6 píxeles y el color va a ser este de aquí así que me vuelva a sublime y de vídeo speak se les 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 ya 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 qué exposición relative 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 corregirá su posició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 1 puntos diapositiva el siguiente estilo background white voy a decir lo siguiente marca un 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 voy a entrar con poquito más debes estar lleno voy a decirle que marque un auto para que se me quede en el centro de la maquetación bien ahora lo que voy a hacer es lo siguiente debe decir que border reviews es igual a por ejemplo 20 píxeles bien quizás demasiado 10 píxeles y ahora lo que voy a hacer es que posición relativa top menos once píxeles esto lo que va a hacer es que este elemento se monte allá encima y por tanto si se monta 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 y fijémonos como aparece una pestaña que se come esa parte de la imagen 400 píxeles no sé 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 diapositiva así que cuidado esto es una idea pero estos son clases así usted punto diapositiva de hecho fijar valor 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 que es el mismo que el de abajo prácticamente igual no es exactamente el mismo pero igual es un problema de jpg de la exposición protege en todo caso lo que parece claro es que son puntos así que wef es igual a 15 píxeles height 315 píxeles background es igual al mismo hr bordes rabiosos muy grande para que se hagan redondos bien y ahora les digo que cloud 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 maquetación 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 y ahora decir que no en punto diapositiva 2 puntos jon kyl y le voy a decir que el martín left 20 píxeles carlos y que se queden en el centro 30 píxeles este viene un poco con zumo y al verlo con zoom media store se anotó con los píxeles vale 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 ni con vamos primero acabado maquetación y luego hacemos las interacciones enfocamos el final de la maquetación de la página principal 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 del main me voy a hacer un dip destacados hay un vivero y de últimos proyectos dentro de destacados voy a hacer etiquetas árticas de hecho voy a hacer 3 voy a hacer 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 una h 3 y voy a poner un texto por ejemplo alquiler y venta de carpas y aquí voy a poner pues servicio integral de este fabricación cómo venta como alquiler montaje de carpas a cualquier evento elimina un puntito que por aquí ya está y ahora voy a usar esta plantilla para cortarla no para copiarla y pegarla dos veces más guardo 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 bien esto es estilos destacados me creo secciones para que todo esté más ordenado y ahora digo destacados arctic en cada uno de los artículos va a tener un width del 33% otra cosa que suelo hacer en este caso se me ha olvidado con cliff en este caso los artículos ahora me están frotando cuidado con las flotación es porque luego tenemos problemas de que el futuro 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ículos no nos olvidemos de que si habremos vivido pues tenemos que cerrarlo también y no nos olvidemos también de si podemos ponerse en grillas correctamente me vuelvo a copiar y pegar la plantilla al 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 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 fijé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 20 píxeles 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 dejé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 una y debería ser una clase porque se va a repetir así que no pasaría nada que 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 pero week de 30 píxeles hay 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 y como tenemos los puntos ya ese caso sería una cuestión de ampliar los tanto como hiciera falta e incluso midiendo los puntos originales le decimos también que cloud left 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 margen de raids 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 inglés 0 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 y los destacados y estos últimos proyectos propio luego lanzó 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 del eje y esto sería [Música] proyecto 1 para quitar los espacios esto sería ya proyectos y esto sería proyecto 3 por tanto ahora me voy a ir a últimos proyectos dentro de últimos proyectos voy a maquetar aquí dentro de arte que él directamente copio y pego y ahora dentro de últimos proyectos los iconos los voy a cambiar por img img src y voy a decir que ing proyecto 112 jpg propia pego copia pero eliminó el h3 porque los proyectos no requieren título cómo está la maquetación ahora mismo ahí tenemos los proyectos y ahora tengo que decir lo siguiente proyectos va a ser un blount left proyectos de arte que él realmente a tener un wifi del 33% vamos a ver vamos a verlo técnicamente 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ículo y decimos que alguien de 20 píxeles pero tenemos y ahora la maquetación parece que más fuerte además diría lo siguiente últimos proyectos contiene artículos ing va a tener un wish del 100% por tanto ahora el padre inglés puedo obtener más grande y así puedo ajustar las imágenes todo lo que necesite esto sería 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 bueno 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 lo cual lo voy a hacer manualmente pero creo que antes hemos visto el concepto de color con cuentagotas voy a 220 220 220 22 47 4 724 7.247 bardo recargo es que no se ve mucho he hecho 247 es casi 255 los 20 más oscuro de lo que tocaría pero simplemente para verlo estos últimos proyectos background lo escrito bien inspeccionar los elementos últimos proyectos el problema de este últimos proyectos es que él el parón de la flotación le he puesto fuera 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 les voy a decir deja de 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 qué wyss es igual a 1200 píxeles y martín 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 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 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 ver más cuando las listas y ya está pues lo dejamos así directamente y no sabe cómo podríamos matarlo 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 en php son muy sencillas de trabajar así que crea un nuevo archivo lo voy a guardar como por ejemplo pues bueno dentro de la carpeta php o incluso lo que sea voy a guardar un archivo llamado traducción y 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 inicio no hay mucho misterio con esto lo divertido evidentemente como te puedes imaginar esto es una matriz de dos dimensiones donde en la primera dimensión tenemos el idioma en la segunda dimensión tenemos un identificador que es un identificador propio nuestro inicio equivale de soria 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 las demás acción en castellano pues podemos elegir que el localizador esté en castellano y en francés por ejemplo creo que es actual pero recordarlo de memoria así que yo ahora aquí haría bueno en primer lugar dentro de index php voy a habrá un ph p incluye php traducción pero 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 artes por tanto esto lo estoy forzando pero más adelante lo sacaremos de la cadena del navegador así que yo cuando había aquí inicio lo voy a poner de 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 de idioma idioma eso quiere decir que será vengo aquí un error idioma idioma idioma idioma idioma porque me dices que tengo error en principio en el momento en este 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 de traducir toda francés exactamente entonces voy a decir pues es quienes somos sería quienes somos en fernando quienes somos por ejemplo about us who we are lo que sea y por último bueno lo que realmente se dice igual inicio y servicios copio pego de servicios y servicios de amor ron white widow es que en cada país se dice de manera diferente work obviamente clientes clientes y digo client seconds to mars 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 simplemente para decir que esto quienes somos esto es y servicios esto es clientes y entonces es muy curioso porque fíjate que yo estoy en castellano era todo está cuidado en cábala estoy en inglés estoy en inglés ha dejado en en y todo eso traducido directamente en 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 vamos a convertir este proyecto en dinámico y para convertirlo en dinámico lo primero que tenemos que hacer si vamos a trabajar con php pasarlo de bebé así que voy a cerrar aquí voy a cerrar aquí voy a el proyecto de maquetación simplemente index lo voy a pasar la extensión php utilizar el php a continuación debería tener instalado en mi equipo un servidor web como el zambo así que me aseguro de que en aplicaciones tengo el samp tengo una carpeta hp docs y dentro de la carpeta htd 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 regar mysql y para darme cuenta de esa manera como ya tengo el servidor ejecutándose y para darme cuenta por tanto que si ahora abro una vez y me voy a localhost maquetación pues tengo ahí la web ya está preparada para bien en tamaño mejor así que 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 100% entonces vamos a aplicaciones vamos a ser eso es porque he hecho lo siguiente vamos a ver h y eso es por las encierra pero abiertos con él aplicaciones h 2 index.php abro también el css y eso es por la sencilla razón el index.php aquí donde pone últimos proyectos debería tener un contenedor cojo últimos proyectos y aquí dentro meto un contenedor cuidado seguro de 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 en el contenedor es el que tiene el wifi de 1200 píxeles con un centro automático vale por tanto hemos conseguido nos faltaría ahí darle al futuro un poquito más de caña pero básicamente ahí ya lo tenemos 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 acción’ language y lo pego si quieres incluso voy a decir le echo 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 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 recargo agua 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 pongo directamente en texto pues voy a poner en y voy a poner directamente es para aquí a la derecha en traducir y esto lo voy a meter dentro de por ejemplo la propia misma página en la que este interrogante entró que antes sea donde sea donde estás y voy a decir la pnc es igual a en primer lugar es 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 un gueto langa esto quiere decir pues que señora recargo la página como yo no he especificado ninguna variable de sesión cuidado y también es igual a blanco porque si no nunca existirá a la hora de la decisión bien si 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 idiomas es igual sí no y sep sesión idioma vamos a si no ese exceso de idioma o es cierto que no hice qué la pnc porque aquí básicamente estoy diciendo si alguien te está diciendo gerland mira lo que te dicen vale pues le digo en no lo estaba haciendo correctamente ahora sí bien fijémonos que estoy con es y está en quiénes somos estoy con él y está en inglés lo puedo cambiar y si ahora por ejemplo me 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 al no poner lenguaje ahora pueda poner en castellano porque es por defecto el idioma del navegador pero yo con él lo puedo cambiar y lo puedo cambiar es ahora fíjate que le cambió a no saber qué pasa a mi find index land bien en este caso no está puesto el idioma es decir se está yendo aquí abajo pues no 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 borró el idioma y bueno vamos a verlo en la línea 9 en la línea 9 decir lo siguiente claro qué en ese caso ahora voy a decir esto a ver un segundo igual es claro aquí ha dejado de funcionar pero ponerlo 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 he almacenado en una pequeña estructura de control que se encarga de definir de tu me dices el idioma pues pongo encima 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 si hago esto más pequeño pues es evidente voy a 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 fuentes 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 max guys 1200 y lo que voy a hacer es lo siguiente debe decir que no vamos a ver el wef va a ser del 100% al hablar a cargo y fijémonos cómo cambia el 100% es decir si lo hago así se cambia a 3 pero si hago así automáticamente me ocupa el 100% el 100% de que bueno pues el 100% de el contenedor el problema del contenedor 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 with es del cien por cien vamos a verlo ahora en fijé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 entonces voy a hacer un segundo copio estilos de últimos proyectos y simplemente copia y pega y ahora copia de nuevo porque me cuesta sólo un momento y marks wef entonces en mark swift 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 estas tres hay quizás demasiado grande no lo sé pues igual lo que haría es un week de 400 píxeles 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 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 está claro efectivamente entonces en el banner le voy a decir media screen y me with max with me with 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 después así que hago así y fijémonos como si 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 pues bueno a ver 1 margin-bottom de igual y en 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ú cierro etiqueta copio y pego y diego mini maxis vale el nab le voy a decir que no quiero que flote a la derecha quiero que flote nada de hecho los list voy a hacer lo siguiente black color igual 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 termina aquí max weber luego le he dicho que ya no un 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 si me importa así que el menú voy a decir de momento margin de margin top 50 40 lo que sea píxeles simplemente para empujarlo hacia abajo hasta que averigüe qué pasa con el logotipo 60 tengo ahora este menú vamos a verlo otra vez inspeccionado 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 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 la arreglamos 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 el contador es igual a cero por ejemplo y voy a hacer lo siguiente en lugar de él el height lo que hecho es preparar una clase 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 crea 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 número 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 ritmos 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.php 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 pulso de menú el menú se cierra y de esa manera puedo tener un menú responsivo bastante bonito y bastante agradable y ahora por último vamos a ver el tema del icono del menú y para eso os voy a buscarlo por ahí menú hay con el típico menú que usa ahora todo el mundo para móvil el que impulsó google voy a este demasiado grande probablemente pero el más pequeño fantástico en la imagen aunque no lo parezca por tanto se ve que está con transparencia así que me voy a aplicaciones me voy al sand me voy a archete box me voy a maquetación me voy a img y la guardo como menú directamente voy a hacer lo siguiente y es que en el estilo css solo en el menú móvil al pool les voy a decir qué background es igual a url img menú punto png en este caso porque estilo css está en la carpeta css trabajar a veces la gente no se da cuenta cuando 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] he pasado con el menú y nada aquí está claro pero abierto img menú no las está cogiendo es menor como yo la llamado aplicaciones de los errores se producen siempre por ese tipo de condiciones 1 punto png y mgm bien y probablemente sea un problema probablemente sea un problema de que la imagen no está encontrando porque no quiere encontrar la económico 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 así que afectó a los items incluidos estoy seguro vuelvo a cerrar y vuelvo a recargar por tanto ahora en el pool y vuelvo aquí de hecho creo que no la podía cargar por qué vamos a recortes meses banner no tenemos que encontrarlo estoy dentro de esquilo css 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 g ver una full lee 2 puntos style no tienes que ir a 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 necesito repite es igual a no y voy a necesitar fíjate que no lo parece pero ahí está debe decir también para inglés de 30 píxeles y el problema no tengo con el fondo entonces para acabar de arreglar esto bueno técnicamente no pero eso sería un poco igual un segundo te arranco photoshop simplemente para crear un fondo negro a ese suerte negro grande fantástico técnica de 1400 por 1400 algo así la recuerdo perdón guardo fondo negro punto jpg igual tengo que aplicar el tema de los permisos y ahora bueno factor url menú punto png ya digo como ing fondo negro punto j esto no es llevar esto es url así que la 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 cierro recargo un segundo que vea qué pasa aquí fondo negro punto jpg negro jpg me faltan los dos puntos barro ahora sí vamos a ver tengo el fairchild casi lo que falta es que él tenga el problema ha estado en él en la imagen por tanto le voy a decir esto y la imagen y la vemos que rehacerla en photoshop la habrá un segundo un segundo segundo num imagen en el tamaño de imagen 32 x 30 centímetros en donde estoy a ser píxeles me debería guardar encima por tanto ahora puedo ir a la web y ahora si ya empieza 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 ahora lo que tengo que hacer aunque no nos guste en un principio es decir qué el height del menú es igual al height de uno de los elementos los elementos no ven cuánto tienen pero eso voy a decir pixeles y por tanto height es igual a 60 píxeles vamos a ver esto quizás en la tradición es demasiado para parar 30 así mejor y ahora muy importante atención porque voy a decir overflow es igual a given es decir que solo saber 40 vamos a ajustarlo hasta que se vea el menú con lo cual ahora necesitamos 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 por tanto voy a descargar jquery 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 htc me voy a maquetación voy a crear una nueva carpeta llamada js js y dentro de js voy a copiar tanto y como un archivo nuevo que voy a hacer yo este archivo lo voy a guardar como 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 es lo mismo que llamar a la función de inicio allí 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 jalkh 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 log 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é jquery js está adentro para s jquery js punto j s vamos a verlo si hace falta en algunas cuantas veces vamos a inspeccionar vamos a ver incluso de qué 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 da ningún tipo de problema pero en maxis te lo puede dar entonces ahora sí de hecho cuando pincho aquí correctamente y por tanto aparece la opción de hasta aquí así que simplemente lo que tendría en este caso es un menú de navegación dónde 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

Deja una respuesta

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