Curso Maquetación Tienda Online HTML 5

vamos a empezar un nuevo proyecto y para empezar un nuevo proyecto voy a crear una nueva carpeta llamada tienda online voy a intentar que no hayan no haya espacio entre la palabra tienda y la palabra online vamos a ilustrar la creación completa de un proyecto utilizando esta este motivo utilizando una tienda online este es un proyecto práctico con el que lo que vamos a hacer es mostrar los conocimientos adquiridos y por tanto ya no es estrictamente necesario de tener los etiqueta por etiqueta sino que ahora más que la teoría del propio lenguaje lo que nos interesa es la práctica de cómo gestionar un proyecto completo y complejo lo primero que voy a hacer al empezar cualquier proyecto evidentemente es crear un documento nuevo y llamarlo index.hr ml a partir de aquí sabemos que vamos a necesitar diferentes carpetas para trabajar con el proyecto por tanto por ejemplo voy a crear una carpeta llamada estilo voy a crear otra carpeta llamada imágenes y voy a crear otra carpeta llamada photo puedo llamarlo foto puedo llamarlo o puedo llamarlo fotografías lo que queramos la idea de esta carpeta es un poco separar lo que va a ser las imágenes propias de la tienda online a las imágenes de los productos que voy a vender por tanto en este caso según la propuesta que os estoy haciendo ahora dentro de la carpeta imágenes llamado imágenes llamado img llamado como queráis pero ahí irían las imágenes correspondientes a la propia maquetación y dentro de la carpeta foto ahí irían las fotografías de los productos que se van a vender en esta tienda online tenemos por tanto un archivo llamado index html pero sabemos que vamos a necesitar una serie de archivos secundarios para nuestro proyecto de tienda online el index punto html sería la página principal de la tienda pero a continuación lo que haremos es crear una página llamada lista de productos punto html vamos a crear también una página nueva llamada detalle producto html digamos que detalle producto es la página donde se alistarían todos los productos de la tienda y perdón listado productos es la página donde se alistarían todos nosotros de la tienda detalle producto es la página que vemos cuando pinchamos en un producto concreto y lo que queremos hacer es ver más información de ese producto a partir de ahí tendríamos las páginas del proceso de compra el proceso de compra dentro de una tienda online se basa en unas pocas páginas cuantas menos mejor donde en primer lugar especificamos el validar carrito punto html creamos también un nuevo documento de texto llamado datos personales y vamos a finalizar para tampoco hacerlo demasiado complejo al principio en una página llamada compra finalizada punto html este sería el núcleo de la tienda el núcleo de la tienda por tanto estaría compuesto por la página principal el listado de productos veo un producto que me interesa y a partir de ahí válido el carrito de compra introduzco mis otros personales y finalizó la compra no podemos olvidar que van a existir una serie de secciones inevitables en la tienda como por ejemplo acerca de una página de información sobre la tienda online acerca de punto html y por ejemplo también va a existir pues una página llamada por ejemplo un contacto punto html para que la gente pueda enviar correos pidiendo información con esto puede que la estructura de nuestra tienda online no esté acabada de hecho muy probablemente no está acabado pero tenemos suficiente información como para poder empezar a trabajar aparte desde este punto de vista voy a empezar a introducir conceptos de usabilidad antes de diseñar una tienda online antes de meternos a crear una tienda online tenemos que pensar un poco cómo es una tienda online qué aspecto tiene una tienda online ya que hasta ahora hemos hecho un proyecto más enfocado hacia una página personal y una tienda online no tiene por qué hablar exactamente el mismo lenguaje que una página personal así que en este caso voy a hacer lo siguiente voy a abrir un navegador y lo que voy a hacer es buscar algo así como online shop para simplemente en imágenes buscar qué aspecto vamos a ver el commerce pues qué aspecto tiene una tienda online empiezan a aparecer me empiezan a parecer iconos esto es otra cosa entonces en las tiendas online fijaos que lo primero que tenemos es un poco este tipo de maquetación este tipo de maquetación donde siempre vamos a tener por supuesto una imagen corporativa en la parte de arriba vamos a tener un menú de navegación no me gusta este especialmente está hecho con pestañas pero bueno es un menú al fin y al cabo vamos a tener un buscador los buscadores son muy importantes centros de la tienda online y a partir de aquí pues suele pasar que tenemos un banner con los productos más destacados y a partir de aquí una serie de artículos donde podremos encontrar los productos que venden la tienda cada uno evidentemente con su precio incluso con su botón de ebay estos son los elementos más destacados dentro de una tienda y por tanto son los elementos que vamos a replicar así que voy a abrir un editor web y voy a empezar por el archivo principal voy a empezar por el archivo index.html así que cargo el archivo index.hr ml cargo el archivo index.html y vamos a empezar a trabajar aunque sea un proyecto diferente del que hemos hecho hasta ahora queramos o no la estructura del documento siempre va a ser más o menos la misma siempre va a haber una serie de elementos que van a ser iguales por ejemplo en este caso vamos a igualmente crear un dock type recordemos que el doctor es html vamos a tener una etiqueta html vamos a tener una etiqueta head vamos a tener una etiqueta bold y esto siempre va a ser lo mínimo dentro de una web además dentro de la etiqueta web siempre tenemos que tener una etiqueta llamada title una etiqueta de título llamada la tienda de jose vicente y también recordamos que debemos tener una etiqueta llamada meta donde voy a poner charles set es igual a efe 8 para que me reconozca perfectamente para que me reconozca correctamente los acentos las n si cualquier elemento que pueda introducir ahora dentro del body voy a crear la estructura el esquema básico de prácticamente cualquier página web a día de hoy yo os diría que lo primero que vamos a hacer es crear un día que va a tener el id contenedor por tanto bueno podemos pensar que hasta ahora el proyecto se parece un poco a lo que ya conocemos y de hecho se va a continuar padeciendo porque dentro del contenedor voy a crear un heaven voy a crear una etiqueta main voy a crear una etiqueta principal y voy a crear una etiqueta footer voy a crear un pie de página y hago esto porque básicamente y no es porque lo diga yo sino que lo podemos comprobar muy fácilmente en google por ejemplo si busco commerce web si busco qué aspecto tiene una tienda online pues podré comprobar cómo todas fijémonos en la pantalla todas tienen un bloque central y prácticamente todas tienen una cabecera un contenido principal y un pie de página mira estoy viendo esta de sony y más o menos me ha gustado bastante por tanto voy a darle a ver esta página y lo que voy a hacer es basar me un poco en este diseño para diseñar mi tienda online es un diseño bastante sobrio pero que pienso que más o menos salvo el botón de compra que esto es lo que más llamativo tiene que ser una tienda online pero pienso que el diseño es bastante elegante y ahora lo que voy a hacer es dentro de este heaven voy a escribir por una parte un título h1 por otra parte un título h 2 el título h1 será la tienda de jose vicente y en el título h 2 pondría un pequeño resumen de qué productos vendo pues por ejemplo en los cursos online así que guardo recargo y tengo por aquí la tienda de jose vicente donde vendo cursos online recordad que estamos empezando a trabajar con html puro y duro no estamos trabajando de momento con css por tanto me da igual que estéticamente la tienda no sea nada del otro mundo ahora además me gustaría que dentro del header hubiera un logotipo así que para cargar un logotipo lo que voy a hacer voy a hacer algo muy sencillo mirando un segundo voy a ir a google imágenes y simplemente voy a poner luego y en google imágenes voy a cargar un logotipo a ver tampoco voy a cogerle batman pero no sé voy a este este logotipo voy a el de mediawiki en definitiva un nuevo tipo temporal cuidado con esta imagen porque es una imagen svg y aunque puedo cargar imágenes svg tampoco es demasiado recomendable al principio no sé qué este por ejemplo guardo esta imagen y me voy a guardar esta imagen como luego cuidado atención voy a meter esta imagen dentro del proyecto tienda online dentro de imágenes porque esta imagen no es un producto que voy a vender esta imagen es un logotipo y como logotipo que es es parte de la tienda online no es parte de los productos así que la he metido en la carpeta de imágenes no no la he metido en la carpeta fotografía y esto lo he hecho para ahora poner un img src dentro de imágenes cargo luego punto png cuidado en este caso porque probablemente ese luego es muy grande así que hasta que los utilice con css voy a poner wifi de 100 recordamos también si queremos hacer las cosas bien desde el principio que inevitablemente tenemos que poner un texto alternativo llamado alt logo de la tienda online y por tanto tenemos ya la estructura correcta ahora dentro del heather sin salirnos del header voy a crear un menú de navegación por eso creo una etiqueta nada creó una lista no ordenada creó un vélez y dentro de él huele voy a crear una serie de list voy a crear una serie de elementos de lista dentro de estos leads voy a hacer lo siguiente en primer lugar siempre tendremos inicio y ya sabemos que los menús de lista pues suelen tener una cosa que es un hipervínculo el hipervínculo es realmente el que nos va a llevar por ejemplo a index.html por supuesto vamos a copiar para hacer una sección que será productos otra sección que será sobre nosotros o nosotros y de momento otra sección llamada contacto cuidado porque las tiendas online pueden tener perfectamente dos menús de navegación así que mirad porque no puedo copiar este menú de navegación y hacerme otro distinto otro diferente este menú de navegación tendría la opción de iniciar sesión carrito y poco más vamos a dejarlo así simplemente lo que quiero demostraros es un caso en el que no tiene por qué haber un solo menú de navegación ahora si hay dos menús de navegación hay dos etiquetas now y si hay dos etiquetas no voy a tener más adelante un problema para maquetar esas etiquetas por eso lo que quiero hacer es identificarlas nava y de una idea o una clase se pueden poner a cualquier etiqueta y digo nada menú secundario y este es el menú primario para luego en css poder identificar cada uno de los menús de navegación y poder nombrarlos correctamente además encuentro otra cosa y es que probablemente el pack el paquete de imagen logotipo h1 título principal y h2 título secundario necesito llevarme los en grupo necesito que formen una unidad por eso voy a empezar a usar masivamente la etiqueta the beaver pack logotipo porque ahora está etiquetado fijaos que lo que está haciendo es englobar la etiqueta dib y deepak logotipo engloba a la imagen del logotipo engloba a la h1 y engloba a laxe 2 y finaliza en este punto lo más frustrante probablemente va a ser que si recargo en la pantalla todavía no veo nada de la complejidad de estas etiquetas no veo qué hace y deepak logotipo no veo que hace nada y de secundario simplemente veo logotipo dos títulos y los menús de navegación pero evidentemente más adelante veremos como todo esto lo hacemos por una razón específica que va a ser en este caso el crear una cabecera compleja de una tienda online a continuación vamos a entrar a maquetar la etiqueta principal y dentro de la etiqueta principal pondríamos lo esencial que va dentro de la página principal de la tienda online analicemos un poco analizamos un poco y vemos que tendríamos por ejemplo un producto destacado lo que sería un banner un par de productos por aquí también destacados y por último un listado de productos bastante extenso de hecho solemos también tener por aquí un mensaje destacado podríamos clonar prácticamente cualquier diseño lo que voy a hacer en este caso es basarme en este simplemente porque es un diseño más o menos efectivo y me permite aprender un poco de todo ‘flotación banner aplicaremos banner animado explotaciones con artículos ya se así que a una cosa muy importante que se me olvidaba dentro del menú de navegación el buscador fijaos como conviene tener un diseño por ahí en la pantalla para comprobar en este caso que en cualquier tienda tengo un buscador donde pongo el buscador por el buscador podría ser un elemento más d el menú en este caso el buscador no va a ser un link que contiene una etiqueta a si no va a ser un link que contiene un input type text con un place holder llamado buscar fijaos cómo es algo un poco extraño porque hasta ahora habíamos usado menús de navegación y habíamos creado formularios pero en este caso lo que estoy haciendo es mezclar los dos conceptos estoy creando un campo de un formulario dentro de un menú de navegación es lo que hará luego veréis que más adelante se va a convertir en la parte visual de un buscador continúa por tanto y os decía que mira tengo que hablar un poco lo que estoy viendo en la pantalla miradme diríamos que esto esto de aquí atención es el main es la tarjeta principal lo estoy marcando de rojo pues lo que voy a hacer en primer lugar es crear un contenedor para el banner luego crearé un destacado y luego crear un listado de productos ahora una vez que estoy dentro del banner voy a crear un banner principal ya vemos los banner uno luego banner dos y banner tres y luego cada uno de los productos evidentemente será un articulo diferente en un listado que tendrá que ir flotando hacia la izquierda así que antes de empezar a escribir conviene que o bien imprimamos esta página y empecemos a tener un poco de rotulador o que hagamos lo que sea pero que analicemos un poco visualmente qué es lo que voy a querer conseguir ya tengo el rojo el rojo es la etiqueta main la etiqueta principal ahora voy a tener el verde en el verde fijaos que hay tres zonas la zona de banners la zona de destacado y la zona de artículos por tanto haré lo siguiente dentro de la etiqueta main voy a hacer tres dips o secciones porque también puedo usar la etiqueta sexo y digo section y de banners section y b destacado y section y ve artículos que acabo de hacer simplemente dividir la zona principal en tres secciones diferentes continúo dentro de banners y ahora recordamos que tenía tres banners uno grande y dos pequeños por tanto ahora dibujo vive y ve banner 1 y d manera 2 de hecho podría copiar el 1 y renombrar lo y ganar 3 ahora dentro de destacado tenía simplemente un mensaje pues mensaje en el que informó a los usuarios de las ofertas en el portal y por último los artículos en cuanto a los artículos voy a usar la etiqueta artículo para nombrar para enumerar a cada uno de los artículos que voy a poder encontrar en esa zona de destacados cada artículo tendría lo siguiente cada artículo tendría una imagen en este caso son más categorías que qué productos que se pueden comprar vamos a imaginarnos que esos son productos que se pueden comprar por tanto yo diría que cada artículo que voy a comprar dejadme que haga un poco de hueco para que me veáis ahí bien cada artículo que voy a comprar tendría una imagen ahora pondremos la imagen alt imagen del producto un título voy a poner un h 4 en nombre del producto un pequeño texto de parágrafo qué es alguna frase descriptiva el producto y una etiqueta html que probablemente no hemos visto hasta ahora que es la etiqueta button la etiqueta button que va a tener por ejemplo el precio del producto y quizás algún mensaje como comprar fijaos que la etiqueta button se abre y se cierra y dentro de ella contiene lo que realmente contendrá porque realmente contendrá el botón así que damos cuenta cómo tengo imagen del producto de momento está vacía porque no enlazado a ninguna imagen tengo un texto descriptivo tengo alguna frase descriptiva y tengo un botón para comprar ya sabemos que esto que acabo de dibujar es simplemente una plantilla así que lo que voy a hacer ahora es seleccionan esta plantilla y duplicarla voy a poner unos cuantos artículos simplemente para tener allí un listado suficientemente grande he seleccionado esta plantilla he seleccionado desde arte y que la hasta artículo y simplemente he copiado he empezado a pegar para tener pues un listado de productos más o menos grande para luego evidentemente en css poder maquetar cómodamente lo que vamos a hacer ahora va a ser simplemente buscar una serie de imágenes para poder empezar a poner en nuestra tienda las imágenes corresponderían a los productos que vamos a vender así que simplemente lo que quiero que hagáis es y pensar sobre qué queréis que vaya a vuestra tienda y lo que vamos a hacer en este caso es buscar productos relación por tanto en mi caso voy a buscar html5 logo como yo vendo cursos pues voy a buscar los logos de los cursos voy a poner square para que todo lo que me baje sean logotipos cuadrados en este caso lo que voy a hacer es poner los logotipos dentro de la carpeta llamada foto así que he buscado html5 luego square php luego square y vamos buscando imágenes importante el que veáis que las imágenes las estoy guardando dentro de la carpeta foto no dentro de la carpeta de imágenes por ejemplo wordpress luego cuadrado por ejemplo jamás y luego al cuadrado voy buscando por tanto las imágenes que corresponden a los productos que sea que vais a vender en la pierna mi caso este logotipo es igual voy a buscar un lado con cuidado en este caso porque dentro de lo que pueda tengo que buscar siempre el logotipo de cuadrado no es que lo tenga que buscar siempre es que depende un poco de qué es lo que quiera hacer tiene un poco de cómo quiera maquetar la tienda online vamos blender 3 de lugo square bien en este caso tengo que buscar un logo que sea interesante por ejemplo s y así con cada uno de los elementos de la web voy a poner por ejemplo también mysql por ejemplo este logotipo pues por ejemplo voy a este y por tanto ahora podréis comprobar como dentro del proyecto por una parte en imágenes tengo lo que sería el logotipo de la tienda no es una imagen de producto y por otra parte dentro de foto tendría las fotografías de los productos que realmente teóricamente se venderían en la tienda que en este caso voy a hacer lo siguiente en cada uno de los artículos voy a poner la ruta completa y correcta a la imagen foto voy a sacarme la carpeta el nombre del producto el curso de blender en esta imagen foto html logo curso de html5 en esta imagen foto el logotipo dejaba el curso de hama foto es un halago curso de joomla y veo que me va a faltar un artículo que tengo 8 y puedo jugar [Música] bastante con los artículos mysql php y wordpress tengo ahí por tanto también un curso de javascript el curso de mysql un curso de php el curso de wordpress para qué vamos a ver mira aquí me he dejado 1 en que llenar pues fuera así cuando guardo y regó fijaos como bueno me salen los logos gigantes eso no me preocupa mucho porque ahora luego con css lo acabaremos de maquetar vamos a tener un poquito de todo dentro de esta dentro de esta sección vamos a crear una etiqueta a saber donde dentro de gas ayer voy a poner por ejemplo tres productos destacados la idea de us air recordad que es crear una etiqueta que me permite tener contenido tangencial que me permita poner contenido relacionado pues si te ha gustado este producto tal vez te interesen estos productos de aquí que house que es una etiqueta shine que contiene tres productos que están copiados de los de arriba no tenéis que volver a escribirlos luego cuidado porque en el menú secundario también hay una cosa que se me ha olvidado que es muy importante que es los enlaces a las redes sociales así que recordamos que un enlace a una red social era por una parte un link con un a hr por ejemplo va a llevar a facebook facebook.com barra carratalá y dentro del ã tenemos una imagen alq que va a ser luego social así que esto va a ser http es.facebook.com favicon punto y corre cordada ese truco para poder poner iconos de redes sociales los fijaos que es complejo vamos a analizar un poco lo que tenemos hasta ahora porque tenemos un boli que tiene un dip que tiene un g ver que tiene un app que tiene un el que tiene un link que tiene un a que tiene un eje o sea que al final la jerarquía entre los archivos pues es más o menos compleja pero pues es un poco lo que hay así que os lo voy a poner un poco con espacios solo estelí para que lo veáis claramente para que veáis que es un link compuesto por un ah y por un ing en este caso es el icono social de facebook voy a duplicarlo un par de veces por ejemplo para tener el logotipo de twitter para poner el logotipo de youtube y para poner el logotipo de quizás linkedin si ahora guardo y recargo podréis comprobar como al recargar el menú secundario un momento que ahora están cargando pero no no estaba el madre mía siempre es fácil con siempre es favicon y lo que cambia es la url twiter en youtube y linkedin así que guardo recargo y ahora sí y tenemos allí los botones de las principales redes sociales a las que llevan el menú de esta web como veréis es un link que lleva al enlace correspondiente de cada red social en mi caso lo que he hecho es simplemente dirigir a la de facebook y copiar y pegar porque ya quiere buscar el resto de redes sociales y luego dentro de la lo que he puesto es una imagen que contiene el logotipo concreto de esa red social quiero decir por ejemplo que si estoy hablando de twitter pues tendría que ir a mi cuenta de twitter y buscar mi cuenta así que al entrar en twitter pues lo que es me voy a inicio per perfil y ahora copiar y a la url de twitter y la pegaría aquí para que el botón de facebook me lleve a facebook para que el botón de twitter me lleve a twitter y así con cada una de las redes sociales que en un momento dado tengáis y ahora que me ha quedado esto ahora que he creado este contenido os voy a decir que en la formación digamos cuando estás trabajando con creación de web a nivel docente separas mucho lo que es html css para que primero entendáis qué es html y luego entendáis que es css pero una vez que estás haciendo un proyecto ya más o menos real un proyecto que ya no es tanto de aprendizaje sino que lo que quieres aprender ahora es cómo gestionar un proyecto real os diré que se puede ir mezclando sin ningún problema css html por ejemplo en este caso yo tengo la página principal de la tienda online y antes de ponerme a crear el resto de páginas html del tienda online lo que quiero es maquetar esta página incluso voy a ir interactuando entre el html y css todo el rato porque antes de crear el resto de la tienda online quiero asegurarme que esta página está bien cuadrada así que qué voy a hacer pues mira me voy a ir a mi carpeta de tienda online me he creado una carpeta específicamente para este fin llamada estilo y dentro de estilo voy a crear un documento de texto llamado estilo punto css de paso también llegado el momento hablaremos de estilo para teléfonos móviles por supuesto estilo css lo voy a cargar dentro de él edit y ahora lo que tengo que hacer es conectar el archivo index.html con el archivo estilo css para ello recordamos que voy a hacer una etiqueta llamada link es igual a esta el sit h ref es igual a entrar dentro de la carpeta css y cargar el archivo estilo css para asegurarnos por tanto que estamos por una parte vinculando el archivo correcto y por otra parte estamos llamando a la carpeta correcta css y cargando el nombre de archivo correcto en este caso estilo punto css no se tiene por qué llamar estilo ya sabéis que siempre que pongo algo en castellano es porque se puede cambiar pero siempre que pongo algo en inglés es que no se puede cambiar así que una vez que tenemos esa etiqueta copiada lo que voy a hacer simplemente va a ser entrar dentro del archivo estilo css y empezar a escribir código bien voy a entrar dentro de estilo css y como os decía mira la atención voy a intentar un poco replicar intentar un poco buscar este diseño que tiene este diseño si os fijáis este diseño lo que tiene es por una parte por aquí un bloque negro y por otra parte un degradado que baja hacia abajo un degradado que viaja hacia abajo como voy a hacer esto bueno pues para esto lo que voy a hacer es buscar ese degradado dentro del buscador de imágenes de google o lo que voy a hacer es crear me lo yo mismo para crear me lo yo mismo lo que usaría es un programa de edición de imágenes tal como photoshop o tal como gimp entonces mirad lo que voy a hacer la atención voy a abrir un programa de edición de imágenes en este caso estoy abriendo el gimp y lo que voy a hacer es no dibujar todo el fondo sino dibujar un elemento repetible del fondo miradme atención yo veo que este fondo realmente se repite en horizontal así que en lugar de tener que dibujar toda la anchura realmente solo tengo que dibujar un bloque pero qué le pasa a este fondo en vertical en vertical no se repite a que no entonces como no se repite en vertical ahora veréis lo que voy a hacer primero espero a que arranque el game que en este caso en primeras sesiones le cuesta bastante y una vez que lo tenga voy a hacer una imagen más bien alargada que contendrá como una especie de baldosa que contendrá como un módulo mira un módulo que tendrá este fondo negro y tendrá este degradado no sé si lo veis en la pantalla que hay un degradado desde gris hasta blanco siendo el fondo de la pantalla luego blanco atención mirarme doy a vamos a ver voy a entrar el gimp voy a modo de la única ya que voy a pintar voy a crear por tanto una imagen nueva no va a ser una imagen demasiado grande en ancho por ejemplo voy a poner 32 píxeles porque esa imagen se va a repetir en horizontal pero quiero que sea una imagen más bien larga en y por ejemplo 600 por tanto me quedo una imagen de 32 x 600 daos cuenta cómo es una imagen más bien larga y en esa imagen voy a hacer lo siguiente mirad en primer lugar aquí arriba voy a poner una cabecera negra igual luego editó la imagen relleno la cabecera de color negro y ahora en la parte de abajo de la imagen voy a hacer un degradado para hacer un degradado simplemente atención lo que voy a hacer es un degradado desde gris hasta blanco fijaos como lo que tengo es una imagen así o bien la hago o bien la buscó en internet o bien lo que sea porque en internet también degradados como este si ponéis web gradient background se puede encontrar fijaos que esta no es una imagen de producto esta es una imagen propia de la tienda por eso ahora me voy a exportar la imagen y me la voy a guardar dentro de escritorio dentro de tienda online dentro de imágenes no foto y me la voy a guardar con el nombre de degradado degradado punto png porque ahora mira lo que voy a hacer es lo siguiente lo que voy a hacer es simplemente decir que el body va a tener las siguientes propiedades primero quiero que toda la web tenga un margen de 0 píxeles y un para bing de 0 píxeles a continuación lo que voy a hacer va a ser simplemente decir que el fondo family va a ser sans serif para que todo para que todo toda la web tenga letra sin decoraciones y a continuación lo que voy a hacer es simplemente decir background es igual a url cuidado y esto es un poco lo peor dos puntos barra imágenes fondo png porque he puesto dos puntos barra mirad he puesto dos puntos barra porque el estilo está en la carpeta estilo y cuidado eso quiere decir que está mal mal enlazado tiene que ser estilo carpeta estilo archivo estilo punto css mirad desde la carpeta estilo tengo que bajar una carpeta entrar dentro de imágenes y ahí cargar el degradado por eso he puesto dos puntos barra dos puntos barra equivale a decir baja una carpeta luego entra en imágenes y luego selecciona la imagen de audio punto png si hago esto vamos a verlo podréis comprobar background background le falta un acá podréis comprobar como por una parte aparece lo que quiero pero por otra parte no el degradado se me repite en horizontal de tal forma que no me hace falta repetirlo yo manualmente pero el degradado se me repite en vertical al mirar como se repite en vertical y yo no quiero que se repita en vertical por eso sabemos que hay una opción que se llama background repeat donde voy a decir repeat guión x repite guión x quiere decir que ese degradado voy a hacer la web o un poco más pequeña con zoom s degradador se debe repetir solo en horizontal no se debe repetir en vertical ahora quiero que el propio contenedor mira el propio contenedor tenga por ejemplo una anchura de 800 píxeles por tanto with 800 píxeles y voy a hacer que tenga un margin auto para que esté centrado y así que ahora mismo no lo veis voy a poner una cosa voy a poner mira algo como por ejemplo una cosa que luego quitaré pero un borde de un píxel solid white atención simplemente pongo este borde ese borde de un píxel para que veáis por dónde viene el contenedor para el control que va a ser eso de ahí y luego lo quitaré evidentemente bueno no no en este caso lo que estoy haciendo es que estoy con un zoom al 67% es que es esa web realmente se vería así simplemente lo que estoy haciendo es ver la más pequeña para que cuando la pongo aquí anidada todavía podéis ver algo porque si no se ve demasiado grande y luego si quieres voy a poner un comentario de fs s diciendo luego quitaré esto simplemente para que lo veáis no lo parece pero allí hay un logotipo y ahí hay un 1 y un 2 para aquí están h1 h2 así que ahora voy a estilizar el h1 h2 de la siguiente manera h1 h2 van a tener las siguientes propiedades van a tener un margen de 0 píxeles un padding de 0 píxeles y van a tener un color white para tener un color blanco para que se vean fijaos para que se vean en ese fondo negro ahora me gustaría que el texto estuviera a la derecha del logotipo que es algo bastante frecuente que es lo que tengo que hacer una flotación así que en primer lugar lo que tengo que hacer es localizar exactamente cómo se llama ese logotipo y si no puedo localizarlo si es necesario lo que haré es ponerle un identificador así que me voy a index.hu tml y veo que eso es pack logotipo punto img por tanto para logotipo espacio img es decir la imagen que está dentro del pack logotipo quiero que tenga por ejemplo un wish de 50 píxeles un high de 50 píxeles y sobre todo quiero que flote a la izquierda que flote a la izquierda mirad lo que va a hacer es que el logotipo se lleve al texto a la derecha ahora juego un poco con el tamaño de la imagen y ahí lo tenemos me voy a seguir jugando también tengo que jugar un poco con el tamaño del texto para especificar si quizás quiero el texto más grande más pequeño o así voy a jugar en este caso con 60 y con 60 recordamos que también quería en el contenedor un poco de padding para crear un poco de margen interior una cosa así lo que haré ahora por tanto una vez que tengo el logotipo una vez que tengo tanto el logotipo como el texto voy a maquetar en los dos menús de navegación para empezar el menú de navegación secundario y para continuar el menú de navegación primario mucho cuidado en este caso porque incluso el logotipo parece que le falta un poco de espacio parece que el texto está demasiado encima del logotipo quiero que respire un poco menos mal que para eso tengo el margin y el padding para con margin separar así que le digo por ejemplo margin right margen a la derecha va a ser de 10 píxeles y así fijaos como he conseguido separar un poco el texto del logotipo y que me quede algo más respirado continúa ahora utilizando el menú de la derecha recordamos que el menú de la derecha es un menú que tiene el ide secundario así que este hizo que todo aquello que sea secundario va a tener los siguientes elementos secundario estacional esto quiere decir el nap que está a la dentro del secundario va a ser un list style type no sin tipo de lista un padding 0px él es un margin de cero píxeles y ahora digo que secundario nada el claro es secundario un link va a ser cloud right si hago esto podréis comprobar vamos a verlo como los elementos deberían estar flotando a la derecha y de secundario secundario el bien no lo ha seleccionado correctamente claro porque secundario ya es un ave así que quitó el nabo secundario y ahí los tenemos fijaos maquetados a la derecha cuidado en este caso porque me quedan demasiado bajos no quiero que queden tan bajos así que el secundario le voy a decir algo como por ejemplo position absolute quiero que la posición del secundario sea simplemente absoluta porque la posición del contenedor va a ser relativa de esa manera puedo hacer que sencillamente secundario este aquí primero voy a ver secundario que tiene vamos a verlo ay perfecto y luego voy a decir que es secundario va a ser raid 0 píxeles top 0 píxeles eso lo que va a hacer es que el menú secundario se me coloque ahí arriba a la derecha para ello por tanto como podéis ver lo que he hecho es poner estas tres líneas de código donde he dicho que primero la posición es absoluta y segundo absoluta quiere decir que sea mover con bastante libertad y segundo va a estar arriba a la derecha diciendo raid 0 píxeles top 0 píxeles del margen derecho quiero que estés a 0 píxeles del margen superior quiero que estés también a 0 píxeles lo único que me quedaría por maquetar es decir algo así como secundario el link donde pondría algo como text decoration none color white para que los hiperenlaces de carrito e iniciar sesión como veis ahí pues estén de color blanco y sin decoración están un poco machacándose entre sí no tienen espacio y por eso les voy a decir martín 4 píxeles para que respiren un poco y se separen entre sí veo esto al tamaño que le correspondería tendría más o menos esto tengo para empezar un logotipo y de momento tengo un menú secundario aquí arriba donde tengo los enlaces a las redes sociales carrito e iniciar sesión quizás está demasiado pegado arriba a la derecha por eso lo que voy a hacer sencillamente va a ser decir que en lugar de ride y top a 0 píxeles lo quiero a 10 píxeles para que respire un poco más y para que no esté tan alineado hacia arriba una vez más os repito que tengo la línea de esa blanca de momento ya sé que queda fea ahora luego la quitaré pero me está sirviendo para delimitar cuál es el contenedor ficticio el contenedor imaginario que va a contener a nuestra web voy a maquetar ahora el menú principal este es digamos el más difícil es también el más bonito dejadme que ponga antes una cosa las imágenes me están molestando un poco las quiero todas al 100% y ahora luego veremos cómo las maqueta para que no se me salgan entonces en cuanto al menú principal voy a hacer lo siguiente principal porque creo recordar mirad que le he puesto un y de no principal no primario le he puesto un y de nada y de primario y por tanto aquí en css pongo primario y ahora escribo lo siguiente entonces ahora le digo primario de momento nada déjame que ponga unos cuantos enter para que lo veáis centrado en la pantalla primario va a ser lista está type none para quitarme los bullets para quitarme los puntitos y martín pero píxeles padding 0px el esc ahora primario le voy a decir wish 100% y chrome white vamos a verlo ahí fijaos cómo tengo el menú de navegación y ahora voy a hacer algo como lo siguiente primario el link cloud lift flota a la izquierda cuidado porque mirada me ha desaparecido le he dicho flota a la izquierda de hecho flota a la izquierda pero me ha desaparecido y esto es por el sencillo truco de las flotación es entonces al acabar el menú primario tengo que poner este vive que ya sabéis que siempre tenemos que poner para ahorrarnos problemas de flotación es que es el clear boat así que ahora voy entonces ahora fijaos como después de poner este dive está el killer voz los elementos van a empezar a flotar correctamente ya tengo por ahí el menú de navegación para acabar de estilizar el menú de navegación simplemente voy a poner algo como primario quiero maquetar los enlaces que están dentro del menú las etiquetas que están del menú de poner text decoration es igual a none y un color por ejemplo de momento black ahora dentro del menú voy a decir que quiero bueno un ping de 10 píxeles para que el menú respire un poco más fíjate como el menú lo tengo muy pegado arriba quiero tirarlo un poco hacia abajo así que en este caso lo que voy a hacer es simplemente aquí en el menú primario poner un margin top de por ejemplo 20 píxeles y de hecho lo quiero bajar prácticamente hasta el límite así que lo voy bajando poco a poco hasta que esté justo en el punto en el que quiero vamos a ver mensaje de los descuentos bueno ahora iremos a los descuentos en los elementos en primario un link lo que voy a hacer es también darles un poco de margen por ejemplo 10 píxeles para que se separen un poco entre sí y damos cuenta como eso ya empieza a tener mucho mejor aspecto empieza a parecer mucho mejor un menú de navegación si ahora miro por aquí bueno pues fijaos que tengo un menú un poco gris para mirar lo que voy a hacer lo voy a quitar un poco parecido atención que voy grande me voy a incluso número voy a descargar bueno construir voy a hacer un pequeño gradiente un gradiente de 64 x 64 por ejemplo miradme ahora me hago un gradiente así al revés así me lo guardo como gradiente menú y ahora dentro de la propia web me lo voy a cargar dentro de ese menú como lo hago pues tan sencillo como background url dos puntos para bajar de directorio imágenes y como la llamado porque tengo el precio no me acuerdo gradiente menú gradiente menú punto png si ahora os fijáis mirad tengo el menú con un gradiente y ahora puedo rematarlo diciendo border 2 pixeles solid white y que tenga una pequeña sombra arrojada boxeador de 0 píxeles 5 píxeles 10 píxeles color negro semi transparente 0.00 0.4 y así veréis mirad qué elegante que queda solo me queda un pequeño borde reviews 5 píxeles con esto por tanto una vez más yo insisto siempre mira de este menú ahora qué elegante que me queda que cuando veáis un menú en lista no os preocupéis no os asustéis porque realmente luego más adelante con css lo podemos transformar en lo que queramos ahora que tengo más o menos el menú adelantado tengo la cabecera tengo los menús permitirme ya que quite este pequeño borde de color blanco que me está molestando un poco y estaba claro que lo teníamos para crear ahí es un poco la separación que vamos a utilizar voy a poner 0 píxeles solid white quizás más adelante lo recuperé era lo que voy a hacer es maquetar esta sección de banners de aquí arriba donde voy a crear tres van a resumir a la atención voy a crear por una parte este banner de aquí banner que igualó para el 60 por ciento y luego dos valores pequeños que van a ocupar aproximadamente el 40 por ciento de anchura quiero decir entonces lo que voy a hacer por tanto es ahora en los banners que por cierto están vacíos están completamente vacíos me voy a ir al estilo css y voy a escribir lo siguiente manera 1 banner 2 banner 3 así que al hacer esto por tanto vamos a poder hacer lo siguiente al hacer esto vamos a vamos a verlo vamos a hacer lo siguiente en primer lugar quiero tener un elemento llamado banners tengo una sección con iu de banners así que valerse la sección banners va a tener un wifi del 100% y va a tener un hype por ejemplo de 500 píxeles y para que lo veáis os va a sonar a broma pero la voy a pintar de rosa la de pintar de rosa simplemente para que veáis claramente en la pantalla el hueco que va a ocupar quizás 500 píxeles en demasiados así que pongo 300 beige lo que estoy haciendo lo que estoy haciendo es simplemente pintarlo de rosa temporalmente evidentemente para que veáis claro en la pantalla qué es lo que voy a hacer fijaos que los banners están pegados al menú superior y quiero un poquito de espacio para que respiren así que como quiere un poquito de espacio simplemente lo que voy a hacer es banners margin top de por ejemplo 10 pixeles martín top 10 píxeles y fijaos ahí como ahora respira un poquito mejor 10 píxeles 20 píxeles lo que sea ahora dentro de esos banners voy a hacer que el banner 1 tenga un width del 60% y que flote a la izquierda voy a ponerle un background de color no sé red rojo y cuidado porque le voy a poner una altura del 100% para que me tome toda esa parte de ahí veis que está de color rojo ahora si queréis mirar voy a poner yo soy el banner 1 yo soy el banner 2 y yo soy el banner 3 y de esa manera así veréis claramente quién es cada uno de los banners ahora por último lo que voy a hacer es el banner 2 wifi 40% lloyd wright background lo voy a poner blue y height le voy a poner el 50% así tenemos por tanto ya por ahí el banner 2 y el banner 3 incluso las mismas propiedades que le voy a poner no realmente no voy a cambiar el color y va a cambiar a igualar las propiedades pero da igual las voy a poner independientes así que mira tengo el banner 1 el banner 2 y el banner 3 tengo ya ahí los tres banners maquetados de momento con colorín pero simplemente he puesto el colorín para que veáis correctamente veáis perfectamente dónde está qué espacio ocupa cada uno de ellos por supuesto voy a cambiar el contenido de los banners voy a quitar el color para poner cosas más bonitas ahora que tenemos las áreas de momento de colorines para verlas claramente bien esbozadas ahora queremos maquetar algo dentro de cada uno de los managers para ello voy a hacer lo siguiente voy a crear algo de código en html y luego crear algo de código ss mira de una cosa antes al marcar he creado primero una f1 luego una h2 y de ahí me he pasado a h4 los artículos tenían el titular h4 por qué pues porque me estaba reservando el h3 para los banners entonces en el banner voy a hacer la siguiente plantilla miradme porque tenéis que hacerla igual dentro del banner voy a eliminar el texto de yo soy el banner y voy a poner un día con clase porque va a haber varias clases contiene banner o si queréis si no queréis llamar la contiene de manera llamada la contenido banner dentro del día de clase contenido banner voy a hacer una 3 llamada por ejemplo el curso de html5 voy a hacer un parágrafo y descripción del curso de html5 y ahora voy a hacer algo parecido con el resto de banners esto por aquí y esto por allá es decir un nivel de clase contenido banner y dentro del dip de clase contenido banner un h3 y un texto de parágrafo esto me permite ahora tener ahí algo de contenido porque ahora voy a maquetar lo siguiente todos aquellos elementos que sean de clase contenido banner van a tener un para bing de por ejemplo 10 píxeles y ahora en el fondo de cada uno de los banners voy a poner una imagen por ejemplo voy a poner en este manera dos puntos barra foto y el logo de html5 es decir de cambiar los colores los colores sólidos los voy a cambiar por imágenes mira html5 luego cuál es el problema que tengo aquí miradme miradme cuál es el problema que tengo aquí el problema que tengo aquí es que la imagen vamos a poner aquí white la imagen de fondo he puesto el logotipo de html5 de fondo del dif problemas que la imagen es muy grande entonces para ello vimos anteriormente que se puede cambiar el tamaño del fondo así que voy a poner background guión size y voy a decir cover vale no era cover sino que era el otro background cóver contain ahí está con train contener y fijaos cómo por tanto el logotipo mirad qué chulo aparece aparece de fondo cuidado porque se me repite el logotipo así que recordad que tengo un modificador llamado background repeat es igual a no repite y además quiero que el logotipo se me ponga a la derecha porque si no me está machacando el texto así que esto se llama background position right center o right top fijaos ahí como me aparece el logotipo una vez de fondo situado a la derecha ya lo tenemos por aquí por tanto lo que hemos puesto es en lugar de poner una imagen hemos puesto un fondo hemos utilizado la imagen de fondo para el logotipo porque he hecho esto pues porque así tengo algo más de libertad para que la descripción se ponga por encima de la imagen es decir en este curso aprenderemos a crear webs estáticas usando el lenguaje de marcado html5 qué es la última y mejor versión que puedes usar y daos cuenta que cuando escribo texto largo fijaos como el texto largo pues puedo elegir que se me ponga por encima del texto o no si le digo que tenga una anchura menor lo mismo que acabo de hacer lo voy a hacer con los otros dos banners por ejemplo me vengo al banner 2 y le digo que en background quiero poner otra imagen dos puntos barra foto y por ejemplo voy a cargar otra imagen que va a ser mysql mysql punto png hago lo mismo que antes si queréis incluso copio copio las propiedades para que el logo de mysql mirar se me quede a la derecha y lo mismo voy a hacer con el tercer banner para el tercer manera voy a seleccionar por ejemplo el logotipo de joomla copio pero y fijaos como de esa manera tengo tres destacados el único problema que tengo ahora mismo es que bueno el poner dime la imagen de fondo me permite trabajar con cierta soltura pero quizás cuando el texto se mete dentro de la imagen queda feo porque parece que verdad entonces le voy a decir lo siguiente contenido manera es decir el texto de parágrafo que esté dentro del contenido banner quiero que tenga una anchura del 50% y de esa manera fijaos como el texto evita meterse dentro de la imagen y cuando llega al 50% lo que hace es caer caer hacia abajo puedo decir 50% puedo decir 40% puedo decir lo que me interese para que el texto caiga exactamente para que el texto se corte y se marque t exactamente en el punto que me interesa ahora voy a maquetar una zona de destacado un mensaje destacado mina así que voy a maquetar esta zona de aquí voy a maquetar este rectángulo de aquí con un mensaje destacado por ejemplo envío gratis así que dentro del html voy a hacer lo siguiente mensaje en el que informó a los usuarios de las ofertas del portal pues por ejemplo destacado 2 puntos todos los pedidos con un importe superior a 500 euros tienen envío gratis y por último dentro de este bloque voy a hacer lo de el tema del email así que mirad y voy a poner un input type suscribirte place holder introduce tu email para suscribirte guardo recargo ahí lo tenemos y ahora simplemente voy a maquetar para maquetar voy a decir que todo aquello que sea destacado tendrá un week del 100% una altura de 80 píxeles un background de rgv 50 50 50 que es un gris oscuro quizás no tan oscuro voy a poner 100 100 100 bien y ahora voy a poner por ejemplo un margin top de 10 pixeles y un pequeño padding con cuidado al padding con cuidado al padding ya que dentro del destacado voy a hacer un día con iré contiene destacado voy a hacer un dive que abro y que cierro llamado contiene destacado porque así de esa manera puedo ponerle un ping al dip por eso pongo contiene destacado y voy a decir para bing de por ejemplo 10 píxeles para que si lo veis ahora el texto tenga un poquito de padre no veis el texto porque está de color negro pero lo pongo de color blanco para que lo podáis ver mejor y ahora quizás vamos a ver me ponen el texto más corto voy a poner el texto más corto destacado envío gratis para todos los peligros bien lo que quiero es fijaos que el texto se me quede a la derecha pero que el link del email perdonen texto a la izquierda pero que el input del email se me quede a la derecha para eso voy a el input del email voy a ponerle una ide para poder localizarlo y me en suscribir y voy a decir aquel elemento que se llama email suscribir va a flotar a la derecha guardo recargo y daos cuenta como ahora el email para suscribir flota a la derecha simplemente tengo ahora que acabar de afinar la altura de ese destacado juego el email introduce tu email para suscribirte no se ve fijaos ahí lo voy a hacer grande voy a hacer grande la zona sobre la que estoy hablando no se ve esa frase es muy larga pero siempre puedo ponerle un wifi de por ejemplo 150 píxeles puedo hacer que esa frase sea más larga voy a poner 250 píxeles ahí lo veis y ahora si me fijo dentro de esa imagen podréis comprobar mirad atención como ahí hay un pequeño botón hay un pequeño botón que en mi caso correspondería a una etiqueta button así que pongo un botón y digo por ejemplo así le pongo una flecha simplemente para poder enviarlo cuidado que se button tenía que ir en un vip y ve contiene suscribe y todo esto cerrado dentro de un diván contiene suscribe que flote a la derecha si todo va bien ahora sí fijaos como tengo el email para suscribir y el botón para cuando enlace con php con lo que sea para poder pinchar el botón para suscribir tengo por tanto ya como veis un pequeño destacado ha sido bastante fácil de maquetar está descentrado por tanto quizás lo único que me quedaría por hacer sería decirle que tenga un padding top de quizás 15 píxeles es decir juego unos márgenes para acabar alineando acabar juntando lo que me interese y ahora por último voy a hacer un pequeño y suave borde radios para darle un poquito de bordes redondeados a ese destacado simplemente para que quede un poquito mejor como el texto blanco sobre fondo negro se ve peor voy a ponerle un font weight bolt una un peso de fuente negrita para que se vea bien el texto dentro de ese destacado y como está muy pegado al banner y quiero que respire un poco voy a ponerle un martín top de por ejemplo 10 píxeles y de esa manera separó un poquito 10 píxeles hacia abajo vamos a ver en este caso margin top no me lo ha cogido y margin top no me la ha cogido porque tengo que dejar de flotar es decir cuando acaba el banner tengo que dejar de flotar para que me funcione el margen hacia abajo ahora solo me queda por maquetar para acabar esta parte principal los artículos que de momento tienen imágenes gigantes y hemos visto como dentro de destacado perdón dentro de artículos cada artículo es una etiqueta artículo así que voy a hacer lo siguiente mira digo artículos arctic él y cada uno de estos artículos va a tener por ejemplo un 25 por ciento y van a tener un padding de 10 píxeles será guarda y recargo mirad como ahora la cosa cambia bastante como tengo una serie de artículos maquetados en cajas pequeñitas si no lo veis bien voy a poner temporalmente un borde de un píxel solid grave simplemente para que lo veáis simplemente para que veáis la cajita que ocupa cada artículo y ahora por supuesto voy a poner un flow de leaf para que cada artículo flote un poco a la izquierda del otro mirada allí como ahora cada cajita flota un poco a la izquierda juego un poco con el parking quizás añado también un margen para que cada uno de los artículos como podéis ver al final acabe llegando hasta el cien por cien voy mezclando voy un poco combinando entre el martín el padding y el wef hasta que más o menos tenga esto hasta que más o menos como podéis ver pues los artículos me queden maquetados en grupos de a tres una vez que tengo esto me gustaría homogeneizar para empezar en el h 4 que es el título que va adentro del artículo voy a poner que marc sin cero píxeles padding 0px eles además voy a decir que cada artículo tendrá una altura no sé de cuánto de unos 300 píxeles vamos a verlo hay un poco más grande 350 píxeles y por último voy a hacer lo siguiente voy a hacer border solo botón un píxel sol y gray para que se note bien la diferencia quito este borde para que se note bien la diferencia de cuando acaba uno y cuando empieza el siguiente es decir un pequeño separador para poder ver donde acaba uno empieza el siguiente esto que estoy viendo aquí abajo son los assad no os preocupéis por ello así que bueno poco a poco voy teniendo la página principal de la tienda online donde veis que tengo el titular tengo el menú tengo el banner tengo los destacados ahora por ejemplo voy a decir que artículos arctic el button es decir el botón que se encuentra dentro del arctic el que al haber se encuentra dentro de artículos quiero que text align write quiero que se me alinee a la derecha podría decirle en este caso voy a probar un flow drive era un poco de miedo siempre la flotación es bueno cuidado tiene el doble punto ahora ahora si lo consigo con esto es estilizar que los botones acaben a la derecha y ahora una última cosa que voy a hacer con estos productos aparte de que ahora cuadrar la la altura y la anchura para que sean todos más o menos iguales quizás eso sería un trabajo más de retoque fotográfico que de aquí pero bueno voy a estilizar los botones mirada atención esto que voy a hacer es muy importante porque lo voy a aplicar tanto al botón como al email para suscribir como el buscador consiste en un elemento html que ya tenemos que tiene una apariencia no demasiado bonita por ejemplo ese es el típico botón de html y consiste en que simplemente con css lo convertimos en algo mucho más bonito mirad a la pantalla dejad lo que estáis haciendo y mirar la pantalla porque esto va a ser muy interesante lo primero que voy a hacer es buscar en este caso para el botón de comprar voy a buscar un icono de carrito de compra así que digo icono carrito png mira me voy a por ejemplo este icono mira mira voy a este icono una vez que tengo ese icono localizado me lo voy a guardar y no lo voy a guardar en foto porque no es una foto de un producto es un elemento de la tienda online me voy a imágenes y lo guardó como carrito permitidme que trate de ese carrito con gimp con photoshop o con lo que queráis simplemente lo que voy a hacer es decirle que en colores quiero invertir no me deja invertir no me deja invertir porque en la imagen en modo está indexado ahora sí que me va a dejar invertir me guardo este carrito como png y voy a hacer lo siguiente miradme dentro del botón voy a decir que el fondo voy a hacer el botón grande para que lo veáis el background va a ser ring pero tenemos verde y digo un background url o bajarán directamente url y digo dos puntos barra imágenes del carrito png mirad lo que ocurre no sé si lo veis pero el carrito está ahí voy a hacer otra cosa me voy a crear una imagen grande 512 por 512 y esta imagen la voy a pintar de verde y lo guardo como verde png ahora con lo que hemos visiblemente de los múltiples fondos en css3 voy a poner carrito como url dos puntos barra imágenes verde punto png tras lo cual lo que tendré es una mezcla una combinación del carrito se ve ahí y el verde ahora lo que hago es lo siguiente el carrito lo voy a hacer más pequeño para que me quepa en el botón porque es que el carrito es gigante entonces me abro el gimp me voy a el carrito le digo que es claro la imagen a 32 x 33 como mucho y todavía es muy grande así que lo voy a volver a cambiar por ejemplo 16 por 16 eso sí que siempre que se pueda se siga viendo el botón que es ahora recargo y damos cuenta como hay un carrito ahí hay un montón de carritos de hecho que puedo hacer para que no haya un montón de carritos bueno pues background repite es no repite una vez que pongas el fondo no lo repitas veis ahí como tengo un carrito porque lo he puesto de fondo fijaos como el precio se me mete dentro del carrito no pasa nada porque puedo decirle padding left 20 píxeles es decir quiero un margen a la izquierda de 20 píxeles veis cómo está el carrito y luego el texto y ahora por último le digo por ejemplo color white para que el texto sea blanco y le voy a decir border 0 pixels solís white padding de 5 píxels y border reviews 5 píxeles lo que quiero que veáis por tanto es como déjame que lo haga un poquito más grande a cuidado claro padding de 5 píxeles y padding left 20 pixeles el de 20 debe estar después lo veis ahí incluso le voy a decir qué background posición es de 5 píxeles 5 píxeles es decir quiero que esté arriba y abajo a cuidado no en este caso no puedo hacerlo lo que voy a hacer es en el gimp voy a aumentar un poco voy a aumentar un poco el margen de ese icono y ahora ahora sí fijaos cómo he cogido un aburrido botón html y con css me he hecho un botón personalizado para comprar por último lo que me quedaría mirar sería un border de un pixel solid white ya por último box shadow de 0 píxeles 4 píxeles 8 píxeles rgb 000 0.4 es decir un botoncito como veis ahí y que además arroje un poquito de sombra veis que está como destacado pues lo divertido es que ese botón como habéis visto lo ponemos maquetar directamente desde el código html es decir sin tener que hacer más gráficos que evidentemente el icono del carro eso sí pero lo demás está hecho con css entonces ahora voy a hacer lo mismo que he hecho para el botón de compra pero para el buscador y para el email así que voy a poner icono email y busco pues no sé alguno que me pueda servir ese vamos a verlo aquí en blanco y negro no sé un icono como este no es que me haga mucha gracia pero en pequeño se verá mejor mail punto png y search hay con qué pues convencionalmente suele ser el icono de la lupa qué es esto de aquí así que estos dos iconos o es un svg no me hace especial gracia para este caso concreto para hoy concretamente un svg por tanto bueno aparece como give me lo voy a cortar me lo llevo tienda online imágenes y lo pongo como buscar mira ahora voy a hacer lo mismo es el mismo concepto en primer lugar lo voy a editar con un editor de imágenes me lo voy a pasar a 16 píxeles por 16 píxeles voy a hacer lo mismo con el icono del correo electrónico me lo trató y es claro la imagen a 16 x 16 y sobre escribo y ahora escribo el siguiente código ese input de arriba del menú va a tener el id campo buscar y por tanto ahora me voy a los estilos del menú me voy a los estilos del menú y digo campo buscar tendrá el siguiente código mirado no voy a hacer grande para que lo veáis el campo buscará va a tener un border de cero píxeles solid white no pasa nada aquí un board en radios de 10 píxeles un truco os voy a enseñar un truco un box shadow de 0 píxeles 5 píxeles 5 píxeles rgb 000 0.3 in set fijaos que eso lo que hace es una sombra interior en lugar de arrojar una sombra proyectada lo que hace es una sombra interior como que ese objeto está en relieve un padding de 3 píxeles y ahora viene lo bueno ahora viene lo bueno que es cuando bueno voy a bajar un poquito la intensidad de la sombra que es cuando voy a poner el background url dos puntos barra imágenes buscar punto gif creo que era un gif evidentemente se me repite pero lo que voy a hacer ahora es background repeat es no repita un para bing left d 10 píxeles o mejor dicho 20 píxeles y ahora fijaos qué pasa eso que tengo un campo de búsqueda en el que aparece una lupa lo único que tengo que hacer para acabar ese icono es simplemente decirle simplemente decirle en el game que editó el icono y lo voy a hacer un poco más grande quiero decir con un poco más de margen poder para poder centrarlo y por último y con esto ahora podéis empezar a copiar background position top ryder es decir que la posición del icono en lugar de estar a la izquierda está a la derecha fijaos por tanto como allí me ha quedado un bonito campo background white bueno ahí me ha quedado un bonito campo de buscar insertado dentro d dentro del medio de navegación entre los márgenes y entre los padding si entre todo un poco lo que muestro hasta ahora porque damos cuenta que lo que mucho hasta ahora es bastante completo mira yo voy a [Música] atención voy a desactivar el css y fijaos cómo hemos pasado de tener esto hemos pasado de tener esta página a tener esto con lo cual el css está haciendo bastante por nosotros la página de indio probablemente no se complicará mucho más pero el css se va a complicar todavía más porque nos queda a estilizar tanto las páginas del listado de productos como la página de información de producto como un poco todo así que lo que me gustaría es que mediante comentarios pusierais secciones al css y esto se hace de una manera terriblemente sencilla a cada uno de hecho debería elegir su propia manera de hacerlo yo voy a poner comentario que se abre fila de barras y digo estilos generales y cierro qué es esto pues esto que acabo de hacer en la pantalla es la versión electrónica de un marcador de libros lo que acabo de hacer es simplemente poner una separación para que luego sepa qué secciones hay en el css por ejemplo copio este marcador lo pego aquí y digo estilos cabecera y ya sé que desde aquí hasta aquí son estilos generales y a partir de aquí son estilos cabecera ahora vengo aquí y digo menús hasta aquí que son los banners y lo que voy haciendo esto no hará que nuestro código sea más rápido pero esto hará que cuando vayáis leyendo el código vais viendo que tenga que tiene secciones esto es el manera destacado y esto por último es artículos como veis por tanto dividirlo en secciones nos va a ayudar a clarificar el código y todo aquello que nos ayuda a clarificar el código al final va a redundar en nuestro beneficio porque hará que cuando el archivo se complique y creedme se va a complicar todavía ganemos control sobre el código todavía tengamos control y todavía cuando se haga grande podamos tanto editar código antiguo como al añadir nuevo código nuevo sin problemas en la extensibilidad la siguiente parte una vez que tenemos en la página principal más o menos variedad consiste en derivar este diseño al resto de páginas de nuestro sitio web en este caso vamos a empezar con el menú del superior que es el más sencillo tenemos un inicio que nos lleva a esta página tenemos un producto que de momento nos lleva a esta página tenemos con nosotros y tenemos un contacto por tanto voy a entrar dentro del código voy a abrir edit que antes lo he cerrado bien ahora congénita abierto verdad voy a editar el código d el proyecto index.htm y fijémonos que el número de navegación todo lleva a index.html por tanto esto va a llevar a productos html esto va a llevar a nosotros html esto va a llevar a contacto html pero os digo más los botones de compra cada uno de los productos particulares tienen que llevar a alguna página concreta que sea la página de información de ese producto concreto así que para él dentro de los botones este botón que he puesto aquí lo voy a incrustar dentro de una etiqueta h ref como se llama esa página no me acuerdo entonces da online detalle producto punto html por tanto detalle producto punto html si he abierto una etiqueta a cierra una etiqueta a por tanto copio y pego y pego y pego y pego y pego y pego y en principio ahora esta etiqueta de cierre a la copia y la pego para maquetar todas y cada una de las páginas mirad atención si ahora voy a productos no había productos pero no está la página de productos porque no está la de productos porque se llama lista de productos en lugar de productos así que se llama lista de productos vamos a otra vez recargar me voy a productos y la página está vacía porque no he escrito nada todavía perfecto me voy a nosotros y no se ha encontrado la paja porque porque no era nosotros si no era acerca de acerca de contactos y que es con tan así que me voy a nosotros está vacía me voy a contacto está vacía y me voy a la página de producto y está vacía las páginas existen pero están vacías lo que voy a hacer ahora es simplemente darles contenido y les voy a dar contenido como en cualquier otro proyecto simplemente copiando y pegando contenido dentro como lo voy a hacer muy sencillo me abro en primer lugar las páginas que están implicadas acerca de contacto detalle producto y listado productos y a estas páginas les a partir de la página principal selecciono todo copio y pego y pego y pego y pego y guardo y guardo y guardo y guardo por supuesto y si ahora voy a la propia página web comprobaréis como si entro en productos pues veo la misma página si entra en nosotros veo la misma página si entro en contacto veo la misma página veo la misma página básicamente porque he duplicado el contenido por tanto ahora lo que tengo que hacer es simplemente mira me voy a acercar selecciono todo lo que está dentro de la etiqueta main de la etiqueta principal y digo este es el contenido de la página de acerca de nosotros en contacto selecciono la etiqueta principal borró todo el contenido de la etiqueta principal y digo aquí voy a poner el formulario de contacto detalle producto esta es una de las páginas más importantes de este proyecto por eso es la primera que voy a solucionar este es el detalle de un producto y por último el listado de productos sabéis qué listado de productos voy a hacer un poco de refrito porque el listado de productos puede ser perfectamente quitar la sección de los banners y quedarme solo con los productos incluso quito también el destacado me quedó solo con los artículos vamos a verlo me voy a la página y veo lo siguiente veo inicio productos y fijaos que en productos directamente tengo el listado ya tengo que quitar las hay no pasa nada pero tengo ahí un producto simplemente directamente el listado inicio es banner destacado y listado productos es sólo el listado en nosotros este es el contenido de la página de acerca de nosotros y en contacto aquí voy a poner el formulario de contacto cuidado en este caso porque en nosotros y en contacto queda un poco feo vamos a la página de producto la página detalle de producto porque no he marcado nada en el mail pero esta es una de las ventajas de trabajar con un css externo es decir esta es una de las ventajas de tener un archivo css si ahora hago una mejora esa mejora se va a aplicar sobre todo de las páginas me voy a ir ahora al final del archivo técnicamente no técnicamente lo que quiero es trabajar es un estilo general entonces me voy a ir a estilos generales me voy a ir a maine y voy a decir background white y si ahora vuelvo a la página comprobaremos como el background es white en todas las páginas pero está un poco pegado a la parte de arriba pues digo martín top 10 píxeles y ahora comprobaréis como lo voy a separar un poco en cuanto consiga arreglar el problema de la flotación por tanto en este caso le voy a decir ella no se le ha puesto a los hilos img bien eso lo tengo que decir con el main ahora sí vale y luego si queréis pues porque no le podríamos poner un poquito de padding aunque en este caso particularmente tampoco me interesa fijaos que tenemos ya productos fijaos como hace un momento estaban flotando ahora están perfectamente bien nosotros ahora ponemos contenido en contacto ahora pondremos contenido y sobre todo cuando pinchó el botón de comprar aquí va a aparecer la página de detalle de producto voy a maquetar la página de detalle de producto porque es la más compleja la página detalle de producto básicamente es una página que va a tener los siguientes elementos detalle de producto este es el detalle del producto y lo que quiero es maquetar por un lado el logotipo del producto por otro lado quizás quiero la información del producto y en este caso pienso que me va a ser bastante fácil y bastante conveniente usar una tabla no voy a hacer la maquetación de la web con tablas lazio con css pero la información del producto igual que lo quiera una tabla así que hago lo siguiente dentro del mail voy a poner h 3 y vigo curso de html5 porque fijaos que es como si aquí en el inicio o bien ha pulsado información sobre el curso de html5 los cursos de telecinco así que ahora vengo está un poco pegado ahora hablamos de ello voy a poner div y d contiene main un día y ahora veréis que eso lo he hecho lo veréis para que el conocimiento para bien que tengan margen interior ahora en el table hago una tabla que va a tener una fila y dos columnas en la columna de la derecha voy a poner la imagen del producto así que imágenes barra y el logotipo del producto que ahora mismo no me acuerdo qué nombre tiene no es en imágenes sino que es en foto así que mirad aparece por ahí no se nota dejadme que ponga guys es igual a 100% y border es igual a 1 y ahí se empieza a notar y ahora le digo a esta imagen guys muy de 100 píxeles cuidado qué no se me hace grande claro que sí muy bien y fijaos tengo un estilo que está machacando así que voy a decir perfección está el wef es 100 píxeles un truco importante importante es para decir que lo que digo ahora manda sobre lo que había antes hay 100 píxeles wyss es igual al 70% y wef es igual al 30% terminada y como la tengo una tabla horrible lo sé pero tengo una tabla que va a permitir maquetar ahí está y lo digo horrible porque tiene un borde de uno se lo he puesto simplemente para que lo veáis porque luego lo que haría es poner border 0 y ocultar el borde ahora empiezo a estilizar ahora empiezo a maquetar y digo lo siguiente dentro del tv voy a poner un primero de descripción descripción la descripción del curso en este curso aprenderás [Música] páginas web usando el lenguaje de programación o marcado html5 veremos tanto contenidos teóricos prácticos a través de él las lecciones del curso una pequeña descripción ahí lo tenemos ahora lo que voy a hacer es una pequeña lista en este caso fijaos ordenada así que contenidos del curso y ahora sí o l o l y voy a hacer link y atención a lo que voy a hacer voy a hacer una lista a dos niveles html5 y css3 html5 y css3 pero ahora dentro de esta lista antes de cerrar el día el link creo otra lista ordenada creó elementos link y pongo la estructura voy a usar una plantilla contenido títulos textos tablas formularios ahora hago lo mismo dentro de fs colores quiéreme trilla texto fuentes rotaciones animaciones transformaciones y fijaos que con esto lo que consigo es crear una lista a dos niveles es decir una lista y una sub lista por último dentro de esta página personal voy a poner un botón de compra lo voy a poner bajo de la imagen así que busco un botón de compra aquí está esto lo voy a poner en detalle de producto justo abajo de la imagen dónde estás imagen estás aquí vamos a verlo cien euros comprar en este caso voy a decirle al botón que es id un botón compra ahora por último me voy a los estilos en los estilos y digo el botón vamos a ver estilos artículos destacado dónde está el botón compra aquí estás como botón de compra tenemos el botón tendría que hacer la imagen un poco más grande vale estilos principales contiene main va a tener un padding de 30 píxeles para que para que respire un poquito el texto para que quede mejor marcado así que únicamente me quedaría por maquetar esa imagen para decirle que tenga por ejemplo 300 píxeles y únicamente me quedaría también maquetar el botón para que se recomponga justo abajo del producto lo que hago por tanto como estáis viendo es maquetar una página usando cosas que sabemos como por ejemplo crear una tabla para separar en dos columnas y poner botón poner listas poner diferentes elementos de la misma manera voy a maquetar por ejemplo la página de contacto así que en la página de contacto voy a hacer una vez más pues de detalle producto me copió el contiene mail y dentro del contiene mein incluso fijaos lo que voy a hacer voy a hacer otra tabla béisbol en facebook r pero pero hay veces que nos conviene hay veces que no wef es igual al 100% inst voy a decir wifi es igual al 50% y en esta otra columna tres cuartos de lo mismo yo le voy a poner aquí h 3 el formulario de contacto para ponerte en contacto con nosotros rellene el siguiente formulario que tienes en la parte izquierda de la página me falta algún acento pero bueno y ahora dentro mira de la parte izquierda voy a poner la consabida etiqueta form jackson es igual a mail php que no existe el método es igual a post y digo input type texto nombre lo voy a hacer directamente sin place holder introduce tu nombre br r e mail introduce tu correo electrónico br un text área ya sabéis que siempre viene bien un mensaje br y por último un input type submit aquí va otro verde de hecho si ahora guardo y recargo podréis comprobar cómo aparece el clásico formulario pero cuidado porque este formulario no lo hemos estilizado este formulario está así tal cual viene en html así que introduce tu mensaje lo que voy a hacer ahora es cogerlo dentro de css y le voy a poner el siguiente estilo me hago un separador este y los formulario y digo lo siguiente forma input ruiz del 100% vamos a verlo y el 100% si crees le pongo 80% e incluso lo digo como forma text área también del 80% para que el texto área tenga la misma anchura veis ahí como con css puedo maquetar también formularios e incluso le digo vamos a ver para 10 píxeles border radios 5 píxeles y border un píxel solid y vamos a verlo era fijaos como maquetado incluso más chulo los campos de formulario por último diría box 20 píxeles 5 píxeles 15 píxeles rgb a 0,0 0,0 punto 2 sin ser cuidado que en este caso lo que va a hacer es maquetar me también un poquito de sombra sobre el botón que tampoco pasa mucho pero bueno y ahora le digo al botón el botón tiene un y de particular enviar que todo aquello que sea enviar hoy mira lo he puesto todo en una línea ha sido costumbre dejadme que cuando tengo prisa lo suelo hacer así el efecto de una misma línea pero claro no es muy didáctico y ahora forma enviar le voy a decir por último que el wifi es quizás el 85 por ciento porque fijaos que siempre que sé que se queda un poquito más corto y el boxeador no va a ser un set va a ser externo así que 85% pongamos y de esa manera fijaos que lo que intento es homogeneizar el botón y que en lugar de tener una sombrita para adentro pues tenga unas grietas para afuera igual en lugar de 85% pues es 86 por ciento pero al final hasta llevarlo al sitio vamos a trabajar a continuación con el proceso de compra en el cual pinchamos el botón de comprar por ejemplo por aquí vale por ejemplo aquí dentro de la página de producto y este botón nos llevaría de momento a ninguna parte por tanto recordamos que dejamos preparada una página llamada compra finalizada la compra finalizada es lo que ocurre cuando has finalizado tu compra y cuando quieres pasar a pagar en este caso incluso además lo que os diría es lo siguiente de cara a comprar antes voy a aplicar un número que insisto ahora mismo para lo que estamos haciendo ahora mismo en la pantalla prácticamente no hace nada es decir lo que hace simplemente es decir cuántas unidades de producto compraríamos pero eso lo que haría más adelante es permitirnos para varias unidades a la vez entonces aquí donde encuentro la paja de detalle producto en detalle producto voy a ir al botón y antes ver el botón voy a poner algo así como un input type number y quizás algún texto verdad como por ejemplo e introduce el número de unidades que quieres comprar y pulsa el botón de compra así que guardamos recargamos a ver qué aspecto tiene y fijaos cómo introduce el número de unidades que quieres comprar house como puedo elegir por ejemplo que quiero cuatro unidades y a partir de ahí el botón de compra me debe llevar no a detalle producto sino a finalizar vamos a verlo por aquí a compra finalizada por tanto este botón me va a llevar a compra finalizada guardo recargo y ahora por ejemplo le digo cuidado en este caso el input de tipo number por defecto no tiene ningún valor hasta que yo no le dé a los botones no va a tener ningún valor así que como mínimo evidentemente vamos a poner no un texto sino en este caso un número uno para que cuando cargue ese campo por lo menos aparezca una unidad para comprar aunque el comportamiento de la página realmente es una cuestión más de javascript php que de html el number tiene un parámetro que es mínimo y máximo por tanto me voy a ir a number voy a activar una función que es resaltar la línea actual para que podáis ver en qué línea estoy trabajando en cada momento y simplemente lo que voy a poner es algo así como max es igual por ejemplo a 10 ese número no puede pasar de 10 y min es igual a 1 ese número no puede bajar de 1 lo que obtengo por tanto es que cuando recargo observaréis como fijaos no puedo bajar de 1 no puedo llegar a 0 y se intentó comprar x productos no puedo subir de 10 así que en definitiva por ejemplo cuando intentará comprar 0 productos o cuando tenga comprar menos un producto sería javascript el que me diría no puedes hacerlo el que mediría esa regla de negocio no está permitida en este caso concreto con los parámetros de number puedo simular una vez que he elegido comprar un producto me voy a pinchar el botón de comprar y me voy a la página de compra finalizada compra finalizada que todavía no tiene nada de código así que en compra realizada lo que voy a hacer es copiar y pegar todo el código por ejemplo detalle producto vamos a verlo y ahora dentro de esta página lo que voy a hacer evidentemente mirar va a ser borrar todo el contenido – por supuesto el sme y el dip contiene maine y voy a poner algo así como confirmación de compra confirmación de compra para que una vez que finalizado el proceso de compra me aparezca una tabla donde me diga qué productos has comprado cuánto vale cada uno de ellos y simplemente confirmar compra para pedir los datos así que en este caso lo que voy a hacer una vez más es poner una tabla porque este es otro de esos casos en los que no estoy realmente haciendo una maquetación gráfica con tabla está claro que lo he hecho con lo he hecho con dips el 8 con css sino que lo que estoy haciendo es poner como tabla aquella información que realmente vale la pena poner como tabla por tanto estoy haciendo una tabla con una serie de baches voy a poner bueno no hace falta porque realmente lo tengo ya estilizado vamos a verlo voy a poner un borde es igual a 1 wef es igual a 100% guardo recargo perfecto aquí lo tengo y ahora en el primer th voy a decir número de unidades o unidades en el segundo voy a poner el producto en la tercera columna voy a poner precio por unidad en la cuarta columna por último voy a poner subtotal cuando recargo y aquí lo tenemos ahora lo que tendríamos que hacer evidentemente es por una parte maquetar esa tabla tanto en html como en css como hago eso bueno para hacer eso lo que tengo que pensar mirad no es un poco cuánto me ocupa cada línea es evidente que la columna que más va a ocupar es la de producto porque contendrá el nombre del producto así que voy a hacer que esta columna por ejemplo wish sea igual al 10% la columna de precio por unidad sea 10% la columna de su total sea 10% y por tanto la columna de producto sea el 70% ahora veréis que se me queda maquetado así si luego necesitamos que respire un poco más alguno de los campos por ejemplo el subtotal pues ahora luego lo ponemos ahora me creo una fila este ere y vivo unidades 2 producto curso de html5 precio unitario 100 200 y que sea lo que sea es un precio inventado y por tanto dos productos por 200 euros verán vale 400 en este caso fijaos que hay algunos campos que tendrían que ser alineados a la derecha y algunos campos que tendrían que ser alineados a la izquierda así que voy a hacer una cosa mirada este te va a ser de clase número este pp va a ser de clase texto para luego poderlo con css class número el clase número así que por tanto voy a no sé copiar un par de veces más para que sea una tabla con algunos productos cursos de php el curso de jquery aquí tres unidades seiscientos euros y cuatro unidades ochocientos euros y guardo y al final tengo en esta tabla una tabla html horrible pero que evidentemente a continuación vamos a maquetar una vez que tengo esto lo que voy a hacer es utilizarlo con css para utilizarlo con css obviamente voy a abrir el archivo estilo estilo punto css y mirad voy a poner una nueva sección pongo estilos formulario y dentro de estilos formulario no voy a cambiar evidentemente formulario por estilos tabla resumen para poner lo siguiente atención esperar vamos a ver contiene main no voy a poner table es igual a d tabla confirmación le puedo quitar el border y puedo empezar a utilizar otra cosa que voy a hacer esto se puede hacer con css mucha gente lo acaba haciendo con html exponer el padding es igual a cero es para things es igual a cero de esta manera lo que conseguimos es cerrar completamente eliminar completamente los bordes que tenga la tabla bueno pues dentro del estilo me la voy a desagregar y ahora la 1 dentro del estilo voy a hacer lo siguiente voy a hacer está la confirmación tendrá el siguiente estilo tarta de confirmación de rtve va a tener padding por ejemplo de 10 píxeles además la confirmación pr th va a tener el background de color negro el color evidentemente blanco porque si no no se verá nada y también un párking 10 píxeles y lo más importante en este caso es que tabla confirmación t r punto número será text align a la derecha los números quedan mucho mejor cuando se alinean a la derecha y tabla confirmación pr punto texto esto no haría falta ponerlo pero bueno tampoco está de más text align a la izquierda lo que obtengo por tanto con este código como ahora veréis es que con unos pocos pasos con unas pocas líneas de código dejadme que vuelva a unir aquí es en otro heavy mirad es que por tanto fijaos como la los subtítulos o los títulos de tabla me quedan con el fondo negro y la letra blanca fijaos cómo las celdas respiran más por el padre injel el puesto y damos cuenta como los números se me alinean a la derecha qué importancia tiene esto pues imaginaos por ejemplo que en curso jquery he comprado 6 unidades a 200 euros 1200 euros daos cuenta como el texto cuando se alinea a la derecha las unidades coinciden con las unidades de cenas con decenas centenas con centenas y así que eso no pasaría evidentemente si el texto estuviera alineado a la izquierda por último dentro de este código por último dentro de este archivo lo que voy a hacer es poner voy a agregar lo otra vez por si estáis copiando el código lo que voy a hacer es poner una vez más el botón tengo aquí html tengo aquí css para que podáis ver las dos cosas lo que voy a hacer como os decía es poner un botón recordáis el botón y en este caso el botón lo que va a decir es finalizar compra finalizar compra para que en la siguiente pantalla pues ya pasemos a validar datos o bien introducir datos de un usuario existente o viene a pedir los datos de un nuevo usuario así que para ello vamos a vamos a estilo vamos a la pantalla original y vamos a ver que teníamos una página html llamada datos personales por eso realmente este botón lo que debe hacer es llevarme a datos personales vamos a aguardar para darnos todo dejadme que vuelva a introducir este archivo ahí dentro y si ahora guardo y recargo fijaos atención cómo tengo la tabla por aquí que tiene los productos y si estoy de acuerdo a cuidado me haría falta evidentemente una línea más que fuera el total verdad entonces para ello voy a hacerlo miradme de la siguiente manera copio en esta tabla la pego aquí eliminó las filas y me voy a hacer aquí simplemente voy a poner total y sumando la mano pues esto serían dos mil doscientos euros así que guardo recargo y fijaos como ahora así tengo la tabla cerrada por una parte con las líneas de pedido por otra parte con el subtotal y el total si ponemos euros pues mejor que mejor tampoco está de más que se me había olvidado así que euros por todas partes o dólares no sé pero dependiendo de en qué unidad de moneda se esté comprando pues hay que introducirlo el botón de finalizar compra está demasiado pegado a la tabla hemos visto en más de una ocasión cómo solucionarlo con el martín botón con márgenes en definitiva porque ya sabéis que los márgenes son para empujar hacia afuera os propongo en este caso una solución algo más mundana que es poner un par de veces un par de veces lo que hacen es un par de retornos de carne y por tanto lo que tenemos es que el botón de finalizar compra que separa un poco de la tabla y todo queda pues un poco mejor maquetado no estaría de más tampoco que en confirmar compra confirmación de compra pues bueno pues éramos algún mensaje como en esta pantalla puedes confirmar los productos que forman parte de tu carrito y continuar adelante con el proceso de compra cuando recargo y bueno un pequeño texto explicativo que no está de más tengo aquí un problema y es que el número que debería estar alineado a la derecha aparece a la izquierda y eso es porque aquí he cometido un error y es que en lugar de poner número he puesto número pero simplemente corrijo el error para comprobar que al corregir el error tengo otro problema y es que en ese caso quizás el número puede aparecer demasiado pegado al texto si eso ocurre para eso tenemos mira un estilo css donde digo que el texto por ejemplo le puedo poner un padding left de 20 píxeles y con eso mira lo que consigo es el texto separarlo un poco más del número así que ahora sí en principio lo tenemos correcto me voy ahora a finalizar compra y para ello pincho este botón de finalizar compra con el que evidentemente voy a una página llamada datos personales que de momento está en blanco por tanto copio todo este código el propio el código de compra finalizada lo pegó en datos personales que datos personales es una página que de momento está vacía borro por supuesto la tabla voy a hacer otra tabla de hecho y escribo el siguiente código confirmación de compra esto va a ser introducción de datos personales y va a ser la última pantalla compleja y digo a continuación puedes iniciar sesión ya tienes una cuenta de usuario o bien e introducir tus datos para crear una nueva cuenta guardo recargo y aquí lo tengo ahora creo que está clarísimo que lo que necesito es una tabla una tabla de para una parte que me dé un formulario a la izquierda que ya eres usuario ponte usuario y contraseña no eres usuario reina estos datos a continuación cómo vamos a hacer esto pues evidentemente lo vamos a hacer con una tabla una tabla que si queréis ya puedo poner directamente que wifi es igual a 100 por ciento que border es igual a 1 a perdón a 0 y qué cell hspa thing es igual a cero y que el padding es igual a cero a partir de ahí vamos a hacer en este caso una tabla sin cabeceras porque no siempre es necesario poner cabeceras y estoy haciendo cuidado de renuevo no y estoy haciendo en este caso una fila y dos columnas un tr y dos cd’s lo que hago ahora por tanto es poner lo siguiente h4 ya eres usuario y en este caso con h 4 también nuevo usuario cuando recargo y fijaos que tengo ahí voy a tener un formulario de si eres usuario dame tus datos si todavía no eres usuario pues regístrate así que simplemente lo que tendría que hacer ahora a continuación es crear dos formularios un formulario por aquí y otro formulario por allá y ahora luego veremos hasta qué punto podemos reutilizar los estilos que creamos anteriormente para la zona de contacto así que ya eres usuario pues input type text usuario y atención un nuevo tipo de campo qué es password en password que es el típico campo mirad que cuando pones algo de texto fijaos aparece como password aparece como bullet aparece como puntitos voy a poner un wish el 50 por ciento y así no puse yo el otro día y si no lo pongo ahora juraría que puse un poco de margen pero bueno si no lo puse pues de momento pongo un par de veces en cada campo y así me aseguro de que salten un par de res y salten y por supuesto un place holder usuario place holder y contraseña y un pequeño texto explicativo si ya eres usuario de esta tienda e introduce tus datos para continuar con lo cual dentro de este formulario únicamente me quedaría un input type submit es decir un enviar de clase creo que le puse un botón como le puse a captó no lo sé vamos a verlo en la zona de contacto y de enviar perfecto pues iré enviar y de esa manera lo que vamos a hacer es que el botón tenga forma de botón es decir estoy heredando los estilos que hice en el formulario de contacto una vez que tengo esta tabla una vez que tengo este formulario en la celda de la tabla continúo con el siguiente un pequeño texto de párrafo o parágrafo si todavía no eres usuario e introduce tus datos para registrarte y por tanto ahora dentro del forma tengo que poner aquellos campos que le requiero al cliente mi nombre place holder mi nombre rvr y ahora lo que voy a hacer por tanto y después poner por ejemplo apellidos y poner por ejemplo dirección poner por ejemplo más que dirección voy a poner el calle pongo por ejemplo código postal y con el código postal ya podría sacar el resto de datos pongo por ejemplo dni necesito que el cliente me diga el dni el feef wellness para hacer la factura y no sé pongamos que ya tengo esos campos pongamos que no quiero más tengo un problema y es que fijaos como al crear contenido en tablas las tablas se me alinean al centro al centro en vertical quiero decir que si os fijáis miradme si os fijáis esta tabla es más larga esta es más pequeña y ésta está como alineada al centro de la otra eso se arregla de una manera muy sencilla poniendo lo siguiente en el tab la confirmación de rtve voy a poner vertical guión alain top y de esa manera en cuanto a las celdas de tabla un segundo que el vertical alain top en este caso no me está funcionando con el trc de lo voy a poner en tabla confirmación en este caso aquí también a la confirmación de r vamos a ver voy a poner aquí está la confirmación display table y aquí voy a poner que no haría falta pero bueno display table field y así bueno todavía se resiste ahora veremos en este caso lo voy a solucionar directamente en html y voy a poner a line es igual a top dentro de el tv dentro de este cd de aquí y dentro de este tv de aquí y con eso lo que consigo es que el contenido de esa celda se mete a la parte superior y por tanto pues sea más agradable a la vista br br y fijaos que ahí tengo ya la tabla un poco separada lo que voy a hacer por tanto ahora es finalizar este proyecto por ejemplo poniendo un axón en los dos proyectos en los dos formularios que me llevaría a compra finalizada html así que pongo un action pongo un action y así cuando pulse cualquiera de los dos botones mirad me lleva a cuidado compra finalizada no me lleva a pero no tengo esa página me hace falta una página nueva me hace falta una página nueva que se llame despedida o algo así o éxito como queráis llamarlo éxito punto html donde evidentemente cada uno de los dos formularios me llevará pasando antes por un script php pero claro soy es programación php me llevara comprar comprar finalizar compra me llevará a éxito punto html y evidentemente éxito html es un archivo en el criminal voy a volver a copiar y pegar el código simplemente ahora para poner un mensaje muy sencillo que dirá lo siguiente compra finalizada has finalizado correctamente el proceso de compra en breve recibirás el pedido realizado y ahora os voy a enseñar una etiqueta muy graciosa mirada atención white voy a ser una buena hacer una etiqueta en la que diga lo siguiente seguro que lo habréis visto alguna vez en alguna página de internet redirigiendo a la página principal en cinco segundos mirad yo pongo aquí redirigiendo la página principal en cinco segundos y lo que quiero es que sin que yo toqué nada en cinco segundos se me dirija a la página principal de nuevo esto se hace con una etiqueta meta un poco especial que es la siguiente es el meterle directo atención pongo html me está re directa copio este código de stack overflow copio y pego y hago lo siguiente es una etiqueta meta http es igual a refresh y me dice que en 0 no en 5 quiero que vayas a la url index.hr ml fijaos lo que pasa atención mirad recargo me esperó 5 segundos no hago nada no estoy pinchando nada y si todo va correctamente en cinco segundos automáticamente el salto a la página principal es decir pido información de un producto compró el producto acepto la tabla envío mi usuario de mi contraseña y cuando finalizó la compra esperó 5 segundos 10 segundos los que vosotros queráis y fijaos comprobar es como el programa automáticamente os lleva de la página que digáis a la otra página que digáis

Deja una respuesta

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