Curso Desarrollo Aplicaciones Web

en primer lugar está formación trata acerca de aplicaciones web entonces las aplicaciones web a día de hoy por lo menos y esto no parece que vaya a cambiar en los próximos años cuando te digo próximos años pues parece que será cinco o diez quince ya no sé qué pasará 20 años pero están construidas como una amalgama de tecnologías o como una amalgama de lenguajes entonces por una parte tenemos un lenguaje que es el lenguaje html por otra parte el lenguaje html creado en 1991 en torno al 93-94 tiene un lenguaje hermano que es el css es el segundo de los lenguajes con los cuales vamos a estar trabajando mientras que con html creamos la estructura en principio de las páginas web ahora de las aplicaciones web mediante el css creamos el estilo esto es algo que suele confundir bastante a aquellas personas que comienzan con programación de aplicaciones web y es que el lenguaje que estiliza sea diferente del lenguaje que estructura luego con el tiempo no solo te acostumbras sino que ves las ventajas que tiene esto pero al principio como digo es bastante lioso porque son dos lenguajes independientes que hay que aprender los dos cómo voy a empezar a demostrar a partir de ahora mismo razonablemente bastante sencillos de aprender pero son dos lenguajes al fin y al cabo a continuación una vez que tenemos html y css que son dos lenguajes de llamados de marcaje no de programación sino de marca ajena luego explicaría cuál es la diferencia tenemos un tercer lenguaje llamado javascript javascript es un lenguaje para crear interactividad en varios entornos pero sobre todo en entornos web como html y css son lenguajes estáticos eso quiere decir que uno crea la estructura el otro crear el estilo pero ni la estructura ni el estilo hablan de interactividad después cuando pincha este botón va a ocurrir esto otro eso no lo hace ni html y css para eso está javascript hamas que lo que hace es crear interactividad trabajando sobre css y trabajando sobre html javascript como ahora luego empezaremos a ver que por sí mismo no tiene prácticamente ningún sentido javascript necesita como mínimo tener html para poder trabajar hay alguna excepción pero en el 90 iba a decir el 95 por el 97 98 por ciento de lo que hace javascript requiere tener una base en html y todo esto estas tres cosas es lo que conocemos como tecnologías de cliente en tecnologías de cliente estamos hablando de tecnologías que se ejecutan en el ordenador del cliente como ahora veremos a continuación a día de hoy no hay alternativa para html que no haya alternativa no es malo pero generalmente suele decir que cuando no hay alternativa de algo no es para alegrarse en este caso que no hay alternativa es porque html es un lenguaje libre y abierto para que lo use cualquier persona entonces en este caso concretamente es bueno ahora bien todo esto cambia bastante cuando hablamos de tecnologías de servidor cuando tenemos una aplicación web esa aplicación web en muchas ocasiones desde el ordenador de nuestros usuarios se conecta a un servidor remoto en una gran cantidad de ocasiones como por ejemplo hemos hablado anteriormente para guardar cosas en una base de datos entonces en las tecnologías de servidor hay un lenguaje de servidor hay varios de ellos vamos a estar trabajando con php pero también quiero que sepas que existe java en el servidor que existe python en el servidor o que existen otros muchos a ese punto net y luego tenemos una base de datos una base de datos que puede ser mysql puede ser ese cool y te puedo puede ser microsoft sql server puede ser oracle puede ser una gran cantidad de bases de datos verás que muchas de ellas incluso aquellas que no lo tienen pero muchas de ellas tienen sql en el nombre lo cual nos indica cuál es la tecnología sobre la cual trabajan entonces en este caso vamos estar usando por una parte php como lenguaje de servidor y por otra parte mysql a ver igual hasta el momento todavía no tienes ninguna pregunta más que nada porque lo que acabo de hacer es vomitar un montón de palabras extrañas en la pantalla entonces no es que no tengas preguntas es que igual no sabrás exactamente por dónde empezar a preguntar entonces todo esto como te digo es el resultado si quieres déjame como ya lo he escrito antes déjame que borre estos lenguajes si nos centramos directamente en lo que toca y así nos quedamos directamente con los lenguajes con los que vamos a trabajar todo esto es el resultado de una evolución tecnológica que ahora a continuación te contaré o mejor dicho te contaré más adelante porque tampoco quiero que el principio del curso sea tan teórico y quiero empezar a meter las manos en el código lo antes posible y ya habrá en su momento pues huecos a lo largo del curso para ir hablando de la historia y la historia es importante porque explica por qué las cosas son como son pero tampoco quiero hacer un curso aburrido de historia porque lo que quiero hacer hacer es un curso más divertidos de programación vale entonces con todo esto yo de momento lo guardo te explicaré que esto tiene su razón de ser entonces probablemente llegará un momento en el que te sentirás pues no ya te digo confundido pero frustrado de por qué tengo que aprender cinco lenguajes de programación más sencillos o más complejos pero cinco lenguajes de programación en definitiva y la razón es porque esta combinación para hacer aplicaciones web es una combinación que ha ido surgiendo se ha ido a málaga mando con el paso de los años probablemente si alguien en por ejemplo el 91 cuando se creó el html dijera oye vamos a hacer aplicaciones web 2.0 pues esa persona que tiene un nombre que es tim berners-lee pues hubiera dicho oye vamos a hacerlo todo en un solo lenguaje para no manchar a la gente con cinco lenguajes pues probablemente pero sin embargo no ha ocurrido así sin embargo primero aparece un lenguaje y luego alguien dijo qué guay vamos a hacer este otro lenguaje como acompañamiento y luego alguien dijo pero vamos a añadirle también esto y han sido piezas que se han unido unas encima de las otras cuando ocurre esto antes de empezar a programar código pero cuando cuando ocurre lo que podríamos llamar una situación de desbalance y esto podríamos considerar que es una situación de desbalance que ya falta que haga falta 5 lenguajes para hacer algo yo suelo decir que la naturaleza se entiende a balancear el desbalance entonces lo lógico sería que llegara algún día alguien dijera bien mira 5 lenguajes no uno o como mucho dos pero ese día aunque yo pienso que lo lógico sería que ocurrirá eso pero ese día no está cercano todavía vale por eso yo de hecho si ese día estuviera cercano yo probablemente no estaría impartiendo este curso sino que esperaría hay que hay que llegar a ese día más que nada porque para mí y esto es un concepto del cual en este curso hablaremos en repetidas veces para mí hay una cuestión muy importante que es la durabilidad de la información y la durabilidad del aprendizaje que el esfuerzo que hagas no en este caso tú sino también yo es decir tú en este caso aprendiendo esto que vas a aprender pero como ya te iré contando algo de este curso yo también aprendiendo cosas nuevas cuando tengo que aprender lo primero que hago al aprender algo nuevo es preguntar bueno cuánto va a durar esto porque no quiero estar seis meses rompiendo me lo cuerdo aprendiendo algo para luego descubrir que al menos número 7 ha cambiado porque es perder el tiempo y porque ya lo he hecho hace años y no lo quiero volver a hacer vale por eso es por lo que te digo que son una amalgama de lenguajes pero a día de hoy y todavía como ya te digo durante al menos cinco diez quince años vale la pena aprenderlos porque no parece que vaya a cambiar al menos en estos diez o quince años y por tanto es por lo que te quiero decir que el esfuerzo de aprendizaje que vas a tener que hacer pero luego por lo menos vas a tener tiempo de sobra para poder amortizar ese esfuerzo y cuando digo amortizar tú mismo verás lo que es amortizar quiero decir hay gente que dice yo me quiero hacer mi propia aplicación feliz haciendo mi propia aplicación y quiero que mi aplicación dure y hay gente que dice yo lo que quiero es aprender estos lenguajes para luego incorporar en el mercado laboral y sé que con estos lenguajes voy a poder estar al día en el mercado laboral durante una serie de años quiero decir con esto que cada uno tiene su propio concepto de lo que considera amortizar su propio esfuerzo yo evidentemente no te voy a decir cuál es tu concepto lo tiene que saber yo tengo el mío propio pero en definitiva sea cual sea esta combinación tecnologías como verás pues es duradera en el tiempo entonces antes de seguir hablando más de historia lo que quiero es empezar a picar algo de código para que el curso no se haga aburrido para ello lo que vamos a hacer de momento es crear una carpeta en el escritorio llamada curso aplicaciones web más adelante esta carpeta ya no podrá estar en el escritorio cuando pasemos de html css javascript cuando pasemos a php esa carpeta ya no podrá estar ahí tendrá que estar en otra carpeta muy particular dentro del disco duro pero cuando eso llegue ya la cambiaremos de sitio de momento para html para css y para javascript esa carpeta puede estar perfectamente ahí dentro dentro de esa carpeta y lo primero que voy a hacer es trabajar con un editor de código tenemos que descargar un editor de código puedes descargar el editor que absolutamente quieras no te recomiendo usar el bloc de notas de windows o de audema code lo que sea porque es un poco duro trabajar de esa forma entonces yo lo que suele recomendar es trabajar con una aplicación que se llama brackets punto y yo pero como ya te digo es una recomendación suelo recomendar trabajar con este programa por la sencilla razón de que primero es gratuito y segundo está para windows para linux y para mac con lo cual yo sé que puedo trabajar con este programa y mis alumnos primero no tienen que pagar un extra por usar este programa y segundo da igual en qué sistema operativo estén porque no van a poder utilizar entonces qué ocurre porque hay alumnos de vez en cuando los de linux me dicen oye pero puede usar head it siempre digo puedes ver head y sin ningún problema porque es el editor de textos que viene por defecto en linux y hay gente que dice oye puede usar sublime text yo siempre digo es como un editor de código que osea este pago aunque viene a versión gratuita cuando tienes uno gratuito pero oye haz lo que quieras vale luego tenemos la eterna discusión como ahora a continuación verás acerca de editores con fondo oscuro y letra clara o editores con fondo claro y letra oscura esto ya es un poco al gusto del consumidor vale pero yo sobre todo lo que quiero es que te descargues algún editor de código yo voy a utilizar este brackets porque tiene esto que estamos viendo en la pantalla que es el coloreado del código y el coloreado del código como ahora a continuación verás como a continuación comenzaremos lo que hace es marcar t los errores que vas a cometer y al marcar los errores que vas a cometer te permite localizarlos en el menor tiempo posible y corregirlos en el menor tiempo posible vale vamos a ver en cuanto aviso al estudio y desde luego vamos a ver la edición visual estudio desde hace en torno a 5 o 6 años en la versión community evidentemente es es un proceso es un entorno de desarrollo gratuito de hecho tiene grandes ventajas pero hay una cosa que te quiero decir que es la siguiente y es tenemos el visual studio que ahora si hago clic aquí tengo el community y tenemos el visual studio code entonces el visual studio code es una versión de visual studio específicamente para trabajar con lenguajes web es decir para trabajar con aplicaciones web mientras que al trabajar con visual studio aunque te permite crear archivos html toda la pesca pero es un entorno de desarrollo más pensado para trabajar con el lenguajes de programación más duros como temas más o como sea o como visual basic lo que te quiero decir con esto es que te lo digo sinceramente no le tengo especial cariño aviso al estudio pero si tienes que usar visual studio más que nada por no matar moscas a cañonazos yo prefiero que uses el visual studio code que es el visual studio que toca para desarrollo de aplicaciones web ahora bien claro yo lo que te digo es puedes empezar en el que quieras pero si en algún momento está sin visto el estudio y sientes como que no estás en el sitio correcto como que como que dices ostras este programa parece que está pensado para otras cosas pues pues en ese caso puedes empezar con el community y cuando notes eso pues te vas a esa versión estudio code y ya está verás como como editor por eso yo insisto mucho desde el principio que sólo los alumnos podéis utilizar el editor que absolutamente queráis así que no es mala recomendación que utilicéis el mismo editor que yo utilizo yo suelo poner el siguiente símil y es que realmente un editor al final es algo así como un coche desde el punto de vista de cuando aprendes a conducir coches es decir me da igual el editor que uses porque al final todos tienen volante y tres pedales y cambio de marchas pero claro esto de que todos los coches tienen volante y tenéis pedales y cambio de marchas es muy bonito es muy bonito de decir cuando ya sabes conducir pero claro en tu primer día de conducción tú dices vale no me cuentes que todos los coches tienen volante y tal porque no sé conducir todavía con lo cual tú enséñame a conducir este coche y luego ya hablaremos de otros coches vale pues ocurre algo parecido que a un nivel experto yo te puedo decir que al final todo programa son igual pero claro pero tú dirás vale pero por si acaso pierdo y por si acaso entonces algo en la pantalla ya no sé dónde está en mi pantalla pues no está mal que empecemos con el mismo entorno de desarrollo y bueno otra cosa que te quiero decir esto ya es manía personal pero pero si quieres digamos sacamos toda la manía de personales y es que bracket es un programa de adobe adobe es una empresa que fabrica photoshop fabrica illustrator fabrica en design y otro tipo de programas de diseño gráfico y de multimedia claro porque adobe regala un programa como brackets pues bueno todos sospechamos que quizás pueda llegar un momento en el que en un futuro pues brackets deje de ser gratuito y ya no me digamos tenga enganchados a todos los usuarios que están acostumbrados a brackets pero lo mismo ocurre por ejemplo con visual studio visual estudio como tú mismo has dicho hace años era de pago en este caso microsoft se ha dado cuenta de que pues la tendencia del mercado le empuja a abrir el entorno para hacerlo gratuito pero no sabemos cuando visual estudio habrá atrapado a suficientes usuarios como para decir muy bien ahora lo vuelvo a hacer de pago ahora que estáis ya todos enganchados a aviso al estudio lo que te quiero decir es que yo el curso en absoluto lo voy a enfocar a un entorno de desarrollo oa otro lo voy a enfocar única y específicamente al código para que tú puedas saltar al editor de código que tú quieras en el sistema operativo que tú quieras y lo puedes hacer correctamente y mientras vas instalando hay otra cosa que te quiero decir antes de empezar que es algo que me he dejado antes a mitad y es que antes he insistido en lo de que el editor de código tenga colores para identificar cuando cometes un error entonces hay una cosa que te quiero dejar clarísima ahora mismo antes de que pase ni un solo minuto más y es que tú vas a cometer errores tú vas a cometer errores yo voy a cometer errores todo el mundo va a cometer errores es decir programar sin cometer errores no es un objetivo o al menos no es un objetivo realista es imposible programar sin cometer errores lo digo porque la comisión de errores en un momento dado te va a llevar a la frustración entonces no hay que frustrarse simplemente lo que hay que hacer es dar por hecho que cometer errores es algo completamente natural acostumbrarse a ello y no aspirar a no cometer errores sino aspirar a encontrar los errores lo más rápido posible arreglar los errores lo más rápido posible por eso es por lo que insisto en que el editor de código tenga lo del coloreado porque el coloreado te va a ser una ayuda para encontrar lo más rápido posible los errores y arreglar los males de ahí no del color y no es que me haga especial el uso del colorín pero lo necesito para esto vale entonces una vez que brackets está instalado simplemente le voy a llamar en mi caso en mi caso aparecerá con unos cuantos archivos de antes momento entonces voy a cerrar todo lo que tengo aquí [Música] y cerrar todo vale en tu caso ahora cuando abras ahora cuando abras bracket aparecerá por aquí aparecerá por aquí algún tipo de página web perfecto exacto y en definitiva me da igual realmente lo que aparezca aquí ahora cuando se instale porque yo lo que quiero es que vayas bueno vayas o vayamos al archivo debemos a archivo nuevo con lo cual ves que se crea voy a llegar esto mirad aquí se creara el primeros pasos esto es lo que y esto es lo que verás que se te va a abrir en el momento en el que se te abra brackets por primera vez es un archivo que digamos viene de muestra pero como te digo vamos a ir archivo vamos a crear lo nuevo y vamos a ir a continuación a archivo guardar como y lo guardaremos dentro del escritorio curso aplicaciones web con el nombre agregó te explicaré por qué index.hu bl y sobre ese archivo vacío es donde realmente vamos a empezar a programar para continuación es cuando podemos empezar a escribir el primer lenguaje con el que vamos trabajar es el lenguaje html y este lenguaje es un lenguaje basado en marcas es un lenguaje de marcaje y esto quiere decir que yo a continuación voy a escribir menor que html mayor qué y ocurre lo siguiente vamos a ver en el lenguaje html la gran mayoría de marcas se abren y se cierran en el momento en el que yo he escrito lo voy a volver a hacer en el momento en el que he escrito menor que html uy nuestro html mayor que automáticamente esto es lo que se llama la etiqueta de apertura automáticamente el sistema ha creado para mí esta etiqueta de cierre que es la etiqueta de cierre de html entonces es una una se diferencian de la otra en cuanto a qué html no lleva barra y la etiqueta del cierre lleva barra punto html esto quiere decir que si yo ahora por ejemplo aquí en el medio crea una etiqueta que se llama longaniza en el momento en el que yo cierro la etiqueta automáticamente me crea la etiqueta de cierre longaniza vale yo esto lo hago en plan de broma pero realmente no es tan broma porque fíjate que no está en broma en el momento en el que realmente el programa me ha creado una etiqueta de cierre longaniza el lenguaje html es uno de los lenguajes más abiertos que existen de hecho ya te contaré más adelante que el lenguaje html deriva de otro lenguaje mucho más abierto todavía que es el lenguaje xml en el lenguaje xml tú te creas tus propias marcas el lenguaje html es un lenguaje de marcas donde ya existen una serie de marcas predeterminadas entonces la etiqueta html es una de las marcas que vienen predeterminadas la etiqueta longaniza no es una de las marcas predeterminadas pero como has visto se puede utilizar y tú te puedes inventar tus propias etiquetas es recomendable no en absoluto es recomendable pero como poder se puede esto es una diferencia muy grande porque hay otros muchos lenguajes de programación donde no es una cuestión de si es recomendable o no recomendable es que directamente no se puede luego también te voy a decir que más adelante voy a eliminar la etiqueta longaniza más adelante te hablaré de una cosa que se llama el html o mejor dicho el w3c validador el w3c valley dator que es el validador del consorcio w3c es un validador donde puedes subir tu código y te dices si es correcto o no es correcto es decir te dice si sigue el estándar o no sigue el estándar yo soy muy poco talibán de seguir los estándares es decir hay que escribir código correctamente pero el código lo importante es que funcione más que siga los estándares al pie de la letra por eso es por lo que nosotros enseñaré más adelante no me voy a obsesionar con ello pero como el cumplimiento de los estándares a veces también afecta a cómo google aprecia nuestra web en cuanto a que si cumplen los estándares las aprecia mejor que si no los cumplen pues llegado el momento te diré que esto existe y que conviene que lo sigamos vale pero como verás no voy a ser un talibán de los estándares cuando yo creo una etiqueta de html y a continuación se ha fijado el programa me la ponía a continuación y yo lo que he hecho es bajar para hacerme un poco de espacio en el medio yo lo que estoy haciendo es decirle al programa dentro entre aquí y aquí lo que hay aquí dentro va a ser código html es decir lo que hay entre la etiqueta de apertura y la etiqueta de cierre va a ser html siguiente cuando he estado aquí cuando el cursor se me ha puesto al principio de la línea yo lo que he hecho no es pulsar varios espacios sino que lo que he hecho es pulsar un tabulador de hecho un programa yo solo he pulsado una vez el tabulador esto es porque de esta forma visualmente va a quedar claro que lo que yo escriba dentro va a estar contenido hay una gran cantidad de lenguajes de programación donde esto que acabo de escribir que son las sangrías son meramente estéticas no son funcionales el programa no va a funcionar ni mejor ni peor porque tengan sangrías o no las tenga pero se recomienda utilizar sangrías por claridad visual porque vas a ver que el código se va a complicar muchísimo y necesitaríamos escribirlo de la forma más clara y más ordenada posible para que cuando se complique mantengamos algo de control entonces dentro de esta etiqueta html yo voy a escribir dos cosas ahora con lo que voy a escribir a continuación vamos a pensar que estoy de coña igual que con la etiqueta longaniza pero de empezar prometo que no entonces voy a escribir por una parte o sea la cabeza en inglés y me hago un espacio y luego por otra parte a continuación voy a escribir body cada una de estas dos etiquetas se abren y se cierran la etiqueta head se abre aquí y se cierra aquí fíjate qué bien viene el color porque el color en cuanto hago clic en una etiqueta me dice cuál es su pareja y la etiqueta body se abre aquí y se cierra aquí entonces estas etiquetas son obligatorias en cualquier página web en cualquier acción web y a continuación te voy a mostrar una cosa que se llaman los comentarios los comentarios en html son un poco extraños de escribir te lo voy a decir se escriben con menor que exclamación guión guión y se cierran con guión guión mayor que entonces verás que el color del código se ha vuelto gris y yo ahora puedo escribir y ahora veremos que reporta función en esto puedo escribir lo que me dé la gana entonces voy a escribir un comentario en castellano puro para dejarme una marca para dejarme un recordatorio para mí mismo para más adelante entonces pues voy a decir lo que está en el head no por de acentos en el head va al navegador y no lo ve el usuario por contra pongo otro comentario en el body lo que está en el body sí que lo va a ver el usuario en la web esto es un comentario hecho estos son dos comentarios técnicamente los comentarios no se interpretan es decir el sistema pasa completamente de los comentarios son comentarios que son notas que te dejas a ti mismo o dejas a otras personas que trabajen contigo en un momento dado para anotar ciertas cosas en el código y ahora dentro del body voy a escribir el clásico típico y tópico hola mundo cuando pensamos escribir en cualquier lenguaje de programación pues lo primero que escribimos es hola mundo dicho esto ahora lo que quiero es ejecutar el código que acabo de desarrollar en un navegador web cuando estamos trabajando con aplicaciones web evidentemente lo primero que queremos es validar esto en un navegador web a continuación lo que voy a hacer por tanto es que si aquí tengo abierto chrome voy a pinchar este archivo index.hu tml y lo voy a arrastrar a una nueva pestaña del navegador puedes utilizar el navegador que quieras absolutamente el que quieras en un momento dado veremos que existen algunas diferencias entre los navegadores pero al nivel del que estamos hoy puedes utilizar realmente cualquier navegador te cuento te he preguntado qué navegador vas a utilizar más que nada porque más adelante sí que importará el navegador que utilices para una cosa que se llama depuración pero esto no va a ocurrir hoy todavía tenemos que llegar a javascript para necesitar el depurador yo en mi caso estoy utilizando google chrome por una sencilla razón o sea no es el que más me guste o el que menos me guste hay gente que dice que si es más ligero otra gente califica si se come la rama con patatas hay gente que dice que como es el navegador de google que te espía constantemente yo suelo decir y quien no te espía hoy en día pero en definitiva lo que voy a decir en lo que voy a hacer es que voy a ir a statcounter global stats esta es una página con estadísticas a mí me gusta mucho la utilizo muchísimo sobre todo para estudios de mercado a nivel tecnológico entonces me voy a ir por ejemplo a evaluar cuáles son los navegadores para tengo worldwide lo que voy a hacer es spain directamente hoy 1 de igualdad lo que quieras entonces voy a spain vale y quiero desde 2009 hasta hoy hasta junio de 2020 voy a visualizar la gráfica es posible que tarde un pelín porque he pedido un montón de sí correcto entonces mientras tanto mientras que será cargando la gráfica podemos ver aquí arriba que actualmente google chrome tiene el 72% de la cuota del mercado entonces esta es la razón por la cual utilizó crump y es más que nada para tener un navegador que coincida al máximo posible con los navegadores que tengan la gente en segundo lugar tenemos safari que es el navegador que viene por defecto con el sistema operativo de apple ya que muchos usuarios de apple son vagos en el sentido de que bueno se avienen sofá mismo para que quiero instalarme otro y luego viene firefox que en su momento dado fíjate que tuvo su gran cuota de mercado en su momento fue la gran alternativa a internet explorer luego tenemos el navegador de y por defecto de samsung esta gráfica está cogiendo también teléfonos móviles luego tenemos edge legacy y luego tenemos internet explorer he querido seleccionar tanto tiempo en esta gráfica simplemente para ver cómo en un momento dado después de la guerra de los navegadores ocurrió entre 2002-2004 pues internet explorer fue cayendo cayendo cayendo cayendo poco a poco hasta que prácticamente hoy pues como ya veis tiene una cuota de mercado de un 1,18 por ciento y en su momento firefox fue la gran alternativa a internet volver quiero que sepas que yo a nivel filosófico simpatizo muchísimo no sólo con firefox sino con la mozilla foundation o sea con la fundación que hay detrás de navegador de hecho yo hace años me compré un navegador un navegador un teléfono móvil que llevaba el firefox es el navegador el sistema operativo de firefox para teléfonos móviles al final tuve que tirar ese móvil porque no tenía whatsapp y mis clientes me obligaban a tener whatsapp pero te quiero decir que es un móvil que me encantaba pero a día de hoy google se ha hecho con la mayoría de cuota del mercado con lo cual lo que te quiero decir es que estoy usando google pero sé que darle demasiada bola a google es peligroso porque actualmente prácticamente es un monopolio vale pero no lo voy a usar porque sea especialmente fan voy de de google sino por una cuestión de cuota entonces voy a cerrar esta página igual la usaremos más adelante para averiguar datos para cualquier otra cosa de momento la cierro y tengo el resultado en pantalla de lo que acabo de hacer esto lo voy a guardar le voy a minimizar lo más adelante lo sacaré voy a si me pongo esto un poquito más limpio y así la interfaz esto que es así esto es no minimizó bien y me quedo con esto ya si tengo un poco el espacio de trabajo un poquito más limpio bueno el resultado de todo el trabajo que hemos hecho hasta ahora puede ser un poco decepcionante en el sentido de que todo lo que hemos escrito en la pantalla y realmente lo que pone eso la mundo entonces quiero hacer lo siguiente quiero que pulsemos un botón derecho y que veamos el código fuente de la página y que de esta forma comprobemos como sí que tengo todas las etiquetas que he escrito antes aunque las etiquetas no tengan una representación visual sí que existen dentro de la página web entonces volviendo a aquí al free mind volviendo al mapa mental que estaba haciendo antes hemos hablado de que html es la estructura cuando hablamos de la estructura yo suelo para que entiendas un poco cuál es la relación de estos lenguajes es solo comparar a estos lenguajes con una persona humana vale entonces yo suelo decir que html es como el esqueleto de una persona el esqueleto no se ve tú cuando ves a alguien caminando por la calle no ves su esqueleto ves su piel y hablaremos de esto de fs s pero pero aunque no veas el esqueleto aunque el esqueleto a priori sea invisible tiene que haber un esqueleto dentro de esa persona porque si no esa persona se caería como si fuera de goma entonces con html ocurre exactamente lo mismo que este resultado sea un poco frustrante no quiere decir que lo que hemos hecho no tenga importancia otra cosa que no tenga representación visual pero sí que tiene importancia vale ahora habrá etiquetas que como ahora verás sí que tienen cierta importancia para que este código de hecho cumpla vale como ya te digo no soy muy talibán de la normalización pero sí que voy a intentar que el código que escriba sea correcto desde el principio te voy a enseñar un par de etiquetas más y luego pasamos este código el validador para que nos diga si está bien o está mal entonces la primera escucha en la primera cosa que he hecho mal es esta y es que un texto en html no debería estar solo ese texto puede ser de párrafo puede ser de título puede ser de lo que tú quieras pero no puede estar solo entonces por ejemplo yo voy a escribir h1h1 se abre y se cierra y dentro de ese h1 introduzco el hola mundo cuando hago esto generalmente mis alumnos suelen preguntar oye porque hay veces que entre la etiqueta de apertura y la etiqueta de cierre tiras hacia abajo y hay otras veces que entre la etiqueta de apertura y dad de cierre lo pones en la misma línea mi respuesta suele ser porque puedo vale entonces la respuesta un poquito más ampliada es que da igual lo puedes hacer de cualquiera dos formas pero si algo así o sea puedo hacer este código y funciona exactamente igual está igual de correcto el problema es que estoy malgastando tres líneas para algo que podría hacer en una sola línea entonces quiero decirte una cosa que te lo anticipo más que nada no porque sea divino sino porque este curso lo he impartido millones de veces y es que ahora mismo estamos en la línea 9 pero como te podrás imaginar este ejercicio a lo largo de las clases va a ir haciéndose grande haciéndose grande haciéndose grande y por tanto llegará un momento en el que será importante haber ahorrado la máxima cantidad de espacio posible vale ahora si tú hoy por ejemplo decidieras que el gran mundo lo pones bajo no hay ningún problema porque siempre luego se puede modificar el código valència que no habría ningún problema por eso ahora guardo recargó es decir pincho este botón de aquí cuando estoy impartiendo este tipo de curso y alguien de hecho usa brackets me dice oye no hace falta que guardes y recargas aquí porque hay un botón con un rayo que lo que hace que este de aquí que es que cuando yo guardo automáticamente me refresca el contenido en la pantalla y cuando alguien me dice eso yo lo que suelo decir es lo sé pero no lo quiero cuando no quiero porque el rayo es específico de brackets pero no está en otros editores de código vale por eso no quiero enseñarte herramientas que sean específicas de brackets quiero enseñarte aquello que puedes hacer con cualquier otro editor de código entonces ahora aquí abajo ahora te explico la etiqueta h 1 por cierto aquí abajo lo que voy a hacer es meter una etiqueta p y con esta etiqueta p lo que voy a hacer es escribir un poco de texto este es un texto que estoy escribiendo para mi primera web 2.0 vale todo es guardo recargo y lo que voy a hacer ahora es que voy a escribir voy a forzar un acento y pongo mi nombre es jose vicente la rata la conocen la bastante por alguna parte para forzar una cosa que va a ocurrir ahora verás inversión aguardo recargo y aparece esto esto es lo que quería ver vale es que claro si no ponemos acentos no hay errores por eso quiero porque no acento para que abarque el error y veamos el por qué se produce ese error bien antes de empezar voy a explicarte lo que he hecho hasta el momento hasta el momento lo que he hecho es poner dos etiquetas de formateado del texto entonces el h1 el h viene de reding voy a poner todo esto en el free main el html etiquetas entonces estructurales texto en las estructurales hemos trabajado con la etiqueta html con move y con help en el texto vamos a trabajar con cabeceras las cabeceras en inglés se llaman eddings de ahí la h vale y hay seis cabeceras h1 h2 h 3 y así hasta h 6 cuando explico esto algún alumno siempre me dice oye porque hay 6 y porque no hay 8 o porque no hay 12 y yo siempre cuando llega esta pregunta en lo que hago es contar lo que me ocurrió en mi proyecto final de carrera en la universidad y es que hice títulos y subtítulos y subtítulos y subtítulos y en el tribunal me echaron una bronca porque me dijeron que no hay que usar más de tres niveles de complejidad porque si no la gente argumentó que se pierde vale entonces yo siempre suelo decir lo mismo hay seis pero de hecho prácticamente nunca deberíamos llegar a utilizar ni el h5 y el h 6 luego por otra parte está la etiqueta detesto o se llama más que texto perdona párrafo o parágrafo técnicamente la palabra en inglés correcta es para graf pero en castellano aunque existe la palabra parágrafo solemos utilizar más la palabra párrafo vale simplemente que sepas que cuando pongo una etiqueta p quiere decir que voy a escribir texto normal de escribir texto de párrafo a texto sin texto de título por ejemplo cuando escribo este ejercicio también la gente lo que suele preguntar a continuación es oye no quiero que el título esté en negrita quiero que sea más pequeño quiero que sea rojo quiero que esté subrayado quiero que una serie de cosas a lo cual yo suelo decir no todavía porque estamos trabajando en html y html es la estructura pero recordamos que otro lenguaje que es tss que es el estilo entonces si algo es negrita no lo es es grande es pequeño si es rojo es azul es el estilo no es html vale por eso no es que no diga no no lo quiero explicar no lo quiero explicar ahora que estamos en html cuando llegue el momento cuando llegamos a css hay evidentemente sí que lo explicaré entonces por aquí tenemos bueno un pequeño problema evidentemente y es que los acentos no se están interpretando correctamente entonces verás los navegadores depende del navegador en el que estemos trabajando es posible que los navegadores nos hagan digamos la gracia o el favor de interpretarlos correctamente en el juego de caracteres con el que estamos trabajando yo en este caso estoy con una versión de chrome que aunque está en castellano por defecto no interpreta juego de caracteres que quiere decir el juego de caracteres verás yo voy a escribir una etiqueta sino también porque claro ese archivo que tú estás trabajando igual en tu navegador se interpreta correctamente pero igual lo publicas en la web y en los navegadores de usuarios no se interpreta correctamente entonces yo me escribir una etiqueta que se llama meta las etiquetas meta es como como te dije yo en la meta lingüística a la meta lingüística es la lingüística que habla de la lingüística pues las metas etiquetas son etiquetas que hablan de otras etiquetas entonces voy a poner meta charset es igual y fíjate que aparecen un montón de char set esta es otra de las buenas noticias d de programas como brackets cómo ves el estudio también y es que te auto rellenan un montón de cosas pues verás ahora a continuación yo lo que voy a hacer es que voy a poner una codificación llamada f8 la codificación de f-8 es la correcta para europa occidental pero moment in antes de hablar de eso antes de poner eso lo que quiero que veas es que pone big five que que tú ahora mismo no sabrás lo que es big fight pero yo te digo que es la codificación de caracteres para china para chino cantonés chino chino simplificado no me acuerdo hay una que donde ponen caer que es coreano hay un montón de ellas donde pone de jp que es japonés entonces yo te quiero decir lo siguiente ten en cuenta que nosotros damos como totalmente normal los caracteres tales como por ejemplo las vocales con acento o la ñ pero el mundo tecnológico sobre todo está creado por personas angloparlantes entonces la colación por defecto es decir el juego de caracteres por defecto de cualquier sistema informático es el sistema anglosajón esto quiere decir que lo normal es que ocurra lo que me está pasando a mí que es que cualquier carácter que sea parte del juego anglosajón no es reconocido correctamente a menos que le digamos al sistema informático y en este caso le voy a decir efe 8 que voy a usar un juego de caracteres diferente lo digo porque generalmente nosotros pensamos que nuestro juego de caracteres es lo más normal del mundo y luego pensamos que los rusos son raros por tener el juego cirílico o pensamos que los chinos coreanos japoneses son raros por tener un juego de caracteres ideográficos pero sin embargo nuestro juego de caracteres es raro para una persona anglosajona puesto que ellos no utilizan ni acentos ni ellos entonces es un poco para decirle al sistema del sistema que sepas que estoy en europa occidental y por tanto si ahora guardo y recargo quiero que me reconozcan automáticamente y correctamente acentos eñes pesadillas la beta e incluso alemana vale cualquier carácter digamos que sea de europa occidental y esto ya está casi perfecto sin embargo hace falta una etiqueta que aparentemente no parece que haga falta perdona hace falta dos etiquetas ahora hace cuento cuáles son la primera una etiqueta llamada dr html docta como te puedes imaginar es una etiqueta lo sé es muy rara porque fíjate que es menor que admiración ninguna otra tiene eso y luego doc type doc de documento y type de tipo html esta etiqueta dice que sepas que lo que te vas a encontrar a continuación es html 5 no cualquier otro número 15 para verás por qué y esta etiqueta es obligatoria que a día de hoy y ya hace unos cuantos bastantes años el html5 es el estándar en web pero es necesario poner esta etiqueta no me voy a enrollar mucho con respecto a esto simplemente lo que te voy a decir es que si pones html version en la wikipedia por ejemplo vamos a ver html [Música] html versos wikipedia una página específica que no vale en castellano mejor que no entonces más que nada porque la wikipedia en inglés obtener más información claro entonces verás que por ejemplo el html verso es timeline pues mientras que html 1 como te comentaba hace un momento nació en 1991 el html 2 en el 95 html 397 html 4 97 hp 3 euro poco el html 4 duro bastantes años y mientras que el html 5 empezó a estandarizar se en 2009 2010 es en 2014 donde se firma el acuerdo del estándar y por tanto el html5 es el que tenemos actualmente técnicamente hay dos pequeñas subversión es que es el html5 5.1 y el 5.2 de hecho en este curso como ahora lo verás a continuación vamos a estar trabajando con html 5.1 y 5.2 es decir con las actualizaciones vale pero mira de hecho aquí está en el 91 la primera versión el primer draft entonces en en html 4 como verás había tres variaciones que es el estricto el transicional el tradicional y envasado en marcos que a día de hoy desgraciadamente está prohibido vale pero tenían su utilidad es por esto que en html esto que estás viendo aquí indica que no estoy trabajando en html 4 sino que estoy trabajando en html 5 aunque no lo ponga vale aunque ai ponga html pero básicamente le sirve al sistema para saber que este documento está en html 5 y por último pues por último cualquier cualquier documento html debería tener una etiqueta calle sant o title si yo no creo una etiqueta title veis que allá arriba pone allá arriba en la pestaña pone index html pero yo vengo por aquí y digo curso de aplicaciones web guardo recargo y ahora verás que ya arriba no pone index.html sino que pone curso de aplicaciones web esta etiqueta a un nivel práctico no es tan importante pero como ahora veremos a continuación se requiere para que este código valide como correcto entonces me voy a volver al validador de la w3c y en este validador yo puedo validar de tres formas yo puedo validar colocando la url de una web que esté publicada en internet pero nuestra web no está publicada todavía en internet ya la publicaremos pero hoy todavía no puedo validar subiendo un archivo así que tengo un archivo para subir o puedo validar copiando y pegando el código que yo he hecho dentro de este recuadro en este caso como tengo un archivo puedo seleccionar archivo puedo ir a escritorio puedo bien el curso de aplicaciones web puedo ir a index le doy a check y si todo ha ido bien veremos lo siguiente veremos que vamos a ver bien vale me dice que todo está bien de hecho vamos a ver qué dice el chequeado en la comprobación del documento ha sido satisfactoria no me da ningún error y me da un warning me da una advertencia y lo bueno que tiene este validador es que no solo te dice lo que está bien lo que está mal sino que además te da consejos y te dice mira te recomiendo considera usar una etiqueta la pnc perdón un atributo lang en la etiqueta start para declarar el lenguaje de este documento aunque ya lo hemos declarado realmente arriba arriba hemos vetado la colación y recuerda que ute f8 hemos dicho que era para para europa occidental pero no para que se sentara hay un montón de idiomas entonces el sistema de decimales pero pero qué idiomas concretamente entonces esto de añadir un atributo el anc quiere decir que localizó el html start tag es decir la etiqueta de apertura de html y pongo un atributo que quiere decir meterme dentro de la etiqueta y poner la pnc es igual a uno de hecho verás que ya aparecen las etiquetas del lenguaje te lo digo porque habrás visto que he puesto ese de español y dirás nosotras inventado nombre supongo que ese es porque sé que es el código para españa entonces es bueno para el lenguaje español más que para españa entonces pongo ahí la pnc ese y ahora a continuación puedo volver atrás puedo volver a seleccionar el archivo puedo volver a chequear y si todo va bien ahora me dirá que el documento se ha completado y no hay ningún error ni ningún warning a mostrar vale lo cual quiere decir que mi código al menos ahora mismo el código al menos llegado este punto está perfecto entonces como ya te digo no voy a hacer esto cada ejercicio que hagamos sobre todo porque cuando el código se complique verás que hay concesiones que hay que realizar y verás que hay veces que nos tenemos que saltar un poquito la normalización vale tenemos que cometer los grandes errores evidentemente pero sí pequeños errores entonces ya te digo que no me voy a volver otra cosa que te digo es que yo ahora vengo recargo aquí en la pantalla ves que no hay ninguna diferencia es decir la etiqueta la pnc es igual a es no marca ninguna diferencia ahora bien si que te digo que esta etiqueta es importante no sólo para el estándar sino también para google para el maldito google entonces hay dos tipos de aplicaciones web hay aplicaciones web que son intranets es decir donde solo deben entrar los usuarios que tú digas y hay otras aplicaciones web que son externas que son visibles al público general en aquellas aplicaciones web que son visibles al público general te interesa poner etiquetas como éstas en las cuales estás declarando el idioma de la página web en el que vas a trabajar porque porque de esta forma tú lo que estás haciendo es darle pistas a google y google sigue una regla muy fácil de entender que es que cuanto más te lo ocurre es tú con google más se lo va a currar google contigo entonces te interesa te interesa ponérselo fácil a google para que google te considere bien y siendo que este curso no es ni de lejos un curso de marketing digital pero aunque sea un curso de programación pura y dura pero es inevitable dar una serie de principios como que por ejemplo pues cuando creamos una aplicación web vamos a querer que la gente especialmente cuando una aplicación web vista hacia el público vamos a querer que la gente la encuentre correctamente en google que google a día de hoy es el buscador principal entonces por eso te digo que no es mi intención hacerle la pelota a google pero sí que tenemos que portarnos bien con google si queremos que google se pierde se porte bien con nosotros vale entonces y verás para empezar creando una aplicación web que sea un poquito más interesante que esto a continuación voy a crear tres bloques estos tres bloques son dos de ellos nuevos de html5 y uno de ellos nuevo de html 5.1 que son los siguientes dime de una web dime una la que tú quieras absolutamente la que tú quieras en facebook esto es como los magos que dicen en una carta vale pues vamos a entrar en facebook en facebook si te fijas aquí arriba tenemos con una especie de cabecera luego tenemos el cuerpo principal donde está todo y luego abajo bueno aquí en este caso está un poco oculto aquí a la izquierda tenemos los pies de página vale tenemos un pie de página vive otra página vale vale vale sí ya he visto antes que en tu correo ponía lo de adentro iba a preguntar y entre que ponía beam y que me dijiste que eras ingeniero de verificación pues ya suponía que me venía de todo el tema de bits y yo arriba era imaginable yo arriba tengo una cabecera abajo tengo un contenido esto es un wordpress de hecho porque aparte huele a wordpress desde lejos y yo también tengo un wordpress está bien que lo sepas ya que que sea programador no quiere decir que sea mete en el programa mi propia web desde cero porque es igual pues lo hace rápido y bien para que hacerlo en plan difícil y aquí abajo tienes un pie de página y de hecho voy a hacer una cosa fíjate que sin saber qué plantillas utilizado yo lo que hago es que pulsó el botón derecho le voy a inspeccionar y voy a ver qué vamos a ver voy a ver que la parte de arriba la cabecera es una etiqueta html llamada heather vamos a ver la parte principal a ella depende no mira ves esta plantilla que tienes no está actualizada a html 5.1 porque tenemos una etiqueta genérica ardid con y de contenido vale ahora hablaré de esto y por último me juego lo que quieras que aquí abajo esto que tienes aquí abajo del todo es una etiqueta momento es una etiqueta llamada footer vengo por aquí y compruebo que tengo esta etiqueta llamada footer entonces he querido que me dijera si esta comprobación que te acabo de decir la puedes hacer en cualquier página que tú quieras para demostrarte que la mayoría no todas pero la mayoría de las páginas a día de hoy siguen lo que se llama el modelo de sandwich cuando digo esto del modelo de sándwich de vez en cuando me ocurrió una vez culminadas que me ocurrió un alumno levantó la mano en clase presencial y me dijo oye esto del modelo de sándwich te lo acabas de inventar tú entonces yo le dije a este alumno si me lo hubiera inventado yo lo hubiera llamado en un modelo de sándwich sino un modelo de bocadillo de jamón y queso vale porque es más español que el sándwich entonces sí sí ya la semana sandwiches porque lo ha inventado uno que no sabe lo que es un bocadillo entonces no lo inventado yo parece no puedes buscar pero a día de hoy yo no sé lo que ocurrirá en 10-15 años pero a día de hoy la gran mayoría de páginas web se articulan en formato de heather esa cabecera por aquí contenido en el medio y pie de página en la parte de abajo y es por esto que html5 y 5.1 html5 nos propone dos etiquetas que es g ver no confundir con head es diferente parece igual pero no tiene nada que ver que es donde voy a poner aquí voy a poner la cabecera de mi web luego suter que es aquí voy a poner el pie de página de mi web y en html5 introdujeron una etiqueta para la cabecera y una etiqueta para el tiene página pero no introdujeron una etiqueta para el contenido principal de una página web entonces desde html 5.1 existe una etiqueta llamada main en la etiqueta main aquí voy a poner el contenido principal de mi web estas etiquetas mientras las vas escribiendo yo voy a irme al free mind y son etiquetas estructurales de html5 estructura del body que son no son las únicas ya tiene escribiendo más etiquetas pero son de momento el header el main y el futuro guardamos y voy a minimizar y ahora lo que voy a hacer es un poco reestructurar el código que había escrito entonces esto que he puesto aquí de hola mundo pues lo voy a bajar aquí abajo al jaber y voy a crear la página de josé vicente carratalá el texto me lo voy a cargar de momento ahora lo volveré a escribir a los reubicar y verás vamos a ver debajo del h 1 tuvo evidentemente no tienes por qué hacer exactamente la misma web que yo pero al menos ahora al principio sí que te recomiendo que me sigas más graba para que todos vayan apareciendo lo máximo posible y conforme vaya avanzando el curso pues ya ir haciendo ahí tu propio ejercicio que no tiene por qué ser exactamente igual que el mío verás reponer con suficiente carratalá como la gente no tiene por qué saber quién es josé vicente carratalá yo siempre digo que si yo hiciera la página de madonna pues no diría mandona actriz y cantante vale porque es como haber esos obras que hace la gente de saleh tienes madera pero la gente no sabe quién es consumición de catalán entonces no puedo no puedo suponer que escribir justamente sale todo el mundo va a saber quién soy en esa continuación pongo h2 y pongo desarrollador diseñador y formador y entonces guardo recargo y observamos lo siguiente antes hemos hablado de que cuando pongo un título aparece con un cierto tipo de letra negrita grande con espaciado y esto es lo que se llama el estilo por defecto del navegador es que quiere decir que cuando el navegador se encuentra con un título si yo no especificado el estilo que tiene el navegador tiene un estilo por defecto esto a mí ahora mismo me da igual me da exactamente igual porque yo sé que más adelante voy a aprender un lenguaje llamado css con el cual voy a poder quitar la negrita voy a poder cambiar el color voy a poder cambiar el tamaño me puedo hacer lo que me dé la gana poder cambiar el tipo de letra podrá hacer lo que quiera pero a mí ahora hay una cosa que me interesa más y es saber que el primer título lo he puesto con estilo h1 y el segundo lo he puesto con estilo h2 eso quiere decir que el título a h1 es más importante y el título h2 es menos importante y sobre todo insisto y te lo vuelvo a decir una vez más eso es importante para google para que cuando google pase por mi web sepa qué es lo más importante y sepa qué es lo menos importante para demostrarte esto yo suelo usar una página que se llama burbank está en burbank junto con esta página te hace una cosa que se llama un informe ese o sea es un concepto como te decía antes de marketing digital y tiene que ver con el posicionamiento orgánico de una web entonces si yo entro en esta página y quiero sacar un informe para saber si mi página web en este caso es jugarse puntocom si está bien posicionada o no está bien posicionada yo en este caso me vengo por aquí bajo para aquí abajo y lo primero que me encuentro es que me dicen tienes que tener una etiqueta de título ah pero yo he escrito una etiqueta de título lo ves esto ya sería correcto para el posicionamiento tienes que tener una etiqueta de meta descripción y yo aquí no la tengo la tengo en mi página web que es un wordpress pero no la tengo aquí ahora a continuación la pondremos y a continuación tienes que tener encabezados y si te fijas estos h1 h2 que estamos escribiendo aparecen aquí como que google los valora para que mi página web esté correctamente indexada vale y de hecho luego hablaremos del análisis semántico de lo importante que es repetir ciertas palabras para que google me asocia a ellas entonces con esto lo que te quiero decir es que si yo te digo que poner un título es importante no es porque yo lo diga sino porque prácticamente cualquier fuente de información donde acudas tendría que lo importante es tener un título si yo a continuación ahora te digo que debemos tener una meta descripción es no es porque yo te lo diga sino porque cualquier informe que consulte este dirá que es importante tener una meta descripción como a veces como de vez en cuando cuando vamos al médico vamos a por una segunda opinión vamos a otra web llamada seo site check up no sé o check up puntocom voy a introducir de nuevo otra vez en mi caso mi web tu caso evidentemente te interesará más analizar tu propia web cambia para saber cómo está porque aprovecha evidentemente entonces como exacto tus resultados otros como lo que te he hecho y te diré muchas veces más que es lo aprovecha y mata dos pájaros de un tiro y lo vuelven en la pantalla bueno aquí te va a decir esperamos un segundo a que aparecen los resultados empiezan a aparecer por aquí entonces si te fijas tienes que tener un título tiene que tener una descripción en este caso va directamente a las palabras clave y este informe prima las palabras clave sobre los títulos a h1 y h2h lo que sea pero fíjate que por ejemplo el título y la descripción siguen estando en las primeras posiciones entonces voy a minimizar esto y a continuación lo que voy a hacer es en este caso era para demostrarte el por qué es importante poner el h1 el h2 lo que sea y a continuación aquí lo que voy a hacer es poner una etiqueta meta y en este caso vamos a ver meta raúl vamos a poner vamos a ver el código fuente de la web estoy viendo aquí los atributos echarse no content es lo que voy a hacer a continuación esta ley me es igual a descripción content es igual a lo que sea que quiero decir con lo que sea un segundo mira que la pantalla yo busco en google jugarse o busco en google jugarse o busco en google josé vicente carga vale lo que sea y si nos fijamos tenemos por aquí el título y tenemos por aquí una pequeña descripción entonces lo que aparezca en esa descripción es lo que va a aparecer dentro de esta etiqueta de contenido entonces por ejemplo mira sabes que me voy a copiar esto porque para que hay si yo ahora vengo aquí me daré cuenta de que ese proyecto de consultoría formación acerca inteligencia eso no aparece aquí no aparece aquí porque como te he dicho antes esto lo que está en el head va al navegador y no lo ve el usuario pero sin embargo es importante que esté aunque no se vea porque como estás viendo luego google lo utiliza para posicionarte vale entonces otra cosa que te digo otra cosa que te digo y como ya te digo inevitablemente se mezclan algunos conceptos de marketing digital pero tampoco voy a profundizar en ellos porque sería otra historia diferente entonces esto que estás viendo aquí esas palabras están elegida esa conciencia y están curadas a lo largo de los años quiero decir que con los años y lo que voy haciendo es meter y quitar palabritas según me va interesando te lo digo porque hay una página que se llama google trends donde por ejemplo si buscas beam y si buscas beam en el terreno específico del contexto de españa vamos a hacer correcto eso es claro pero una cosa es el nombre del blog pero luego si tienes que redactar una frase entera que otras palabras hay pues en este caso bien fantástico big band’ entiendo que no haber un momento a ver si pone o no es que si pongo mi marca y textura se rebajarán un montón los resultados y no habrá palabras clave voy a poner en mayúsculas parece que no tiene la suficiente vamos a verlo no ni siquiera tiene sí pero mira pero en definitiva en definitiva o bien pongo aquí y he visto aquí que por ejemplo beam server vale eso sí bean 360 vale he visto por ahí otra palabra que es metodología beam o espacio beam son palabras que la gente está buscando junto con la palabra beam luego mi recomendación para que la gente te encuentre es que esas palabras aparezcan en tu descripción vale digamos que uses los mismos términos que está usando la gente para que google te asocie correctamente a ellos y luego vamos a utilizar esto lo que vamos a utilizar una etiqueta un poquito más multimedia voy a abrir el free main para hacer esto un poquito más divertido y un poquito más visual dentro de multimedia tenemos muchos tipos de archivo tenemos sobre todo imágenes tenemos vídeo y tenemos audio entonces vamos a empezar hoy con la etiqueta de imagen es una etiqueta muy sencilla pero evidentemente lo primero que necesito es cargar una imagen entonces me voy a ir a google voy a buscar una imagen mía tú puedes buscar la imagen que quieras fundamente la que quieras y voy a descargar una imagen mía por ejemplo esta de twitter y la voy a bajar guardo la imagen como atención esto es muy importante tengo que guardar la imagen en la misma carpeta del curso de aplicaciones web te recomiendo que hagas una carpeta nueva el nombre de la carpeta será el que tú quieras por favor que no tenga acentos es decir si quieres una carpeta llamada imagen es intentar que la no tenga acento yo lo que suelo hacer es crear una carpeta img vale y muy importante el nombre de la imagen que no sea un nombre tan vale como esté yo voy a poner algo como josé vicente todo seguido y ya está y le voy a guardar ves que dentro de img pues hay josé vicente punto jpg vale es importante que tengamos localizado también es importante que la imagen tenga el nombre y el marcaje correcto para que pues para que luego cuando te busques en google pues aparezcas correctamente sí claro hay otros ojos emisión de carretera pero yo como la primera página de resultados y esto es importante por lo que te decía antes de lo importante no es sólo hacer una buena web sino que aparezca correctamente indexada en los buscadores bien pues ahora a continuación para a continuación lo que voy a hacer es que aquí abajo detrás de la h1 por ejemplo o arriba es arriba luego lo podemos cambiar de ordos lo de menos voy a utilizar una etiqueta llamada ing el nombre de la etiqueta no tiene nada que ver con el nombre de la carpeta son coincidentemente iguales y ahora voy a poner img src src viene del inglés source o sea fuente source digamos y ahora tengo que escribir ing barra y de hecho fíjate que incluso brackets me está reconociendo ya que existe una imagen en esa carpeta josé vicente punto jpg y voy a escribir eso de hecho si pongo el ratón encima e incluso me aparece la miniatura de la imagen esto es un poco lo de menos pero bueno pero es señal de que la ha cogido correctamente entonces guardo recargo y veo que tengo la imagen ay es decir veo que no solo puedo meter texto en un ernesto una imagen sino que puedo meter algo de multimedia dicho esto dicho esto ahora a continuación te acuerdas que te he dicho antes que no voy a ser muy talibán con el tema de el estándar de hecho voy a cerrar esta página me voy a saltar el estándar la razón por la cual me voy a soltarle estándar es porque ahora mismo esta imagen es muy grande y es tan grande que me machaca el texto es incómodamente grande entonces claro yo te diría lo siguiente y es que para editar el tamaño de una imagen no está html si nos vamos a este esquema tenemos el lenguaje donde estás tenemos el lenguaje pss la anchura y la altura es parte del estilo pero es que yo hoy todavía no estoy con css o mira sabes que lo voy a estar y así vamos empezando a meter un poquito de fs ese iba a hacer trampa iba a meter dos parámetros de etiqueta que son ilegales y ya puestos pues casi que lo voy a hacer con css entonces vamos a utilizar un tipo de css que se llama s en línea pss en línea es uno de los tres tipos que te voy a enseñar es uno de los tres tipos que existen o sistemas y para utilizarlo lo que hago es poner dentro de la etiqueta img de la misma forma que he puesto src pongo una etiqueta de estilo y luego dentro de estilo voy a poner por ejemplo width dos puntos 100 píxeles punto y coma mientras que todo el documento que he escrito hasta el momento está en lenguaje html esto que estamos viendo aquí está solo esas palabritas esos caracteres están escritos en lenguaje css y el lenguaje pss como te digo es un lenguaje específico para estilizar guardo recargo y ahora como podemos comprobar lo que he conseguido es minimizar lo que he conseguido es hacer más pequeña la imagen esto sigue siendo algo no demasiado legal como ya te digo no voy a pasar el validador del obedece pero lo más normal es que el validador me dijera que no se recomienda utilizar esto de aquí que se llama css en línea se recomienda utilizar cualquiera de los otros dos tipos que es css interno que es un css que se pone aquí arriba en la cabeza y css externo que es un css que se pone un archivo aparte pero eso complicaría ahora mismo demasiado la clase como estamos la primera clase no quiero hacerlo complicado quiero que sea sencillo quiero que sea entendible aunque no sea lo más correcto del mundo y ahora ahora a continuación vamos a ir a la etiqueta main en la etiqueta main es donde yo debería pensar qué es lo que quiero poner cuando digo pensar lo que quiero decir es lo siguiente yo por ejemplo me voy a ir a mi web en ajo cars.com y por ejemplo tengo un vamos a ver mira tengo una sección que es el header de la página vales es la cabecera el carrusel digamos tengo otra sección y esta sección tiene tres artículos tengo otra sección en esta sección tiene tres artículos tengo otra sección que es próximos cursos y tiene una serie de 10 artículos entonces en html desde hace muchos años de hecho como has visto antes cuando inspeccionado el código de tu web existe una etiqueta genérica que se llama dive que se llama separador me voy a abrir aquí y en etiquetas estructura principal veremos qué hay una etiqueta llamada sección que es una etiqueta para especificar que quiero una sección de la página una etiqueta llamada arctic el que suele estar dentro de section que es para indicar que dentro de esa sección hay un artículo un artículo no tiene por qué ser específicamente un articulo comprable de una tienda online sino que un elemento es un artículo y luego tengo la estructura genérica div div es de división precisamente una de las muchas razones de la existencia de html 5 y las etiquetas específicas para estructurar es porque antes se hacía todo con la etiqueta dyn y la gente llegaba a abusar directamente de la etiqueta bill sigue estando y sigue existiendo y sigue siendo legal pero vamos a intentar utilizarla lo menos posible entonces yo ahora vengo por aquí y voy a crear en este caso vamos a ver voy a crear un sección para no complicarme ahora mucho la cabeza lo que voy a hacer es como como si fuera duplicar la estructura de mi web porque una estructura clásica entonces voy a crear un sexo y voy a poner h3 aquí para el carrusel ahora lo cambiaremos voy a crear otro sexo con un h 3 aquí van los destacados sexo y por último por ejemplo aquí van los últimos artículos del blog por cierto que nos hemos dejado el futur sin hacer entonces voy a poner un h 4 y voy a poner copyright 2020 josé vicente carratalá entonces si ahora abrimos esto recargamos y vemos que aquí va el carrusel aquí van los destacados aquí van los últimos artículos del blog esta estructuración tiene un pequeño problema que ahora mismo es correcta pero tiene un pequeño problema y es que tengo tres etiquetas section que son iguales y cómo va a saber luego el programa cuál es la diferencia entre una etiqueta y otra etiqueta ahora mismo no lo puede saber porque ahora mismo son iguales entonces para esto hay dos parámetros de etiqueta que son el id y la clase son dos parámetros un poco a veces complejos de entender pero yo suelo aplicar la siguiente regla para explicaros fácilmente en estas primeras sesiones de estos cursos que es lo siguiente yo voy a poner por ejemplo y de tengo que elegir entre y de clase y en este caso voy a llamar a esto carrusel mi cuestión es en la web va a haber más de un carrusel o va a haber solo uno si sólo va a haber uno se pone un id y si va a haber más de uno se pone una clase entonces en este caso lo que voy a hacer es poner un ir ahora e pero muchas veces es leído por google y google leyendo el id del carrusel va a tener una cierta idea de qué es lo que va a encontrar aquí dentro vale por tanto mi recomendación es que lo pongamos en inglés para facilitarle a google como se dice carrusel en inglés que se me acaba de ir de la cabeza pues no lo sé pero ya lo sabía pero no me acuerdo entonces me voy al traer google translator y voy a ir de español a inglés carrusel y claro es el carrusel carrusel y pues bueno voy a ponerlo en definitiva es que me suena otra palabra pero da igual carousel lo que sea porque en definitiva o sea para hacer referencias fotos de google entenderá a qué me refiero ahora a continuación sec son destacados pues y de es igual a la palabra que quieras por ejemplo highlights vale y por último en sexo en esto que son los artículos últimos artículos del blog pues por ejemplo pongo blog yo que sé sabes luego se puede cambiar pero una serie de palabras con las cuales google entienda qué es lo que va a encontrar ahí dentro porque insisto una vez más y ese google usa esa regla de que cuanto más cuantas más pistas le des tú cuanto más masticado le des a google lo que hay en tu página web más se lo va a currar google contigo es como tú me lo pones fácil pues yo te lo pongo fácil vamos a ver ahora ahora a continuación lo que voy a hacer es poner unos últimos unos últimos artículos por ejemplo y digo arctic él y ahora yo vengo por aquí y digo class porque éste se va a repetir en un class blogs artículos y ahora por ejemplo aquí dentro voy a poner h5 título del artículo y contexto de parágrafo aquí voy a escribir el contenido del artículo y este arte que él con cuidado y este arte que lo voy a copiar y lo voy a pegar no lo voy a pegar muchas veces más porque entonces el código se medirá de la página y empezarás a perder la pista y es lo que no quiero vale entonces por eso lo copié un par de veces para que esté pierdes lo que sea pues no se vaya a ver la página porque esto es justo lo que te decía hace un rato y es que es esperable que en la medida en la que nuestro proyecto se vayan complicando pues luego otra cosa que te recomiendo es que hagas lo mismo que estoy haciendo yo en cuanto al uso de sangrías estás viendo que yo uso esmeradamente las sangrías para saber en cada momento quién está dentro de quien insisto que cuando empiezas a escribir código y el código se empieza a completar con complicar es completamente normal el hecho de que por eso osea pierdas la pista y las sangrías y el colorín es una de las formas con las cuales puedes saber dónde te has perdido y puedes saber dónde está el problema vale por eso yo te voy a hacer una cosa de hecho ahora mismo sería fácilmente comprobable yo soy muy desastrado digo o sea ahora mismo no te envío una foto de mi escritorio porque me da vergüenza ajena mostrar mi escritorio de hecho estoy estoy ahora mismo en en martes y jueves haciendo un curso de arduino con lo cual ahora mismo tengo mi mesa llena de cacharritos electrónicos de arduino pero pero no es excusa porque literalmente y ya sé que esto se está agravando pero literalmente hay hasta unos calzoncillos encima de mesa esos y limpios y plegados pero hay unos casos de asociaciones de mesa entonces lo que te quiero decir es que yo como persona en mi día a día soy muy desastrado pero a la hora de escribir código intento ser ordenado por una razón muy sencilla no es por amor al arte no es porque me gusta el orden sino porque me revienta luego perder tiempo entonces código desastrado cuando sale algún problema código desastrado equivale a pérdida de tiempo y yo no quiero perder tiempo vale por eso por lo que te recomiendo seas cuidadoso con la que el código esté ordenado porque consideran una inversión para el futuro porque el tiempo que aparentemente gastes ahora en ser ordenado no es un gasto es una inversión para el futuro bien dicho lo cual vamos a ver ya tenemos por aquí por pantalla una mínima estructura esto evidentemente es cualquier cosa menos bonito de ver vale porque estamos trabajando lo que te decía antes con el esqueleto vale estamos trabajando con la estructura de la web pero a continuación no hemos acabado de ver todavía html evidentemente pero en las próximas clases lo que haremos es trabajar con código css voy a enseñarte una cosita de css para darte un poquito de ánimos para que veas que el código al final no será tan feo como el que estás viendo en la pantalla y luego acabamos la clase con más html entonces hemos visto antes esto de aquí esta etiqueta style que es uno de los tres estilos de meter css que es tss en línea vamos a ver el segundo tipo de css que es crear una etiqueta dentro del gen llamado style esto se llama css interno porque es un ccs que está dentro del archivo se encuentra que no es lo mismo escribir este style que crear una etiqueta de apertura y de cierre está él y yo a continuación voy a escribir un trocito de código requiere de ti ahora mismo un pequeño salto de fe en el sentido de que tú escríbelo tal cual y ya verás tampoco es un salto de fe tan grande exactamente lo digo que es fácil ver lo que va a hacer este código entonces voy a escribir h1 h 1 quiere decir que lo que voy a escribir a continuación afectará a la etiqueta h 1 voy a poner un par de llaves no confundir con los corchetes que están en las llaves justo abajo de los corchetes y ahora voy a escribir color dos puntos blue y punto y coma por cierto se admite tanto la palabra norteamericana color como la palabra inglesa color vale se admiten las dos la palabra teóricamente correcta es la norteamericana al color y entonces yo una cosa que también te diré más adelante en cuanto empecemos con css es que si sabes inglés ya sabes la mitad de css porque todo todo el css es así ya que hace que a la h 1 le aplique un color blue pues por poco inglés que sepas evidentemente es lo que quiere decir es que h1 lo voy a pintar con color azul entonces guardo recargo y comprobamos como es cierto que a la h 1 y solo a la h 1 se le pinta de color azul con esto lo que te quiero decir es que yo sé que ahora mismo esta página es extra fea pero es que tiene que ser así valente momento porque estamos trabajando con el esqueleto de la página como trabajamos con css verás que la cosa cambia muchísimo como última parte de la clase que ya que son menos cuarto a continuación lo que quiero es al menos esbozar el menú de la web cuando digo esbozar me refiero a por lo menos poner los enlaces que encuentro que haga esta web más pequeña los enlaces que tendríamos en cualquier menú de navegación aquí arriba para ello me voy a ir al header porque el menú de navegación suele estar en el header voy a escribir una etiqueta nada es otra de las etiquetas nuevas de html5 nada quiere decir que ahí dentro voy a escribir un menú de navegación y ahora a continuación voy a hacer algo que te va a parecer un poco extraño pero te aseguro y esto lo vas a poder comprobar luego todo lo que quieras y te aseguro que es lo más normal del mundo voy a escribir una etiqueta el pool quiere decir un orden list o lo que es lo mismo lista no ordenada y a continuación voy a escribir una serie de elementos lee ya sé que esto se acaba de complicar de repente mogollón y es que de repente han aparecido tres etiquetas de la nada nada para decir que es un menú de navegación cool para decir que voy a hacer una lista no ordenada y lee para decir que voy a hacer un elemento de lista para no complicarme mucho lo que voy a hacer es copiar los elementos que tengo en mi web entonces inicio y [Música] copio y pego y tengo perdón que no tengo blog cursos sobre mí y servicios descargas y contacto y entonces después de haber escrito esto es cuando voy a ir a mi página voy a recargar y voy a ver que el menú se ha convertido tal y como te había dicho en una lista no ordenada entonces yo sé que tú ahora mismo debe estar diciendo madre mía esto de aquí no se parece en nada a esto de allí pero sin embargo lo que voy a hacer a continuación de hecho aquí me la voy a jugar porque aproximadamente el 50% de menús de navegación de las páginas web están hechos de esta forma pero yo esté suicide entero ahora mismo el mío propio no sé cómo está hecho así que voy a pulsar el botón derecho inspeccionar y fíjate y sí que está exactamente así de hecho hay un por el medio es un poco de menos pero fíjate que tengo una etiqueta nav y dentro de la etiqueta nada hay un pool y dentro de él hay unas reglas entonces claro porque en mi página web se ve el menú superior mal de cualquier página web y en la que acabamos de crear se ve una lista ordenada con bullets con puntos super fea por una razón muy sencilla porque estamos trabajando con html y css lo que haremos es trabajar la estética de este menú para que esto de aquí se parezca a esto de aquí cuando digo esto generalmente la gente que ve digamos como en las fotos del antes y las fotos del después la gente nos lo venció metro tienes mucha fe en el css porque convertir esto en esto va a ser una odisea realmente no lo es vale realmente en css una vez que pillas resides de trucos verás que se pueden hacer maravillas pero quiero confirmar te lo que quiero decir con cuando digo confirmar te lo quiero decir hacer clic con botón derecho y confirmar que son esas mismas tres etiquetas para aislar o para que las primeras clases de programación pues no sean tan frustrantes en él de cara yo quiero hacer páginas web whites y sin embargo fíjate la que estoy haciendo sino decirte que esto que estamos viviendo es un paso obligatorio para luego poder hacer webs que estéticamente sean buenas es decir antes de que una página web sea estéticamente buena tiene que ser estructuralmente buena o con el mismo ejemplo que te decía antes no podemos hacer una piel bonita si antes no tenemos un buen esqueleto dentro de esa piel porque ocurriría que la piel se caería como si fuera de goma pues básicamente ocurre lo mismo entonces con esto por tanto dentro de esta primera sesión no hemos visto ni de lejos todas las etiquetas de html nos quedan unas cuantas por ver pero también te digo que hemos visto unas de las etiquetas más importantes nos queda por ejemplo una muy importante que es la etiqueta de hipervínculo para que cuando yo haga clic en un elemento me pueda ir a otra página web me quedan también por ejemplo para los formularios de contacto las etiquetas que me permiten recoger información es decir que la gente haga clic y escriba información en formatos de contacto o pinchen desplegables o pulse botones pero en definitiva estas etiquetas que acabamos de ver son las etiquetas imprescindibles para crear la estructura de cualquier página web y por cierto quiero decirte que esto que acabamos de hacer yo diría que es la plantilla para hacer cualquier página web de aquí en adelante es decir cualquier página web que hagas a partir de ahora te digo porque igual a parte de ejercicios de cursos deberían guardarte esto una carpeta parte como plantilla cualquier página web que hagas a partir de hoy tendrá el doctor html tendrá el head y el body el que tendrá el title tendrá el char se tendrá la descripción tendrá su etiqueta style cualquier página web que hagas tendrá el header el men y el footer el header tendrá 1 1 1 2 y 1 de navegación y ya no será tan normal que el main tenga aunque ruso en unos highlights y un blog pero yo te diría que el 80% de este archivo que acabamos de hacer es un archivo que tener como referencia para crear otras páginas web dicho lo cual dicho lo cual también ha dicho lo cual y con esto acabó y ahora empezamos a volcar vídeos en la carpeta compartida también lo que te quiero decir es que tampoco espero de ti que en los próximos proyectos cojas esta página y la duplique y la modifiquen sino que me gustaría que en los próximos proyectos que hagas cojas una página en blanco y empieces a escribir línea a línea cada una de esas etiquetas para empezar a acostumbrarte a ellas para que no sea unas etiquetas que viste una clase al principio pero ya realmente no te acuerdas de ellas porque siempre copias y pegas y ojo copiar y pegar en programación es lo más normal del mundo yo de hecho no lo he hecho hasta el momento porque es una primera clase pero es muy probable que cuando la cosa se complica yo recurra al copiar y pegar copiar y pegar no es malo no entender lo que estás copiando y pegando eso sí que es malo por eso te digo que en un momento dado te digo que no copies no pgr más que nada para que te obligues a ti mismo a familiarizarte las etiquetas pero de la misma forma también te digo que copiar y pegar más adelante será lo más normal del mundo como ya verás entonces dicho esto dicho esto

vamos a ver pues retomando los donde lo dejamos en la sesión anterior y recordamos que habíamos hecho por una parte este archivo index.html recordamos que dentro de img teníamos el archivo de imagen que habíamos cargado así que en mi caso lo que voy a hacer es que voy a abrir brackets y vamos a ver a continuación [Música] y tengo este archivo que nos dejamos aquí preparado el otro día de hecho lo abro también con un navegador web en este caso google chrome y tengo esto que teníamos por aquí el otro día nos quedamos trabajando con la creación de un menú de navegación la creación de una lista no ordenada esto quiere decir que es una l es decir una 1 ordered list y la creación de elementos de lista un pequeño detalle es el siguiente y es que hay dos tipos de lista una vez la 1 ordered list y otra es la order list que es con l entonces guardo recargo y comprobamos que en lugar de aparecer con bullets aparece con números de hecho mediante css es decir que aparezca con números es simplemente porque el navegador entiende que por defecto debe aparecer con números pero mediante css puede aparecer con letras puede aparecer con números romanos puede aparecer con números griegos puede aparecer con lo que queramos vale no es muy frecuente pero un poco que sepas que se puede ahora es importante que sepas que existe esta herramienta voy a dejarlo como estaba con un orden list porque por una parte se utiliza para menús de navegación pero luego como te puedes imaginar también se utiliza en todo momento para crear listas es decir si tú no quieres crear ya un menú de navegación sino que dentro de un artículo directamente quieres crear una lista de elementos pues también puedes utilizar este un orden lista entonces ahora a continuación voy a explicar algo un poco como diría yo complejo porque te voy a explicar algo que vamos a hacer y que luego vamos a deshacer esto es algo que a los alumnos les suele causar un poco de confusión y malestar porque claro cuando estás en persona programar te fastidia mucho tener que haber aprendido a hacer algo para luego deshacerlo entonces te voy a explicar no ya el cómo se hace y cómo se deshace sino el por qué se deshace entonces y ahora mismo estoy en una página llamada index e.html y dentro de esta página voy a encontrar que tengo lo que correspondería al inicio de la página y yo ahora a continuación voy a desarrollar otra página no voy a hacer las todas por lo que te decía de hacer y deshacer pero voy a desarrollar una llamada contacto es decir cuando yo entro en contacto en principio parece que esté claro que yo dejaría de ver el carrusel dejaría de ver los destacados dejaría de ver el blog porque si he perdido contacto es que quiero ir a contacto quiere ir al formulario de contacto vamos a por ello entonces y ahora continuación de hogar primero necesito que cuando haga clic aquí o sea saber crear hiperenlaces cuando haga clic aquí me vaya a otra parte entonces y ahora vengo por aquí y digo a hr es igual a lo que quiera index.hr ml cuidado he creado una etiqueta a que tiene una etiqueta de apertura y tiene una etiqueta del cierre y en este caso inicio se me ha quedado fuera de la etiqueta y esto es incorrecto tengo que cortar inicio y tengo que meterlo dentro de la etiqueta entonces voy a guardar en la página voy a recargar y observó como inicio aparece de un color determinado el color determinado del cual suele aparecer es el color azul salvo que estemos hablando de un enlace que visitado en cuyo caso suele ser azul mora dt en este caso esa fórmula de té porque está claro que es un enlace que he visitado porque es index o sea el navegador se acuerda que he visitado esta página web un apunte un apunte histórico un poco curioso es que te preguntarás por qué quiere decir la etiqueta y entonces la mayoría por no decir todas las etiquetas de las que hemos hablado tienen un sentido si es un elemento de lista o l es un orden es list now es un elemento de navegación pero que es la a exactamente pues la es la etiqueta que proviene de anchor anchor quiere decir ancla como la el ancla de un barco entonces este es un apunte histórico que hace muchos años que ha dejado de tener sentido pero claro este lenguaje fue creado en 1991 con lo cual en un momento dado cuando se creó la web se tendría yo se pretendía asignarle a la web una cierta temática de navegación marinera entonces por ejemplo por ejemplo pues te acordarás navegador que existía hace muchos años en los 90 skate navigator luego y lo que quiero es este de aquí vale este es el nuevo luego de netscape pero esto de aquí es más parecido al antiguo luego de netscape donde tenías un pino de perdón un ancla no un timón porque un timón porque existía en aquel momento en los 90 cuando se creó la web el concepto de surfear la web de hecho si lo buscas su web o sucede te vale que es navegar por la web entonces la idea de navegar por la web es que la web era como un mar y tú surfea vas a través de ella existía como te digo esta analogía marítima donde existía este concepto el navegador era que la web es el mar pues mira pues en skype es el timón de tu barco sabes para qué controles por dónde navega bueno pues si la web es el mar allá donde está es el ancla allá donde fondea es el ancla es el anchor que es el hipervínculo que básicamente lo que quiere decir es que si pinchas ahí es como que vas a una ubicación de ese mar y echas echas tu ancla porque te quedas un rato dentro de esa página web al entonces esto es algo que te digo a día de hoy lo del tema del ancla que suena un poco absurdo pero en el contexto de lo que era la web en aquel momento pues tenía eso sentido vale entonces yo con esto lo que puedo hacer es meter hipervínculos dentro de todos los elementos del menú como te puedes imaginar estoy copiando y pegando y yo lo que voy a hacer ahora es que esto va a ser blog punto html esto va a ser cursos html sobre mi html servicios html descargas html y contacto punto html esto ahora sí sería un menú más completo entonces dentro del menú completo fíjate que pues bueno tenemos un app que a su vez tiene un pool que a su vez tiene un link que a su vez tiene un a es un poco complejo pero es lo que tiene el sistema de marcas por eso soy especialmente pesado con el tema de las sangrías porque claro es es una html que contiene un body que contiene un género que contiene un haz que contienen un contiene un link donde una entres todo esto que conceptualmente puede puede parecer y realmente lo es muy complejo pero si sangramos correctamente las etiquetas por lo menos lo vemos un poco más claro dentro del código y se ahora recargo pues nos daremos cuenta que ahora todo el menú de navegación tiene los hipervínculos los hipervínculos otra cosa que aprovechó para decirte cuántos años tienes por cierto si señores mucho vale pues mira verás si tienes 29 años quiere decir que cuando cuando se creó la web en la década entre el 91 que se crea la web y el 2000 puesto en acerías en esa década eso qué quiere decir pues que tú has nacido con los hipervínculos o sea cuando cuando tú digamos accediste por primera vez o cuando tuviste una edad como para empezar a acceder a los medios digitales ya existían los hipervínculos entonces con esto lo que te quiero decir es que los hipervínculos para la gente que somos más más mayores en su momento supusieron una revolución porque tú imagínate que por ejemplo a mí en el cole cuando me encargan un trabajo pues yo tenía que ir a la enciclopedia que había en mi casa o desplazarme hasta casa de mi tía para buscar en su enciclopedia o irme a una biblioteca para buscar a la enciclopedia y buscar un cíclope díaz era abrir tomo átomo y empezar a buscar en cambio un hipervínculo es una cosa donde tú haces un clic y automáticamente aparece es donde donde tienes que aparecer y e incluso en el momento en el que se crea la web tú puedes acceder desde una web a cualquier otra web da igual que la web esté en españa en eeuu o al japón y en 0 como algo segundo que estás viendo el contenido entonces eso que a día de hoy consideramos como algo que es lo más normal del mundo pero es algo que aparece en los 90 y que supone una revolución vale que es que cuando yo hago aquí pues yo pueda ir a otra parte pero vamos a ver a continuación que vamos a tener un pequeño error entonces ahora a continuación tú vas a ver como yo pincho en contacto si quieres antes de que y mira que ha advertido que vamos a tener un error un momento que me asegure antes de advertido que vamos tener un error cuál va a ser el error cuál dirías que va a ser el error que vamos a tener cuando hago clic en contacto sí no de hecho literalmente el 404 porque y porque no lo ha encontrado claro es decir yo le estoy prometiendo esta página web que cuando en contacto voy a cargar la página contacto html pero es de cajón pensar que en esta carpeta yo en ningún momento he llegado a crear la página el contacto punto html entonces lo primero que voy a hacer es hacer clic comprobar que tengo un error de rafael not found que efectivamente dentro del de los códigos de error de web es el 404 y simplemente lo que tengo que hacer es aquí dentro de dentro de brackets o dentro del editor que sea ir a archivo crear un nuevo archivo y guardar ese archivo como contacto evidentemente con el mismo nombre que tenga el archivo que yo he prometido que es contacto punto html voy a desplegar la pantalla de la derecha a izquierda para ver que tengo index.html y que tengo contacto punto html para que voy a cerrar este para que esté claro y este también para que esté claro que tengo dos archivos y en cualquier momento puedo saltar a cualquiera de ellos entonces yo aquí en contacto lo que voy a decir es hola estás viendo el archivo de contacto vale entonces yo ahora recargo para que el ritmo por si acaso realmente por nada le doy a contacto y me dice hola estás viendo el archivo de contacto pero claro no me dice nada más entonces yo ahora lo que tendría que hacer supuestamente sería lo siguiente evidentemente como te puedes imaginar ahora no vamos a como no vamos a empezar a escribir otra vez desde cero el código de html y body y toda la pesca te lo digo a nivel docente probablemente a nivel didáctico sí que estaría bien que lo hiciéramos te lo dejo para que lo hagas tú en casa para no estar ahora haciendo otra vez lo que ya dijimos el otro día a nivel práctico evidentemente como te puedes imaginar cualquier persona mínimamente avispada diría vamos a ver vete a la página anterior copia el código y pégalo y evidentemente modifica aquella parte que te interese vale entonces me voy a index seleccionó todo expulsado como a control depende del sistema en el que estés seleccionó en mi caso como avance para copiar y a continuación evidentemente me estoy refiriendo a los comandos de copiar cortar y pegar vale y en contacto punto html quitó este esta frase y le voy a dar el control o comando v si en bracket si yo te diría con en prácticamente cualquier sistema es command a the all de seleccionar todo lo tienes aquí seleccionar todo es control a o coma de hecho en prácticamente bueno prácticamente en cualquier sistema operativo como mac o como linux cuando estás en un en una carpeta seleccionarlo todo también es command a esto funciona en mac o en linux pero en windows no en windows no me preguntes por qué sí que sé por qué la razón es porque en windows control a significa abrir y por tanto como a la de abrir evidentemente y como control está pillado en este caso seleccionar todo en windows es control y no tengo ni idea porque es la e pero pero pero es light te lo digo porque en los negativos mac y linux con dos a abrir es command o y seleccionar todo es comando a pero bueno en fin te lo digo porque si te metes en tu carpeta de windows y ves que no te funciona es por eso es porque es control pero dentro de dentro de brackets es con el control y viene de esa hora lo que voy a hacer es que me voy a ir a este mail respeto el comentario de aquí voy a poner el contenido principal de la página de hecho ahora voy a crear una sección sección iii y iv de contacto y voy a poner aquí voy para poner el contenido del formulario de contacto guardo recargo y veo que tengo esto vale tengo la cabecera tengo el pie de página y tengo aquí voy a poner el contenido del formulario de contacto si voy a inicio veo inicio si voy a contacto veo contacto y se mantiene el pie de página y se mantiene el perdón en la cabecera de la página y se mantiene el pie de página entonces ahora viene donde voy a hacer esto voy a intentar que el esfuerzo que yo aplique sea el mínimo posible porque como te digo ahora voy a hacer algo que luego voy a deshacer pues como luego lo voy a deshacer voy a intentar que invirtamos el menor tiempo posible haciendo esto que luego les haremos ahora te voy a explicar el por qué lo dejaremos a continuación puedo utilizar esto para crear otros tantos archivos voy a hacer un archivo nuevo que en bracket es como en el windows es control n entonces a éste lo voy a llamar he usado como ese para guardar control ese que es para save y guardar y voy a crear blog punto html voy a crear cursos html voy a crear sobre mi punto html y voy a crear nuestros servicios punto html y voy a crear descargas punto html vale entonces en cada uno de ellos ves que aquí arriba en la parte digamos que representa la jerarquía del proyecto tengo todos los archivos html y ahora voy a hacer algo tan sencillo como copiar seleccionar todo copiar y en blog pegar y sea posible espera un segundo que por accidente es cerrado mi nombre lo que faltaba y cosas así y voy pegando y voy pegando y voy pegando y voy pegando y evidentemente como te puedes imaginar a un pequeñito detalle y es que verás que cuando yo realizo una modificación sobre un archivo verás que a la izquierda tiene un puntito entonces es simplemente una marca que te dice que todos aquellos archivos los varios documentos que no tienen un puntito son archivos que has guardado están correctamente guardados en el disco duro aquellos archivos que tengan un puntito son aquellos archivos sobre los cuales has hecho modificaciones pérez modificaciones todavía no han sido guardadas en el disco duro esto del puntito es propio de brackets hay otros muchos programas que en lugar de poner un puntito ponen una este disco al final del archivo vale por tanto no me interesa que te aprendes el puntito me interesa que te aprendas que los programas suelen tener mecanismos para decirte qué archivos has guardado qué archivos más guardado entonces en el blog aquí voy a poner el contenido del blog vale este fondo la modificación mínima aquí voy a poner el contenido de sobre mí en servicios aquí voy a poner el contenido de servicios en descargas aquí voy a poner el contenido de descargas y en cursos aquí voy a poner el contenido de cursos entonces después de haber hecho eso va a haber un segundo que lo quiero bien si ahora vengo y le doy a inicio veo el principio le doy a blog y blog punto html blog puntos donde espérate que se ve que no lo he creado en el sitio correcto no lo he creado en el sitio correcto este es un fallo muy característico guardar como y lo he creado en la carpeta de primeros pasos un segundo que lo voy a recuperar de esa carpeta entonces esto está en brackets contenidos amplios en español vale si ocurre esto me voy a la aplicación de brackets a mostrar el contenido contenido samples en español primeros pasos ya que tenemos los cursos descargas y servicios y sobre mí alesso ya creado en la carpeta que no toca pero evidentemente hay que crearlos en la carpeta que toca se ha eliminado cerrar y ahora estos archivos los voy a abrir realmente en brackets ahora bien entonces compruebo que puedo ir a inicio puedo ir a blog y el contenido del blog puedo ir a cursos puedo ir a sobre me puedo ir a servicios puedo ir a descargas y puedo ir al contacto entonces esto ahora mismo es una estructura de un sitio web entre comillas correctamente correctamente estructurada esto quiere decir insisto que evidentemente esta web no está acabada vale ahora hay que darle contenido a cada una de las secciones hay que darle estilo con el lenguaje pss pero ya es una cuestión de entrar en cada una de las etiquetas sección dentro de maine y empezar a escribir ahora bien vamos dentro de lo que es el mundo de la programación y html es un lenguaje de marcas no es un lenguaje de programación y a lo largo de esta formación vas a entender la diferencia entre una cosa y otra esto que acabo de hacer está muy mal hecho insisto esto que te voy a decir te va a causar un poco de confusión te voy a intentar explicar lo más claramente posible y en definitiva a lo largo de las horas de formación lo irás no solo comprendiendo sino practicando entonces desde el punto de vista de la programación cuando yo copio algo y lo repito varias veces es que algo no estoy haciendo bien esto es lo que hace años fui a un curso como alumno era un curso en inglés entonces el formador que era escocés pero nacionalizado norteamericano el formador decía que era un término para el cual nunca he encontrado traducción en castellano que era un code smile un code ese mail es como que el código huele como que estamos como que hueles y dices aquí y alguno no huele bien entonces decía desde el punto de vista de programación cuando tú tienes que copiar y pegar algo varias veces en un sitio es que algo no marcha bien es que algo no estás haciendo bien y la razón es la siguiente la razón es que tú fíjate que yo ahora por ejemplo quisiera decir mira en el nombre de la web por lo que se ha cambiado de decisión y quiero que quiero poner el segundo apellido quiero poner con su vicente carratalá sánchez entonces yo ahora guardo veo que el inicio pone josé vicente carratalá sanchis pero si yo me voy a cualquier otra página veo que sigue poniendo jose vicente por qué pues porque al copiar y pegar código tengo que se haga una modificación tengo que ir copiando la y pegando la manualmente en todo el resto de páginas entonces en el momento en el que tengo que hacer algo manualmente eso va en contra de la informática es decir la informática es una disciplina cuya marca tiene varios objetivos evidentemente hay muchas metodologías pero uno de los objetivos es la productividad y uno de los objetivos es que en lugar de que el ser humano repita mecánicamente una misma tarea que sea el propio ordenador el que repita mecánicamente esa tarea ahora una vez que te acabo de decir esto desde el punto de vista de la programación pura te digo que html no es un lenguaje de programación es un lenguaje de marcaje y por tanto htm html no provee ningún mecanismo a realizar esto que te acabo de decir es decir para ver alguna forma de utilizar el código tal que si yo hago una modificación la modificación se aplique insisto no ya sobre las 7 páginas que tiene este sitio web este sitio que tienen 7 páginas porque es un sitio web pensado para formación para demostrarte cómo funciona esto pero en un sitio web real puede tener cientos y cientos de páginas imagínate tener que modificar cientos y cientos de páginas vale entonces yo ahora mismo no te voy a dar una solución a este problema que ahora mismo te estoy planteando el problema pero no te voy a dar una solución ahora mismo en esta hora de formación que estamos con el lenguaje html la solución a este problema te lo daré en cuanto entremos en el lenguaje php entonces vamos a abrir el free main y al abrir el free mind recordamos varias cosas recordamos por una parte que estamos con el lenguaje pss perdón con el lenguaje html luego del lenguaje html quieto aquí no arduino hoy en éstas archivos recientes arduino vale fantástico pues vamos a ver momento en curso aplicaciones web lo tenía ahí entonces este es recordamos que estamos con el archivo html luego de html viene css luego viene en javascript y luego viene es del lenguaje llamado php entonces la razón por la cual no lo estamos viendo ahora es simplemente porque estamos todavía lejos de ese lenguaje php y luego te recuerdo otra cosa en informática las cosas cambian muy rápido entonces cuando se creó el lenguaje html a día de hoy 2020 puedes decir oye pero como al que creó html no se le ocurrió solucionar este problema que acabamos de comentar pero claro esto lo vemos hoy que es 2020 en 1991 pues gracias que se creó este lenguaje de programación ahora que html con los años podría en sus evoluciones podría haber previsto un mecanismo para arreglar esto pues sí y no lo ha hecho lo que ha hecho a html es preferir que este problema se arregle mediante la combinación de html otros lenguajes de programación como por ejemplo php allí yo también no he sabido nunca si es un tema de que entre bomberos no se pisan la manguera sabes de es claro de no sea yo me llevo bien con php no sea que le quite un trozo de pastel a php y php me fastidia alguna otra forma vale entonces por eso te digo que yo de momento y te presento el problema no te den solución pero tranquilo que evidentemente llegado el momento veremos su solución entonces me voy a meter en la página de contacto en la página de contacto siempre me sirve como excusa te voy a enseñar una cosa que mola pero luego te voy a poner otro problema para verás entonces me sirve de excusa para enseñar otro de los elementos de html que son los formularios de contacto son en definitiva los controles de formulario entonces yo aquí lo que voy a hacer es que voy a poner una nueva etiqueta llamada forma nueva para ti y evidentemente la etiqueta en sí misma no es nueva y ahora en forma lo que hago es dentro de form introducir una serie de elementos input input type es igual por ejemplo a text entonces yo le doy a text y le digo que name el line más adelante será importante name es nombre y en place holder le digo introduce tu nombre entonces guardo recargo en cuenta que ahora me voy a contacto y verás que aquí voy a poner el contenido del formulario de contacto y verás que aparece una cajita y dentro de la cajita introduce de un hombre yo realmente puedo empezar a escribir es decir con el resto de etiquetas de html yo lo que he hecho es yo como autor escribo cosas para que la gente las lea pero con la creación de formularios de contacto de lo que estoy haciendo es decirle al sistema que quiero que sea la gente la que escriba cosas para que luego en un momento dado me las envíe dentro de html5 aparecen algunos elementos del formulario nuevo como por ejemplo y nuevos como por ejemplo input type email es igual a email y places holder e introduce tu email voy a poner otro campo input type submit y valió bueno espera es que me las voy a poner submit y el nombre el email y el botón submit de enviar le iba a poner un value porque igual no te gusta que ponga a enviar igual quieres poner algo más personalizado como que ponga envía tu correo o algo así yo que sí vale entonces para eso ponemos el valor el value para que veas que lo puedes personalizar entonces envía tu correo y guardamos vale recargamos y envía tu correo el poner email es es importante desde el punto de vista de que yo puedo poner aquí un texto puedo poner aquí un texto pero yo he prometido que esto va a ser un tipo email con lo cual cuando envió el correo me dirá cuidado esto no es un correo si quieres que envíe tu formulario realmente le tienes que dar el formato de correo electrónico cuando le deis al botón de enviar tu correo es cuando realmente se va a enviar pero claro donde se envía pues de momento nos envía a ninguna parte o sea de momento lo que ha hecho es enviar se a sí mismo o sea se ha enviado a la misma página otra cosa que suele un poco confundir a la gente llegado a este punto y es que generalmente cuando yo he escrito contenido el h1 h2 como no te has dado cuenta yo tampoco te lo he dicho pero como están en etiquetas diferentes automáticamente saltan de línea ahora te explicaré por qué también ha ocurrido esto con cada uno de los lee pero los con los input no ocurre los input se ponen a continuación entonces hay veces que eso te conviene y hay otras veces que esto te puede no convenir cuando no te conviene y cuando quieres en html forzar un salto de línea se pone una etiqueta llamada br br es una etiqueta muy particular al igual que le pasa a la etiqueta input por cierto y es que es una de las etiquetas que se abre pero no se cierra habrás visto que impute es una etiqueta que haya abierto pero no es cerrado con br pasa igual br por cierto es una etiqueta que quiere decir var retorno es decir retorno de la barra o en castellano lo que llamaríamos el retorno de carro es un anacronismo que básicamente máquina de escribir básicamente eso es si alguna vez has trabajado con alguna máquina de escribir esto de que cuando llega el carril al final se coge esta palanca y el retorno de carro de vuelves al principio eso es el retorno de carro vale entonces eso es lo que quiere decir br / si yo ahora pongo aquí un br entre cada uno de los inputs guardo recargo y ahora verás como el vale que se ve que el copiado y pegado lo que no tocaba vale con esto no sé por qué se ha duplicado ya está claro si quiero poner un segundo espaciado yo lo que haría es poner un segundo br y entonces tengo un poquito más despacio y esto que acabo de hacer yo te diría es que lo hecho bien en lo que no lo hecho bien vamos a ver esto que he hecho efectivamente es una chapuza y por cierto que sepas que siendo una chapuza porque es que a todas luces lo es pero y aún así nosotros como todo el mundo vamos a intentar escribir códigos lo más limpio posible perdón llega un momento en el que hay problemas que solucionarlos de forma legal quiero decir de forma correcta cómo están de solucionar mientras que con una chapuza solucionado en seguida con lo cual verás que en las webs muchas veces hay chapuzas pero en este caso está mal hecho por algo que te dije el otro día y que hoy repito y es que yo cuando los quiero separar yo de lo que estoy hablando realmente es del estilo quiero poner un margen pero cuando hablo del estilo no estoy hablando de html estoy hablando de fs ese entonces efectivamente no es que haya otra etiqueta html que lo hace es que hay una propiedad css que lo hace vale entonces ya te digo que al principio en este momento os suele costar mucho a los alumnos en renunciar a la tentación de intentar formatear mediante html pero hay que hay que aguantar un poco digamos hay que saber que esto va a ser extra feo utilizando html pero que luego con css he hecho en la misma clase de hoy vamos a empezar a utilizarlo correctamente entonces de momento lo que voy a hacer es que me voy a cargar esta segunda etiqueta br para dejarlo como legalmente debería estar y ahora a continuación vamos a continuar trabajando con otras etiquetas de formulario de contacto porque evidentemente no sólo hay nombre e email hay un montón más así que vamos a ver una a mí es de las que más me gustan y una etiqueta llamada select la etiqueta llamada select voy a ponerme en población con minúsculas me permite introducir un listado de poblaciones entonces claro yo ahora vendría por aquí y pondría option valió voy a poner valencia y valor valencia yo ahora recargo me falta un br por cierto por aquí para bajar el retorno de carro veo que tengo un desplegable donde por ejemplo defecto pone valencia y yo a continuación lo que puedo hacer es copiar y pegar y cambiar vale ponga madrid pongo barcelona pongo lo que sea entonces guardo recargo y veo que tengo un desplegable pero claro para empezar en el primer option debería poner para que esté más claro introduce tu población recargo e introduce tu población y empiezan a aparecer el listado de los elementos que pongan claro llegado a este momento tuvieras esto es muy bonito pero poner todo el listado de poblaciones que puede llegar a tener un buen país como por ejemplo españa pues tela marinera porque seguro que puedes encontrar fácilmente en internet una hoja de excel donde venga un listado de poblaciones por el tema no es encontrarla en excel el tema es luego convertirlo a html es simplemente lo que quiero decirte no lo voy a hacer y ahora verás por qué o mejor dicho lo voy a hacer luego lo voy a deshacer y es que yo vengo aquí y digo el listado de poblaciones de españa en html y vengo por aquí cifras oficiales no en html select select de provincias de españa la provincia lo que se busca es un poco más verás que hay también poblaciones entonces me vengo por aquí y veo que hay gente que ha preparado ya código para copiar y pegar vale entonces lo que hago es que me copió todo este código lo pego aquí recargo la página web y fíjate cómo tengo automáticamente el listado de provincias vale ya definitiva lo que quiero decirte es que en internet puedes encontrar un montón de código de copiar y pegar ahora lo voy a deshacer porque fíjate que para lo bonito que me estaba quedando en la página web y de repente me ocupa más este select que todo el resto de la página web vale y no quiero que se me ocurran el código entonces lo que voy a hacer es devolverlo a lo que estaba teniendo en cuenta que tengo un listado muy limitado de poblaciones pero evidentemente porque el código de momento se me quede más limpio y continuamos con elementos de formulario en los siguientes 2 y prácticamente últimos dos que te voy a enseñar antes de pasar al siguiente bloque temático van a ser el de respuesta única y el de respuesta múltiple entonces vamos a ver que pondría que pondría por ejemplo en el de respuesta obviamente pues en ese caso digo pongo una p y digo indica que eres y a continuación lo que hago es que pongo un input o sea el input es el mismo que el de texto y el de email pero pongo type es igual a radio entonces ya a continuación lo que hago es lo siguiente y es que pongo persona pongo un ver para que para que baje el retorno de carne a continuación bueno pondría esto más adelante volveremos a ello voy a quitar el value porque ahora mismo no nos vale para nada no saldrá más adelante ahora te explicaré por qué para momento no persona animal y robot importante el br para que salte el carro cada vez entonces vengo por aquí recargo y fíjate que lo que tengo es una respuesta única tengo un pequeño problema y es que aunque tengo una respuesta única fíjate que pincho persona y a continuación pincho animal y también se pincha no está funcionando correctamente para que funcione correctamente aquí donde ponen name perdón aquí voy a poner un atributo name y voy a poner tipo por ejemplo vale entonces es momento voy a hacer esto un poco más pequeño para hacer esto un poco más grande y si yo les pongo a los tres elementos el mismo name al recargar el programa va a entender que estos tres elementos están agrupados y por tanto se seleccionó persona y luego selecciono animal es que ya no seleccionó persona vale por tanto tengo que poner un name para que el programa entienda cuál es la agrupación de estos elementos y ahora por ejemplo si deben tener el mismo name para que el programa entienda que los debe agrupar porque luego por ejemplo yo podría hacer esto mira yo podría copiar e indica indica que día de la semana es hoy para hacer lo políticamente correcto entonces yo pongo lunes pongo martes pongo miércoles voy a hablar hasta viernes pero cuidado cuidado porque estás viendo que en el link sigue poniendo tipo entonces jueves y viernes entonces yo ahora guardo recargo y fíjate que pongo persona y compruebo como al poner animal quita persona vale pero esta es otra pregunta diferente con lo cual yo ahora vengo al lunes y veo que el lunes quita animal y eso no es correcto vale por qué ha ocurrido esto porque estoy re utilizando tipo múltiples veces y eso no puede ser entonces si pongo por ejemplo día pues día día día y día guardo y recargo y fíjate que puedo responder una cosa aquí arriba y puedo responder otra cosa aquí abajo vale el truco es simplemente agrupar mediante el ex comediante el name por cierto aprovecho para decirte una cosa que sobre todo la voy a repetir unas cuantas veces más adelante cuando hablemos de lenguajes de programación pero porque este es un lenguaje de marcaje recuerda pero aprender a programar en español tiene una ventaja con respecto a aprender a programar en inglés y la ventaja es la siguiente y siempre que tú me veas escribir algo en inglés quiere decir que lo tienes que escribir tú tal cual pero siempre que me veas escribir algo en castellano quiere decir que puedes poner lo que tú quieras vale entonces cuando ves que ponen name es que tienes que escribir no puedes escribir nombre pero cuando ves que pone tipo es que puedes escribir lo que tú quieras esa es la clave lo digo porque hay veces que con un poco por adelantarte no ya el problema que puedes tener en esta primera semana de formación sino el problema que pues tener más adelante cuando se complique la cosa es que cuando yo hago código y te lo paso para que tú lo modifique es claro cuando lo vas a modificar dices que modificó que puedo tocar y que no puedo tocar o por ejemplo tocas una cosa y de repente deja de funcionar todo entonces cuando muchas veces me preguntaréis cuando tuve para el código cómo puedo saber lo que puedo tocar lo que no puedo tocar mi respuesta suele ser si está en inglés es que no puedes tocar si está en castellano es que lo puedes tocar un poco una regla sencilla de aprender y ahora a continuación de la misma forma que hemos aprendido que existe vamos a copiar esto que existe indica el motivo de tu consulta por ejemplo type voy a poner check box entonces check box es una respuesta múltiple cuando hablo de una respuesta múltiple es que tú puedes responder varias cosas a la vez entonces consulta personal consulta formativa consulta laboral consulta que se va a hablar 3 entonces verás que cambiando el tipo de radio al tipo de check box es cuando verás que en lugar de aparecer un círculo aparece un cuadrado y verás que mientras que el círculo es es respuesta única el check box es respuesta múltiple puede responder varias cosas a la vez antes de que me preguntes lo digo porque llegados a este punto a este punto concreto la gente suele preguntar la gente se le pregunta bien porque el la respuesta única tiene que ser un circulito y la respuesta múltiple tiene que ser un cuadrado la respuesta es porque es así por defecto entonces se puede cambiar si se puede cambiar pero no recomiendo cambiarlo entonces hay una hay un concepto no es un concepto de de web es un concepto más psicológico que otra cosa son los estudios de usabilidad entonces la cuestión está en que en todos los formularios que te hayan rellenado en tu vida el campo único son círculos y el campo múltiples son cuadrados entonces qué ocurre que aunque tú no te des cuenta es decir tú en el cole como te diría yo para entender lo que te quiero decir en el cole a ti no te han enseñado en una asignatura llamada formularios porque nadie ha tenido una seña problema de formularios cuando te encuentres un círculo es única cuando encuentres un cuadrado es múltiple estás viendo tela enseñado pero de usarlo de rellenar los formularios muchos a lo largo de los años aunque no te hayas dado cuenta se te ha quedado ese concepto con lo cual que esté quedado ese concepto no te recomiendo cambiarlo porque entonces estarás mareando a otros usuarios vale hay un concepto hay una una aplicación de este concepto de modelos mentales que se llama que se aplica por ejemplo a marketing digital pero para que entiendas lo que te quiero decir y es que si yo te pregunto si tú buscas una farmacia dime con qué simbología y con qué color asociadas a la farmacia cuéntamelo y el símbolo cuál fue el ser una cruz que por curiosidad dentro de la cruz suele haber algo no si ya correcto no hay algún animalito con el que se identifique la serpiente y la que vino y la copa efectivamente además que hace la serpiente sobre la copa correcto y algo más hace algo más llevan otras dado cuenta pero ahora te vas a dar cuenta parecido si está sacando la lengua verás ese símbolo lo que hace es que la serpiente está enroscada sobre la copa y no es que esté sacando la lengua es que está vertiendo veneno sobre la copa entonces claro tú imagínate ya desde si nos ponemos a razonar lo vale imagínate que a un sitio al que acudes para comprar medicamentos que te van a curar o sea no se me ocurre una simbología más equivocada que entrar en un sitio donde estás viendo que una serpiente echa veneno una copa y hay que estar loco para entrar en un sitio donde una serpiente este veneno por una copa para curarte pero sin embargo eso tiene un motivo de ser la razón de ser es que hay algunos medicamentos que se fabrican o se fabricaban evidentemente hace hace muchos años hace siglos a partir del veneno de algunos animales entonces pero esto que te acabo de decir tú seguro que nunca te lo has planteado o sea tú seguro que nunca te has planteado durante una farmacia y has dicho una serpiente me da un poquito de mal rollo no sé si entrar aquí porque tú tú simplemente y en el colegio tampoco te han dicho nunca no tranquilo con esa serpiente puedes entrar tú simplemente pues es una de esas reglas sociales que nadie te ha dicho por tula asumes pues ves que todo el mundo entre una farmacia y si es de color verde pero de medicamentos pues tú imagínate que yo te dijera a mí lo de las serpientes no me gusta me da muy mal rollo entonces yo he pensado aparte del color verde no me mola mucho yo he pensado que en lugar de cambiarla en lugar de poner una cruz verde la voy a poner de color rojo porque color rojo me mola más y en lugar de poner una serpiente y las venden a mucho más rollo voy a poner un par de cachorritos jugando a un balón de soda súper buen rollo para tres tú imagínate ahora le voy a montar un negocio que es una farmacia que cuyo luego es una cruce con de color rojo con un par de cachorritos qué te parece mi idea sí claro esa es exactamente la cuestión vale es que la gente con qué plan entraría a ese negocio que me dirías [Música] exactamente la gente entendería que una cruz roja aparece como de asistencia sanitaria con lo cual cruz roja perritos tiene pinta de ser un veterinario o perritos jugando a un balón tiene pinta de ser una tienda de artículos para mascotas es decir lo que estaría ocurriendo es que estarían entrando potenciales clientes a los cuales yo no les podría vender porque no tendría lo que los clientes van buscando y mis clientes los que hicieron un medicamento pasarían de largo no entrarían en mi negocio porque no vamos a creerían que eso no es una farmacia lo que te quiero decir con esto no te quiero decir que no hay que tener creatividad y hay que seguir las normas sociales pero esto viene a colación de lo que estábamos hablando de los formularios y es que dentro de que evidentemente podemos ser creativos y podemos intentar romper las normas y podemos intentar ir un poco a nuestro rollo pero también tenemos que tener en cuenta que hay normas sociales no escritas aunque aunque en este caso ésta sí que está escrita vale pero en la documentación de cualquier lenguaje de programación pero hay normas sociales que no podemos cambiar o no de una forma tan fácil vale entonces yo por eso lo que te digo es porque la gente me lo suele preguntar llegado a este punto se puede cambiar se puede cambiar pero no te recomiendo que lo cambias vale yo también pero te digo te voy a contar una anécdota yo también he llegado a un momento está esta conversación que estamos teniendo porque hacer aplicaciones web no es sólo programar también son otras cosas relacionadas y llegaron la programación de aplicaciones web tiene un punto de creatividad importante porque por qué estás creando algo que no existía antes es decir estás creando una solución que genera oa veces eso generalmente da solución a un problema que no había sido solucionado luego la creatividad es inherente a ese proceso yo suelo decir una cosa esto que te voy a decir te aseguro que no me gusta nada decírtelo pero y el desarrollo como habrás visto en mi web aparte de dar formación desarrolló aplicaciones informáticas para clientes entonces yo sé que sea un cliente lo había acostumbrado a tener los botones en un sitio y de repente una mañana me levanto y cambió de idea y digo los botones morirían más abajo en lugar de arriba yo sé que sea el cliente le cambio los botones de sitio y guardo el cambio y automáticamente al cliente le aparece el cambio yo sé que a continuación el cliente me va a llamar y se va a en mis muelas por qué pues porque después de haberlo acostumbrado durante más de un año o lo que sea a una cierta cosa sea la que sea esa cosa de repente cambiarle es como muy difícil porque el cliente se ha acostumbrado a esa cosa ahora bien la neutra que te voy a contar es que a ver si la encuentro es que y este tiempo usaba ahora ya no porque uso de safari pero a gmail android hace mucho tiempo un segundo que esta es la nueva aplicación de google bueno pues te lo voy a decir aunque sea sobre la nueva aplicación porque ya no encuentro la vieja vale las aplicaciones de correo electrónico de google y realmente cualquier aplicación del ecosistema de google antes tenían el botón de redactar nuevo correo aquí arriba que era una pequeña página y un lápiz hito para redactar un nuevo correo entonces tú pensabas ahí y le das un buen día de la noche a la mañana hicieron esto justo que te acabo de decir que es el botón cambiarlo desde allí arriba hasta aquí abajo el descaro yo una buena mañana me levanté esto que la aplicación se te ha actualizado por la noche entonces cogí el teléfono vi que la aplicación era un poco diferente no vi el botón arriba a la derecha lo cual dije esto ya me confunde un poco pero vía abajo se utiliza es un vistazo a la pantalla para echarle pues un poco y me abajo el botón rojo con el lápiz y dije vale entonces el botón que estaba arriba ahora está abajo ya está ya está todo problema solucionado pero claro dije ya verás que mi padre me va a llamar en 321 y no llamo en 321 pero durante la mañana me llamo padres durante la verdad me llamó y me dijo oye que es que está intentando redactar un correo y no encuentre el botón y yo es que lo sabía entonces claro por qué las personas digamos cuanta más edad tienen pues más les cuesta adaptar ciertos tipos de cambio en el teléfono de la oreja y fíjate que bajo a la derecha vamos a tener un botón rojo redondo que tiene un lápiz entonces me dijo mira si ya lo he visto yo pues ya está ya puedes empezar a redactar correos sabes entonces me vale me hizo la pregunta normal que yo esperaba que me hiciera es no me lo puedes dejar como estaba antes claro yo le dije a mi padre lo siento mucho pero no porque esa aplicación no la desarrolló yo ese es el problema con esto lo que te quiero decir es que los que desarrollamos web somos creadores de soluciones pero hay que entender el sitio que tenemos cada uno de nosotros y quiénes tenemos poder para crear tendencia y quienes no tenemos poder para crear tendencia para entonces si yo a un cliente le cambio el botón de sitio de clientes me enfada el cliente me dice este botón no estás dejando ya mismo como estaba hace un momento y yo que no soy google pues hago takata y te lo dejo como estaba ahora bien si es google y google crea tendencia google no sólo dice no no no el botón ahora está ahí y está ahí y te lo quedas sino que además el resto de aplicaciones empiezan a seguir la misma dinámica de google porque porque google crea tendencia y yo no creo tendencia vale entonces por eso te digo que si es muy bonito decir que hay que dar aplicaciones vamos a romper las reglas y vamos a hacer lo que queramos la realidad no es exactamente así te lo digo también porque hay alumnos y en este caso ya no te estoy hablando tanto de marketing digital sino de programación de aplicaciones puras y duras y es que hay alumnos que vienen y dicen oye yo voy a hacer no sé qué y la gente va a hacer lo que yo no sé es que los alumnos me suelen decir no porque como apple lo ha hecho y le ha salido bien a mí también me va a salir bien yo digo vamos a ver no te compares tú que estás empezando ahora en esto con apple que no es que sea una empresa que lleva unos cuantos años en el sector es que lo más importante es que no es sólo el tiempo que lleva sino la cantidad de miles de millones que ha invertido en hacer que la gente haga lo que ellos quieran que hagan vale entonces también un poco por eso el saber que tenemos cierto margen de libertad pero sabemos que no podemos empezar la casa por el tejado y a veces como en este caso concreto de los formularios pues en gran medida tenemos que seguir cuáles son las normas establecidas ahora yo prácticamente voy ahora verás con esto que te voy a enseñar voy a ir acabando la parte de html seguro que algún fleco nos quedará pero con esto con lo que te voy a enseñar a continuación lo que voy a hacer es empezar a enseñarte la parte de fs ese para poder estilizar correctamente las páginas entonces pero antes de que eso ocurra hay una cosa que te tengo que enseñar es una cosa que bueno te va a dar un poco de rabia en cuanto que es difícil de aprender pero que se va a hacer hay que aprenderlo entonces voy a ir a por ejemplo cursos o descarga los servicios y te voy a enseñar a utilizar tablas en html a crear tablas de contenido en html una cosa que te voy a decir cuidado las tablas en html a día de hoy se utilizan únicamente para crear tablas de contenido y tú dirás para qué se van a utilizar las tiene pues antiguamente las tablas se utilizaban para formatear la propia estructura de la web entonces esa es una costumbre que había como hace 10 15 20 años pero sin embargo debemos tener en cuenta que más adelante deben ser un concepto que es la web responsiva que es una web que cuando estás en el ordenador se ve de una forma y cuando estás en el móvil se ve de otra se adapta vale entonces la las tablas la maquetación con tablas es anti responsible completamente porque te enseñan a utilizar tablets para lo que realmente valen pero no para formatear con tablas hay una excepción de la cual ya los vemos en su momento que es formatear emails formatear email estos emails bonitos con contenido vital eso sí que se hace mediante mediante tablas vale pero formatear contenido no momento vamos a ver me voy a ir a aquí le puede contribuir los cursos y por ejemplo voy a poner br y voy a poner el listado de cursos que voy a impartir próximamente entonces por ejemplo a la página de cursos vale y aquí voy a poner una primera etiqueta llamada table la etiqueta table se abre y se cierra y ahora lo difícil viene en cuanto a que hay tres etiquetas más que tienes que aprender una es tr que es table round table row es fila de tabla y ahora dentro de tr una etiqueta va a ser th th ‘estable’ getting o lo que es lo mismo titular de tabla o sea como tú diría yo es que más ya de titular no me sale la palabra para traducirlo esos títulos del encabezado correcto esa es la palabra mucho mejor vale entonces el nombre del curso en tres ahora lo que hago es que pongo aquí modalidad voy a poner fecha de inicio y voy a poner el número de horas algo que justifique una tabla con filas y columnas vale de resguardo recargo y ahí no lo parece pero yo te aseguro que hay una tabla es para que tú lo puedas ver mejor dentro de table voy a poner un parámetro que va a ser border es igual a 1 una vez poniendo border es igual a 1 pues el sistema zona tabla feísima porque aparece como una especie de doble borde horrible parece que hayamos vuelto a los años 90 pero así por lo menos pues te puedo enseñar que eso realmente es una tabla vale y ahora y ahora aquí es donde la cosa se va a complicar voy a meter otro tr y ahora en lugar de th porque ya tengo el encabezado de la tabla ahora quiero una etiqueta llamada t de tv ‘estable’ data o lo que es lo mismo datos de la tabla en lugar de llamarse table columna o tables el o algo así pues se llama table data que se va a hacer entonces yo digo por ejemplo java el curso de java tiene modalidad online fecha de inicio el 09 el 2020 y el número de horas 20 así guardo recargo y veo que tengo ahí un elemento dentro de la tabla claro yo ahora puedo venir aquí puedo copiar puedo pegar y ahora digo por ejemplo php pues online el día 5 y dura el de php 20 horas y ahora vengo aquí y ahora pongo php pero el de aplicaciones web y online y 10 y tiene 30 horas y si te fijas lo que voy haciendo es crear el contenido de una tabla el problema es que el problema la dificultad más que el problema es que claro este esta forma de tabla expresado en etiquetas tiene una forma bastante extraña en este caso hay que entender la jerarquía en la jerarquía quiere decir que hay un contenedor súper contenedor que es la etiqueta table la etiqueta table contiene filas y las filas contienen columnas no al revés y cuando digo no al revés quiere decir que no lo puedo elegir yo sino que el estándar del sistema del lenguaje de marcas es así y no lo puedo cambiar vale entonces simplemente que sepas que ahora añadir más entradas requiere requiere pues simplemente para que estoy recargando que recargado por accidente el bracket requiere poner más entradas dentro del tr y el tv ahora ahora un momento ahora vamos a ver y yo con todo esto que estoy haciendo si te fijas lo que estoy haciendo es editar el código para introducir por ejemplo nuevos cursos que ocurrirían si yo quiero modificar estos cursos por ejemplo para octubre yo lo que tendría que hacer es entrar dentro del archivo html modificar el archivo html o sea como te diría yo por ejemplo bajarme a mi ordenador editarlo modificarlo y volverlo a subir qué te parece esto que estando en 2020 engorroso efectivamente esto es lo que se planteó en 1991 cuando se creó el lenguaje pero a lo largo de los años ha aparecido el concepto de web 2.0 la web 2.0 es una web donde los usuarios pueden modificar el contenido de la web sin necesidad de trabajar con un lenguaje de programación por ejemplo yo en este caso yo tú y una grandísima cantidad de gente pues tengo una web que se llama hackers a puntocom donde en esa web en este caso es un wordpress que wordpress es una aplicación web 2.0 un wordpress tiene un panel de control dentro del panel de control yo puedo ver que entre con usuario y contraseña yo puedo crear nuevos artículos puedo crear nuevas entradas puedo crear nuevas páginas cuando le voy a añadir nueva yo lo que estoy haciendo es añadir un nuevo elemento en la base de datos y luego la página web de esa base de datos entonces ten en cuenta que y así un poco vas entendiendo cuál es los sentidos del resto del lenguaje de programación ten en cuenta que estamos con html html es un lenguaje estático pero si recuerdas la estructura del curso verás que en tecnologías de servidor vamos a ver bases de datos donde por ejemplo algo como los cursos no van a estar directamente en el código de programación sino que estarán en una tabla de la base de datos y mediante el lenguaje de programación php lo que haremos es crear un panel de control de forma que tú en cualquier momento puedas entrar al panel de control y puedas añadir los elementos que quieras vamos a ver ahora a continuación una vez que te he explicado tablas es cuando a continuación voy a empezar a trabajar con el lenguaje pss antes de hacer esto te quiero decir una cosa hemos visto que ahora luego por cierto actualizar el mapa mental con las nuevas cosas que hemos aprendido hemos visto que tenemos secciones hemos ido que tenemos está las mostré mejor formales de contacto hemos visto que tenemos el menú de navegación que más tiene html o sea que donde puedo saber todo lo que tiene html para saber si me he dejado algo entonces hay varios varias fuentes de información en la web yo tiendo a recomendar una que se llama w3 es course entonces uno de los tres schools html de hecho me hago html es una página que atención no es la documentación oficial pero sin embargo es una página que es súper clara y súper amigable entonces cuando un alumno me pregunta bien pero yo quiero saber según el documento oficial todo lo que puedo hacer con por ejemplo esta etiqueta pues entonces lo re dirijo el documento del oficial pero es un algo dice yo quiero algo que algo alguna referencia que si yo me pierdo me pueda encontrar fácilmente pues yo tiendo a recomendar esta página está en inglés eso sí pero entonces fíjate que yo por ejemplo veo aquí todo lo que puedo hacer vale veo que tengo etiquetas y veo que tengo si tengo gráficos ahora hablaremos de esto y tengo media y tengo a piece vale de gráfico solemos cuando llegamos a javascript entonces yo vengo por aquí y digamos haber más editores vale como descargarse un editor usarlo por ejemplo no te pago text edit vale ok html básico en html básico te cuenta lo del doc type el html el body y por ahí te contaron el head te cuentan los elementos de dicen cómo funciona una etiqueta que se abre una etiqueta que se cierra vale todo eso te hablan de los atributos que son las cosas que puedes meter aquí dentro de las etiquetas te hablan de los links que son estos los títulos que te dije que hay máximo 6 y todo eso bien te hablan por ejemplo de los parágrafos los párrafos de todo eso y de repente persona cosa que es quotations descaro digo quotations que es esto pues quotations es una de las novedades de html5 que te permite poner un blog code que es para cuando en tu página web citas contenido de otra página web entonces claro que ocurre pues que esto existe pero yo generalmente dentro de que como estás viendo ahora mismo en la pantalla en ningún momento lo voy a ocultar o sea voy a decir que no existe fíjate lo estás viendo aquí pero no lo suelo meter dentro del contenido del curso porque no es tan normal en una página web meter citas a otras páginas web es decir lo que te enseñado hasta ahora es lo que yo suelo considerarlo imprescindible de html pero luego hay una serie de cosas que no me parecen tan imprescindibles entonces no me suelo detener en ellas y solo decir mira que sepas que en esta página hay más cosas de html y las puedes ver por ejemplo quotation y me interesaría saberlo pues entonces yo digo vamos a hacer un ejercicio diputación- vale pero hay cosas que tienden a omitir porque no me parecen tan importantes y porque prefiero aplicar el tiempo en cosas que pienso que sí que luego te vas a encontrar en los proyectos reales por ejemplo comentarios sí que los hemos visto evidentemente por ejemplo colores no porque los vamos a ver en css de hecho vale ahí verás que yo puedo poner ponerlo del style que vimos el otro día pero prefiero hacerlo en css links pues evidentemente esto lo hemos trabajado es el a hr imágenes tablas listas pero blog online no lo vamos a ver porque lo vamos a ver en css y frames de ello mucho más adelante javascript eso sí que lo vamos a ver porque evidentemente te acuerdas del mapa mental javascript es el tercer lenguaje de programación que vamos a ver vale entonces simplemente si en un momento no le dices oye que hay vale pues esto es lo que hay esto son todas las etiquetas de hecho hay un html referente yo tengo yo tengo algún alumno que de vez en cuando me dice oye dónde puedo sacar un listado de todas las etiquetas de html yo digo mira yo no te recomiendo aprender así a programar pero si tú lo quieres aquí está el estado para decir me meto en html tag list y aquí tienes un listado de todas las etiquetas que hay en html entonces por qué te digo esto veras de la misma forma que hay alumnos que hay veces que me preguntan esto para empezar a aprender a programar así también hay veces que hay alumnos que me dicen mira dado un programa x vale cuando digo x quiero decir que yo enseño fundamentalmente programación pero también señor diseño gráfico entonces photoshop es una de las herramientas que enseño ya hay veces que hay alumnos que dicen oye mira esto no sé qué imagen tenía por aquí por nada que me dicen mira empieza a enseñarme botones del primero hasta el último en ese orden y menús del primero hasta el último y yo siempre digo esa no es la forma de aprender un programa o sea no te aprendes no te aprendes los botones aprenden de lo que hace el programa y aprendiendo lo que hace el programa de paso aprender a los botones vale entonces hay alumnos que dicen no yo no me quiero una lista para asegurarme que me aprendido el 100% de html yo quiero empezar por la primera etiqueta y acabar por la última etiqueta entonces yo te planteo lo siguiente y yo vengo por aquí por ejemplo y digo mira bar define una variable yo digo cuántas veces define una variable en un lenguaje de programa una lenguaje de marcaje como pues realmente no muchas o por ejemplo o por ejemplo mira mira rubí rubí qué pena qué pena que no tenga ya el vídeo que tenía en youtube momento espera a ver si lo encuentras un vídeo muy antiguo de 2011 vamos a ver 90 virtue brain html5 rubí no me parece que ya no está operativo lo quitarían el carratalá no sé si vamos a ver si en 2011 yo hice para abi de octubre en que hoy es linkedin learning un curso acerca de html5 en tres claro en 2011 más adelante han ido actualizando ese curso entonces cuando osea no es que me lo quitaron sino que yo lo hice para ellos ellos cogieron un vídeo como destacado y lo pusieron en youtube y luego con los años decidieron que se había quedado un poco desfasado y lo quitaron en favor de otro vídeo que no pasa nada pero por ejemplo para que te hagas la idea rubí es una anotación rubí para tipografía del de oriente asiático entonces para que te hagas la idea html5 rubí voy a buscar una página donde lo expliquen por ejemplo que ahora mismo no lo voy a explicar pero arruguitas por ejemplo y dice por ejemplo para un ideograma para en este caso un canje no perdona pero es un coche estos chinos rubí ya panes sin enrollarme mucho con el tema sin enrollarme mucho con el tema en japonés esto que estás viendo aquí esto que estoy marcando al mismo en la pantalla se llama kanji hay como cinco mil salones tuyo kanji son cinco mil de estos que un estudiante hasta secundaria se tiene que aprender ahora bien esto que ves aquí arriba se llama ir a ghana que es un sistema silábico entonces cuando tú pones texto en japonés y el público objetivo es un público niño o adolescente como los niños o adolescentes no se tienen por qué haber aprendido todavía los toyos kanji que son los cinco mil caracteres estos que te digo ahí arriba se pone herida gana para darte una pista darte una idea de cómo se lee realmente esto de aquí estoy aquí arriba si buscas por ejemplo y la gana en google por ejemplo en google imágenes pues verás que es un conjunto silábico quiero decir que cada uno de estos ideogramas pues tiene su sílaba correspondiente pero no hay muchas tampoco si te fijas es un poco como un alfabeto normal pero de estos hay cinco mil y pico son difíciles de aprender entonces claro para esto que estás viendo aquí esto ya nosotros nos da completamente igual pero esto que estás viendo aquí que en el este asiático es muy importante la notación html es esta de aquí para que el navegador entienda que esto lo de formatear bajo en grande y esto lo debe formatear arriba en pequeño pero claro yo vengo aquí a la referencia html y veo rubí y veo rt y erp y yo te digo te voy a recomendar aprenderte esto tú miras ni de coña si algún día tengo algún cliente que es japonés pues mira pues oye pues bueno saber que existe esto pero no vamos a perder tiempo ahora de clases explicándote cómo se hace vale por eso por lo que digo que no es recomiendo empezar a aprender desde la primera hasta la última etiqueta porque hay etiquetas que se usan muy frecuente hay otras etiquetas que probablemente no vas a usar en la vida ahora dicho lo cual si alguna vez quiere saber todo lo que tiene este ml pues ahí lo tienes bueno pues vamos a continuar y ahora dicho esto es cuando vamos a empezar con el lenguaje pss para trabajar con el lenguaje pss y trabajar bien o sea para trabajar bien trabajado hay que trabajar de la siguiente forma yo me voy a ir archivo me voy a ir a nuevo voy a este archivo guardarlo en la carpeta buena no voy a cometer el mismo error que antes me voy a escritorio me voy a curso aplicaciones web y lo voy a guardar como estilo css vale el nombre es el que quieras si lo pongo en castellano es porque evidentemente lo puede llevar como quieras estilo css y yo ahora allí voy a poner yo que ese documento lo ponga nuevamente palabras o venga voy a poner h1 voy a poner color dos puntos red ahora te explico esto un segundo y entonces yo aquí en index antes de acabar el gp mes me hago un pequeño espacio antes de acabar el gel voy a poner link él es igual a esta el sit esto quiere decir voy a crear una hoja de estilo y h ref es igual a estilo punto pss esto es te voy a vincular un archivo externo ese archivo externo va a ser una hoja de estilo y el archivo realmente se llama estilo css claro problema pues bueno un problema es que por cierto ya tenía por aquí donde estás así ya tenía el style lo voy a borrar y entonces página a página lo que voy a hacer es reemplazarlo vale reemplazo el style por es el link porque pues por una razón muy sencilla porque así vinculando vinculándolo a un archivo externo cuando yo haga modificaciones sobre un archivo externo se me actualizarán automáticamente todo el resto d entonces los guardo y lo que quiero que veas es que si yo por ejemplo el estilo css pongo color red yo ahora me voy yendo a las páginas y verás como en todas las páginas el título se ha vuelto de color rojo pero si yo ahora en lugar de red pusiera pink os vengo por aquí recargo y lo modificó una sola vez y se me ha modificado en todas las páginas vale entonces fíjate que de alguna forma el css empieza a solucionar el problema que teníamos antes que es que modifique en un solo sitio y se modifique en todas partes déjame hablarte de una cosa y es que vengo por ejemplo por aquí a mira pero voy a poner html wikipedia y luego voy a poner css wikipedia me voy a la wikipedia si es posible en inglés porque como ya te comentado todavía tiene más e información que la wikipedia en castellano a ver y claro porque a mí me gustaría poder entrar de formación porque si hay más en inglés pues yo quiero ir a donde haya más información entonces aquí fíjate que el momento de creación este es tim berners-lee que es el creador del lenguaje html esto que está sufriendo ahora mismo os lo debes a este personaje entonces esta es una persona que en su momento en el 80 empezó a trabajar en el cern que es la de lo del acelerador de partículas este que hay en suiza vale pero además de acelerar partículas pues hacen otras cosas entonces en el 89 este investigador propuso un sistema de hipertexto para internet y lo puso en marcha a finales del año 90 con lo cual en 1991 creó el primer documento que describe lo que es html que es html tags originalmente 18 etiquetas claro si nos vamos a css quédate con la fecha uno vale nos vamos a css ten en cuenta que la fecha vale el inicio al release la fecha inicial de lanzamiento es 1996 o sea del 91 al 96 van cinco años no quiere decir que en los primeros cinco años de html no había css y por tanto se estabilizaba a pelo estilizaba a mano es claro que quiere decir pss css quiere decir cascading stylesheets la palabra importante es casquete cascading quiere decir en cascada y en cascada quiere decir que si tú tocas en un sitio automáticamente en cascada cae al resto de sitios entonces lo que quiero decirte con esto es que ten en cuenta lo del año 96 es importante porque cuando nació css nació aprendiendo de los errores de html un error de html cuál era el no actualizar contenido en cascada al crear css dijeron vamos a crear un lenguaje que sirva para estilizar pero además no vamos a cometer el mismo error que html vale por eso tú me dirá sobre si html comete este error que me has comentado antes como es que fs no lo comenta también pues porque iba con ventaja vale porque aprendió de los errores entonces dicho esto lo que voy a hacer a continuación es explicarte un poco esto que acabo de aprender de aprender esto que acaba de escribir aquí por cierto que por cierto que te voy a decir que a partir de este momento el lenguaje que te voy a enseñar es un lenguaje diferente complementario pero diferente a html y por tanto las reglas son diferentes la sintaxis es diferente como ahora vas a ver la sintaxis de hecho no tiene nada que ver siempre suele empezar los cursos poniendo esto en la pantalla este disco a disco barra esto es un comentario entonces ya empezamos con que los comentarios no se escriben igual los comentarios yo ahí te voy a decir que el primo rarito es html porque esto de esa barra está disco y asterisco barra es cómo se escriben los comentarios en cualquier lenguaje derivado de efe o sea en un montón de lenguajes diferentes el raro es html con lo cual más vale que te vayas acostumbrando a esta sintaxis porque así ya la tienes aprendida para otros lenguajes de programación ahora voy a poner un comentario que es un trozo de pseudo código entonces voy a poner selector llave llave y ahora voy a poner propiedad dos puntos valor punto y coma propiedad dos puntos valor punto y coma propiedad dos puntos valor punto y coma y puntos suspensivos con esto que es lo que te quiero decir pues que el 95% de css es escribir en este formato que quiere decir selector selector quiere decir que seleccionas algo ahora habremos que seleccionamos y a continuación vamos a ver qué tenemos propiedad valor propiedad valor se hace una propiedad le doy un valor seleccionó una propiedad le doy un valor css es así de sencillo y de hecho habrá a continuación va a saber que si sabes inglés cuando digo que sabes inglés quieres una cierta mínima fluidez con inglés un cierto mínimo vocabulario ya sabes medio css ya que te digo que html eso perdón css es un lenguaje diferente de html pero también te digo que es sencillo ahora también te lo digo para ser fiel a la verdad que en el momento en el que saltemos de fs a javascript y luego php ahí sí que agárrate porque vendrá la parte difícil vale pero de momento no estamos en la parte difícil del momento estamos la parte fácil entonces qué es un selector mira yo puedo querer seleccionar la etiqueta hace 1 puedo querer seleccionar la etiqueta h2o puedo querer seleccionarla a el selector es como voy a llamar a un elemento para que el programa sepa a quién estoy llamando o mejor dicho a quien estoy seleccionando entonces yo voy a decir en este caso que h1 llave llave y h2 llave llave es decir lo que estoy diciendo aquí es voy a seleccionar la etiqueta h1 de la etiqueta h1 le voy a hacer algo en lo que estoy diciendo aquí es voy a seleccionar la etiqueta h 2 y en la etiqueta h 2 le voy a hacer algo entonces vamos a empezar por lo más sencillo de todo que es color dos puntos red y color dos puntos club y voy a comprobar si es cierto que cuando recargo el h1 se me ha puesto de color rojo y el h2 se me ha puesto de color azul y no se ha modificado nada más dentro del resto de la página porque yo he especificado únicamente a quien quiero afectar bien ahora una de las primeras cosas de las que solemos hablar en css es del color como tú has visto he puesto red y he puesto blue y me lo ha reconocido yo diría es bueno que otros colores hay hay una lista de creo que son 140 colores así memoria y por si pongo css3 color names voy a entrar en w 3 schools de hecho y tienes 140.000 área aceptado por casualidad porque no sé por qué me acordado y tienes los 140 nombres de color soportados por supuesto todos en inglés como te puedes imaginar vale entonces bueno yo evidentemente ya sabes por eso que se suele decir en ingeniería de no te aprender de memoria lo que puedes encontrar una tabla vale pues no te voy a recomendar que te aprendas de memoria de los colores porque en cualquier momento sabrás que si en google pones css3 color names pues tienes hay un montón de listados vale y luego el día a día va a hacer que por usar los que aprendas de memoria unos cuantos de éstos ahora dicho lo cual la forma correcta de formatear los colores hay varias formas las dos formas realmente correctas son mediante los códigos hexadecimal esto que estás viendo aquí es el código de sage decimal que se escribe almohadilla y si yo quiero el rojo pongo ff 0000 o si quiero blue es 0000 efe efe si yo ahora vengo por aquí y recargo compruebo que no hay ningún cambio porque efectivamente ff 0 0 0 0 es el rojo y 000 ff es el azul esto de los códigos hexadecimal es yo no sé quién se lo inventó pero debía ser una persona cruel porque porque verás es mucho más sencillo que te aprendas que esto equivale a poner rgb 25 500 y eso es lo mismo que poner ff 0000 entonces te voy a dar una pequeña explicación pero no voy a profundizar mucho más primero para que no te reviente la cabeza y segundo para que no diga así esto y para que poniente me sirve vale entonces vamos a ver el sistema bueno yo ahora mismo cuando se trabajando en 25 500 si trabajando con un sistema decimal decimal quiere decir que tengo números desde el 0 hasta el 9 y luego en el 10 volvemos a empezar 11 12 trabajamos sobre base 10 hay otros sistemas numéricos por ejemplo en informática a un nivel muy interno a un nivel muy profundo se utiliza el código binario que va con unos y ceros no hay nada más que unos y ceros hay otro sistema que es el sistema hexadecimal hexadecimal viene con 16 dígitos entonces qué ocurre voy a hacer para quien apunte que luego guardaré pero como como represento 16 dígitos no puedo valiosa no existe un sistema para empezar 16 dígitos entonces lo que se hace es que es 0 1 2 3 4 5 6 7 8 9 con eso tengo 10 elementos y ahora para llegar a los 16 se usan letras entonces a ver efe y efe y así con esto consigo llegar a los 16 elementos hexadecimal es el descaro cuando ahí veo efe efe yo debo saber que ff es igual a 255 por qué pues porque la f es igual al 16 ago elemento y entonces 16 por 16 no es igual a 2 – 55 sino que 16 por 16 es igual 256 pero claro tú imagínate porque si vale efe efe está muy clarito pero que es etc a qué número equivale cc pues bueno tiene solución vale y es que multiplicó efe es 10 11 12 12 x 12 y tengo 12 y tengo el número del que corresponde efe pero claro tela para manejarse en el sistema hexadecimal vale entonces yo lo que te voy a decir es que desde css3 es decir desde 2010 existe este sistema rgb mediante el cual tú puedes expresar un color mediante combinación de rojo y azul y esto es mucho más sencillo que aprenderte los los sistemas hexadecimal es decir vengo por aquí y digo mira azul es 0,02 55 vale y ya está bien te cuento más cosas así efectivamente otra de las variaciones del sistema de color es meterle una después de rgb evidentemente si le meto una es que aquí necesito poner un cuarto parámetro al hay una cosa que no me acaba de hacer mucha ilusión y es que los parámetros rgb funcionan desde 0 a 255 pero el alfa va desde 0 hasta 1 con decimales entonces si yo quiero poner un color rojo semi transparente pongo 0.5 al final digo que no me gusta porque hay que aprenderse de memoria que estos tres van de un rango hasta otro pero este tiene otro rango pareces fíjate que recargo pecho ahí lo estáis viendo no recibe es como la rejilla de cuadraditos del fondo y si ahora recargo en este caso veo como un rojo pálido no es un rojo pálido sino que son rojo semi transparente si hubiera algo de textura detrás pues dejaría pasar dejaría ver la textura de detrás para entonces sí que efectivamente existen los colores con alfa cuando me has preguntado yo creía que me ibas a preguntar otra cosa qué es lo que me suele preguntar mucha gente he llegado a este punto entonces te explico en diseño gráfico te lo digo también porque tú en este caso eres ingeniero de edificación pero solo tener muchos alumnos que son diseñadores gráficos y que quieren pasarse al mundo de web entonces hay dos sistemas de color principales en informática tenemos el sistema rgb pero en diseño gráfico e impreso tenemos el sistema fm y acá el sistema de feng y acá es cian magenta amarillo y clave o negro también que suele decir el problema es que no existe el sistema acm greg acá ni en html5 y css3 es algo que para mí es gravísimo porque la razón de que no exista es que el sistema fem y acá está pensado para impresión no para pantallas pero hay mucha gente especialmente de diseño gráfico yo tengo una amiga que ya hace años se pegó el moco conmigo vale pero se le pegó muy bien porque es una amiga que es echada a la gráfica y trabaja mogollón con color no sé si sabes que hay una cosa que llaman pantón heras los diseñadores gráficos lo utilizan mucho la panera es esto son cartas de color que fabrica a una empresa de pantón y fabrican entonces te sirve para saber si cuando un color se sale para una impresora para comprobar si es correcto o no entonces un buen día esta amiga se compró una bandolera hijo va fenomenal y tal y dije es imposible que te sepas de memorias de sus colores entonces empezamos a probar sabes entonces yo le dije mira el color que hay en esa pared cuál es y la tierra y va diciendo es el pantone no sé qué no sé cuántos y yo decía imposible y entonces ya cogía la pantón era por el color al lado y yo decía ostia que es el mismo color sea como lo hace alegres el como lo hace es porque ya trabajaba todos los días con un color y con en ese momento había comprado su primera pantalla de ella hasta que el momento ya está trabajando con las patas de su empresa entonces era como como por fin tengo algo mío que hasta ahora no era mío entonces claro para todo ese tipo de personas todo ese tipo de personas se ha aprendido de memoria los colores pantone y se han aprendido de memoria los colores de negre acá entonces claro yo tenía alumnos que de repente les enseño el sistema de rgb y me dicen oye mira es que yo tuve mentes en estimación y acá y yo soy un crack pero tú me metes al sistema rgb y de repente no sé nada porque un sistema no tiene nada que ver con el otro porque el sistema de relieve es adictivo y el sistema extractivo se te da ese caso de fm griega acá no hay se le agrega que al menos de momento yo espero que en un futuro lo metan y me parece un fallo gravísimo así como hay otras cosas que a veces son un preguntan yo digo eso yo siempre he visto como un fallo muy grave entonces a partir de aquí ya hemos visto el color el color de frente vamos a ver una cosa que es el color de fondo y aquí es cuando te voy a enseñar una cosa que es el sistema de cajas de html y css que es algo que con lo cual ya hemos trabajando desde el principio aunque no nos hemos dado cuenta y es lo siguiente yo aquí en h1 vengo background voy a poner para hacerlo así rápido rápido y fácil entonces recargo y lo que voy a hacer es que el fondo lo voy a poner verde pero el fondo de ese elemento no es el que tú crees tú crees que el fondo de este elemento es este de aquí y ahora verás que no ahora verás que recargó y el fondo de ese elemento llega hasta el final entonces ahora voy a hacer una serie de cosas que yo por ejemplo digo que quiero estilizar vamos a ver cuando yo quiero estilizar cuando yo quiero estilizar por ejemplo una sección o el h1 tú has visto que yo lo que hago voy a poner aquí sección yo digo background red por ejemplo luego lo cambiaré voy a hacer una cosa muy hortera por cierto pero para que quede claro en pantalla me abrirá la página principal y fíjate que me pone rojo esta sección y esta sección y esta sección vale que son las tres secciones que tengo en el archivo de índice esto que acabo de hacer no es malo esto lo que debo hacer no está mal porque yo de esta forma lo que estoy haciendo es matar tres pájaros de un tiro es decir yo lo que hago porque muchas veces quiero esto es yo no quiero tener que especificar el estilo tres veces yo quiero exposición estilo una vez y que me aplique 3 o 300 veces pero hay veces en las cuales yo quiero indicar que a sólo un elemento le aplique un estilo entonces te habrás fijado que cuando hicimos esto yo tenía por aquí que metí una una cosa que es blog y de blog si meti precisamente un i de blog es porque más adelante o sea ahora mismo yo lo que quiero es ser capaz de seleccionar sólo ese elemento entonces a continuación me voy al estilo y voy a poner almohadilla blog ya ves y pongo background por ejemplo green y comprobamos si es cierto que la sección es de color rojo pero el blog solo el blog es de color verde entonces hay una regla que tienes que aprender que es que cuando llamo a una palabra suelta estoy haciendo referencia a una etiqueta es decir si yo pongo aquí sección le estoy diciendo búscame la etiqueta que se llame section si yo pongo una almohadilla almohadilla hace referencia a iré y si yo pongo un punto ahora de momento lo voy a hacer estoy haciendo referencia a una clase vale entonces clase cuando llegó clase te recuerdo que el otro día utilizamos una propiedad llamada clase vale a esto es a lo que hago referencia ahora voy a cambiar esto porque como verás lo que estoy haciendo es crear una página super mega hortera entonces ahora evidentemente pues verás que no quiero esto quiero empezar a formatear pero esto me ha servido un poco para que veas el tema de los estilos de color del frente y el fondo para cada etiqueta como verás llega al 100% de la anchura si es algo que nosotros de entrada en html no podemos controlar vale ahora luego lo controlaremos pero lo que voy a hacer es lo siguiente déjame eliminar un momento los colores ahora trabajaremos con colores y voy a hacer lo siguiente vamos a ver ahora sabes que me ha cargado esto porque ahora lo voy a volver a escribir y ahora digo el p el texto de párrafo no quiero que sea negro porque realmente en la gran mayoría de las webs el texto no es totalmente negro quiero que sea rgb 30 30 30 es decir gris oscuro y no sé si ves que hay ese color para poner haciendo 30 ve para que lo veas mejor y luego lo vuelvo a cambiar a 30 no sé si ves que ese texto se ha vuelto de color gris entonces es un pequeño detalle pero ahora a h1 a la 1 y sabes que también a la h 2 les voy a decir que también quiero color rgb 30 30 30 ahora ahora con cuidado vamos a ver ahora yo tengo por aquí que he creado vamos a ver lo que he creado un ver un main y un footer con esto lo que voy a hacer es lo siguiente dibuje ver y futer esto quiere decir voy a seleccionar seleccionada me electrocuté y les digo border un píxel solid black lo que estoy haciendo es poner un borde simplemente para que lo veas o sea simplemente para que se vea en la pantalla donde empieza uno y donde acaba el otro ahora a continuación lo que voy a hacer es wef 800 píxeles guys 800 píxeles 400 personas como todos juntos porque lo igual los barrios y entonces es momento que quite el zoom y entonces verás que ya no llegan hasta el final de la página sino que tienen 800 píxeles de dimensión y ahora a continuación y ahora a continuación lo que voy a hacer es martín auto martín auto lo que hace es que centra a los elementos en la pantalla de tal forma que en lugar de crecer a la izquierda crecen al centro entonces esto bueno vale ya no no es todavía una web super mega chula estilizada pero bueno vale empezamos a dar un poquito de forma y está bien ahora recordamos que heather en footer están dentro de una etiqueta llamada body vengo al body y le digo background rgb un gris clarito 200 200 200 recargo y veo que el fondo tiene un fondo gris clarito cuidado ni el header ni el main y el footer especifican cuál es su color de fondo sino específico el color de fondo por defecto se asume que son transparentes y si son transparentes dejan ver lo que tienen detrás entonces lo que voy a hacer es background white que tampoco suele ser white sabes suele ser rgb 220 220 220 o sea gris clarito digamos un blanco roto diríamos igual un poquito más de fuerza 2 42 42 40 vale algo así igual lo subiría un poco más pero vale efectivamente en el momento en el que te estás dando cuenta que lo que estoy haciendo es triplicar el código y cada vez que hago una modificación tengo que volver a triplicar la efectivamente podría hacer lo mismo que es el selector múltiple utilizando la coma que es poner header coma mein como router me cargo estos dos y sé que con un solo bloque de código estoy es utilizando los tres a la vez ahora también lo que puedo hacer es quitar el border porque ahora lo veo antes no lo veía para lo veo me quedo con eso y ahora esto queda un poquito más argumento para volver aquí llegaba vale mueve nuestro vale y ahora veo que ha desaparecido el este veo que ha desaparecido el border pero lo que me estoy encontrando es que me ha creado como una especie de márgenes entre las cajas no hay ningún problema porque yo puedo hacer lo siguiente yo puedo decirle al sistema que margin top es 0 pixeles o sea el margen con la caja de arriba tiene que ser 0 píxeles el margen con la caja debajo tiene que ser 0 píxeles y de esta forma vamos a ver un buen fin porque vale todavía tiene píxeles un momento un segundo voy a ver quién le está abriendo píxeles men no me esto vale no sé es que tengo algún retorno de carro en alguna parte un momento dónde está el estado el margen ok sí vale ya sé porque ya sé por qué estoy aquí estoy aquí vale voy a hacer lo siguiente ahora al h1 h2 h3 h4 h 56 y p les voy a decir que quiero un margen de 0 píxeles y un padding 0px él es el problema está ahí lo empezamos a ver el problema está en que como podemos ver aquí el texto tenía un poco de margen y luego otra cosa que voy a hacer es que al 1 y al link también les voy a quitar el margen ay haremos como ahora estamos deshaciendo un poco los estilos pero a la vez que estamos controlando qué es lo que ocurre muy bien no no no no no te cuento te cuento verás en cualquier caja html tenemos un margen exterior y un margen interior entonces de hecho lo podemos ver aquí si cojo cualquier caja y le viene a inspeccionar veremos aquí a la derecha sale un esta cajita entonces con respecto al border que estuve aquí el para bing es un margen que hay desde el borde hacia adentro y el margin es un borde o sea un margen que hay desde el borde hacia afuera es la diferencia entonces y ahora vengo por aquí y para que veas mejor el efecto lo que voy a hacer es que heather maine y footer va a tener un margen interior interior quiere decir que tú estás viendo que el texto está pegado al borde vale pues yo lo que quiero es que el texto se separe del borde internamente para mí es igual por ejemplo vamos a probar con 10 píxeles recargo y ahora verás como poco a poco tengo un poquito más de margen 10 píxeles 20 píxeles 30 píxeles lo que tú quieras y así poco a poco vamos viendo como digamos empezamos a formatear está esta aplicación ahora voy a explicarte una cosa que es la flotación y con la flotación lo que voy a hacer es conseguir que este texto se ponga a la derecha de la imagen ahora bien estando a 10 minutos del final de la clase no me voy a poner a estilizar el menú porque sería la muerte y porque me voy a quedar a mitad entonces simplemente lo que quiero decirte es que voy a explicarte la flotación cuando te explique la flotación de las guau se puede hacer esto también puedo hacerlo del menú y efectivamente lo haremos pero leemos el principio de la próxima clase vale para no quedarme a mitad entonces ahora a continuación veo que la imagen hace que el texto baje hacia abajo con lo cual voy a hacer una cosa mucho cuidado porque la imagen la imagen la imagen indica un img pero no indica una imagen particular con lo cual señora utilizó el ing estaré utilizando todas y cada una de las imágenes que a partir de ahora me está en esta web y no quiero eso entonces voy a decir id es igual a imagen logo he puesto una idea para luego poder decir en css que sólo quiero estilizar eso y no quiere utilizar nada más entonces ahora me voy a estilo añade una nueva línea y digo almohadilla porque ya sabes qué almohadilla equivale a ive y digo imagen luego es la de poner una propiedad nueva momento que agassi imagen luego es flow de dos puntos left y flow dos puntos left quiere decir que lo que vaya a continuación irá a la derecha así que vengo por aquí recargo y si te fijas al decirle flow def consigo que vaya hacia la derecha aparte de que el menú se monta ahí dentro ya hablaremos de ello no pasa nada vale hay una cosita que ahora mismo sí que me está matando un poquito y es que el texto está justo pegado a la imagen pero por suerte acabamos de ver que hay una cosa que se llama margin margin right sólo quiero poner un margen en la derecha margin-right de 20 píxeles y verás que eso lo que hace es que la imagen empuje desde el borde hacia fuera de la imagen 20 píxeles con lo cual en la sesión de hoy como ves hemos empezado a trabajar con css a esta página le queda todavía mucho trabajo por delante con css pero quiero que veas que para lo poco que hemos hecho hemos empezado a cambiar el aspecto estético de esta web al en poco para decirte que todo lo fea que ha sido la web en en html ahora es cuando en css vamos a cumplir la promesa de hacer que la web sea más bonita de ver vale es por eso es un poco salto de fe porque ahora que esta persona ve css tranquilo que entre la web fea que teníamos hasta ahora y las webs chulas que ves por ahí pues lo único que hay en el medio de eso es css cuanto más ceses aprendamos más chulas podremos hacer las webs que hagamos nosotros entonces

bien pues voy a abrir brackets para abrir el proyecto en el que hemos estado trabajando y vamos a continuar este proyecto esto es otra cosa que es una prueba de carga vale esto es otra cosa [Música] voy a cerrar vamos a quedarnos con el estilo bien el otro día por tanto estuvimos empezando a trabajar sobre la web empezamos a trabajar sobre css y nuestro objetivo era un poco demostrar como pues gracias a css nuestra web no iba a ser digamos tan fea como solo con html y al final de la clase nos quedamos justo con la cuestión esta del menú para demostrar cómo con css vamos a comprobar cómo es cierto que podemos hacer que el menú sea más agradable más estético voy a hacer un menú esto no quiere decir que tú tengas que hacer exactamente el mismo menú sino que lo que voy a hacer espero que sea un poco como te diría yo inspirador inspirador en el sentido de que te des cuenta de que puedes hacer realmente lo que quieras con ello cómo voy a hacer unas cuantas cosas voy a en primer lugar escribir un comentario dónde voy a poner aquí aquí voy a trabajar con el menú de esta forma digamos estoy dejando como una especie de marcador cuando digo marcador quiero decir que hago como una especie como del separador también se puede poner esto digamos suelen poner unas pequeñas barritas para que visualmente quede claro que es como una especie de separador del libro digamos y de hecho se puede poner uno y se puede poner otro sabiendo que todo lo que haya en el medio va a ser el trabajo con el menú esto que te acabo de decir evidentemente no es una obligación sino que es un pequeño truco que te vale es un pequeño consejo para que cuando escribamos el código de css pues de alguna forma haya secciones porque si no tú fíjate que hasta el momento llegamos prácticamente 40-50 líneas pero esto va a crecer te aseguro que va a crecer mucho más y cuando crece llega un momento en que te encuentras con un archivo css de unas 500 líneas que dices madre mía ya era que es cada cosa aquí vale pues esto es una forma de crear secciones entonces como te digo en primer lugar lo que voy a hacer es decirle lo siguiente que es un leaf y de hecho voy a hacer nada anteriormente hemos visto que existe la coma lo que quiere decir que es un selector múltiple porque quiere decir que este estilo se aplicará al jaber al mem y al footer en este caso yo lo que estoy diciendo al poner espacio y no poner coma es que quiere utilizarla a que se encuentra dentro del link que se encuentra dentro del pool que se encuentra dentro del nada es digamos como un selector de parientes y esto se hace así porque yo ahora a continuación por ejemplo voy a decir text decoration es igual a none no quiero que haya decoración lo que va a hacer es que yo era al recargar le va a quitar el subrayado que tenía el menú pero claro pero si yo por lo que sea en cualquier parte de la web ahora quiero poner un híper enlace a este hiperenlace no quiero que se le quite el estilo solo quiero que se le se le quite el estilo al híper enlace que hay en el menú vale que hay un poco esto puede parecer un poco molesto pero nos evita el estilizar por error cosas que no queremos estilizar de la misma forma voy a poner color y una palabra que no se usa demasiadas veces en css que es ingerir ingerir quiere decir color heredado y colores de dado quiere decir que yo no sé si esto iba a ser rojo verde azul amarillo o que sea lo que estoy diciendo es que esto sea del color que hubiera sido si yo no hubiera puesto un hiper enlace vale en lugar de decir quiero que sea negro quiero que sea blanco y luego tener cambiar de idea es quiero que esto sea del color que hubiera sido nature ahora a continuación digo lo siguiente nada un quiero padding 0px margin cérvix el margen que hemos lado anteriormente nada un link quiero que sea pero píxel martín tropic sustituidas podría ser lo opuesto en el anterior y podría haber hecho pero voy a decir en este caso list style type es igual a none lo que quiero hacer en este caso es decirle al sistema que lo que quiero hacer es quitar los puntos de el menú y fíjate que sigue siendo un menú es decir si paso el ratón por encima veras que sigue siendo un menú en este caso lo que acabo de hacer además es matar el list style type no me quiero enrollar mucho sobre esto pero porque es un poco parecido a lo que te dije el otro día con respecto al rubí de html pero si nos vamos a w3 schools css3 list style type verás que en esa dirección de hecho hay una lista de los tipos de lista que puedes tener entonces fíjate qué puedes tener listas en tipo disco en en numeración armenia en ence jk cree el creo que es en números y biográficos en decimales decimales con con 0 al principio en georgiano en hebreo en y la gana japonés en y la gana en katakana en en griego o sea pero claro tampoco evidentemente voy a hacer un ejercicio sobre esto porque es muy extraño que nos pongamos a hacer listados en armenio o listados en hebreo vale pero simplemente que sepas que se puede hacer es como lo que te decía el otro día del rubí en japonés está guay saberlo pero evidentemente pues no creo que llegues a hacer nunca ningún proyecto que utilice eso pues bueno que lo sepas yo que sé basta que diga esto por ley de murphy para que ahora lo hagas pero bueno vete a saber entonces hará a continuación lo que voy a hacer es abonar dentro de la ley perdón aquí mismo voy a utilizar un un modificador que lo que hace que es que los menús en lugar de caer uno debajo del otro caigan a la a la izquierda lift cuadro recargo y fíjate que ahora tengo inicio blog curso sobre mí y todo eso bien ahora tengo el pequeño problema de que bueno en los elementos se han puesto realmente la izquierda esto es bueno están un poco pegados entonces yo ahí lo que podría decir es mirar al padding pues en lugar de cero pues cinco guardo recargo y ahora veo como tengo un poquito más de espacio voy a continuar modificando en este caso voy a hacer lo siguiente voy a decir el sistema que background es igual a black y color es white con lo cual lo que va a ocurrir es que tengo como una especie de menú con el fondo negro y las letras blancas ahora a continuación voy a decirle que martín un píxel lo que va a hacer es que el menú se separe un poquito y a partir de aquí voy a jugar un poquito más diciéndole al sistema que quiero que tex transformó sea upper case o sea quiero todas las letras en mayúsculas y quiero un wifi de vamos a ver igual me paso pero 100 píxeles vale me pasado afectivamente ay qué pasa aquí vale ahí tenemos un pequeño problema tenemos un pequeño error pero que va a ser muy común prácticamente en todos los casos vamos a hablar sobre ello voy a decirle que quiero trabajar con 70 píxeles vemos que tengo otra vía del problema si se puede trabajar con tanto por ciento un momento en font size voy a decir 10 píxeles para acabar de trabajar esto vale entonces sí que efectivamente si yo por ejemplo vuelvo atrás al ejemplo donde estaba trabajando con el header el mengelle footer yo le había puesto 800 píxeles entonces se puede poner por ejemplo 80 por ciento lo cual va a hacer que la anchura sea proporcional a la anchura que tenga el contenedor paterno del contenedor padre que en este caso es el contenedor principal la pregunta que acabas de hacer realmente es más importante de lo que tú puedas pensar en un principio entre de este cuento lo que yo estoy haciendo por defecto es trabajar ahora mismo por defecto con píxeles trabajando con píxeles el diseño es menos adaptativo más adelante vamos a hablar de diseño adaptativo pero por lo menos el diseño está más controlado pero claro esto quiere decir que el diseño hasta que lleguemos a esa parte donde hablaré del diseño responsivo el diseño no se adapta al medio vemos cómo estoy haciendo esto y el diseño no se adapta trabajando con porcentajes junto con otras técnicas no sólo es esa pero es una de las principales por una parte asegura que el diseño se adapte a diferentes medios pero por otra parte hace que el diseño tenga un comportamiento un poco impredecible porque se va a ir ajustando según el medio según los contenedores padres según un montón de cosas entonces yo desde el punto de vista de la programación no tengo ningún problema con los porcentajes pero sí que los alumnos que tengo que vienen más de diseño gráfico donde lo que quieren es hacer un diseño y pasa ordenador pues cuando empiezo a hablar de porcentajes les empieza a explotar un poco la cabeza porque dicen mira yo ten en cuenta que yo tengo muchos números que son diseños gráficos y que en un momento dado de sus vidas pues en lugar de depender de un programador para hacer que sus diseños pasen a web lo que quieren hacer es que ellos pasen sus propios diseños a web esto ya de por sí les supone un pequeño quebradero de cabeza pero cuando además les digo de mira el concepto que tenía es de diseño fijo que tú lo haces y sé si para siempre ese diseño salta por los aires porque el diseño es múltiple ya les acaba de explotar la cabeza y es como mira a la esto vale entonces es por lo que desde el punto de vista de la programación el diseño porcentual y el diseño adaptativo es súper guay desde el punto de vista del diseño gráfico es algo más complejo ahora en cuanto a lo que te decía en cuanto a lo que te decía de llevar esto hasta 100 píxeles te quería ilustrar un concepto y es que cuando pongo el flow left siempre que ponga el flow de siempre y te digo siempre porque este es un problema reconocido de fs s tengo un problema y es que no sé cuándo cómo cuándo y cómo decirle oye deja de flotar ya aquí va el carrusel eso no tiene que flotar a la izquierda eso va abajo el problema del flow teléf es un poco como ese slogan de que cuando haces pop ya no hay stop bales el programa no sabe cuándo dejar de flotar y para eso hay un truco y no es un truco mío sino que si lo quieres buscar en internet es el truco llamado clear fix entonces ese truco consiste en lo siguiente yo vengo por aquí a index y vengo por aquí y después del nap introduzco un truco que es dime styles es igual o puedo decirle en este caso o class es igual a clear fix le va a poner manualmente pero lo puedo hacer bien vale div class es igual a killer fix y por tanto ahora en estilo pongo por ejemplo por aquí en alguna parte punto clear fix es decir recordamos que el punto lo que hace es que va a estilizar a cualquier elemento que tenga esta clase luego punto clear fix lo que hace es estilizar lo que sea que tenga un clases killer freaks y básicamente lo que hace es tener un estilo llamado clear voz osea libera me lo limpia me lo aclara me lo a los dos lados a la izquierda y a la derecha recargo y comprobamos como esto lo que ha hecho es devolver el aquí va el carrusel al sitio de hecho te puedo contar una anécdota que me pasó hace años y es que de un centro de formación había otro profesor explicando el clear fix lo estaba grabando en vídeo también y entonces un alumno se quejó de ese profesor de qué le parecía que esto era súper cutre de que esto era una encontrada entonces el centro me pasó el vídeo para decirles que el alumno que se ha quejado este vídeo porque dice que esta forma de proceder es una encontrada entonces vi el vídeo y dije mira es que lo que ha explicado el profesor es así o sea sé que parece q3 y que parece un apaño probablemente lo es pero es que es así o sea si tú vas a internet y buscas css clear fix verás que se ha auto clear flow de clear fix o sea en verás que hay un montón de clear fix hack vale verás que hay un montón de páginas que te explican este truco entonces bueno es lo que parece chungo de hecho lo es pero es así pero es lo que hay antes de continuar voy a utilizar una cosita que es text align center que es para que se me quede todo esto centrado ahora ya puedo devolver estos 70 píxeles ya que está claro el truco del clear fix y ahora te voy a explicar una cosa un poco extraña que son los pseudos selectores en css los otros lectores de hecho te voy a explicar sobre el menú porque lo tengo a huevo no te quiero decir que sólo se puede aplicar sobre el menú pero te lo voy a explicar sobre un elemento sobre el cual ahora mismo me es fácil explicar pero pero yo por ejemplo lo que quiero hacer es editar el estilo únicamente del primer botón y del final se puede editar el estilo del segundo del tercero de los pares de los impares hay un montón de esos dos electores vale pero ahora para este ejemplo quiero el primero y quiero el último entonces claro yo sé cómo estilizar el napoli pero no sé cómo utilizar sólo el primero hay gente que lo que hace y tampoco es que esté muy mal es venir aquí y poner por ejemplo aquí en lee class primero y aquí lee class último vale no está mal pero no es muy limpio en cuanto a que si esto por ejemplo más adelante sale de una base de datos yo realmente no voy a saber cuándo se primero y cuando es el último entonces la forma más limpia de escribirlo es lo siguiente now you lie’ dos puntos y fíjate que al poner dos puntos espera que sea idealista fíjate que al poner dos puntos me aparece el listado de pseudos electores y hay un montón de ello entonces verás que por la f había uno que ponía first child es el primer hijo así que pongo fairchild y digo border radios voy a poner 5 píxeles no es lo que quiero pero le voy a dar contrólate ‘fijar as para ponerle 15 píxeles y te fijarás como solo el primer botón tiene ese aspecto redondeado yo en este caso no quiero poner 15 píxeles porque si le pongo 15 píxeles lo que hace es que le pone el radio a las 4 esquinas de la cajita y quiere usar una sintaxis donde empieza arriba a la izquierda y va en el sentido de las agujas del reloj pues voy a poner 15 píxeles 0 píxeles 0 píxeles 15 píxeles lo cual quiere decir que le va a aplicar 1500 y 15 y se recargó fíjate que ahora se queda el redondeado solo la izquierda pero por qué porque las esquinas son arriba la izquierda arriba la derecha abajo la derecha abajo a la izquierda luego arriba a la izquierda arriba a la derecha abajo a la derecha abajo a la izquierda es la lógica a veces cuesta un poco de pillar pero cuando le coges un poco el truco pues ya tiene su razón de ser de la misma forma que la puedo poner now you lie’ dos puntos last child hay otro modificador y otro pseudo selector que es el último hijo y en este caso lo que voy a hacer en el momento vale lo que voy a hacer es borde radios y voy a poner en este caso el contrario que es cero píxeles 15 píxeles 15 píxeles 0 píxeles y eso es lo que va a hacer es que el botón del final pues tenga este redondeado dicho esto cuando hago este ejercicio más o menos lo hacer pues hay gente que dice bueno me gusta este menú a este menú citó digamos y hay gente que dice esto es súper hortera me da igual quiero decir o sea yo he hecho esto un poco para demostrarte que ese menú horrible en html en lista se podía cambiar y yo con esto no te estoy diciendo haz exactamente este menú lo que te estoy diciendo es haz lo que quieras hace el menú que quieras edita tu propio menú como tú quieras valiosa inspírate por este código para tener una idea de todo lo que puedes hacer que de hecho es mogollón entonces hay gente que dice mira es que a mí el tema este de los botones es que me mata pues vale o sea yo te he hecho en mi web si te fijas en mi propia web lo tengo con textos sin un botón de fondo pero en este curso lo estoy haciendo así no porque estilísticamente me guste así sino porque didácticamente me ayuda a enseñar una serie de cosas luego también vamos a hablar de que tenemos otro tipo de electores entonces en este caso lo que voy a hacer snap ul li y en lugar de poner dos puntos voy a poner dos veces dos puntos que es una combinación de caracteres que de hecho en informática tienen bastantes sentidos significados entonces voy a hacer dos veces dos puntos y fíjate que aparecen otros tipos de selectores es decir qué es lo que pasa con after qué es lo que pasa con el comeback trope qué es lo que pasa qué cosas no está justo el que yo quiero bueno voy a poner voy a poner a ver qué es el que yo quiero a ver si está aquí si no estaba con dos veces dos puntos estaba con una vez dos puntos que es h v que es cuando pase el ratón por encima entonces yo a continuación vengo y digo vamos a ver quiero background black perdón o white y color black si esto que he hecho ya era hortera lo va a ser mucho más para veras entonces recargo y ahora a ver es cuando pase el ratón por encima entonces cuando pasó el ratón por encima lo que ocurre es que el fondo se vuelve blanco y el texto se vuelve negro en definitiva ocurre lo que sea que yo diga aquí y ahora de css3 te voy a enseñar un modificador que la gente de hecho le suele hacer mucha ilusión yo también te digo que esto va un poco con modas yo te aseguro que yo soy cualquier cosa menos un gurú del diseño pero yo hacía cosas en 2010 que la gente me decía eso es súper hortera y a día de hoy 10 años después la gente hace eso entonces una de las cosas que hacía es esto que te voy a enseñar tienes en 2010 y la gente me decía aquí como abusas y ahora se lleva muy bien entonces vengo por aquí y voy a poner transition hablemos mucho más profundamente de esto hoy un segundo esto quiere decir que todas las propiedades hoy el properties van a transición ar durante un segundo y esto lo que quiere decir guardo y recargo es que dentro has visto ya hay una animación es que cuando pase el ratón por encima en lugar de hacer placas y cambiar automáticamente lo que va a ocurrir es que se produce una transición de un segundo y queda más suave una vez más yo con esto no te estoy diciendo utiliza esa transición lo que te estoy diciendo es que sepas que esto existe a partir de ahí a cada uno la gente que dice que sí es muy bonito pero no me gusta sea prefiero que cambie automáticamente porque para la estética de la web pues me gusta más pues evidentemente no hay ningún problema vamos a ver yo ahora mismo por ejemplo lo que acabo de hacer es mostrarte este efecto mediante css pero hay muchas de las cosas que se pueden hacer con css que se pueden hacer efectivamente con javascript y de hecho gracias por hacerme esa pregunta porque ahora a continuación pensaba enseñarte en un momento esos momentos solo a cambiar la tipografía de las letras pero después de eso te voy a enseñar a poner un carrusel con imágenes que van pasando y eso ahora mismo en este caso lo que voy a hacer es que te voy a enseñar con css y eso evidentemente se puede hacer también con javascript entonces antes de empezar la parte de javascript lo que voy a hacer es darte un consejo que claro este consejo que te voy a dar yo te lo voy a dar todo momento lo vas a recibir lo vais a poner un poco con pinzas y más adelante comprobarás o no la validez de este consejo que te voy a dar y el consejo es todo lo que puedes hacer con css hazlo con css y no con javascript entonces a pepe la palabra con este comentario que te acabo de decir también parece como que yo tenga algún tipo de aversión a la javascript y de hecho ocurre lo contrario o sea no sé si incluso has visto que mi publicación de facebook o de instagram de ayer o anteayer creo que era anteayer donde por ejemplo usa mi publicación de instagram de anteayer era esta que es juguete visual desarrollado con html5 canvas pues html5 canvas de hecho fíjate qué digo puedes probarlo aquí y si miro el código fuente verás que a ver el código fuente puñetas través que como tengo en pantalla completa pues el scrum show scott pues ahora verás ahora verás comando option un comando profesión y ahí tenemos el código fuente vale pues si te fijas esto que publica ya te digo no sé cuando hace dos días o por ahí de hecho tiene esto de css y esto de aquí es javascript o sea quiero decirte que con el comentario que te acabo de hacer parece que yo tenga algún tipo de aversión a javascript cuando si te fijas si eres un poco lo que público por ejemplo hace dos noches era de mira me aburro con mi vida o sea voy a sacar una hoja en blanco y voy a empezar a programar de javascript a ver dónde me lleva javascript vale hasta que salga algo guay hasta que salga algo que yo diga venga me puedo contento la cama entonces dicho esto sea dejándote bien claro que yo soy totalmente un fan de javascript también lo que te quiero decir es que javascript es un lenguaje de programación con sus variables y sus funciones y sus operaciones matemáticas y por tanto y aquí viene el quid de la cuestión la probabilidad de cometer errores y que el programa de errores es mucho más alta en javascript y es mucho más baja en css ese es el único motivo por el cual te estoy recomendando que todo aquello que puedas hacer en css lo hagas en css y no en javascript porque las probabilidades de sufrimiento son bastante menores insisto aún manejando correctamente javascript ya verás que cuando empezamos javascript una vez que te haya explicado las bases y los fundamentos te darás cuenta de que para mí javascript es como especie de juguete es decir es como que lo puedo hacer todo en javascript allí hay un universo de infinitas posibilidades en havas que pero hay que tener en cuenta que es un lenguaje de programación y que por tanto cuando cometes un error pues de repente no funciona nada la diferencia de fs es vale esa es la única razón por la que te recomiendo eso entonces dicho esto haber dicho esto a continuación antes de explicarte lo del carrusel lo que voy a hacer es hablar de un poquito de fuentes por cierto que todo esto que estoy haciendo si nos fijamos vamos a ver esto lo voy a pegar aquí y aquí lo que voy a hacer es este este separador y aquí pongo estilos generales y así a la verdad estilos generales vale eso técnicamente ya no lo es vale aquí en el hobby yo puedo hacer lo siguiente puedo hacer font-family es igual a sans sanserif lo que hace perdón lo que hace es que me quita la fuente de tipo times new roman que viene por defecto y me pone una fuente digamos de tipo de palo no voy a no voy a perderme mucho en lo que son las reglas de diseño pero te diré que hay varias familias grandes de fuentes una de éstas es la sans serif que es sin sheriff as sin remates sin decoraciones y otra es la sheriff es otra de las grandes familias hay varias grandes familias que es con remates con decoraciones cada uno usa los tipos de fuente para lo que realmente más le gusta generalmente esta fuente con remates decoraciones es una fuente más profesional más estilosa la fuente de tipo sans-serif es una fuente más tecnológica es una fuente más empresarial es una fuente más seria y luego por supuesto ya sabes lo que es blanc decir los diseñadores que es nunca nunca nunca nunca nunca uses cómic sands a menos que estés haciendo en la web de una guardería en este caso evidentemente sí que está justificado en ningún otro caso está justificado vale pero esto ya te digo es a voluntad pero sobre todo lo que quiero enseñarte en este vídeo lo que yo creo que te va a gustar es que una de las grandes novedades de css3 sigo diciendo novedades lo cierto es que lleva ya 10 años con nosotros pero pero es que no te imaginas el sufrimiento que era esto antes es que tú puedes cargar cualquier fuente absolutamente cualquier fuente para demostrarte lo que me voy a ir a una página que se llama da font en difundió puedo encontrar cualquier fuente tipográfica fíjate que acabo de entender esta y me acabo de enamorar a descargar porque cada vez que usa cada día que entres aquí la fuente cambia pero es que hago de ver esta la primera usando es que conformar con la primera es que de verdad te digo que la acabo de ver y ha dicho me qué bonita entonces voy a descargar me la descargó en aplicaciones web y la voy a guardar cuidado porque es un archivo zip de hecho vale hello songs and me voy a eliminar este archivo para no hacer ruido y voy a llamar a esto fuente creo que tengo un archivo en formato o te efe es un formato de fuente y un formato en formato ttf luego cuidado porque hay un licence request que dice contactame para comercial y bueno vale en este caso es no es personal no es profit pero tampoco es comercial es educational con lo cual pues voy a utilizarla no me gusta que tenga un espacio entonces voy a quitarle el espacio de espacios peligrosos bien a continuación to date cuenta que yo en ningún caso fíjate ya estoy haciendo lo de doble clic y abrirla y momento vaya a font force perdón y la voy a abrir con catálogo tipográfico vale en ningún caso le estoy dando a instalar el tipo de letra o sea quiero que tengas claro que no me la estoy instalando en mi ordenador porque ‘flaco favor’ haría quiero decir si la astronomía ordenador pero luego la publicó en internet y la gente no la tiene en su ordenador no hago nada entonces lo que hago es lo siguiente me voy aquí y me voy a w 3 schools css3 font y voy a copiar y pegar este cacho de código [Música] property no momento es custom fonts lo que quiero demostrar ahora ahora si lo que quiero demostrarte ahora así es que si yo hago esto y cuidado se recomienda que ponga esto al principio del documento cuanto más arriba mejor entonces yo digo font-family es el nombre que yo quiera el nombre que yo quiera se va a llamar sunshine ya no tiene ni que ni por qué coincidir y ahora la url es a ver qué otro día es fuente para decirle al programa que voy a entrar dentro de esa carpeta y hello sunshine hay que respetar mayúsculas y minúsculas hello sunshine efe así que guardo y recargo momento antes de ellos tran segundo y le digo que a la h 1 voy a decir voy a decir estilos cabecera ok vale y ahora digo al h 1 quiero son family y en lugar de poner cursi de fantasía mono espaciado sanserif lo que sea voy a poner sunshine o sea como que acabo de crear una familia de fuentes y ahora vengo aquí recargo un momento no lo ha pillado vale sunshine url fuente estilo hello sunshine vamos a ver si hay algún error vamos a ver si algún error en la consola y efectivamente ha fallado ha fallado al cuidado y ha fallado al decodificar la fuente descargada con lo cual como veo que tenía un peso no es que la he vinculado mal es que la ha descargado pero no sabe cómo descomprimir la como he visto que tengo un hote efe voy a usar los haberes si no pues no la otra o te efe recargo ahora sí vale de hecho fíjate una cosa que acabo de hacer que es una de las cosas más útiles que yo creo que te voy a poder enseñar entonces si te has dado cuenta en el momento en el que algo no me ha funcionado lo que he hecho es botón derecho inspeccionar para ir a la consola y obtener ahora ya no hay error evidentemente y obtener un pequeño informe de qué es lo que ha ido mal entonces eso muchas veces ayuda a averiguar dónde puede estar un error yo puedo evidentemente ahora hacer esto tantas veces como yo quiera quiero decirte con esto qué y ahora vengo por aquí voy a bajar esto y digo font font-size es igual a 30 píxeles igualmente pasando menos de 40 píxeles vale y ahora puedo venir aquí y en razón me voy a dejar otra fuente guau porque me gusta tanto la primera década o no sea la cuarta pero fíjate cómo ha cambiado la fuente o sea fíjate cómo cada vez que entres va a cambiar entonces le di a descargar rosalinda voy a ir a fuente muestro en el finder descomprimimos rosalinda ali amore voy a llamar la rosa linda porque si no aquí la pongo en la misma carpeta ahí y ahora yo lo que hago es que copio este bloque de código la llamo rojo se linda es con ok y ahora si ahora tengo que si quieres puedo copiar y pegar ya si ese seguro que no me equivoco tengo que poner el mismo nombre exacto de archivo pero tras haber hecho esto yo ahora puedo venir aquí y puedo y decirle que quiere utilizar el h2 rosalinda y 20 píxeles por ejemplo vale me lo estoy inventando para luego evidentemente podría ajustarlo como queramos recargo y fíjate ahora quiero más tamaño 30 vale y fíjate como yo puedo personalizar como quiera cualquier fuente que ponga en la página web esto es bueno quiero decirte que estás limitado para unos pocos tipos de fuentes sino que virtualmente puedes utilizar el tipo de fuente que tú quieras ahora claro esto es un poco como los efectos de vídeo en los vídeos de vuela y es que puedas hacerlo no quiere decir que debas hacerlo quiero decir que esto es como los vídeos de volar que utilizan mogollón de efectos y de filtros que abusan pero realmente el lenguaje audiovisual de ese tipo de vídeos es ese pues aquí pasa lo mismo que puedas poner virtualmente un tipo de fuente en cada texto que tengas no quiere decir en absoluto que quede bien esto ya queda un poco digamos mi objetivo es enseñarte que mediante la programación se puede y luego ya evidentemente nuestro objetivo es al conocer tu estilo pues saber que es aceptable y que no lo es pero saber que se puede aunque en un momento dado elijas no hacerlo ahora es cuando vamos a lo del carrusel entonces con el tema del carrusel ahora viene lo que te decía de que hay que tener cuidado y si esto se puede hacer con css iba a costar no te digo que no pero más costará o costaría con javascript entonces en primer lugar quiero imágenes voy a cerrar aquí unas cuantas cosas voy a buscar imágenes mías por internet josé vicente carratalá voy a buscar imágenes para buscar voy a buscar no lo sé voy a buscar manera así vale ok este puedo puedo poner herramientas tamaño hoy son tal es que todas las que publico últimamente son cuadradas entonces voy a ver dónde puedo sacar las imágenes voy a hacer una cosa voy a voy a entrar en cada una de estas imágenes y aunque son cuadradas las voy a descargar y así llegar a continuación pues lo haría un recorte o ahora veremos descargó esta imagen y lo voy a descargar en escritorio en curso aplicaciones y voy a crearme una carpeta no lo voy a llamar imágenes porque ya tengo una que se llama img voy a crear una carpeta llamada foto entonces hago así cierro voy abriendo imágenes voy abriendo imágenes de hecho yo creo que casi mejor que esté cogiendo mis propias imágenes más que nada porque están mal entonces eso así me va a ayudar a ilustrar te claro el por qué están mal y también el cómo solucionarlo entonces las voy a guardar y vamos a hablar un poquito no solo tanto ya de programación sino vamos a hablar un poquito de otras cosas que tienen que ver con el desarrollo de web pero que no son puramente programación voy a acabar de descargarme las imágenes y ya está pero ya está no creo que queda la última ok puedo cerrar ya aunque yo creo que vale vale vale y ya está muy bien verás de memoria resulta que en los archivos que yo he hecho hasta ahora es decir el archivo es index.html ocupa dos casas el archivo css ocupa dos casas también son cuatro casas de momento no he hablado de esto hasta el momento porque de momento no tengo un problema de memoria pero si entramos por ejemplo en la carpeta img veo que el archivo josé vicente punto jpg y eso que no era especialmente grande espera que te lo digo 400 x 400 ocupa 30 casas siempre va a ocurrir que ocupan mucho más las imágenes que el código esto siempre va a ser así está constante ahora bien yo soy consciente de que esas imágenes que yo subí a mi blog son imágenes que son monstruosamente grandes porque fíjate que cada una de ellas por eso te digo que están mal ocupa 35 megas o sea tú fíjate megas vale para que tengas la idea de lo que te estoy queriendo decir voy a usar la aplicación de easy disk es simplemente momento en que no la tengo registrada con lo cual tengo que esperar a que esta barrita baje hasta abajo del todo pero para que veas gráficamente es una herramienta que utilizo para saber cómo llevó el disco duro de usado pero en este caso me va a servir para ilustrar t una cosa evidentemente no voy a dejar que esto esté mal vale aunque en mi web está mal y fíjate que es la es una web real pero igual pues voy a tener que haber continuar prueba me voy a ese x es crear como es de estado sólido no creo que tarden mucho en escanear y vale vamos a ver y esto es lo que hace este programa me dice como llevo el disco duro esto debe ser usuarios esto debe ser josé vicente esto debe ser imágenes escritorio vale archivado el curso de payton [Música] grabación a ver esto es escritorio curso de payton es que ni siquiera está fíjate pues agua 3 gb a hacer una cosa objetos más pequeños cursos aplicaciones web vale esto es lo que quería enseñarte o sea fíjate que la fuente o sea hay objetos más pequeños estos archivos ni se ven en la tarta ni se ve ni se visualizan las fotos ocupan 30 megas son lo que es lo mismo redondeando a multiplicador mil ocupan 30 mil casas mientras que el indec si el estilo ocupa cuatro casas entonces cuál es el problema el problema es no haber optimizado las imágenes si yo cojo una de las imágenes cualquiera me daré cuenta al obtener información que la imagen tiene 1920 píxeles por 1920 píxeles eso no está tan mal aunque fíjate que la web que yo estoy haciendo tiene 800 píxeles de ancho si tiene 800 píxeles de ancho y esta imagen tiene en 1920 tengo mucho más tamaño del que necesito más del doble además esta imagen esta imagen está en formato png y el formato png no tiene ningún tipo de compresión entonces hacer una buena web no siempre depende de la programación sino que también depende de cómo trates las imágenes para enseñarte esto lo que voy a hacer es utilizar un pequeño programa llamado game se puede hacer también con photoshop yo soy muy fan de the gimp más que nada porque es gratuito tengo también photoshop por aquí pero lo voy a hacer con el gimp entonces yo lo que hago a continuación es que abro una imagen con el link no lo voy a hacer con todas para porque lo hago con una entonces la idea de cómo se hace con todas entonces yo cojo esta imagen y digo mira en primer lugar me voy a imagen me voy a escalar la imagen y lo cambio de 1920 x 1920 a 800 x 800 le doy a escalar y hago la imagen más pequeña pero además yo me voy a archivo me voy voy a hacer esto un poco más grande para verlo mejor me voy a archivo me voy a guardar no me voy a exportar como y en lugar de guardarla como png como jpg el formato jpg como ahora verás a continuación admite haber aquí esto fuera y venga con el tejido aquí admite calidad vale admite trabajar con la calidad entonces si yo lo bajó a cero fíjate que la calidad es pésima pero el archivo ocupa 12 casas pero la calidad no me lo puedo permitir evidentemente si yo lo subo a 100 ocupa 443 pero igual tengo demasiada calidad yo lo que puedo hacer es ir bajando hasta un punto en el que no se note ya cuando se note pues paro ahí se empieza a notar porque en la calma empezar a parecer cuadrados con lo cual pues tiro un poquito más arriba 40 casi vale vamos a quedarnos ahí 40 casas exportó está ya un poco al gusto del consumidor entonces exportó y tú fíjate que he pasado de 35 mb que esto viene a ser 3.500 casas a 53 casas y si abro la imagen visualmente fíjate que ahí sí que se quiere notar un poquito la pérdida de calidad pero te tienes que fijar estos jpg esto es png estos jpg esto es png si te fijas se nota pero dices caray pero no se nota como para pasar de 3.553 vale entonces eso es un poco la idea yo ahora de momento lo que voy a hacer es cargar los png pero lo que quiero decirte es que en un momento dado podemos utilizar en la conversión a jpg para ser verás he pasado muy de puntillas por encima del gym entonces tú me acabas de decir lo de que por ejemplo durante utilizas a alguien para el tema de las transparencias que efectivamente es una de las cosas franjas se puede usar es para eso yo soy muy fan del gym para prácticamente todo lo que puedo pero también te digo que comparando el quinto contra photoshop photoshop tiene más herramientas photoshop es una herramienta de edición y retoque de imágenes más profesional que el gimp por ejemplo si yo abro el gym me doy cuenta de que en modo de color tengo rgb escala de grises e indexado pero no tengo una característica esencial que tiene photoshop que es usar el modo de color de fm y k es decir cian magenta amarillo y clave por ejemplo abro photoshop y veo que se cargó una imagen verás qué verás que cargo una imagen y verás que tengo imagen modo y lo puedo cambiar hacen y agrega acá entre otros modos de color entonces quiero que quiero transmitirte quiero decirte que yo me tengo a mí mismo por una persona bastante razonable y esto quiere decir que ni soy fan de photoshop o sea que no soy una de las personas que te dicen que photoshop es meramente profesional y el gimp es una mier de cine ni tampoco soy un talibán del software libre que te digo que el gimp es lo mejor y que photoshop no vale la pena sino que te digo que cada herramienta objetivamente tiene lo que tiene y entonces claro por ejemplo salió te acabo de defender que photoshop tiene por ejemplo lo de la conversión acción y acá pero yo lo que acabo de hacer es un cambio de formato y rebajar la resolución del archivo y eso lo puedo hacer con el gimp entonces mi filosofía mi forma de ver y de hacer las cosas es que momento que voy a bajar la persiana que está dando el sol en toda cara es que para y quiero utilizar una herramienta propietaria cuando puedo hacer lo mismo con una herramienta de software libre esa es mi forma de ver las cosas que no mi forma de ver las cosas tiene que ser compartida por ti vale sino que yo te estoy explicando un poco que con gimp hago todo lo que puedo y hay cosas que no puedo hacerlas con el equipo y las tengo que hacer con fotos o por supuesto pero esa es la razón por la cual siempre que puedo intento utilizar a alguien bueno dicho lo cual para a continuación lo que voy a hacer es venirme a index y aquí donde pone aquí va el carrusel de hecho lo voy a mantener voy a poner algo de código vamos a volver a html no voy a enseñarte ninguna etiqueta nueva de html os voy a mostrar las que ya conocemos y entonces voy a poner viva y de con tenedor carrusel ahora div class diapositiva y dentro de la diapositiva img src foto barra y voy a poner cursos de fe le he cogido el png al final esto quiere decir que yo ahora guardo recargo la imagen sobresale por todas partes por la sencilla razón de que como te digo la web tiene una anchura de 800 pero la imagen tiene una anchura de 1920 lo cual quiere decir que yo ahora puedo venir al css y puedo crearme un nuevo grupo de trabajo aquí voy a trabajar con el carrusel y así luego cuando veas todo el código porque verás que esto se va incrementando la carrera pues tendrás claro qué es cada cosa y entonces yo digo carou cel o sea caras el espacio con tenedor carrusel contendor carrusel clase diapositiva ing esto quiere decir que yo no quiero estilizar a cualquier imagen de la web sólo quiero estilizar a aquellas imágenes que estén dentro de la castidad positiva que estén dentro de un contenedor carrusel que estén dentro de un carrusel vale entonces ahora digo width fíjate lo que me preguntabas antes 100% 100% es ajuste al 100% de lo que ocupe la página web ahora a continuación yo puedo repetir esto tantas veces como quiera por ejemplo copio esto lo voy a tirar con 4 2 3 y 4 y yo ahora lo que hago es que curso de fe pero primero que pille curso de java curso de servidores con linux ward y recargo y toda la verdad es que yo lo que tengo son cuatro imágenes que dice 418 me igual cuatro imágenes hay puestas unas debajo de la otra pero yo he prometido implícitamente con este nombre que esto iba a ser un carrusel pero es un carrusel es lo típico de que las imágenes van pasando digamos de uno a otro yo lo que voy a hacer en este caso a ver aquí es que vive y de máscara cuidado porque al hacer esto cuidado porque al hacer esto las imágenes vale de momento sigue en función de lo que vale si simplemente para desplazar todo el código es seleccionar todo el código y sin miedo porque en otros editores pero puedes cargar pero sin miedo pulsar el tabulador que es tabulador para empujar hacia la derecha y mayúsculas tabulador para empujar hacia la izquierda es así de sencillo entonces ahora yo lo que voy a hacer es lo siguiente voy a decirle que más cara más cara más cara más cara tiene una anchura de 800 x 4600 3.200 si le pongo un par de 200 píxeles más mejor aguas y vale momento voy a comprobar qué me lo está cogiendo correctamente máscara 3400 y ahora voy a decir qué carrusel contenedor carrusel diapositiva wyss 800 píxeles height 800 píxeles y cloud left aquí voy a decir por cierto hyde 800 píxeles y con esto lo que va a ocurrir es que ahora recargo a ver momento lo que quería es que las imágenes se pusieran una al lado de la otra vamos a voy a hacer zoom hacia atrás al hacer zoom hacia atrás ahora voy a inspeccionar y voy a ver la máscara y la más cara e interesante agua vale si esto es porque como él tiene un error ves que aquí me está diciendo que está tachado el error es que parece que no he puesto punto y coma después de lewis ya ves tú el error profit así que guardo recargo vale ok más cara a qué pasa tengo el marcaje mal yo creía que lo había hecho pero estoy viendo que no de hecho esto es lo que pasa vale tenía un dip de más ahora sí vale ahora lo que tengo es como el inicio de un carrusel lo que quiero ahora a continuación es que con la máscara ves cómo se extiende hacia la derecha vale lo que quiero es que mediante una animación ahora vamos a hacer esa animación vaya pasando hacia la derecha y esto como ya te digo va a ser un carrusel animado entonces cuando la gente lo vea animado dice a javascript y no voy a animar sin hacer una línea de javascript entonces a continuación voy a hacer lo siguiente me voy a acs s y digo máscara animation mueve que va a durar 20 segundos luego se puede cambiar la duración eso es lo de menos y ahora y frames 9 es decir aquí te he dicho que voy a utilizar la animación llamada mueve aquí a continuación voy a definir cómo se comporta esa animación llamada mueve y entonces voy a decir lo siguiente en 0% fíjate esto es un poco curioso porque es como dos llaves dentro de otras llaves pero es así en 0% bueno perdón esto es posición relativa vale en 0% digo left 0 píxeles en 25 % left 800 píxeles es led creo que no al revés no pasa nada no preocupes al 50% 1600 píxeles al 75% 2 mil 400 píxeles y al 100% ahora hablaremos de esto eso se va a quedar colgando pero 3 mil 200 píxeles vamos a verlo vamos a ver qué efecto hace recargo y digo está siendo que está siendo si el otro lado vale entonces no pasa nada porque pongo el no pongo negativo y asunto solucionado vale vamos a ver el asunto solucionado pero no sigue estando mal entonces fíjate como ahora fuera así se va moviendo y yo digo me gustaría que pararán un poquito más fíjate que no paran me gustaría ver vale ahí tengo la última imagen y luego vuelve al principio entonces ahora que lo que puedo hacer es lo siguiente es un pequeño truquito de animación cuando te digo que es un pequeño circuito de animación también te lo digo que a lo largo de los años me dado cuenta que en este punto concreto justo en este punto concreto de la formación soy un poco desconsiderado porque voy a dar por hecho que este truquito que voy a hacer lo vas a entender perfectamente cuando lo cierto es que los diez primeros años de mi vida profesional yo me dediqué a el animador entonces claro ese truco que te voy a decir yo lo tengo automáticamente metido en la cabeza pero la gente que no ha hecho animación antes es como vale pues no me entero de lo que acaba de pasar aquí vale es el truco es el siguiente y es que de 0 a 20 por ciento quédate en left 0 de 25 a 40% ahora te dibujo una gráfica y entenderás mejor lo que estoy haciendo a 45% quédate ahí de 50 a 70 quédate ahí y de 75 a 95% quédate ahí que es lo que hace esto se hará recargo verás que se queda quieto y hace fluye y pasa se queda quieto y hace y pasa se queda quieto y hace fluence y pasa y luego pasa a la última entonces que ha ocurrido vale te cuento lo que ha ocurrido yo creo que la mejor forma de enseñarte lo es abriendo excel voy a abrir el excel de google drive vale se puede hacer también con excel excel normal yo soy una persona también te digo que esto que te voy a decir te vas a reír te va a sonar a coña pero te lo voy a decir realmente de coña para veces no lo digo de coña y es que yo soy una persona que siempre dice que da igual cuál sea la pregunta xcel es la respuesta es decir el excel soluciona un montón de problemas e incluso los que no parece que sean de excel entonces fíjate que si yo pongo voy a poner lo que tenía antes vale yo pongo cero 25 50 75 y 100 entonces y ahora pongo 0 800 mil 600 de 2400 y 3200 entonces yo ahora hago una gráfica con esto a un gráfico vamos a hacer esto un poquito más pequeño ahora y él quiere un gráfico lineal y un gráfico de líneas y el gráfico correspondiente a esto que acabo de hacer es lineal y por tanto fíjate que la velocidad que tenía antes era lineal era constante prácticamente hacía pequeñas paraditas pero prácticamente la constante ahora lo que voy a hacer ahora lo que voy a hacer es que voy a poner aquí 20 es 0 25 % es 800 45 800 50 por ciento es 1600 el 70 por ciento es 1.675 por ciento es 2400 un 95% es 2400 y 100 por ciento es 3200 si yo saco una gráfica de esto y ahora inserto un gráfico y el gráfico es de líneas ocurre esto que estás viendo y es que si yo le digo que desde 0 hasta 20 permanezca en 0 eso quiere decir que está parado si le digo que solo de 20 a 25 vaya de 0 800 solo en ese trozo se anima entonces esta gráfica te puede ayudar a un poco mejor a comprender por qué antes iba linealmente y ahora va parando y va haciendo estos para once hitos vale entonces claro yo te acabo de demostrar como esto que he hecho atiende a algún tipo de razón pero tú aún así me dirás sí pero en la vida se me hubiera ocurrido esto en la vida se me hubiera ocurrido que esto funciona así y no tengo solución para eso quiero decir yo simplemente lo que ocurre es que al escribir estos estos datos yo ya tengo esta gráfica en la cabeza ya sé que esto es así pero por qué pues por una razón muy sencilla y es que si nos vamos a un programa de animación 3d pues yo como te digo tengo 10 años de experiencia animando objetos y hago así y yo cojo un objeto y lo muevo y ahora digo pues mira vamos a ver tú al principio estás aquí y ahora más adelante estás aquí y ahora más adelante estás allá y ahora más adelante estás aquí vale os hago una animación en un programa 3d pues estos programas 3d tienen una es una cosa que se van gráficos de animación graph editor y entonces claro y sale eso entonces qué ocurre no te puedo dar un truco rápido para que automáticamente en tu mente aparezca esto porque esto a cualquier animador le cuesta años de entenderlo y más años todavía de dominarlo pero simplemente lo que te quiero decir es que esto que acabo de hacer pues tiene una razón de ser no son datos que me saca de la manga sino que son datos que los he puesto por un motivo y el motivo de asociada mente es porque tengo esa gráfica de ambos ya puesta en la cabeza esas gráficas y unas cuantas más pero digamos esa gráfica entonces ahora a continuación evidentemente queda un poco feo el hecho de que pues los estos estaban por la derecha es como que se ve el truco digamos y para eso lo he puesto dentro de dentro del contenedor carrusel porque yo ahora vengo al contenedor carrusel y le digo atención y le digo width 800 píxeles height 800 píxeles con esto no hago nada pero a continuación le digo overflow hidden overflow hidden es un comando de css que es muy útil porque lo que dice es que todo aquello que me sobresalga oculta me lo por tanto el contenedor carrusel solo 300 por 800 la máscara son 3.400 pero lo que sobresalga de los 800 lo va a ocultar guardo recargo y fíjate como ahora sólo se ve lo que toca y ahora tengo un carrusel animado sin haber tenido que utilizar el javascript ahora te voy a decir una cosa y es que para animar un carrusel no hace falta javascript ahora bien si tú me dijeras no yo es que quiero que haya un botón que es el típico botón de siguiente y anterior eso es javascript eso sí que se tiene que hacer con java pero si esa animación se puede hacer únicamente con css por cierto aquí donde pone animation 9 hay otro otro esto otro modificador que es animation y trace john count vale es es un poco como alemán que tiene uno tiene como un montón de palabras adjuntas entonces lo que hace después voy a ponerlo en infinito e infinito lo que hace es que no haga lo que está haciendo hasta ahora que es que lo hace una vez y separa sino que fíjate que lo que va a hacer es hacer lo que me queda por acabar el último tal pero palabras palabras que no estoy dejando por un motivo concreto y ahora ahí parece que vaya en blanco y vuelve al principio entonces el truco que voy a hacer para que no se note para que parezca que es un carrusel infinito es que me vengo aquí creo una diapositiva última pero la diapositiva última es igual que la primera cuidado porque ahora evidentemente como te puedes imaginar al carrusel le tengo que meter 3200 4.200 para que albergue a esa imagen y ahora recargo vamos a verlo el primero es programación ence entonces temas más ahora a continuación bueno esa es otra efectivamente momento palabras y ahora a continuación ahora aparece que para se hace y lo que ha hecho realmente es que acaba de pegar la vuelta pero como la última imagen es igual que la primera no te das cuenta y parece un carrusel infinito ahora evidentemente como decías esto está ocurriendo en 20 segundos igual le puedo decir mira deja que ocurra en 40 segundos y así en 40 segundos pues verás que da más tiempo para leer lo voy a poner a 20 segundos otra vez rápido porque me interesa que vale luego hay otra cuestión que te quiero decir que es una cuestión psicológica yo en este caso para empezar en la parte de arriba te enseñado lo de la transición y luego aquí te estoy enseñando el cómo hacer un carrusel animado una vez más yo te digo yo te enseño y tú luego eres libre de utilizarlo o no pero te voy a decir una cosa a nivel psicológico de hecho hay un episodio de los simpson que te va a decir que es fantástico pero realmente muchos lo son en los años 90 se popularizó el uso de una cosa que se llama los jeeps animados entonces de hecho hay un capítulo de los simpson donde es como que homer se hace su primera web y lo hace lleno de clips animados esto es una mala costumbre por una razón muy sencilla y no tiene que ver con desarrollo webs no tiene que ver con psicología humana y es que el ser humano es un depredador y eso quiere decir que la vista del ser humano se va automáticamente a aquello que esté en movimiento en otro digo totalmente en serio y con esto lo que te quiero decir es que deberías poner cuantos menos elementos en movimiento mejor en una pantalla de hecho debería haber o ningún elemento en movimiento o un elemento en movimiento en el momento en el que pongamos dos o tres elementos en movimiento la web va a ser un mareo vale entonces de ahí un poco el que te he enseñado esto pero yo igual no lo pondría en una web pero where vale ahora a continuación ya tenemos por aquí esto en funcionamiento ya estamos viendo cómo pues con css estamos utilizando la web y podemos realmente lograr efectos muy chulos no sólo en cuanto a utilizar un menú sino en cuanto a realmente hacer animaciones ahora tendría que hacer lo mismo por ejemplo para no voy a estilizar todas las páginas voy a estilizar únicamente los de la página principal para que nos quede al menos la página principal marcada entonces vamos con destacados destacados me voy a dejar voy a poner últimos artículos de blog que eso es interesante de maquetar vamos allá vale tres digo que esto es interesante de maquetar porque nos va a suponer nuevos retos me voy a ir a index me voy a ir a blog y entonces aquí van los últimos artículos del blog tengo de hecho dos artículos de muestras esto está muy bien voy a poner una img una imagen img src y digo foto barra curso de fe vale y ahora voy a voy a copiarlo y pegarlo luego luego nos iremos variando para que tenga un poquito de de esto vale fíjate cómo se me vuelve a descuadrar pero no pasa nada porque yo me voy a estilo y ahora digo aquí voy a trabajar con el que russo del pues esto es blog en la página principal fíjate que ya estamos en 144 líneas fácilmente en la clase de hoy llegaremos a 200 entonces es importante tenerlo por vale por grupos por lo menos para que cuando veas esto porque ahora es fácil ahora estamos trabajando en ello tú fíjate fíjate qué misterio resuelto vamos a ver entonces me voy por aquí y luego en la página principal y otra vez fíjate en este caso vamos a ver index index donde estas blog arctic el ing pues vengo por aquí y digo blog arctic el ing por ejemplo voy a decir wifi 100% el aguardo recargo y veo como eso de arriba es el carrusel no como no confundir y esto debajo son los artículos del hogar a lo verás cuando pase la animación pero yo he hecho el artículo del blog tampoco lo quiero así les digo blog arctic el y digo quiero un wifi del no sé 25% y un flow left guardo y recargo vale y ya empezamos con problemas bueno tengo dos artículos por cierto ahora además pero fíjate cómo se han escapado o sea es como que se han escapado de la web como que salen por bajo a que dirías que se ve ese problema sí sí sí quienes salen del body no no en absoluto no tampoco el problema es el flow está siempre que se salen hay un problema de flow y si el problema es el flow la solución es la misma que he utilizado antes que es copiar este clear fix y bajo del blog o bajo del main o bajo de lo que sea pegarlo es así de sencillo el killer freaks fíjate ahora recargo y ya no se salen los artículos ya están dentro de la web otra vez es un poco rollo pero pero es así quiero varios artículos voy a hacer una cosa artículo si no de clase contiene artículo parece que esté vivo no haga falta pero te aseguro que sí voy a poner para que se mate correctamente y ahora lo que voy a hacer ahora lo que voy a hacer es copiar y pegar chorrocientas veces guardo recargo y así lo que 800 veces para que lo veamos luego ya cambiaríamos x osa cambiaremos diferentes tipos de artículo lo que voy a hacer ahora es que éste contiene el artículo es decir blog artist kehl contiene artículo va a tener un padding de 5 píxeles para que los artículos tengan un poquito de espacio entre sí como quien dice 5 píxeles dice 10 píxeles o dice lo que sea vale ya así un poco respirar un poquito mejor otra cosa que te voy a decir algo de lo que hablaremos más adelante cuando trabajemos con lenguajes de programación y es lo siguiente tú verás que yo aquí lo que he hecho es copiar y pegar algo múltiples veces que te parece esto que he hecho que me dirías entonces hay que tener en cuenta que esto que estoy haciendo ahora mismo de momento es html y css esto que acabo de hacer efectivamente va en contra de los principios de programación y uno de los principios de programación dice que cuando copies y pegas algo muchas veces es que algo está haciendo mal en este caso hay que tener en cuenta que esta web en un momento dado será combinada con un lenguaje por ejemplo llamado php y lo que haré de hecho no es poner los artículos aquí de repente sino que los artículos saldrán de una base de datos entonces con eso yo pondré un trozo de código que una sola vez dirá sácame los artículos ponlos en la pantalla y ese trozo de código se encargará automáticamente de hacer esta repetición pero todavía no estamos en esa parte de la formación estamos en una parte de la formación en la que estamos trabajando todavía con html y css y luego porque generalmente cuando llego a esta parte de la formación y empiezo a copiar y pegar como un salvaje hay alguien que me para y me dice oye esto no tiene una pinta entonces yo suelo decir si tienes toda la razón pero hay que entender dónde estamos y dónde estamos no es todavía ese punto dicho lo cual llevará a continuación una vez que he hecho los artículos voy a cargar los últimos tres una vez que he hecho los últimos artículos voy a reutilizar un poquito de código me voy a copiar todo esto voy a copiar a ver a ver esto esperable blog arte y kelsey hacer todo esto voy a crear 4 1 2 3 y 4 ya no se están descontando unos 34 sí y los voy a pegar dentro de los destacados porque pues por una razón muy sencilla ves que se van a ir pero por qué porque los destacados tengo el blog vale pero los artículos estaban formateados según el blog en la página en la página principal pues yo la voy a esto voy a copiar y voy a pegar le voy a decir destacados destacadísimo destacados en la página principal y aquí voy a decir un acuerdo como se llama voy a decir que esto es highlights highlights highlights y voy a decir que la anchura en lugar de ser 25% quiero que sea 50% y ahora fíjate como ahora lo tengo mejor maquetado donde tengo el carrusel tengo los destacados y tengo los artículos del blog que de momento lo que estoy haciendo es ponerlo ponerlo con la misma imagen y luego evidentemente se cambiaría verás esto que estoy haciendo esto es de manual de libro de usabilidad y con esto lo que te quiero decir es que generalmente cuando entres en una web lo que se recomienda desde el punto de vista de la usabilidad es que le des a la gente un mensaje quien quiera averiguar un poco más baja un poco más y se le dan dos o cuatro mensajes o unos pocos mensajes en definitiva y quien quiera profundizar más ya es le dan muchos más mensajes vale entonces lo que suele intentar evitar es que cuando cargas una web tengas esto que es con muchas doscientas cosas porque la gente dice esto que es vale 3 lo he hecho así un poco pues en pro de la programación pero también lo he hecho desde el punto de vista de que digamos sea una web utilizable desde el punto de vista de la que es una disciplina que hace diez años estaba muy de moda y ahora no tanto que es la arquitectura de la información que no sólo cuenta el que muestre esa información sino cómo se la muestras al usuario para que el usuario ni le agobie ni diga a ésta qué página es que no encuentro lo que quiero sino que sé justo en la dosis en la que quieres darle la información al usuario bueno dicho esto pasa un poco lo mismo que ocurrió con html vamos a ver al igual que en html vamos a pegar un repaso de todo lo que tiene efe ss ss 3 pss vamos a ver dónde estamos vamos a ver qué cosas hemos visto saco el listado y digo bueno tengo tengo colores hemos hablado y comentarios evidentemente tengo colores hemos hablado algo de colores no todos los colores porque por ejemplo hay un método de color aquí que es el hs el que es how saturation light nes pero no lo utiliza prácticamente nadie no hemos hablado perdón sí que hemos hablado de background porque hemos cambiado el fondo de las cosas borders no hemos puesto bordes podríamos poner algún borde a algo vale margen hemos hablado para bing hemos hablado altura y anchura hemos hablado el box model es lo que te dije que realmente todos los dif son que son estos son cajas online todavía no hemos hablado ya llegaremos cuando llegue su momento texto hemos colocado algunas cosas de texto igual no todo fuentes hemos hablado iconos no hemos hablado tampoco es necesario ya verás por una cosa es una librería que descargaremos links hemos hablado de cómo vincular links listas nos hemos cargado el estilo de la lista por ejemplo para convertir a un menú tablas no hemos utilizado todavía display no nos ha hecho falta todavía sólo hablaremos con javascript en definitiva y esto ya son una serie de digamos extras es decir estoy repasando todo lo que tiene css lo hago en esta página como podéis verlo en cualquiera un poco para para ver si me he dejado algo importante vale y en este caso estamos viendo por sitio lo hemos visto cover flow la explotación es alineación al centro hemos visto un poco todo de esto todo lo que de lo que tiene fs no todo no el cien por cien pero ya estamos un poco más en situación de empezar a introducir otras tecnologías tales como por ejemplo javascript voy a hablar un poquito del borde y ahora a continuación nos vamos a javascript entonces borde es uno de los modificadores que podemos utilizar por ejemplo lo voy a utilizar el h1 si yo pongo border un pixel solid black yo guardo recargo y como podrás comprobar ahora el h1 está rodeado por un píxel sólido por ejemplo podría ser 12 es decir punteado no sé si se ve porque se ve de lejos déjame que lo acerque pero se ve punteado y de color es más capas y de color negro que tú dirás claro ya entiendo por qué no has explicado por qué queda un poco hortera pero no te creas porque yo puedo por ejemplo decir que quiero un píxel sólido negro pero quiero porter botón y entonces lo que hace es que me pone un borde solo en la parte de abajo si yo le digo border me ponen las cuatro partes pero sí digo border left border right border top y border bottom yo puedo elegir donde pongo ese border mal entonces si que en ciertas ocasiones pues puede tener su significado puede tener su sentido puede tener su utilidad vale entonces dicho lo cual a continuación voy a pasar a javascript voy a empezar a trabajar con javascript lo primero que quiero que entiendas es que es javascript y para qué sirve javascript es un lenguaje de programación que originalmente nace en netscape piensan wikipedia en el 95 creo vamos a ver vamos a ver en el 95 me arriesgo ha salido bien entonces igual es el 96 no estaba seguro de mediados de los 90 es un lenguaje pensado para precisamente abordar el caso que nos ocupa ahora mismo que es qué es lo que ocurre cuando tengo una web estática y quiero que la web haga cosas que sea un poquito más interactiva te estoy hablando de 1995 vale date cuenta que la web no era lo de hoy en el 95 sólo con que pudiera ver un contador de visitas eso ya se consideraba que era interactivo vale eso ya daba como para meter javascript hay muchos programadores ahora hay muchos chistes crueles en programación evidentemente hay un chiste de programadores que dice que el javascript es el cáncer de los lenguajes de programación vale es un chiste muy cruel también te lo tengo que decir pero lo que quiere decir es que el resto de lenguajes de programación a lo largo de los años han nacido con la idea de ser importantes de hacer grandes cosas con ellos javascript es un lenguaje que nació con la idea de resolver cuatro chorradas y no pretendía hacer nada más que eso pero qué ha ocurrido pues lo que ha ocurrido es que con el paso de los años con la aparición de la web 2.0 cada vez se han hecho menos cosas en el escritorio y cada vez se han hecho más cosas en la web con lo cual javascript es como una especie de originalmente era como una del lenguaje que de repente le ha caído encima la responsabilidad de hacer aplicaciones en web muy importantes entonces hamas que en la primera década del siglo 20 en el que estamos pues tuvo que crecer un poco a grandes pasos pero se nota en ciertas cosas todavía que es un lenguaje que originalmente fue creado sin grandes pretensiones vale pues por eso te encontrás muchas veces ese chiste en la web pero es que sea un lenguaje bueno o sea un lenguaje malo es que no te puedes escapar quiero decir javascript para crear aplicaciones en el lado del cliente es la norma o sea no hay alternativa así como el primer día te dije que por ejemplo con php o con mysql hay otras alternativas con javascript no hay alternativas válidas entonces es un lenguaje que es lo que tiene ahora es un lenguaje de programación o sea no es un lenguaje como html como css y los lenguajes de programación tienen una serie de características que a continuación te voy a decir voy a abrir free mind y vamos a empezar a escribir un poco que lo tenemos un poco olvidado actualizando y oraremos o pescando pero vamos a ver qué es lo que es javascript que no es ni html y css entonces javascript es un lenguaje de programación ahora hago esto más grande los lenguajes de programación a diferencia de los lenguajes de marcaje por eso quiero decirte que este momento es un momento muy importante en la formación porque estamos dando un paso muy importante tienen estructuras de datos eso quiere decir que pueden guardar información para más adelante ser reutilizada en html y css no lo tiene ccs lo tiene la última versión pero muy poquito tienen estructuras de control de la ejecución que se llaman estructuras de bucle y estructuras condicionales básicamente esto lo que dice si esto es cierto haz esto otro eso en html y css no está por ejemplo con estas estructuras condicionales mediante otra cosa que tiene javascript que se llama programación orientada de eventos es lo que hará que yo pueda aquí poner un botón y diga cuando pulse el botón avanza la diapositiva eso no puedo hacerlo hasta ahora pero con javascript sí que voy a poder hacerlo tienen también funciones y programación orientada a objetos me permite reutilizar el código tienen también persistencia de la información persistencia la información es que da igual lo que yo haga cuando cierre esta web y la vuelva a abrir todo vuelve a empezar desde cero pero prácticamente cualquier lenguaje de programación y javascript es un lenguaje de programación provee mecanismos para que si yo hago cosas aquí dentro de esta página web cuando yo salga y vuelva a entrar aunque eso sea mañana mismo o dentro de un mes el de la web recuerde lo que yo he hecho valdés verás que esto supone un salto con respecto a lo que hemos hecho hasta ahora a continuación por tanto lo que voy a hacer es lo siguiente que voy a hacer es empezar a trabajar vale con javascript y para ello y para ello lo que voy a hacer es que me voy a ir aquí me voy a ir a index.html ya hamás quien te pasa un poquito como le pasa a css y es que yo lo puedo escribir aquí dentro yo puedo hacer script script y aquí dentro puedo empezar a escribir código pero se recomienda que yo haga un archivo nuevo ese archivo lo guarde ese archivo lo guarde con el nombre el nombre que tú quieras por ejemplo código j s y ahora aquí voy a quitar esto y aquí voy a hacer src es igual a código punto j s lo que estoy diciendo es que sepas que mi código está en el archivo código js y ahora voy a hacer algo que va a ser más molesto que espectacular pero voy a entrar en código y voy a hacer alert hola cómo estás guardo qué pasa dice alert is not the fine pero me da igual en este caso bracket me está diciendo que hay un error pero yo estoy muy confiado conmigo mismo de que sé que eso no es un error con lo cual cierro esto por aquí recargo en la pantalla y atención porque me sale este molesto mensaje de felicidad ese es el visitante número un millón de esta web y tienes un premio seguro y hasta que no acepte este este botón no voy a poder continuar vale pero por lo menos dentro de que es una primera muestra muy molesta de javascript pero por lo menos esto me permite saber que ya estoy trabajando con javascript ahora cuidado si yo por ejemplo cometo un error si yo por ejemplo pongo alertó no existe el comando alertó vale yo lo que voy a hacer es que el comportamiento por defecto de javascript escribo recargo y no va a pasar nada o sea el error no aparece aquí en la pantalla de hecho de hecho si yo pulso inspeccionar veré que en la consola veo que ya empieza a haber un número uno con un error me voy a la consola y me dice por lo menos me ayuda y me dice ‘hancock’ reference error me dice es un error de referencia no atrapado no procesado y me dice alertó is not to find lo que tiene que reducir en castellano no sé qué es alertó alertó no es nada realmente vale entonces has visto que hasta ahora en la consola hay veces que pues eso hemos estado un buen rato hemos estado bastante tiempo sin entrar en la consola pero con javascript voy a decir que prácticamente siempre vamos a tener la consola encendida por una razón muy sencilla por lo que te he dicho en días anteriores y es que programar sin errores no es una alternativa no es una metodología vamos a cometer errores o sea yo no espero que el que esta consola esté libre de errores y la sacó es porque quiero verlo porque se van a producir los errores y porque al ver los errores yo sabré cómo arreglarlos vale entonces en este caso lo que hago es el recargo recargo y me vuelve a aparecer esto por aquí ahora voy a putear un momento el alerta para mutar se hace así vale poniendo dos barras y te voy a decir que hay algo más agradable que es con solé punto log qué es hola mundo cualquier programa empieza siempre con hola mundo entonces guardo recargo me dice que hay un error yo estoy muy seguro de que no lo hay entonces continuó recargo y en lugar de salirme un molesto mensaje por allá arriba me sale un oculto mensaje solo lo puede ver quién tenga la consola que dice hola mundo vale entonces de la misma forma que existe con solé punto lo pone con solé punto warn qué es parece que hay una advertencia me da error me da igual no es igual warning hard lo queremos recargo vale y fíjate que me sale el mensaje pero de color amarillo y con un signo de advertencia salió esforzado pero tú dirás para qué querrías tú forzar que hay una advertencia por verás que para una metodología de programación que se llama login o debugging hay veces que me interesa yo poder cargar advertencias y también tengo con solé punto no me acuerdo si es el error vale es que algunos lenguajes de broma tales ere en otros es error tras error y que sepas que tienes un error que en este caso es falso porque lo estoy haciendo yo a mano les recargo y fíjate que sale un error falso a los de antes eran verdaderos este lo acabó de crear yo entonces ya te digo que esto parece que no tenga ningún sentido pero más adelante verás que realmente sí que lo tiene y a continuación ya continuación como te digo voy a crear todo esto simplemente para que se quede como apunte vale ya continuación es cuando vamos a crear nuestro primer programa en javascript me voy a ir aquí y te he dicho que lo primero que tiene un lenguaje de programación son estructuras de datos y la primera estructura de datos es una variable en javascript para crear una variable se crea se utiliza la palabra reservada y genérica bar bar de variable y que por ejemplo voy a poner edad es igual a 42 y punto y coma al final me sigue dando que hay un error pero a mí me da igual yo sé que eso no es un error de hecho fíjate fíjate que si leemos el error no debería ser un error debería ser más una advertencia que un error porque me dice se ha asignado la edad pero nunca se ha usado digo si es cierto nunca la ha usado pero tú quieres que es para que me des un error tío pues no vale pero bueno esta es otra de las razones por las cuales se suele considerar que javascript es un lenguaje menor con respecto a otros lenguajes de programación y eso quiere decir que en otros lenguajes de programación yo no puedo poner var yo tengo que poner si esto es un número entero si es una cadena que es un hombre con decimales o que es en cambio en javascript es un lenguaje no es el único de los llamados débilmente tipificados y eso quiere decir que yo pongo var y el programa ya se apañará para saber si esto es un número o si es una cadena o qué es no es sólo que en javascript perdón no es sólo que en css y en html y yo no podía crear variables sino que yo por ejemplo ahora puedo hacer algo tan sencillo pero esto que voy a hacer que sepas que es lo que separa la barrera entre lo que es un lenguaje de programación y lo que no lo es y puedo poner que sepas que el doble de tu edad es pongo un signo más para encadenar pongo paréntesis para que el romano se confunda y pongo edad por 2 y entonces a continuación ahora recargo y me dice que sepas que el doble de tu edad es 84 con este pequeño y sencillo código lo que he hecho es simplemente forzar a que el programa realice un cálculo aritmético un cálculo aritmético sencillo que ha sido únicamente multiplicar algo por 2 pero eso de multiplicar algo por 2 es lo que separa lo que es un lenguaje de programación de lo que es un lenguaje de marcaje vale entonces el próximo día lo que vamos a hacer es lo siguiente lo voy a dejar ya preparado aunque el próximo día lo volvería a crear yo creo pero lo que voy a hacer es crear una carpeta llamada aprendiendo javascript y lo que haremos es crear una serie de archivos de código específicamente en esa carpeta digamos autoescuela de la programación para romper la mano con javascript y una vez que tengamos claro cómo funciona javascript entonces aplicaremos los conocimientos a esta página web para hacer múltiples cosas entre ellas lo del botón del carrusel y otras muchas cosas más te lo digo porque el próximo día sabes eso que hay veces que dice la gente de que a veces para dar dos pasos adelante primero hay que dar un paso atrás vale pues parecerá que hacemos esto vale parecerá que abandonamos este proyecto parecerá que volvemos a empezar desde cero pero quiero que tengas en cuenta que yo en ningún momento olvidó cuál es el objetivo que es ir construyendo un proyecto lo que pasa es que va a ser más cómodo para el aprendizaje que trabajemos de esa forma vale

jamás tienes un lenguaje de programación que nos sirve para crear interactividad en nuestras páginas web nosotros tenemos ya un proyecto web avanzado entonces ahora lo que queremos es arrancar desde cero con un lenguaje de programación originalmente es un lenguaje de scripting pero en este caso nos va a hacer las funciones del lenguaje de programación como es javascript como empezar con javascript y meterlo aquí directamente dentro de esta estructura puede ser un poco complejo lo que voy a hacer es lo siguiente dentro de aplicaciones web voy a crear una carpeta llamada aprendiendo javascript y aquí voy a crear una serie de documentos en los cuales vamos a ir aprendiendo lo que necesitemos entonces voy a cerrar de momento estos de hecho puedo ir a cerrar todo vale y ahora lo que voy a hacer es que voy a crear un nuevo archivo y lo voy a guardar dentro de esa carpeta viendo y aprendiendo javascript como aprendiendo javascript 1 y punto html los archivos teóricamente tienen la extensión js pero en el momento en el que llevan algo de html incorporado pues tienen que tener la extensión html voy a crear una estructura mínima y a partir de ahí lo que voy a ir haciendo es ir duplicando esa estructura quiere decir que voy a crear un y un body pero no te creas que voy a empezar cada archivo así sino que lo que iré haciendo es copiar y pegar la estructura te voy a decir una cosa y es que esto ya está dicho anteriormente es que javascript es un lenguaje que nace con una concepción digamos limitada y con el tiempo con los años con el uso se ha ido demostrando que se requiere más de este lenguaje para las limitaciones que tienen javascript ahora luego la segunda parte lo que vamos a hacer es trabajar con un framework con una librería que se llama jquery o jay query como quieras llamarlo y que precisamente sirve para eliminar estas limitaciones entonces vamos a por ello y vamos a ver a continuación que yo por ejemplo voy a hacer div y de es igual a ejemplo en versión por ejemplo vengo aquí abajo voy a poner bajo en este caso voy a hacer script y por repasar lo que hemos visto anteriormente yo puedo poner por ejemplo con sole punto log hola con comillas y eso quiere decir buena costumbre que pongamos punto y coma al final de cada línea eso quiere decir que yo ahora abro esto con google chrome saco la consola sabemos que inspeccionar y la consola se van a convertir una constante a partir de ahora y veo que aquí javascript me dice hola pero parece que javascript esto un poco condenado a lanzarme mensajes en la consola cuando yo sí en cierta forma lo que quiero es que me lanza mensajes aquí en la propia pantalla entonces para eso voy a crear un nuevo archivo vamos a que no vamos a llevarlo aprendiendo el javascript 2 más allá del aller que hemos visto anteriormente también tenemos un statement que se llama document.no right le voy a poner hola fíjate que yo te digo hola desde el día lo que hace documento right los que toman es que si yo recargo a recargo evidentemente el archivo aprendiendo javascript 2 dice yo te digo la desde el dip y a continuación le engancha el hola es decir engancha al final en el documento escribe me estoy aquí por ejemplo yo voy a poner ejemplo 2 y ejemplo 3 yo te digo lados yo te digo hola 3 y lo que hace en este caso el documento puntos wright es que se espera a que el resto de dips hayan escrito lo que tengan que escribir y a continuación escribe lo que él quiera esto no es especialmente conveniente por lo menos ya tenemos un paso en el cual estamos viendo que el lugar además de escribir la consola también podemos escribir en el propio documento qué es lo que nos interesa pero pues evidentemente no nos vale que solo nos escriba digamos aquí al final vale y esta es la razón por el cual por la cual guardo javascript esta es la razón por la cual hay otra forma algo más compleja evidentemente de escribir que es lo siguiente por ejemplo ejemplo 2 voy a poner aquí ejemplo 2 b para comprobar que ésta ha intercalado y en lugar de poner documento right voy a escribir algo un poquito más complejo ahora luego verás que todo lo que vamos a ver a continuación no es tan complejo pero document punto get element by tengo bike last name bad name bad name ballet en unos cuantos gets get element by aid y el ide es ejemplo 2 b punto aparecen una serie de métodos voy a uno que se llama inner html y voy a decir si estás viendo esto es que te lo da javascript entonces guardo recargo recargo el número 3 vamos a ver que tenemos aire de html si en el sml no es una función sino que es una igualdad guardamos recargamos y vemos que si estás viendo esto es que te lo de javascript entonces vemos que tenemos más control acerca de donde queremos poner aquello que nos devuelve javascript la fórmula es un poco compleja pero bueno ahora luego veremos que mediante este framework que te comento que se llama jay query jquery pues podemos simplificar algo el funcionamiento de javascript a continuación yo ahora mismo lo que tengo ganas es de demostrarte de alguna forma y no lo voy a poder hacer en los próximos minutos es decir tenemos que esperar un poquito es demostrarte en definitiva para qué me sirve esto de aquí porque cuando yo te enseño estoy aquí tú dirás manuel a pérdida de tiempo o sea esto lo podría haber hecho directamente escribiéndolo aquí con html entonces lo primero que lo que tengo ganas es de mostrarte que lo que te acabo de enseñar no es una pérdida de tiempo tiene un gran sentido pero un momento porque antes tengo que enseñarte unas pocas cosas pero ahora en cuanto pasemos las variables y entremos en las estructuras de control verás como esto que acabamos de hacer tiene una gran cantidad de sentido entonces ahora a continuación lo que voy a hacer es lo siguiente voy a crear un nuevo archivo verás si el el leader html técnicamente en este caso no es ni siquiera todavía una clase sino que es una cosa que se llama un método entonces antes de dilucidar la diferencia entre clase y método y todo eso lo que me interesa es más que haya una claridad muy grande en la estructura de esta sintaxis y lo podemos en definitiva un poco leer sobre la marcha pero empezamos a empezar traduciendo del inglés al castellano y fijándonos en los puntos porque siempre hay que hay un punto hay una separación entonces en este caso aparte de que te comentaré más adelante que las propiedades no llevan paréntesis y en este caso en el html no lleva paréntesis y los métodos que hacen algo hacen cosas y que llevan paréntesis pero eso es un poquito ahora lo de menos pero yo empiezo leyendo aquí que pone documento con lo cual yo sé que sobre el documento que documento pues la página html es un documento sobre el documento voy a hacer algo esto quiere decir que si yo pongo document y pongo punto verás que hay un montón de cosas que puedo hacer entonces claro esto es un método y el método si lo leemos simplemente traduciendo al castellano es get element by aid y además vemos que esto está escrito en una sintaxis que se llama camel cakes que es como una te va a sonar la coña pero supongo canal keys es como si metemos un camello en una maleta y tú dirás a quién se le ha ocurrido esto vale pues entonces es esto de aquí que es que digamos que cada una de las mayúsculas es como una joroba digamos del camello valientes y dame el elemento que tenga el ide y el ide en este caso es ejemplo 2 b no puede ser el ‘dique feliz de que tú quieras entonces a partir de aquí una vez que he cogido el documento y del documento es seleccionado el eje leader el ejemplo 2 vez a continuación después del punto de bueno y ahora con este elemento que quiero hacer lo quiero borrar lo quiero duplicar lo quiero no sé lo que explotar vale lo que quiero hacer es indicarle cuál es su html interno y entonces esto que es una propiedad lo igualó para que el programa sepa que el html que tiene que poner internamente ahí dentro es lo que sea que tú quieras que ponga aquí dentro para tevez eso comprender eso es es más importante que él ahora mismo todavía meternos porque no hemos llegado a programación orientada a objetos donde veremos las diferencias entre lo que es una propiedad es decir no lleva paréntesis y lo que es un método que se que lleva paréntesis pero sobre todo lo que me interesa es que le pierdas miedo al lenguaje de programación y que al final te des cuenta que aunque sepas inglés yo solo decir yo con que sepas inglés ya sabes la mitad del lenguaje de programación porque simplemente leamos con cierto cuidado nos daremos cuenta que el lenguaje de programación en cierta manera nos ayuda un poco a entender qué es lo que está ocurriendo pues te va a decir que declaramos variables y yo a partir de aquí voy a decir var es igual a variable uno es igual a tres y var variable dos es igual a cuatro en este caso lo que vamos a hacer es mediante la palabra reservada var que quiere decir variable definir que lo que voy a poner a continuación es una variable a continuación pongo el nombre de la variable igual y le pongo un valor sobre verás qué lo que yo escriba en castellano es que tú lo puedes escribir en castellano pero lo que yo escriba en inglés tú lo tienes que escribir tal cual en inglés si has visto que he puesto variable uno quiere decir que puede poner absolutamente lo que quieras dentro de hay unas pequeñas restricciones vale pero puedes poner básicamente lo que quieras pero por ejemplo var tiene que escribirse así tal cual y desde ahora lo que voy a hacer es lo siguiente var el resultado es igual a variable 1 + variable 2 recuerda y ya hablaremos de esto ahora mismo pero más adelante buena costumbre si ponemos un punto y coma al final de cada línea de cada instrucción este lenguaje de programación funciona igualmente si no ponemos el punto y coma que es algo que mucha gente critica porque la gente más purista dice no tendría que funcionar sin punto y coma pero el caso es que funciona más adelante ya te contaré porque entonces cojo este kit element by jay dee y lo que hago es que vivo si estás viendo esto es que el resultado es dos puntos más el resultado el beso era vengo y le doy aquí a recargar perdonar archivo 4 cuando hagas esto de acuerdo a tve que se está trabajando aquí en el archivo 4 aquí tienes que cargar el archivo 4 si estás viendo esto es que el resultado de 7 y esto es como te diría yo estoy amazing esto es increíble esto es maravilloso esto es fantástico y tú dirás a vernos the sleep es tanto es una simple suma vale pero es maravilloso porque esto es lo que no puede hacer html es decir esto es un lenguaje de programación definir lo que es y lo que no es un lenguaje de programación te anticipo ya que es algo muy complejo y sujeto a mucho debate pero una forma de definir un lenguaje de programación es mediante el modelo de caja negra el modelo de caja negra te digo que hay muchas formas de definir lo que es y lo que no es un lenguaje de programación pero el modelo de caja negra es el modelo muy utilizado en ingeniería en el cual no necesariamente en ingeniería informática sino en cualquier tipo de ingeniería es un modelo mediante el cual tú le das una entrada en la caja negra ocurre algo que el usuario de fuera no sabe que es tú como programador evidentemente sí que sabes lo que es y el sistema te devuelve un resultado en base al cálculo de los inputs que has introducido esto html no lo hace html no calcula nada html lo que hace es que tú lo que eres lo pone en la pantalla no hace nada más css es tres cuartos de lo mismo se es eso es para la estética pero css salvo una cosa que se llaman variables que no hemos visto que es de css avanzado ya lo veremos pero y es nuevo por cierto pero cese se salvó esa salvedad y no calcula nada es tu me dices como yo lo presento y yo lo presento no hay más pero javascript como cualquier lenguaje de programación sí que tiene esta propiedad de actuar como caja negra donde tú metes un input en este caso lo ha metido yo más adelante lo puede meter el usuario el programa caja negra he hecho la caja negra más sencilla que nos podamos imaginar lo que hace es que devuelve una variable perdón devuelve un resultado y por último esto es lo de menos 3 estético lo que hace es que lo imprime en la pantalla por eso digo que por eso de ahí mi excitación de fantástico fenomenal lana y zinc vale pues es por esto simplemente porque parece que no pero podemos hacer algo que antes no podíamos hacer y este algo que podemos hacer aunque ahora mismo te parezca poco impresionante verás qué es lo que nos abre la puerta a muchísimas otras cosas vamos a hablar ahora de boya copiar y crear un nuevo archivo vamos a [Música] vamos a crear el archivo aprendiendo js 5 pegamos a quitar este momento aquí ya lo tenemos claro y vamos a hablar de brevemente y a partir de ahí pasamos a las estructuras de control del flujo de la ejecución que es una cosa que suena una chunga praderas que es muy guay es una cosa que te va a permitir hacer un montón de cosas divertidas con javascript pero antes quiero hablar de los operadores entonces en javascript tenemos una serie de operadores los más sencillos son los aritméticos entonces la suma es la suma es y yo ahora voy a poner aquí un paréntesis para que el programa entienda que una cosa está dentro de la otra y pongo variable 1 voy a llamar esto permíteme para porque soy vago v1 y v2 vale ya si escribo menos entonces v1 y v2 entonces vengo por aquí recargo en este caso me voy al ejercicio 5 hola en el html así no es que yo lo que quería ahora es un simple punto right porque porque ahora verás qué documentos right claro porque he quitado los dips y porque ahora verás que voy a escribir un montón de cosas entonces como ves que hay un montón de cosas prefiero ir directamente con documentos de raid ahora la suma es 7 con lo cual vemos en este caso de hecho en esta línea lo podemos ver muy bien que el signo + tiene dos significados diferentes eso es algo que ha dado lugar a mucha controversia a lo largo de los años el que muchos programadores se quejan y con razón de que no es nada limpio sintácticamente que un mismo carácter tenga dos significados diferentes pero en este caso debemos tener qué javascript es un lenguaje que deriva de efe que es un lenguaje creado en 1969 eso quiere decir que arrastramos unas ciertas herencias que no nos podemos quitar de encima entonces pues esto es lo que hay y parece que es lo que va a haber durante unos cuantos muchos años más atrás en este caso vemos como el signo más tiene el significado de ser el carácter de encadenamiento sirve para encadenar una cosa con otra pero además cuando el carácter más cuando el signo más se encuentra entre dos variables numéricas actúa en ese caso concreto de operando de suma aritmética encadenado ahora aquí y sumar y meetic a aquí es un poco ya te digo al principio confuso pero es lo que hay que se va a hacer con el tiempo te acostumbras pero cómo vamos a ver para mostrarlas por separado no hay ningún problema porque podemos extender esto que acabo de hacer vamos a ver la suma entre las variables y ahora vengo aquí y encadenó ves como el encadenado v1 cuidado con un espacio encadenó de nuevo v2 es y en este caso guardo y recargo y me dice la suma entre las variables 3 y 4 el 7 lo cual hace que si yo por ejemplo ahora a cambio 4 y 3 guardo recargo y realmente me lo cambia voy a hacer esto un poquito más grande para que se vea mejor la única dificultad en este caso es que hay que tener cuidado con cuando salimos y cuando entramos de la cadena esto quiere decir que si estas comillas abren estas comillas cierran encadenó con una variable vuelvo a encadenar con una cadena la cadena empieza con estas comillas y acabar con estas comillas encadenó con otra variable estallidos donde muchas veces te advierto que podemos cometer errores y al cometer errores pues el programa evidentemente puede dar error hay otro punto de posible fallo por cierto ahora que estamos que son las los paréntesis es que debemos tener en cuenta que si yo no estoy acostumbrado a leer código y de repente veo aquí el paréntesis digo porque hay aquí el paréntesis pero me tengo que acordar que este paréntesis es el que cierra este paréntesis de aquí pero este paréntesis es el que cierra este paréntesis de aquí porque muchas veces decimos que haciendo aquí quitamos uno pero entonces esto evidentemente nos va a dar un error que de hecho incluso nos dice que le falta un cierre d un cierre de esto un cierre de paréntesis al final entonces simplemente lo que tenemos que hacer como podemos ver es respetar la sintaxis de apertura y de cierre y en la sintaxis de los paréntesis de esta forma podemos continuar con los los operando de marit médicos la resta entre las variables v1 y v2 es evidentemente el signo que jon es el que me hace de resta no tiene mucho misterio y en este caso recargo a cuidado cuidado porque fíjate en este caso que me lo ha puesto a continuación vale por mucho que yo lo he puesto en una línea abajo me la ha puesto a continuación ten en cuenta que estamos hablando de html y si estamos hablando de html es necesario que pongamos un br y recordamos que un br porque al final lo que estamos haciendo este javascript convierta al código html recordamos que un br en html es un bar return que nos sirve para retornar el carro y ahora si podemos comprobar como la presentación es la correcta y podemos comprobar como es cierto que la resta de 431 continuamos adelante ya que las variables aritméticas las operaciones aritméticas no tienen mucho mucha mucho misterio déjame que no ponga acentos por el tema de que no he declarado todavía el charles & entonces la multiplicación en tres variables 1 y 2 es en este caso el asterisco como en cualquier programa de ofimática me sirve para multiplicar es 12 y por último en el caso de la división es la barra que hay en el número 7 mayúscula 7 no la contra barra y en este caso lo que hace es que me devuelve la división con decimales hay 1 operando hay unos cuantos superan 2 aritméticos más hay uno que es muy interesante y ahora mismo no lo encontrarás mucho sentido pero el resto entero de la división / tal es el porcentaje entonces el resto entero es el resto de la división entonces 4 entre 3 cabe a 1 y me sobra 1 vale entonces y me sobra 1 es este 1 que estamos viendo aquí que por ejemplo ahora mismo pues probablemente no le encontrarán mucho sentido pero cuando programamos aplicaciones informáticas que calculan facturas y todo esto cuando queremos diferenciar entre los euros enteros y los decimales de euros son los céntimos pues poder diferenciar el entero del decimal tiene bastante tiene bastante utilidad bueno tenemos por aquí los operadores aritméticos vamos con otros operadores que a continuación verás que nos van a dar pie nos van a dar paso a a las estructuras de control de la ejecución entonces para esto voy a copiar este código voy a guardar lo estoy como verás creando diferentes archivos para que el logo evidentemente pues te sirvan de forma incremental para tener un recuerdo de lo que hemos ido haciendo guardamos recargamos vale esto ya no lo quiero quiero hacer esto más grande bien a continuación vamos a ver una serie de variables que no nos dan necesariamente un valor numérico sino que nos dicen si algo es cierto o no lo es y en informática podría averiguar si algo es cierto o no lo es tiene muchísimo sentido y tiene muchísima utilidad y yo me pregunto es cierto que v 1 es v 1 es menor que v2 en este caso lo que voy a hacer es v 1 menor que el símbolo que tenemos a la izquierda de la zeta menor que v2 en este caso tú qué dirías es cierto que 4 es menor que 3 no pues en ese caso dependiendo del navegador esto hace años era peor ahora lo están estandarizando lo que suele devolver extra o folks dependiendo del navegador esto antes era un poco lioso había navegadores que debón bien que no habían truco falls otros navegadores que devolvían 1 y 0 1 en el caso de verdadero 0 en el caso de falso y había otros navegadores que devolvían true en el caso de verdadero y nada en el caso de falso lo cual era un lío vale pero ahora se está analizando y poco a poco todos lo que hacen es devolver otro o falls en este caso es falls ahora a continuación lo que hago es que si hemos visto el menor que vamos a ver el mayor que es cierto que v uno es mayor que v2 en este caso le digo true en este caso es cierto ahora vamos a poner que vamos a poner que la bv 1 y v2 es 44 en ambos casos es cierto que v 1 es menor que v2v 1 es mayor que v 2 los dos son falsos porque v 1 o sea 4 no es menor que 4 y 4 no es mayor que 4 en este caso evidentemente quiero que sepas que hay dos operadores de comparación que son menor o igual o mayor o igual es menor o igual y es mayor o igual y con que se cumpla una de las condiciones o menor que o igual que en ese caso de a true entonces en este caso estas dos validaciones dan true porque no es menor pero sí que es igual y no es mayor pero sí que es igual true en ambos casos luego hay otro operador el de la igualdad es igual y el operador es el doble igual cuidado acuérdate que es el doble igual la forma sencilla de acordarse es porque el simple igual no es un operador de comparación sino que es un operador de asignación de valor entonces un igual asigna dos iguales comparan y de hecho hay un tercer operador que hará veras es cierto que 4 es igual a 4 true hay un tercer operador que digamos un tercero en otras tres comidas donde igual es que se usan muy pocas veces pero cuando se usa viene muy bien que es lo siguiente yo voy a decir que 4 es un número pero aquí 4 está entre comillas con lo cual técnicamente es una cadena entonces yo vengo por aquí recargo y me dice voy a guardar y me dice es cierto que 4 es igual a 4 al programa ahora mismo le da igual que 4 o sea una cadena o que 4 sea un número porque es un 4 en definitiva es cierto que uve unos igualados por el programa de por sí es cierto ahora bien en muchos lenguajes de programación en este caso me voy a regresar con javascript hay una tercera validación que es el triple igual entonces yo vengo por aquí fíjate que dice es cierto que cuatros igual a cuatro con doble igual me dice true pero es cierto que 4 es igual a 4 con triple igual me dice falls porque lo que hace la doble igualdad es comprobar el valor pero lo que hace la triple igualdad es comprobar no sólo el valor sino también el tipo de dato y entonces en este caso evidentemente en la triple igualdad aunque sea por poco pero no son iguales antes por fin de meternos en las estructuras de control condicional donde creo que podré mostrarte de forma fácil que todo esto que estamos viendo que tú dirás esto para que me sirve a mí porque todo esto realmente sirve para algo serie de cosas muy tangibles en creación de páginas web antes de hacer eso déjame hablar de los operadores muy lejanos entonces para eso voy a hacer un nuevo archivo estos operadores julianos ya sé que suena un poquito mal pero verás que es más divertido y más fácil de aprender de lo que parece porque esto es básicamente lo mismo que nosotros hemos aprendido en educación secundaria o en el colegio que es la álgebra de bühl o la lógica de la intersección de a unión b pero en programación es muy fácil de aprender y sobre todo de comprender más que de aprender entonces yo digo dar vamos a ver vigo bar [Música] bar hoy es igual a lunes y digo bar día es igual a lunes en este caso lo que voy a hacer es lo siguiente vamos a ver mira hoy esos valores y nombre es igual a jose diferente entonces a continuación digo es cierto que hoy es lunes y qué nombre es igual a jose vicente valiendo les pongo y entonces pongo y me dispongo hoy es igual al lunes y atención pongo dos ampersand uno no sólo vale hay que poner 22 ampersand que es mayúsculas 6 nombre es igual a jose vicente y lo que va a ocurrir es que me va a decir que tú va a decir que cuidado estoy en el número 7 me va a decir que sí es cierto que es lunes y qué nombre es igual a jose vicente sin embargo sin embargo a continuación voy a hacer lo siguiente es cierto que hoy es martes hoy es igual a martes y qué nombre es igual a jose vicente pues en este caso lo que va a ocurrir es que me va a decir falls cuidado recordamos que me hace falta un br para acabar la línea y es cierto que hoy es martes y qué nombre es igual a jose vicente es cierto que el hombre es igual a jose vicente pero no es cierto que es martes por tanto la validación da falsa con el operador and que es este de aquí todos todas las validaciones tienen que ser ciertas para que la validación global de cierta con que una de ellas de falsa la validación global de la falsa y ahora quiero enseñarte otra de ellas que es es cierto que hoy es martes o atención o qué nombre es igual a jose vicente pongo hoy es igual a martes quito los 2 samper suns y pongo dos países dos barras verticales que se sacan con si estás en mac es el botón al de la derecha de la barra espaciadora y si estás en windows es la tecla al xerez que también está a la derecha de la barra espaciadora entonces se hace pulsando alto o al xerez con el número 1 del teclado y entonces salen dos barras verticales pulsando dos veces evidentemente entonces ahora vengo por aquí y me dice true porque es cierto que hoy es martes o qué nombre es igual a jose vicente no es cierto que es martes pero sí que es igual es así que es cierto que el nombre es igual a jose vicente entonces con el operador aritmético ahora con que uno de los elementos con que una de las validaciones de cierta la validación global y ahora si yo vengo por aquí y pongo es cierto que hoy es martes o qué nombre es igual a juan pongo hoy martes y nombre es igual a juan pues claro hay evidentemente va a dar a falls porque me es cierto que hoy sea martes ni es cierto que el nombre es igual a juan pérez hay evidentemente no puede hacer nada hay un último operador muy lejano que es el operador de negación pero lo vamos a ver más adelante que lo que hace es invertir el valor pero a continuación lo que quiero es trabajar con los operadores de control del flujo de la información porque ahora verás que nos permiten hacer cosas muy divertidas todo esto que acabamos de ver es algo que no parece nada práctico parece muy teórico parece muy abstracto cualquier persona que ha aprendido cualquier lenguaje de programación porque todos los lenguajes de programación tienen de una forma o de otra pero lo que te acabo de enseñar pues cualquier persona que aprende un lenguaje de programación cuando ve esto que acabo de hacer dice vale es que esto es la base pero cualquier persona que empieza desde cero su primer lenguaje de programación este bloque que acabamos de pasar es un poco como 7 muy bien pero y esto que es baja me sirve vale pues a continuación vamos a ver cómo todo esto que hemos aprendido a la verdad es que sirve y voy a hacer algo un ejercicio que viene muy bien para aprender para qué sirve todo esto entonces voy a copiar este código voy a pegarlo en un archivo nuevo llamado aprendiendo javascript 8 y como te digo vamos a empezar trabajando con una cosa que se llaman estructuras de control del flujo de la ejecución y lo que hace recuerdas que anteriormente cuando hemos trabajado en html yo te he dicho que cuando en programación copias y pegas algo muchas veces es que algo no va bien pero claro pero también te he dicho que en html no hay nada que se pueda hacer html nos lo tenemos que comer así ya está pues en javascript no en javascript por fin podemos hacer algo que nos digamos nos permite trabajar de una forma más cómoda entonces tú imagínate que yo me voy al body y creo un dip y de calendario y en el calendario a continuación lo que voy a hacer es poner lo siguiente de las día entonces no sé voy a parar aquí vale el día y pongo 0 1 2 3 4 5 6 7 8 9 10 yo digo que hay algo que no estoy haciendo bien vale hay algo en mi mente de programador dice esto de pegar copiar piensa muchas veces algo en programación no parece que mole yo puedo venir aquí y de hecho en el head en la etiqueta style yo puedo decirle que todo lo que tenga class díaz quiero que tenga un wifi de 100 píxeles un height de 100 píxeles y creo que tenga un border de un píxel solid por ejemplo gray para demostrarte que cuando hago esto tenemos aquí pues digamos una serie de celdillas y si yo era de vigo flow left vale pues vemos como digamos las celdillas se van formando en forma de lo que sería un calendario pero yo insisto puedo copiar y puedo dejar pero no se puede hacer un calendario claro ahora en el momento en el que vengo aquí digo 1 2 3 4 5 6 7 sabes mi mente está diciendo y trabajo así que me está saliendo un calendario eso está claro pero aquí hay algo que no me funciona mentalmente vale entonces en este caso lo que ocurre es que gracias a javascript yo puedo hacer lo siguiente yo puedo venir aquí y en javascript tengo una serie de estructuras de control del flujo de la ejecución unas de ellas reciben el nombre de estructuras de bucle se llaman bucle porque repiten algo en bucle repiten algo varias veces que es lo que precisamente no puedo hacer con html una de esas estructuras la más común de hecho en javascript se es la estructura for entonces pongo un foro y a continuación dentro del foro pongo tres condiciones la condición de inicio la condición de final y la condición de incremento les digo for bar día es igual a 1 el día 1 del mes punto y coma hasta que día sea menor o igual que 30 punto y coma día + + día más más quiere decir que cada vez que pase por aquí aumento un día entonces yo vengo por aquí y digo document de momento punto right es vivir clase cuidado porque si fuera he usado las comillas dobles dentro tengo que usar las comillas sencillas class día pongo el día y sabes que encadenó como hemos hecho antes y de hecho aquí pongo día pongo día porque este día es la variable día que he escrito aquí arriba y lo que ocurre es que recargo y veo cómo el programa automáticamente me ha hecho todo el calendario de un golpe vale imagínate imagínate lo que me acabo de ahorrar pero te digo más te digo más vamos a ahorrar más cosas por cierto tú me dirás que esté un calendario muy extraño porque es un calendario de semanas que tienen seis días no pasa nada eso es porque tengo aquí la consola avales y cierro la consola verás que de hecho no es que tengan seis o siete días sino que va a flotando pero ahora gracias a la programación también vamos a conseguir arreglar esto porque te acuerdas que ante este dicho te enseñado el operador aritmético del resto entero de la división y de dicho que servía de vez en cuando para algunas cosas pues luego ya lo voy a utilizar y lo voy a utilizar anidando una cosa que se llama una estructura de control condicional de la ejecución vamos a verla la estructura de control condicional es parecida a la estructura de control force pero en lugar de ponerse foro se pone if guif digamos que es el sí condicional en inglés entonces pongo y a continuación pongo una expresión y digo y ahora verás que lo que es ponerme es muy extraño digo sí día porcentaje 7 esto quiere decir si el resto entero de la división entre díaz y 7 es igual a 0 en ese caso ponme document.write ponme no sé si te acordarás de style y cuando queríamos que algo dejara de flotar poníamos clicker voz esto lo hicimos por ejemplo en el menú de html y todo esto esto es un truco de html entonces guardo recargo igual sale malo moment in sound in vale pues mira salga bien 7 fijas ahora no depende de la anchura sino que lo que hace es que cada 7 elementos es decir esto de aquí esto de día porcentaje 7 lo que quiere decir en la práctica de hecho si empezamos a trabajarlo desde cero empezamos a calcular 11 verás que se cumple y cada siete elementos se ejecuta esto de aquí y esto de aquí lo que hace es dejar de flotar y salta a la línea si de hecho ahora inspeccionó momento si de hecho ahora inspeccionó tú verás que tengo día a día a día a día salto día a día a día a día a día salto día a día a día a día a día salto vale entonces de repente si miras el código que he escrito y miras el código que tengo como resultado te darás cuenta de que las cosas que estamos aprendiendo nos sirven para para empezar para hacer cosas que en html no podría hacer y para continuar para hacer cosas fácilmente que en html me costaría bastante más de hacer con un poquito más de código déjame enseñarte aunque este ejercicio ahora se nos va a quedar un poco incompleto vale pero lo continuaremos lo iremos continuando a la continuación pero para que te des cuenta hasta qué punto javascript nos puede salvar el día por eso el otro día te acuerdas que cuando me hiciste la pregunta acerca de lo de las animaciones en javascript y te respondí que prefería hacerlas con css por eso parecía como que yo le tuviera algo de reparo o algo de manía en javascript y más bien todo lo contrario entonces simplemente poniendo un par de líneas más ahora verás que va a ser literalmente un par de líneas más van a ser tres sinceramente pues voy a poner foro bar mes es igual a 1 hasta que me sea menor o igual que 12 meses más más no nos olvidemos del corchete lo que va a hacer es repetir esto 12 veces copio y pego este documento punto right tenga documentó puntos right este es el mes más mes del año un ver y sabes que le voy a poner una 1 recordamos los hace unos que son los títulos de html es esto lo que hace voy a anidar esto lo que hace es que el calculador de meses lo mete dentro el calculador de los días del mes nos lo mete dentro de un repetidor de meses entonces yo hago así este es el mes 1 del año 2 del año 3 del año 4 del año y me acabo de hacer todo un almanaque de un año entero poniendo unas pocas líneas de código más si miramos el código si miramos el código nos daremos cuenta de que ahora tengo una barbaridad de código ahí lo tenemos y cómo te puedes imaginar también me costaría relativamente poco poner otras formas a ver vamos a ver si pero sí pero no es nada recomendable que pongamos en es en los nombres de variables entonces claro cuando pongo a no suele causar eso eso mismo verdad se suele levantar un poco el cachondeo entonces yo lo que suelo hacer es poner año o poner año o poner año como si fueran portugués vale o sea cualquiera de las fórmulas pero evitando un poco oponer a no en fin entonces ahora a continuación pongo esto recordemos que tenemos que poner también su llave para cerrar la estructura de control pongo esto este es el año ahora sí que podemos por el año aunque va a salir mal por el tema de la codificación año si quieres voy a poner aquí un h 1 y aquí un h 2 para diferenciar lo que es un título de otro y le digo año no va a empezar el año uno va a empezar yo que sé sabes en el año 2000 va a acabar el año 2025 año más más no cesará así recargo verás que este es el año 2000 ya sé que todos los meses empiezan el lunes moment in ahora trabajamos con ello vale pero fíjate que tengo el año 2000 y tengo el año 2001 y tengo el año 2002 y tengo sabes tengo una barbaridad tengo esto es lo que lo que quiero que veas que hace javascript sanz javascript si te fijas o sea insisto voy a sacar inspeccionar evidentemente ahora evidentemente pesa pero más allá de que pese yo de hecho fíjate que tengo esto por aquí vale o sea o si quieres lo que puedo hacer es guardarlo control ese no es muy no es muy ortodoxo pero técnicamente se puede hacer aprendiendo javascript 8 guardado a ver si me lo guardas correctamente no lo sé y fíjate qué fíjate qué lo que fíjate que micros este archivo y a pesar de pensar nunca ha pasado a pesar 295 casas entonces este archivo originalmente el código que yo he escrito es este y el código que ha generado el código que me ha ahorrado a escribir fíjate el scroll donde está es este de aquí pues que insisto sólo hacer scroll por el archivo ya pesa imagínate a haber tenido que escribir eso y lo peor de la programación no es que te imagines haber tenido que escribir eso lo peor de la programación es que como te diría yo hay una modificación o sea de repente alguien te diga no es que ahora quiero que no sé que después de ver egipto este código tú tendrías mira yo que sé te mato sabes porque con lo que nada costo de escribir pues esto es lo que nos va a dar javascript logros bajaba script voy a tirar esto desde el año 2020 hasta el año 2022 para que cueste menos de calcular lo que nos da javascript es precisamente la capacidad de automatizar una serie de cosas e insisto en todo de una vez más no estoy hablando del sexo de los ángeles estoy hablando de cosas que son totalmente tangibles útiles prácticas en definitiva cosas que vas a usar en tu día a día ahora ahora tenemos un pequeño problema y es que todos nuestros nuestros meses empiezan el lunes el día 1 empieza el lunes lo cual hace que este calendario fíjate que como te diría yo espiritualmente está cerca de ser un calendario utilizable fíjate que con las pocas líneas que he hecho además lo hemos construido paso a paso porque hay veces que de repente por es una línea número de esos trampa pero no es de los trampas lo hemos hecho paso a paso bloque a bloque pero claro vemos que es algo que está hace rica de ser un calendario usable pero no lo es porque evidentemente pues no puede ser vale entonces te voy a decir que dentro de javascript existe una librería voy a aunque va a ser una evolución pero voy a guardar una versión nueva de este documento extra y una librería completa para trabajar con fechas entonces vamos allá voy a pegar esto porque de hecho lo que voy a escribir a continuación va a ser una evolución como te digo y a continuación a continuación voy a escribir lo siguiente vamos a ver bar fecha es igual a new day texto the new hoy no te lo voy a explicar te lo explicaré más adelante esto tiene que ver con una cosa que se llama programación orientada a objetos pero todavía hoy estamos empezando con javascript con lo cual es pronto para empezar con esto pero simplemente acuérdate que llegará un momento en el temario te diré el que quiere decir esta palabra reservada beit está para la reservada new pero de momento no porque no sacaría mucho de lo que de lo que queremos hacer entonces a continuación a continuación lo que voy a hacer es el documento puntos right y fecha voy a ver qué sale la voy a recargar cuidado estoy con el archivo número 9 y me dice oyes mondale por supuesto está en inglés como te puedes imaginar hoy es mont day es el mes augusto estamos había 10 el año es 2020 son las 18 56 00 estamos actualmente en gmt 2 lo cual quiere decir horario de verano de europa central sabes que con el cambio de hora en verano estamos en el gmt + 2 y en invierno estamos con el gmt 1 que es el greenwich meridian time yo creo que esto va a ser más interesante todavía ahora verás porque si pongo con sol log fecha porque nos va a decir aunque parezca que no nos va a decir mucho más la consola que el html entonces recargo recargo por aquí pues pues mira pues no me ha dicho prácticamente lo mismo esperaba que esperaba que me saliera algo más concreto no pasa nada a continuación lo que vamos a hacer es decirle al sistema que quiero que me dé directamente algo más como te diría yo sí algo más específico vale entonces vamos a ver para eso tenemos una serie de métodos get donde voy a especificar lo siguiente vamos a hablar entonces documento punto wright y quiero fecha voy a poner un punto y voy a ver que tengo un montón de elementos get ponga un punto que kate pero get they get fooled hoy qué rabia me da esto mira gates jr vengo por aquí y me dice que el futuro a ver documento right así perdón perdón perdón paréntesis vale y me dice que es 2020 momento que voy a poner un documento puntos raid con un ver para que salte el carro y me dice que es 2020 y esto es por qué y ahora vengo por aquí y le digo que va a ocurrir una cosa muy extraña es una de las cosas más odiadas de javascript y es que le digo que ayer medirá paréntesis me dirá que estamos en el año 120 porque en javascript 9 preguntes a quién se le ocurrió esta fantástica idea pero en javascript el año inicial el año cero es 1900 no sé qué se le ocurrió el descaro esto en los 90 tenían sentido esa persona no vio que esto en el año en los 90 tenía todo el sentido porque en los 90 te decía en el año 95 te decía estamos línea 95 y tenía el sentido que esa persona se ve que tenía muy poca visión de futuro por claro en el momento de que últimos años en el año 2000 y ponía 100 descaro la gente decía bien estamos el año 100 y dejó de tener sentido vale y ahora que estamos en 2020 pues tenemos los 120 pues es por lo que se usa mucho mejor el el head fire vale entonces yo ahora lo que quiero y ahora lo que quiero es saber para un año concreto y para un mes concreto de ese año cuál es el día en el que empieza ese mes concreto de ese año concreto vale entonces averiguar esto yo ahora mismo te lo digo de memoria no lo sé porque hamás que tiene un montón de recovecos pues si vengo por aquí y digo javascript late a day of monde vamos a ver geithner de mont no be starting mont o algo así get first the last day vamos a ver vamos a ver algo así de momento pues a continuación lo que voy a hacer es copiar me esta función esta función de hecho no admite parámetros y entonces vamos a ver no veo que tengo que una solución que es la siguiente digo verdad vamos a vernos por eso por aquí nate es igual a new day de año es igual al de get fooled meses igual a day ticket mont entonces a partir de aquí first day y las de las de ahora mismo no ha sido para nada y ahora vengo por aquí y pongo documento right voy a poner un ver y a continuación voy a poner first day fer está muy bien vamos a verlo por aquí estoy todavía en el archivo 9 recargo hola first day y me está diciendo me está diciendo esto y cuidado ok me está diciendo que en este caso es saturday es decir me está diciendo que efectivamente el día 1 de agosto de este año cae sábado con lo cual yo lo que quiero hacer ahora es first day punto get day vamos a ver get day qué nos dice que tiene paréntesis gay tiene paréntesis y nos dice que es el día 6 de la semana en este caso es uno empezando el lunes con esto lo que vamos a hacer a continuación es lo siguiente vamos a verlo si tengo esto ahora digo por ejemplo ya no quiero que el año sea dame el año actual quiero que el año te lo pongo yo y el mes te lo pongo yo también es el mes 1 en este caso va a ser enero recargamos nos dice que aparentemente déjame que lo ve así aparentemente dice que enero de este año empezó en sábado no me acuerdo dentro del calendario ah vale pues vamos a ver dejarme esto por aquí a mano efectivamente en miércoles sale año es igual a 2020 mes es igual a 01 vamos a first day directamente y dice a febrero claro por qué porque claro porque es el 0 es el mes 0 vale no pasa nada entonces en este caso algo así me dijeses wentz day que es miércoles cuando les digo first day punto get day y ahora me dirá que es el día 3 correcto entonces ahora a continuación lo que tengo que usar es esta información para sabiendo el día en el que empieza cada mes darle un poco de ventaja al calendario y si este es el año 2020 y es el mes número uno lo que quiero es que aquí corra tres posiciones entonces para ello lo que tengo que hacer es editar este método que tengo aquí y al editar este método que tengo aquí lo que voy a hacer es uno no es el día es introducir nuevos días vamos a ver cómo puedo introducir nuevos días vamos a hacer lo siguiente vamos allá esto esto welt y lo pongo aquí dentro mes y digo esto es el día correspondiente al año y al mes mes -1 porque ya has visto que los niños van del 1 al 12 pero los dejabas que van del 0 al once vale pero supongo mes menos uno para compensar a continuación una vez que tengo aquí el first day lo que hago es decirle al sistema voy a poner esto temáticamente aquí y ahora digo para díaz en blanco es igual a cero vieras en blanco es menor que first day díaz en blanco más más y ahora lo que hago es poner esto de aquí pero vacío vamos a verlo no va a funcionar todavía para veras pero guardo y recargo hola sí pues sí que efectivamente parece que algún tipo de bucle que hace que esto ya entrado en un bucle infinito díaz en blanco es igual a cero días en blanco es menor que ferré no esto está mal first day punto que de eso es lo que creo que está mal vale paramos la ejecución no me hace mi caso abre una nueva pestaña y lo vuelvo a ejecutar ahora sí vale entonces ahora ahora pues ahora tengo tres días en blanco el día empieza en miércoles y ahora tengo el problema de que aquí está saltando mal no pasa nada el mes 2 del año donde está cerrado la que tenía de incógnito en febrero vamos a verlo febrero febrero gobierno déjame ver agosto febrero empezó en sábado febrero empezó según esto a ver momento a esperar atrás traste es que falla de uno falla de uno quiere decir que por días en blanco es igual a 1 claro ahora sí ahora fijémonos que enero empieza en miércoles febrero empieza en sábado vale ahora sí que lo tenemos correcto lo que nos queda por hacer es que este style clear bus no está rodando correctamente no está ejecutándose correctamente entonces eso lo vamos a arreglar ahora en un momento y una vez que lo hayamos arreglado como el ejercicio se ha complicado un poco aunque a cambio tenemos un calendario prácticamente perfectamente hecho nos falta por cierto averiguar los días que tiene el mes pero eso es un poco de menos porque a la verdad es que eso se puede quiero decir febrero evidentemente fíjate que tenemos en mente febrero de 30 días lo cual evidentemente es imposible pero eso es un poco ya lo de menos como ahora verdad pues a continuación lo que voy a hacer es lo siguiente lo que voy a hacer es decirle al sistema vamos a verlo que para cada uno de los meses quiero bar cuenta día es igual esto cuenta había más más y ahora vengo aquí y cuenta había más más y digo si cuenta día lo que he hecho es crear una variable común para los días aquí para los días en blanco y para los días rellenos entonces ahora guardo recargo y ahora fíjate como ahora baja correctamente baja siempre en domingo por ejemplo marzo empieza en el lunes y todo esto que me quedaría pues me quedaría a averiguar javascript gheit days of monde get the number of days in a mons vamos a ver vamos a ver [Música] guillermo get right sí vale pues voy a esto voy a pegarlo como una función adicional ahora te cuento esto y lo que hago es que gateway sin monte cuando cuando lanzamos los días en lugar de 30 digo dame los días que tiene el mes en el año y así no me ponga siempre 30 por mes o los que toque de esta forma enero tiene 31 no cuidado menor él no tiene 30 febrero tiene 20 estamos hoy es este este año es bisiesto como a vale pues entonces sí que era correcto como estaba antes enero febrero 29 pues entonces estaba correcto vale les dejamos enero con 31 febrero con 32 marzo con 31 y así todo esto a continuación lo que voy a hacer es comentarlo para que tenga sentido para que tenga explicación todo aquello que acabamos de hacer y que el código nos resulte tan confuso porque lo hemos ido construyendo poco a poco pero pero cuando revisé este código es decir ostras y ahora a ver qué se hacía aquí voy a borrar todas estas pruebas aquí esto es mucho más sencillo y esto de hecho no voy a poner en una sola línea y digo esto es una función que me he bajado de internet para averiguar los días que tiene un mes d un paño ahora lo interesante los comentarios como verás pues son sencillos recorro los años desde el 2020 hasta el 2022 creo que mejor voy a poner comentarios al final porque así con los comentarios en línea será mucho más sencillo de leer introduzco un salto de línea o sea un clic en killers para el flow esto va aquí en html usando el h1 pongo el nombre del año el número del año ahora recorro dentro de ese año recorro los 12 meses del año introduzco un salto de línea con un clic por si acaso ahora escribo en html el número del mes esta variable es una variable común para saber cuántos días rellenos o vacíos han pasado gheit es una fecha en javascript teniendo en cuenta el año y el mes calculó el día inicial del mes la librería de fechas tiene un montón de propiedades y ahora ahora pero es decir repito para tantos días como haya en blanco creo casillas en blanco escribo pongo el html de una casilla vacía aumento el contador de la variable ya la recorro aquí ahora recorro los días que realmente tiene el mes pongo la casilla con el día y digo si la variable ha llegado a siete los siete días de la semana en ese caso en ese caso flota este es el final del live también dentro del bucle de los días aumentó el contador de la variable y de esta forma mediante estos comentarios podemos saber y podemos recordar cuál es la función y cuál es el significado realmente de cada una de las líneas y podemos ver que el código en apariencia se ha complicado y de hecho mucho más que se complicará no este ejercicio sino ahora otros que vamos a hacer a continuación pero si el ejercicio se complica pero de vez en cuando nos tomamos algo de tiempo para estructurar correctamente los saltos de línea y saber quién está dentro de quién y nos tomamos el tiempo de hacer tres erres nos tomamos el tiempo de poner comentarios esto hará que tú ahora mismo por ejemplo hoy te acuerdas de esto si tú esto lo vuelves a ver dentro de media hora cuando acabe la clase tú te acuerdas de para que muestro esto pero tú esto lo habrá siento de dos meses y esto que hacía exactamente entonces el hecho de tener estos comentarios suele venir bastante bien para que si no te acuerdas leyéndolo aquí te acordarás leyéndolo aquí recordamos que es buena costumbre aunque se nos vayan un poco los comentarios pero poner punto y coma al final de cada instrucción las las llaves no son instrucciones son estructuras de control pero esto de aquí sí que son instrucciones entonces voy a ir repasando donde no haya puesto los puntos y coma y los pongo y luego evidentemente pues estéticamente se hace falta alineo los comentarios y ya está y de esta forma con este ejercicio el javascript es mucho más que esto pero ya podemos tener una idea inicial de qué es lo que hace javascript y cómo gracias a javascript podemos conseguir de forma sencilla no intelectualmente porque esto requiere de su pensamiento es es más sencillo intelectualmente ir a cascoporro e ir poniendo taka taka taka está más debajo de mes pero aunque intelectualmente sea más complejo desde el punto de vista de esfuerzo aplicado y el resultado obtenido es mucho mejor insisto tener en cuenta que he hecho un calendario de 2020 hasta 2022 podría hacer un calendario desde el año 1900 este año 3000 o desde el año 2000 hasta año 3000 y sólo tendría que variar dos números y solo variando los números tendría mil años de calendario por eso te digo que con javascript de ocurre eso y es que como te diría yo si tú le das amor a javascript por hamás y te devuelve amor sabes si tú le pones esfuerzo pues al final ves que ese esfuerzo tiene una recompensa y es que ves que el lenguaje de programación hace cosas guays por ti dicho esto insistiendo en que javascript tiene todavía bastantes más cosas pero ya tenemos una muestra bastante representativa a continuación vamos a ver para qué sirve que es eso que se llama jquery jquery o jay query como lo quieras llamar es una librería es un framework lo podemos encontrar en jquery puntocom entonces es una librería que intenta y en gran medida yo creo que lo consigue corregir los errores y corregir las debilidades que tiene el javascript especialmente en una cosa que a continuación vas a ver que se llama programación orientada a eventos en primer lugar me voy a descargar jquery la última versión que haya en este momento es la versión 351 pincho me dice descárgate el archivo comprimido para producción cuidado porque con este caso si yo hago clic verás que me lo lanza en pantalla los muchos alumnos cuando ven esto diferencia que hago pues no pasa nada o sea simplemente estás en mac le das a command s si estás en windows le das a contra el control ese y te lo puedes bajar pero hay otra forma que consiste en la página anterior en lugar de hacer clic hacer botón derecho guardar enlace como y al aguardar enlace como verás que se descarga el archivo vale entonces me descargo el archivo lo voy a descargar por facilidad y por sencillez y por simplicidad en la misma carpeta en la que estamos trabajando aprendiendo a javascript me descargo ahí ahora voy a copiar este archivo voy a hacer uno nuevo así que vamos a cambiar de ejercicio para empezar todo lo que hemos hecho hasta ahora vamos a diferencia de lo que vamos a hacer a partir de este momento todo lo que hemos hecho hasta ahora ha sido javascript puro sin jquery y ahora a continuación vamos a mezclar javascript con jquery y te iré diciendo que es javascript y que es jquery ahora en cuanto a la pregunta de la fecha teniendo en cuenta que la fecha es todo lo que es el objeto de beit es un objeto de javascript puro y hay que tener en cuenta que llegados a este punto vamos a empezar a diferenciar entre lenguajes de cliente y lenguajes de servidor es decir importa donde se ejecuta cada recuerdas que antes por ejemplo para ilustrar un poco mejor lo que te quiero decir antes lo he flipado bastante cuando hemos hecho una operación aritmética de suma te acuerdas que de hecho ha fantástico una suma bien pues la pregunta es esa suma donde se ejecuta o sea quien calcula esa suma porque hace falta algo de procesador para calcular esa suma que es básicamente aunque parezca que no pero es básicamente la misma pregunta que me estás haciendo en cuanto a la fecha que es donde se calcula esa fecha entonces en el caso de javascript javascript ahora mismo no dispone de un servidor ahora mismo en estos ejemplos que estamos trabajando de hecho fíjate que más adelante trabajaremos con un programa que se llama en mi caso mamp que simula un servidor local pero ahora mismo ni siquiera estoy utilizando un servidor ahora mismo lo que estoy haciendo es este archivo y lanzarlo directamente al navegador con lo cual ahora mismo javascript y prácticamente siempre javascript donde calcula la información la información la calcula no en ningún servidor remoto porque es que fíjate que ahora mismo ni siquiera estoy escribiendo un servidor remoto sino que se calcula en este mismo ordenador en el ordenador el que estoy trabajando por tanto lo que hace javascript es que javascript le pregunta al navegador ya que en ningún caso debemos olvidar que java se está ejecutando dentro de un navegador web el navegador web le pregunta al sistema operativo y el sistema operativo le pregunta le responde que en este caso son las 7 y 24 cuidado cuidado eso quiere decir que si yo ahora vengo y miento en la hora del sistema me voy al panel de control y miento en la hora a su vez estar emitiendo javascript se la vengo al sistema operativo al panel de preferencias y le digo que son las once de la noche javascript creerá que son las once de la noche de hecho de hecho fíjate una cosa y es que es clara en el archivo 10 a mí que una cosa que la misma no me la sé de memoria javascript hardware concurre en fin qué es una línea de código esto esto es navigator punto esto es lo que no me acordaba vale y quiero con sol punto log y esto parece esto que debe decir parece que no tenga que ver con lo que me has preguntado pero la verdad que sí y esto me va a decir la cantidad de núcleos de procesamiento que tiene mi sistema en mi ordenador sami y hardware vengo por aquí aprendiendo js 10 me voy a la consola y me dice me dice que tengo cuatro que tengo cuatro núcleos de procesamiento porque de hecho si me voy a acerca de este mac y me voy a sacar el procesador veo que tengo un intel core i5 que efectivamente el intel core i5 tiene cuatro núcleos de proceso es decir javascript por defecto y en la gran muchísima mayoría de los casos jamás kit no está viendo no está cogiendo los datos de un servidor remoto lo que está haciendo es los datos de aquel ordenador en el cual se esté ejecutando entonces este cuento te cuento vamos a ver cuando usamos php por cierto antes de contar cuando usemos php ocurrirá lo contrario y es que en php por defecto siempre vamos a utilizar la potencia el cálculo que tenga el servidor remoto no el cliente eso quiere decir que en javascript lo que pese el cálculo va a pesar sobre este ordenador y en php lo que pensé el cálculo va a pesar sobre un servidor remoto y esto no sólo es interesante para la pregunta concreta de la fecha donde se calcula si en mi ordenador o en un servidor remoto evidentemente en un caso concreto por ejemplo podemos calcular la fecha en php para que el usuario no pueda truncar la hora para que aunque el usuario true que la hora tú le digas y si tú truco la hora pero ahora lo estoy sacando de un servidor remoto y ya ese servidor remoto no puedes acceder para tocarla ahora porque por ejemplo digamos que el usuario como por ejemplo imagínate en un videojuego estuviera pudiendo sacar beneficios de trucar la hora pues para que no pudiera hacerlo pero es lo que menos me preocupa si si ves lo que hago si ves mi instalarán si eres mis redes sociales verás que yo hago mucho cálculo intensivo con javascript por ejemplo y ahora cuando acabemos la clase dice n me iré aquí cerca a un parque hacer fotografía nocturna con un programa en javascript que he creado entonces yo hago programas que pesan en cuanto al cálculo que requieren cálculos complejos y esto insisto si te pasas por mi facebook y te pasas por mi instagram y vas echando para atrás en los años irás viendo que pongo ejemplos de esto entonces claro para mí lo importante no es de dónde sale la fecha sino que en un momento dado saber que hay ocasiones en las cuales te interesa que la gente no sufra en su equipo sino que puedes calcularlo en un servidor remoto y darle a tus usuarios el resultado de ese cálculo eso a veces es guay y también hay veces que dices oye mira es que si tengo 100 usuarios y los 100 calculan el servidor me van a petar el servidor pero si en lugar de eso distribuyó el cálculo entre los diferentes equipos en ese caso estoy distribuyendo el esfuerzo y minimizó el esfuerzo e incluso verás insisto si te metes en mis redes sociales lo podrás ver que a lo largo del tiempo he hecho diferentes experiencias la más primigenia que hice de hecho ni siquiera está en mis redes sociales porque no habían redes sociales en aquel entonces de cálculo distribuido no sé si sabrás que hay una cosa que se llama estaba de moda hace muchos años ahora ya no tanto exacto el proyecto seti pues hay una sub proyecto del proyecto seti que es el set ya com mediante el cual tú te puedes descargar un software lo dejas corriendo en tu ordenador y ese software lo que hace es que detecta cuando no estás en el ordenador te envían cálculos los calcula y los devuelve al cp y de esa forma lo que hace el set y es decir yo no tengo tanta potencia de cálculo pero si entre los millones de usuarios que sois en el mundo me ayudáis entre todos sacamos mucha potencia de cálculo vale pues si te fijas esa pregunta que me has hecho para mí es muy importante porque no te digo que una gran parte de mi carrera como programador pero sí que hay una pequeña parte de lo que hago y lo puedes ver en mis redes que tiene que ver con eso precisamente no sólo en conformarme con que en javascript se calcula en el cliente y en php se calcula en el servidor sino según el proyecto en el que esté trabajando precisamente beneficiarme de cuando puedo hacer una cosa y cuando puedo hacer otra pero bueno ahora vemos esto más adelante porque todavía es pronto vamos a ver en cuanto al tema del masín learning la cuestión está en que da igual con que lo haga quiero decir he hecho cursos de the machine learning and javascript en python con php con ce da igual es decir el masín learning es una metodología de programación no es un lenguaje de programación y por tanto como es una metodología se puede implementar en cualquier lenguaje de programación luego evidentemente hay lenguajes de programación que están mejor preparados nativamente que los lenguajes de programación que no están tan bien preparados activamente pero es lo de menos entonces el masín learning para darte una pequeña introducción y sobre todo ponerte en la dirección correcta que consiste en que te olvides de que es un lenguaje de programación y que te conciencia es que es una metodología el maxxi learning consiste que por ejemplo nada de lo que hemos hecho hasta ahora si cogemos el ejercicio anterior el 9 esto es como lo contrario a maxim learning es decir en la informática clásica la gran mayoría de la informática que nosotros hacemos nosotros le decimos al programa lo que tiene que hacer y ya está y en muchos casos no fíjate que eso no es malo fíjate que decirle al ordenador exactamente lo que tiene que hacer y que el ordenador lo haga por ejemplo en este caso que quiero hacer un calendario es maravilloso pero por qué pues porque no quiero decirle un ordenador a ordenador aprende a hacer calendarios porque ya sé cómo es un calendario pero hay otros casos en los cuales yo no sé cuál es la respuesta y lo que quiero no es que el ordenador me haga de máquina que que resuelve mis órdenes lo que quiero es que el ordenador me ayude a saber cuál es la mejor solución no es lo que ocurre en ese caso es que como así así como el calendario yo sé exactamente lo que quería que sabía por pantalla el maxxi learning consiste en cómo programamos cuando no sabemos qué es lo que queremos que salga por pantalla sabemos tenemos una idea de de cuáles son las variables de la ecuación pero no sabemos exactamente cuál es la mejor solución programamos con sistema para que en lugar de decirle máquina hace esto programamos el sistema para decirle máquina ves probando anotate el resultado de cada prueba que hagas en términos de éxito lo que se considera éxito un fracaso nosotros lo tenemos que decir evidentemente y en base a eso la máquina mediante múltiples métodos uno de ellos es fuerza bruta fuerza bruta estuve probando entonces mediante eso la máquina llega a una conclusión este fijas por ejemplo de forma fácil esto que te acabo de decir no tiene nada que ver como un lenguaje de programación es una metodología de programación realmente si te metes en instagram una forma muy gráfica de representar este ejercicio y de hecho esto que te voy a mostrar está hecho con javascript no con una cosa que vamos a aprender hoy sino con una cosa que aprendemos en próximos días que se llama canvas ya lo verás que es mezclar html5 con javascript entonces hay una cosita por aquí un ejercicio muy divertido y digo es muy divertido porque es muy visual en el que cree unos pequeños robots hitos [Música] no estás esto es pero no hice hice uno más estético hice uno que era más bonito y recordar y aquí está este es el que busco vale pues esto que estás viendo aquí son unos robots que tienen una serie de sensores y entonces el robot que se choca se muere porque no más que se muere si te fijas ahora la de la play pero estoy fijas cada robot tiene una barrita de vida como los videojuegos entonces cuando se choca va perdiendo vida entonces hay robots que se van chocando eso es mueren rápido y robots que están programados para evitar los bloques entonces qué ocurre que además incluso este pequeño ejercicio tiene otra característica que se llama es común es código genético es aprendizaje generacional y es que el ganador de una de una ronda digamos que procrea y por tanto los de la segunda ronda derivan del ganador de la primera ronda entonces es como que genéticamente va pasando la información genética de éxito a las siguientes generaciones vale entonces con esto yo no sé yo lo que hago es asignar de forma aleatoria un comportamiento a cada robot y yo no sé cuál va a tener más éxito pero si yo le doy a play y lo que hacen es que ellos van aprendiendo y esto ya te digo es javascript de hecho tengo el código que te lo puedo pasar para crear que es javascript puro y lo que hacen es que se van muriendo y el ganador es el que pasa a la siguiente ronda yo me puedo dejar este software encendido que te diría yo meses y meses y meses y meses hasta que al final el sistema llega a una solución óptima y me dice oye mira el que menos se choca es el que tiene esta configuración yo cuando arrancó el sistema yo no sé cuál es esa configuración si yo lo que hago es que le dejo al sistema que la descubra porque pues por una razón muy sencilla porque estoy aquí estoy aquí por ejemplo puede ser un robot de estos de casa de rumba sabes los típicos robos que te limpian la casa pues verás que por ejemplo otro de mis intereses otro de mis intereses dónde estás dónde estás igual no lo publique en instagram igual lo publique en facebook parece que si otro de mis intereses es la robótica entonces yo por ejemplo a ver que me venga aquí hola entró en mi página por ejemplo una de las cosas que estaba haciendo era uno de los cursos que ha impartido este verano es programar un robot momentín qué es este de aquí no es la versión final vale pero es un robot que tiene un sensor por aquí delante y tiene unas ruedas entonces claro cuando programas un robot como sabes cuál es el equilibrio por supongamos que probamos un robot y por esa serie de sensores alrededor pero no sabes cuál es el equilibrio de esos sensores o sabes qué hacer cuando el texto nos está culo por la derecha qué hace cuando grados gira pues no lo sabes entonces el machine learning es para todos aquellos casos en los que tú no sabes cuál es la respuesta y para ti averiguar la respuesta te obligaría a realizar un montón de pruebas que igual no tienes tiempo de hacer no es lo que haces que es que te aprovechas de la potencia de cálculo del ordenador y le dices mira ordenador esto es lo que yo quiero averiguar tú ves haciendo pruebas y cuando acabes de hacer las pruebas dime más in learning digamos la máquina aprende cuál es el mejor resultado dime cuál es el mejor uso del que has llegado al everest por eso más in learning tiene que ver con esto que te acabo de decir y se puede implementar en cualquier lenguaje de programación pero sobre todo para las personas que están aprendiendo a programar entonces el otro decir es muy curioso pero para las personas que están aprendido programar aprender a trabajar con maxine learning no les cuesta porque pues porque como no saben programar o sea puesto es aprender a aprender eso pero curiosamente me pasa que esto le cuesta un millón de procesar a la gente que lleva muchos años programando porque cuando ves muchos años programando tu mente se acostumbra a este tipo de estructura tu mente se acostumbra que tú le dices ordenador haz esto y ordenador lo hace de repente decirle a alguien que lleva años programando de mira es que tú no sabes la respuesta to pone al ordenador las preguntas y el ordenador te dará las respuestas tú ves los ojos de la gente y es como ostras qué es eso o sea que me estás diciendo entonces simplemente es eso pero a día de hoy pues evidentemente tiene un montón de campos de aplicación yo he puesto un campo como teoría es entendible vale que es lo de los robots estos de limpieza de casa pero hay un montón de campos de aplicación y tú dices yo podría llegar una respuesta pero esa respuesta probablemente no es la mejor respuesta a la que podría llegar entonces en ese caso lo que hago es apoyar medel machine learning porque la gente cree que el masín learning es como la peli de terminator sabes que enciendes una máquina y la máquina toma consciencia y está las bombas y nos mata a todos que no te digo yo que no pueda ocurrir no voy a poner la mano en el fuego tampoco pero pero no es eso o sea eso es una cosa que se llama la inteligencia artificial amplia que se vale que existe como concepto por el maxim learning en el día de hoy en el día a día en la aplicación práctica es algo mucho más parecido a un destornillador que haga un terminator vale y es yo quiero hacer esto no tengo tiempo para hacer suficientes pruebas ordenador haz tú las pruebas y dame los resultados y es ayúdame no es ordenador quítame el trabajo si no es ordenador yo soy un ser humano y tengo criterio tu ordenador no tienes criterio pero tienes mucha potencia de cálculo vamos a sacar lo mejor de los dos es decir yo un ser humano te alimento de los criterios y te digo lo que debes buscar por tanto hace falta un ser humano en maxim learning tu ordenador aplica una potencia de cálculo que yo como ser humano no tengo y así entre los dos llegamos donde antes no habíamos podido llegar a la era diego porque también no sólo quiero decirte en qué consiste el maxim learning en un poco desmitificar lo porque es que claro machine learning es que la gente automáticamente se flipa porque también cinematográficamente estamos acostumbrados a que cuando un ordenador empieza a pensar nada bueno suele ocurrir porque evidentemente pues así es la cinematografía es algo mucho más concreto y mucho más práctico que lo que no puede ocurrir sabes por qué pero bueno pero un poco para que aparte de que más adelante te contaré más cosas de esto pero para que si empiezas un poco a investigar y a vichear y tal para que veas que el vacile ring realmente no es tan oscuro como parece no es tan algo tan tan misterioso on it and see’ 9 conceptualmente es muy sencillo bueno pues pues te decía vamos a ver te decía que a continuación vamos a trabajar con jquery entonces lo primero que tenemos que hacer voy a borrar un poco el estilo lo primero que tenemos que hacer es cargar jquery porque ahora mismo yo he colocado jquery en esa carpeta en la misma carpeta pero el programa no lo sabe para hacer esto lo que hago es script pongo src y al poner src veo por aquí que tengo jquery punto lo que sea a la persona que sea que está debajo entonces pongo eso ahora el programa sabe que existe jquery a la hora programa tiene todo lo que tenga jquery como te decía a lo que vamos a hacer a continuación es una cosa que se llama programación orientada a eventos que es una de las verás a un nivel teórico la librería todas las librerías todos los scripts se deben cargar en el head pero pero yo lo que estoy haciendo como verás es cargar la librería dentro del head porque es lo que se debe hacer pero el script lo cargo dentro del body ya continuación a continuación te voy a decir por qué ahora vengo por aquí cargo este script vamos a hacer algo que ya conocemos tenemos un calendario esto que voy a hacer ahora no es jquery vales javascript y representa e ilustra un problema clásico de javascript -es documento punto de element by aib y el cual el aire es el calendario y pongo punto en el html es igual a hola vale esto siguiendo el ejercicio que hemos hecho anteriormente lo que haría es en el documento encuéntrame el y de calendario y ponle el html hola pero sin embargo cuando ejecuto esto este es el número 10 estoy en el 10 cuando ejecuto me dice me dice no puedo poner el html anul no quiere decir que no he encontrado nada entonces yo le digo pero como que no has encontrado nada si yo te estoy diciendo que hay calendario y aquí está calendario entonces el problema que tiene e insisto pero vuelvo a decir otra vez no jquery sino javascript el problema consiste en que por mucho que la teoría me diga que los scripts siempre se meten dentro del head y no en el body en la práctica html javascript son dos lenguajes que se van ejecutando de arriba a abajo el problema está en que cuando llego aquí y dice document punto que te lee me besa el documento y busca mi calendario problema no ha cargado todavía calendario por tanto no existe es absurdo vale porque tú dices puñetas espérate un poco y verás como sí que existe si sigues cargando pero no lo hace no espera vale entonces en javascript existe el truco siempre ha existido de que cojo este código lo pongo bajo y si lo pongo bajo aunque no sea ortodoxo lo que hace es que me asegura que para que para cuando ejecuto esta línea sí que existe calendario y por eso no falla ahora ya que me preguntas esto te diré que de hecho generalmente la primera instrucción que se suele aprender dentro de jquery es la siguiente dollar document.no ready escribo esto de aquí ahora te escribo te explico todo esto que estoy escribiendo y pongo esto contenido aquí dentro esto que acabo de hacer es la primera de las instrucciones de jquery que te voy a enseñar que es la instrucción ready la instrucción ready quiere decir que cuando lo que sea que aquí has seleccionado este preparado en ese caso ejecuta me lo que yo te diga aquí pero es lo que hace es retener este código y cuando el documento está preparado esto quiere decir cuando el documento ha sido cargado en su totalidad entonces y sólo entonces ejecuta este código y de esta forma ahora vas a poder ver que si cargo correctamente me dice hola es decir ya no me da error vale entonces esto es lo primero que te acabo de enseñar de jquery y ahora a continuación te voy a mostrar cuál es la sintaxis de jquery porque de hecho es mucho más fácil de aprender de lo que te puedas imaginar havas que tiene muchas formas perdón jquery tiene muchas formas pero la sintaxis básica es la siguiente escribo un dólar que de hecho si te fijas aquí mismo te lo está diciendo antes de que te lo diga quiere decir selector vale olvídate del del dinero o sea quédate con la s de selector a continuación pongo unos paréntesis aquí en el paréntesis digo que es lo que voy a seleccionar por tanto dólar document quiere decir que seleccionó todo el documento a continuación pongo un punto voy a poner aquí selector a continuación pongo un punto y pongo método método es lo que voy a hacer vale o sea por ejemplo en el selector cojo un botón vale pero pero qué hago con el botón es cuando haga clic en el botón es cuando pase el ratón es cuando suelte el botón o sea que qué es lo que ocurre vale eso es el método y luego entre paréntesis es lo que hago pues esto que estás viendo es un poco como el pseudo código de cómo funciona jquery selecciono algo a ese algo le aplicó un método y con lo que hago pues ocurre lo que sea vamos a ver un ejemplo sencillo vamos a poner un botón un botón que tiene el aire pulsa me por cierto ahora verás que la sintaxis de jquery tiene puntos en común muy grandes con css y digo pulsa me si te atreves vale entonces vengo por aquí y yo digo selector dentro de los paréntesis pongo comillas y pongo la misma relación de almohadilla es igual aire y puntos igual a clase que tiene css entonces y de pulsa me quiere decir almohadilla pulsa me o sea cuando el programa se encuentra una almohadilla sabe que la almohadilla quiere decir ir por ejemplo voy a utilizar un método muy sencillo llamado punto clic es decir con esto lo que estoy diciendo es cuando sobre el botón me pulses vas a hacer algo y de momento vamos a hacer una cosa que se llaman funciones de anónimas más adelante de contar ya que son esto primero de las funciones y luego de las funciones anónimas pero eso quiere decir que voy a poner function paréntesis ya ves tú de momento pones esto y yo más adelante te explicaré qué es esto de las funciones anónimas pero yo por ejemplo digo con sole punto log has pulsado el botón el consola evidentemente estoy aquí jquery puro menos la palabra función las funciones anónimas no son de jquery son de javascript pero lo del dólar pulsa me y lo del punto clic son cosas de jquery y ahora la función anónima y el consuele punto log eso es javascript entonces ya la guardo recargo vemos que tengo púlsar necesite de trevés y cuando hago clic aquí en el hola vale pero al momento que algo ha funcionado mal a ver pulsa me pulsar pool sobre punto clic totalmente totalmente cierto porque ocurre lo que ocurría antes y es que cuando llega aquí no sabe que existe un pulsar correcto que tengo por aquí totalmente cierto lo pongo dentro del ready vamos a verlo y ahora recargo y ahora si todo va bien pulsamos si te atreves y ahora si ha expulsado el botón entonces en este caso lo que ocurre es que esto que acabo de hacer este fijas es programación orientada a eventos el programa no hace algo hasta que yo no emito un evento en este caso el evento ha sido tocar un botón esto parece una chorrada pero no lo es por ejemplo en el caso anterior en el caso del calendario no nos ha hecho falta programación orientada a eventos porque pues porque no todo es programación orientada de eventos quiero decir es cuando cargas la página haz un calendario no hace falta que yo te pulso un botón para que me hagas un calendario ahora bien en el ejercicio anterior también si recuerdas imagínate que continuáramos este ejercicio como de hecho en estos próximos días lo iremos continuando e imagínate que yo tuviera un calendario en javascript e imagínate cómo si fuera un google calendar pues yo no me voy a conformar con los días yo evidentemente en el momento en el que tenga un día voy a querer hacer clic para meter un nuevo evento esto es lo que tiene javascript esa es la parte de programación orientada a eventos no todo es promoción orientada de eventos pero una de las principales ventajas que tiene javascript con respecto a otros lenguajes de programación es que permite la interacción con el usuario a través de los eventos y los eventos son acciones que hace el usuario por ejemplo cuando el usuario haga clic en un día pues por ejemplo en ese día ponme un evento variables esto no todavía porque es una de las cosas que tenemos que aprender a continuación pero vas a ver que gracias a jquery a veces a javascript realmente al final va a ser posible vamos a aprender más cosas de jk bar y vamos a volver al ejercicio 10 y casi voy a ir a la 11 aunque no existe todavía lo sé pero no voy a crear ahora entonces lo guardo aprendo javascript ejercicio 11 no quiero lo de la programación orientada a eventos no tiene realmente nada que ver con la programación orientada a objetos cuando en definitiva son diferentes paradigmas de programación los paradigmas porque yo te suelto esa palabra de paradigmas y tú dirás pues muy bien me queda igual con el tema de paradigmas básicamente son algo así no ya como estilos de programación pero son metodologías de programación entonces de hecho javascript es un lenguaje como otros que hay que se llama multi paradigma lo cual quiere decir que soporta varios paradigmas de forma simultánea con esto lo que te quiero decir es que en javascript existe también el concepto no no no todavía pero ya lo veremos al igual que en php de programación orientada a objetos y es independiente pero adicional a la programación orientada de eventos cuando te quiero decir que es independiente no te quiero decir que eliges programación orientada a eventos o eliges programas de venta de objetos sino que en un mismo programa puedes trabajar con programación orientada de eventos para capturar los eventos del usuario y a la vez con programación orientado a objetos para hacer lo que sea que te interese entonces así en un momento y para cerrar hasta ahora por ejemplo no hemos necesitado hasta el momento la programación orientada a objetos para nada lo cual no quiere decir por supuesto que no la vayamos a utilizar en el futuro pero si te acuerdas por ejemplo un buen caso para ilustrar t el que es la programación orientada a objetos te acuerdas que antes te puesto el ejemplo de este software de machine learning que tenía por aquí por mi instagram el de los robots estos de limpieza entonces no es que la programación orientada a objetos esté relacionada con el maxim learning de hecho la programación de objetos es muy anterior por medio de los años 80 del 84 creo recordar estudiando si de memoria luego lo consultó entonces tú considera por ejemplo un sistema donde yo tengo una serie por ejemplo de robots y cada robot tiene una serie de propiedades cada uno tiene sus propios sensores yo no quiero cuando estoy trabajando con este programa confundir los sensores de este robot con los sensores de este robot yo quiero que cada robot sea una unidad sea para que lo entiendas y verás que usar esta tecnología más adelante sea como una burbuja como una cápsula lo que se llama la encapsulación es una de las metodologías de encapsulación en programación la cápsula quiere decir que existe una distinción entre lo que está afuera de la cápsula y lo que está dentro de la cápsula y realizar esta distinción nos permite a veces separar y organizar mejor la información y no mezclar la información porque al mezclar la información podemos liar la información vale entonces la programación lenta es un paradigma es una metodología de programación que consiste precisamente en aislar uno tiene dos principios fundamentales uno es crear una clase que es una cosa que es como una plantilla y a partir de esa plantilla empezará a derivar un montón de instancias lo cual quiere decir que yo no programo cada robot individualmente porque me puedo morir programando robots sino que programa una plantilla y a partir de esa plantilla derivo un montón de robots con lo cual me ahorro una cantidad de trabajo increíble y la segunda parte principal es que cada robot tiene sus propias propiedades y el programa recuerda que cada robot tiene sus propias propiedades cada instancia de cada objeto tiene su propias propiedades y no me las mezcla entre sí porque insisto que mezclar en ciertos casos puede causar confusión y la confusión puede llevar a errores del programa entonces por ejemplo si te fijas de hecho hay una metodología que es estrictamente orientada a objetos que quiere decir que es programar siempre sí o sí con objetos si te fijas por ejemplo hasta ahora no hemos trabajado con objetos y hemos podido trabajar perfectamente bien quiero decirte con esto que es una metodología que como te acabo de comentar tiene totalmente ventajas clarísimas pero eso no quiere decir que siempre haya que trabajar con ella porque yo he hecho hace unos cuantos años estuve como alumno en un curso que impartía un formador siempre lo digo creo que se llama salimos a dar dais madres yo estaba como alumno en un curso que impartirá este tipo que es formador es muy bueno entonces el curso para que te hagas la idea era de programación orientada a objetos solo eso o sea todo el curso iba de eso entonces era un curso de cómo te diría de mira llevas años programando orientado a objetos pero quieres saber más o quieres perfeccionar o quieres limpiar malos hábitos que tengas y quieres saber si quieres un poco pues eso es perfeccionar digamos y dije vamos me interesa este curso antes me apunté y lo primero que decía este tío en el curso es usar tu imaginación es no todo se tiene que programar orientado a objetos donde está imagínate que te apuntas a un curso de formación entrada objetos y el formador lo primero que te dice qué programa de objetos pero pero es que quiero decir el que lo que te decía es youtube de un curso de formación a mente de objetos pero no quiere decir que yo sea un caníbal de la programación entrada objetos que yo te enseño esto que se usa cuando conviene y no se usa cuando no conviene me acuerdo que uno de los ejemplos que puso en el curso es una cosa que se llama código espaguetis que nosotros miraremos a niveles hemos hecho ni lo haremos nunca se ha hablado alguna vez el código espagueti o lo has oído por ahí es el código espagueti es cuando el programa es enrevesado cuando vas programando línea a línea y no vas planificando sino que vas resolviendo problemas tal cual salen y al final el código es como un plato de espagueti que tú no sabes aquello donde empieza donde acaba en es el tío en ese curso de pronunciamiento de objetos porque precisamente el objetivo de promoción entrada objetos es encapsular y organizar el tío dijo mira a mí me contrataron en los años 90 para hacer un software con las primeras versiones de java para una empresa que requería un cierto tipo de calculadora y el tío dice y yo hice el software con código espagueti y cerré el software saldría la empresa y ya está y cuando y cuando el tío decía ya está lo que quería decir es que no todos los softwares tienen que estar ni programados y orientados objetos ni con el código totalmente limpio porque el tío decía yo programa de software y el software iba el software funciona que por dentro es un lío sí pero funciona entonces si es un software que calcula una cosa que la empresa quiere calcular y desde los 90 la empresa está usando ese software y por lo que sea que calcula ese software la empresa no necesita modificar lo que más da que esté hecho con código espagueti es decir para que perder tiempo ahora abriendo ese código y limpiando ese código cuando cuando el software funciona y la empresa no quiere sacar una versión 2 y una versión 3 y una versión 4 del software porque el software está cerrado a los años 90 y funciona y ya está entonces el título que quería decir es que la programación entrada a objetos a los programadores lo que nos permite es adquirir ciertos buenos hábitos de encapsular y de separar y de no mezclar pero también lo que quería decir es que no hay que ser talibán de la programación sino hay que saber cuándo estás haciendo lo que estás haciendo pues hay veces que programas un software y ese software que estás programando sabes que va a durar años y que va a ser mantenido y que luego va a ser una versión de otra versión 3 y que luego lo vas a pasar a otros programadores y lo van a ampliar y te lo van a devolver y tú lo vas a ampliar pues en ese caso tú te tienes que preocupar de que el código esté limpio y que se ha mantenido y que esté encapsulado y que esté claro y te tienes que preocupar de unas cuantas cosas más pero hay veces muchas veces en el día a día en el que hay alguien que te pide un software que haga lo que lo que sea y tú los programas lo haces y ya está y si y si te das cuenta de que el software no va a hacer nunca nada más de lo que te han pedido pues para que ser más papistas que el papa el software funcione que funcione bien y que haga lo que tiene que hacer y luego si el código dentro no está perfectamente limpio por el software funciona y nunca nadie va a necesitar tocar ese código pues qué más da sabes lo que quiero decir con esto la idea es un poco decirte que en programación hay diferentes estilos metodologías filosofías de programación porque al final la programación si se probaba para una máquina pero programa nosotros que somos seres humanos entonces cada uno elige como quiere como quiere programar radio porque por ejemplo igual que te digo esto de este curso que tengo amigos que generalmente yo creo que todos pasamos un poco por esta época que cuando y tengo amigos que a veces han quedado enganchados en esa época que cuando descubren la programación orientada a objetos es como que todo lo demás no vale como que madre mía como he podido vivir sin esto claro tengo amigos que de repente dicen pues es que todo hay que programarlo con objetos y es que no hay que hacer nada a 100 objetos cuando dices ‘no te clip está entiendo que la descoberta semana entiendo que estás flipando entiendo qué tal pero cálmate o sea cuando pasa un poco más de tiempo te darás cuenta de que la formación entrada objetos es un paradigma de programación más que te va a convenir en una serie de casos pero no te va a convenir en otras áreas para entonces todo esto que te estoy diciendo hoy te lo estoy diciendo en la teoría cuando lleguemos la programación orientada a objetos y veamos cómo es en la práctica ahí te podré demostrar mucho mejor que hay ámbitos de aplicación donde la programación orientada a objetos auténticamente te salva la vida que dice es menos mal que kristen este paradigma porque si no nos echaría los muchos casos donde podríamos decir que casi es matar moscas a cañonazos pues no

hoy vamos a ir a saco porque el objetivo es continuar trabajando con javascript con jquery pero lo que quiero hacer es un ejercicio tal que en un momento dado empiece a mostrar los cuáles son el potencial y las capacidades de este lenguaje de programación por ello lo que voy a hacer es que lo que he hecho hasta ahora lo voy a meter en una carpeta nueva llamada proyecto web entonces voy a [Música] meter todo esto dentro del proyecto web aparte de aprendiendo javascript voy a crear una carpeta nueva llamada app y dentro de esta carpeta nueva lo que voy a hacer aquí a continuación es crear un archivo nuevo y lo voy a guardar como index.html esto es escritorio con los aplicaciones apps index.html y bueno voy a necesitar un poquito de html una mínima de estructura con lo cual lo que voy a hacer es en este caso escribir porque igual a cabo antes escribiendo lo que copiando lo de otro ejercicio anterior entonces tengo un head tengo un body varilla y dentro del body dentro de lo que sería el main aunque esta aplicación va a ser a pantalla completa tendría un header hace que esto va a ser una aplicación de tipo como si fuera algo así parecido a netflix es decir no es una web sino es más bien una aplicación donde haya cosas la gente puede interactuar con lo cual va a haber un header pero el objetivo no es el mismo que el header de una página web y sin embargo va a saber que la etiqueta es la misma vamos a tener una sección realmente vamos a tener un contenedor entonces voy a decir divide igual al container y aquí voy a hacer varias sección donde cada sección tendrá un artículo cuando llegamos a este punto es cuando si quiero meter como si fueran digamos varias películas varias entradas cuando hablo de varias cuando realmente lo que igual querría algo parecido digamos a lo que hablamos el otro día es decir a javascript donde voy a crear digamos un artículo art y que le voy a decir div class contenido y entonces aquí tendremos por una parte 11 que será el título tendremos un h 2 que será la descripción realmente h1 no voy a poner h3c 4 porque igual a 1 me lo reservo para el título bien y a partir de aquí por ejemplo voy a tener una imagen pues bueno ahora veremos qué imagen pongo voy a una de las del otro día voy a foto voy a una de las imágenes me la llevo a la app me creó una carpeta nueva llamada foto y dentro la pego vale entonces eso quiere decir que me meto en foto y cojo el archivo que hay vamos a ver qué aspecto va teniendo esto esto no y a continuación lo muestra en pantalla y esto pues evidentemente de momento tiene un aspecto pues bastante bastante extraño pero a continuación ahora haré un copia pega voy a poner por ejemplo aquí bueno un texto algo de texto y a continuación lo que voy a hacer es copiar y pegar este artículo lo puedo copiar y pegar o bien lo puedo meter como javascript de momento lo voy a copiar y pegar eventualmente más adelante siempre puedo a meterlo como javascript tengo esto y ahora vamos a ver cómo con un poquito de fs s esto se puede convertir en algo bastante más visualmente efectivo voy a decir que el body tiene un background [Música] black prácticamente y un color white lo cual quiere decir que le invierto un poco los colores ahora voy a decir que por ejemplo el header en el body perdón se me olvidaba html como avon y voy a decirle que el wifi es 100% y el height es 100% para decirle que el header quiero que como diría yo quiero que tenga una altura del 50% y eso lo que va a hacer vamos a verlo ahí ahora cogemos el g ver voy a inspeccionar ahí el género todavía no tiene nada para poner hola era el je ver tiene en este caso levantamos una altura del 100% con respecto al main que debe tener una altura del 100% porque si no a ver no reconoce cuál es la altura este fijas ahí ahora por ejemplo el mainz que fijase en el color azul tiene esa altura del 50% y por tanto el prueba en el ‘main tiene un 100% vamos a verlo y bueno qué curioso porque fíjate que en este caso aparentemente le estoy diciendo al html que tiene una altura del 100 y no me lo coge no pasa nada porque le puedo decir que altura de 400 píxeles y así va a funcionar seguro aunque parezca que no pero me meto aquí y el header ahora veremos cómo tiene una altura del 400 por ciento vale mientras tanto mientras tanto a continuación lo que voy a decir es que cada uno de los artículos del sección tenga un wish de por ejemplo 100 píxeles de momento no sé si está bien o mal una altura de 100 píxeles y section arctic el ing quiero que tenga un width de 100 por ciento y es lo que va a hacer es que como podemos ver ahí los artículos son más pequeños tengo título descripción y texto y ahora lo que voy a hacer es que el sección arctic el flote a la izquierda flote a la izquierda para que tengamos esto en la pantalla vale para que tengamos al final una colección de artículos con donde cada uno tendrá su texto si quieres para que lo veamos mejor voy a poner un borde de un píxel solid walt y así veremos mejor qué es lo que tenemos realmente en la pantalla verás que la imagen se está saliendo simplemente porque la imagen está siendo empujada por el título la descripción y el texto entonces hay una forma de arreglar esto que es decirle al sistema qué posición relativa y luego en la imagen en la imagen interior voy a decirle al sistema que posición absoluta top 0 píxeles left 0 píxeles is lo que va a hacer es que la imagen ahora estará como ves arriba esa la imagen está contenida dentro del elemento hay un problema hay un pequeño problema el pequeño problema es que fíjate que el texto se ha quedado por detrás eso es porque he creado primero el texto luego texto luego texto y luego imagen en html lo último que venga digamos machaca a lo que venga antes en tres esto realmente debería estar así claro esto me obliga si te das cuenta a copiar y pegar unas cuantas veces es lo que tiene verdad lo del copiar y pegar pero bueno de momento lo voy a hacer porque digamos prefiero hacerlo así y para que por lo menos se vea y ahora aunque se siga sin ver no pasa nada porque te puedo decir section arctic el h1 como sección arctic el h2 sección arte que el p le digo también posición absoluta y en este caso lo que debería estar empezando a hacer ya es mostrarme vamos a verlo arctic él a h 3 y 4 h 3 y s 4 efectivamente vale ahora sí y ahora bueno lo único que pasa es que se me quedan uno encima del otro no pasa nada eso es lo de menos porque ahora a continuación les daré un poquito de formato voy a quitar esto fíjate que de hecho el header ya me ocupa ese ese 50% o esos 400 píxeles voy a hacer esto un poquito más bonito entonces para ello lo que hago es lo siguiente para ello lo que hago es que vamos a verlo voy a decirle al arctic él que tenga un martín de 5 píxeles 10 píxeles quizás por cierto que estoy igual vamos a tirar con 200 x 200 píxeles y bueno de momento hay otra cosa que voy a hacer es decirle que el fondo no sea perfectamente negro sino que sea rgb 50-50 como a 50 para que sea gris oscuro que quieras que no siempre queda mejor vale bien en este caso como podemos ver aquí ya tengo digamos esto que empieza a estilizar se ahora haremos algo parecido a lo del otro día y es que podamos ir pasando digamos unos elementos detrás de otros pero el otro día el pasa fotos pasaba solo nosotros lo que vamos a hacer hoy a continuación es que lo vamos a pasar nosotros manualmente para ello a continuación voy a empezar a trabajar un poquito con efectos de v html y de javascript entonces voy a quitar un momento el border lo desactivó por si acaso más adelante lo quiero tengo por ahí eso y ahora quiero hacer algo que es lo siguiente bueno aparte de que dentro de la app voy a copiar de aprendiendo javascript el archivo jquery me lo copio dentro de la app voy a crear una carpeta live que son librerías donde jquery no deja de ser realmente una librería y por tanto ahora en el estilo pongo script y digo ese ere s es igual a live jquery vale a continuación a continuación lo que voy a hacer es decirle al sistema que es lo que ocurre cuando sobre un elemento pase el ratón entonces te acuerdas que el otro día dijimos que nada va a ocurrir hasta que no hagamos un documento que esto no documento rebi por el problema que teníamos el otro día que te acuerdas que me preguntaste si se ponía arriba o se ponía abajo les vamos a ponerlo arriba pero poniendo el document punto web y para no tener el clásico problema de existe o no existe entonces ahora lo que voy a hacer es decir sección arctic él punto h y voy a hacer function algo muy sencillo de momento que es con solo punto lo verás que si te fijas esta estructura es la misma que esta estructura gran parte de nuestro código en jquery va a ser así y voy a decir hola y simplemente voy a decir hola para decirle al sistema de recargar que a ver si es cierto que cuando pasó el ratón por encima me dice hola lo ves cada vez que paso el ratón por encima me dice hola si me dice hola yo a continuación lo que puedo hacer es añadir por ejemplo una clase voy a decir ha aumentado y ha aumentado voy a usar una propiedad que no es muy estándar por cierto pero que es un 1.3 y por cierto voy a decirle al sistema que los artículos tengan un transition 1 de all un segundo eso que va a hacer bueno eso lo que va a hacer es que voy a escribir una palabra clave en los lenguajes de programación que se llama this ahora te explico lo que hace y lo que voy a hacer es añadir una clase la clase va a ser aumentado a continuación será lo pruebo comprobamos como si pongo el ratón por encima cuando pongo el ratón por encima a continuación lo que hace es aumentar lo voy a poner 1 ahora usaría una propiedad más estándar y he dicho transición pero transición lo que debería hacer es que la transición fuera esto fuera suave fuera con animación transition en un segundo vamos a los elementos vamos a el arctic el clase aumentado 1.3 bueno voy a usar una propiedad un poco más estándar que es transform esquel y voy a decir en este caso 1.3 1.3 no me acuerdo ahora mismo me acuerdo ahora mismo si te digo la verdad si es con comas si lleva una coma o no llega a una coma ahora lo vamos a ver arctic él efectivamente fíjate que me dice me dice la error ok pues mirad errores que eso quiere decir que quiere decir que debe ser con una coma y ahora si te fijas lo que hace es que cuando pongo el ratón por encima se hacen grandes de la misma forma evidentemente como te puedes imaginar y ahora lo que voy a hacer es decirle al sistema que cuando section sección art y que en lugar de ver lo que quiero es cuando saque el ratón vale entonces pongo por aquí jquery como se dice contrario en inglés o por site o por site y bueno sería mouse out por ejemplo vale mouse out cuando saque el ratón me vale entonces yo lo que hago es que le digo que cuando haga mouse out sobre el sección art y que en lugar de anclas remove class entonces vamos a fijarnos como si pongo el ratón de encima se hace grande si lo saco se hace pequeño vemos como tenemos una serie de efectos que podemos empezar a conseguir con tacuary s vale fijémonos que por ejemplo este cuando se hace grande fíjate que al hacerse grande se queda por detrás del siguiente eso es un efecto un poco molesto no hay mucho problema porque lo que puedo hacer es lo siguiente lo que puedo hacer es decirle que el sección arte que él por defecto es si tiene un por sitio en relative z index arte explicó del zeta index es igual a 1 y cuando está aumentado es zeta index de 1000 por ejemplo el que está index quiere decir que tú estás viendo que aunque la web sea un espacio bidimensional que tiene x y que tiene y técnicamente en ciertos aspectos es tridimensional entonces eso quiere decir que cada elemento tiene como una distancia hasta el visor zeta index uno quiere decir que se quede en el fondo z index mil quiere decir que salga hacia adelante por cierto que le podríamos decir z index menos mil o sea números negativos que querría decir tíralo más hacia el fondo es algo así y ahora fíjate como el que yo coja automáticamente sale hacia adelante de esta forma sí elgeta index se utiliza para ordenar esos y date cuenta que cuando antes he tenido este problema he preferido ordenarlo con html antes que con css pero claro esto lo puedo hacer con un contenido fijo con un contenido cambiante no puedo arreglarlo con html entonces se puede se podría haber hecho lo de antes con z index pero que prefiero hacer lo que se pueda con html lo que no se pueda con css y lo que no se puede consentirse con javascript digamos sería algo así como el orden de prioridades si hacemos esto ahora de hecho yo puedo meter otras cosas en aumentado por ejemplo puedo meter un borde de 2 píxeles solid white y entonces lo que hará es una animación donde además tiene un borde un pequeño borde otra cosa que puedo hacer es poner una propiedad que se llama box shadow que por ejemplo es 0 píxeles 0 píxeles 5 píxeles 0 píxeles white una pequeña sombra no sé si se ve y si no voy a poner 15 píxeles para que lo veas más va a ser muy hortera pero así por lo menos puedes ver digamos como que vale o lo ves ahí como que tiene un efecto glow como que tiene voy a quitar el borde como que tiene un efecto de resplandor te cuento te cuento las cuatro coordenadas que metido la primera es cuánto se desfasa la sombra en horizontal he puesto 20 fíjate que la sombra se va hacia la derecha por tanto valores positivos es sombra sal hacia la derecha valores negativos en sombras se va hacia la izquierda el siguiente valor es desfase de la sombra en vertical donde tened en cuenta qué valores positivos pese a lo que cabe tener en cuenta y más por ejemplo si eres de arquitectura y es que 20 píxeles o esperarías que fuera hacia arriba pero en informática es al revés en informática valores positivos en y son hacia abajo lo siento mucho porque yo también estoy acostumbrado de muchos años a que positivo en y es hacia arriba pero no fíjate que es hacia abajo y de la misma forma valores negativos en y es hacia arriba el siguiente parámetro es la longitud de la sombra 5 píxeles es una sombrita muy pequeñita 45 píxeles 55 píxeles es una sombra muy grande el siguiente valor si te fijas con 55 píxeles la sombra deja de tener un poco de fuerza pierde fuerza sirve para darle más fuerza a la sombra cuidado fíjate que va a pegar un pedazo de resplandor tales como como un busto como un más de fuerza y luego por supuesto white es el color para él si le pongo black por ejemplo pues en este caso lo que estaría haciendo es una sombra negra en este caso pues fíjate que también le añade un poquito de estilo para diferenciar el objeto con respecto al fondo entonces fíjate que en este caso ya tenemos empezamos a tener una demostración de que gracias a en este caso la mezcla de html css y javascript podemos empezar a hacer efectos chulos y curiosos pero vamos allá vamos a continuar y vamos a hacer lo que el otro día trabajábamos con el sección y vive class como te diría yo ribbon ribbon serie sería algo así como banderolas traducido al castellano pongo aquí me aseguro de que sangró correctamente vamos allá ahora vengo y digo qué section tiene un wifi del 100% vamos a verlo sección no vamos a verlo sección tienen we del 100% tiene un hype de cuánto medía esto de 200 200 píxeles y ahora sección ribbon tiene un wifi de no lo sé de 4000 píxeles me lo voy a inventar lo que quiero con 4000 píxeles es y claramente los elementos que no quepan se vayan hacia la derecha o sea desaparezcan por la derecha vale ya y vemos cómo desaparecen por la derecha hay que tener en cuenta que desaparecen por la derecha y fíjate que tengo un molesto scroll horizontal para ello lo que puedo hacer como dice el otro día es decirle a la sección que tenga un overflow giren para que lo que sobresalga no se vea meza y que el scroll ya no tiene ese efecto molesto y ahora ahora viene una de las cosas más interesantes más divertidas es que algo que no podía hacer en css y que ahora sí que puedo hacer en javascript es crear botones de quiero pasar al siguiente o quiero pasar la anterior uno cuidado porque claro al ponerlo de 200 píxeles fíjate que me hace esto entonces igual lo que tengo que hacer es decirle que tenga 300 píxeles y así lo que hace es que se ve el de por abajo pero no el de por arriba no pasa nada es lo de menos ahora lo apañaré eso en sección realmente con que ponga un paddington de 50 píxeles no tengo solucionado qué es recuerda es el margen superior alegres allí fíjate que de hecho por arriba se nota un poco el recorte vale pero bueno no pasa nada también lo que puedo hacer es en la sombra bajar el tamaño de la sombra bien ahora ahí como te decía en html fíjate que una vez más voy a usar las tres tecnologías vamos a verlo vamos a usar las tres tecnologías donde en este caso lo que voy a hacer es maquetar o crear un botón con html maquetar lo con con css y trabajarlo con la interactividad con javascript entonces en el sección voy a poner div class botones y entonces lo que voy a hacer es decirle al sistema que quiero un bip clase botón redondo y en este botón voy a poner esto voy a poner este botón cuidado porque el programa cree que quiero que quiero tirar hacia atrás quiere creer que quiero abrir una etiqueta porque yo lo que quiero es una señal y está que vaya hacia atrás pero y por eso me pone esto cómodo porque cree ahora veremos cómo lo puedo hacer si no le pongo un dibujito que es la otra vez es una cosa voy a poner no voy a parar la flecha también puedo poner esto estoy pensando para veras esto otra vez y ahora botón redondo anterior y ahora botón redondo posterior y ahora ahí aparecen esos dos botones si yo tengo esto ahora me puedo ir a css y puedo decirle botón redondo tiene una anchura de 30 píxeles pues no estoy inventando ahora luego lo vamos tocando una altura de 30 píxeles un borde radios de 30 píxeles un background gris clarito 220 220 220 un color negro quiero que el tamaño de la fuente sea de 30 píxeles y quiero un text align central y esto qué es lo que hace pues eso lo que hace es que convierte a estos a esos sabes mayor que los convierte como en dos botones y hay una cosa que es line height 30 píxeles eso sirve para alinear eso al centro digamos que se vea más en el centro y ahora a continuación lo que voy a hacer es decirle al sistema que bueno por ejemplo font conway bolt para que sea negrita para que sea y ahora lo que voy a hacer el color no lo quiero black lo quiero rgb 50 50 50 para que sea un gris más clarito y ahora lo que quiero hacer es poner un botón aquí a la izquierda otro botón ahí a la derecha en vez para ello lo que voy a hacer es decirle al sistema que botones tiene un position vamos a verlo un por sitio en el sección que tenía acepten tenían algo no un posición relativa igual luego lo cambio absoluto ahora sí ver lo absoluto ahora al cambiar lo absoluto fíjate que se me ha ido atrás mezcla botones está atrás entonces se está index mil por ejemplo y ahora los botones están delante y entonces ahora yo puedo decir lo siguiente puedo decirle que botones botón redondo posición absoluta vale y ahora dónde estás botón anterior es por ejemplo top 100 píxeles lo que estoy haciendo es que ves el botón de anterior lo estoy moviendo un poquito hacia abajo y el botón de posterior voy a decirle right cero píxeles es cuidado ahí está 60 píxeles top 100 píxeles el rey feroz píxeles debería habérselo llevado hacia allá botones guys 100% ahora sí entonces ahora verás que tengo un botón aquí otro botón aquí puedo decir raid 20 píxeles para que esté un poquito más separado y por cierto al botón anterior le puedo decir transform una pequeña trampita permíteme la que es rota 180 degrees y eso lo que hace no es las ganas de ver es que lo ha girado vale es una trampita porque como no podía esto déjamelo poner a 10.000 como no podía poner ese carácter pero sí que puedo poner este pues no pasa nada pues lo que hago es que le doy la vuelta vale bien he creado la estructura con html lo he estilizado con css ahora quiero ponerlo en funcionamiento con javascript y así vas entendiendo lo que te llevo diciendo realmente desde el primer día y es que esas tecnologías son amigas entre sí es decir son diferentes pero están construidas para que cada uno cumpla su función y entre todas hagan lo que a mí me interesa vamos a por ello entonces a continuación lo que voy a hacer es que me voy a javascript fíjate que empiezo a tener en un mismo archivo html css y javascript esto empieza a no ser muy limpio ahora en un momento lo moveremos a diferentes archivos de momento continuamos así pero vale entonces a continuación lo que voy a hacer es decirle al sistema lo siguiente cuando sobre anterior haga clic pongo función y lo que estoy haciendo es específicamente que veas que la estructura es la misma y así mediante la repetición te lo digo para que psicológicamente digamos no te entumezca cuando veas que en honor a ver astro que con serio cuando veas que ves esto y dice sí pero pero no sé si luego cuando yo escribo un programa sólo se lo voy a hacer utilizar pero a medida que yo lo repita y veas que la estructura es previsible es predecible es repetible dirás bueno vale ya no se aprende a programar solo como se suele decir en programación a programar se aprende programando pero por lo menos verás que hay una estructura repetible que no es de madre mía era por donde empiezo sino que quería saber yo me acuerdo que esto era algo de un selector decirle qué voy a hacer con el selector y hacer algo con el selector y eso un poco de seguridad de ayuda y de apoyo para sentirte menos perdido cuando empieces a trabajar sobre esto voy a continuar ahora un poco sobre el código y ahora luego voy a hacer un pequeño break de unos cuantos minutos para hablarte de aspectos psicológicos de la programación persona chorrada no te rías te aseguro que no lo es en hecho si hago este este break es porque hace años no lo hacía pero conforme veo que reaccionan los alumnos a la programación y al reto de la programación pues solamente estos bloques para que cuando el alumno vea que al intentar resolver ciertas cosas se engancha en ciertas partes pues un poco prepararlos psicológicamente porque programar no es práctica del código es una actividad mental humana antes hay que estar preparado para cuando encuentres ciertas dificultades pues que sepas que es normal que no pasa nada que todo el mundo pasa por ahí y que eso te haga sentirse menos perdido llegado un momento entonces de momento voy a poner console lo voy a poner ok y simplemente lo que quiero comprobar si es cierto que al pulsar anterior clic me dice ok vale ya está funcionando de la misma forma yo vengo por aquí y digo cuando sobre posterior haga clic quiero que también me digas ok me dice ok en todos los casos así que ahora a continuación el con solo punto lo voy a la vez lo uso simplemente como diagnóstico para ver que todo está funcionando bien entonces ahora lo que voy a hacer aquí donde pone donde está el ritmo en el río en el ritmo donde está arriba en los estudiantes por aquí y no no es así voy a decirle posición relativa y le voy a decir left 0 píxeles y transición ahora verás cómo mola hoy un segundo esto es porque yo ahora aquí le voy a decir que al ribbon punto atención pss desde esto es muy raro pero es así desde javascript le puedo meter propiedades css directamente yo te voy a decir left y bueno vamos a ver vamos a poner por ejemplo menos 400 píxeles ahora verás esto va a ser pan para hoy hambre para mañana entonces y aquí 400 píxeles esto lo que va a hacer es que cuando yo haga así ah perdón eran 200 píxeles eran cuántos eran si 200 600 cientos de la col ver vale entonces cuando yo pulsó el botón tira hacia la izquierda y cuando yo pulsó el botón tira hacia la derecha vale esto está bien pero quiero que esté mejor entonces para ello es para lo que como te digo en la clase de hoy estamos aprendiendo por ejemplo algunas cosas nuevas pero también estamos reutilizando un montón de cosas que ya sabíamos esto en programación suele ocurrir y es que las primeras clases son más duras porque todo es nuevo pero cuanto más avanzamos más reutilizar de lo que ya sabías y te apoyas en ello para crecer lo cual es guay entonces en este caso vamos a apoyarnos en lo que ya sabemos vamos a crear una variable llamada desfase desfase en castellano está asociado mucho a lo que sería el desfase en las fiestas pero en términos técnicos de hecho en la arquitectura ocurre igual es que el desfase es la línea que contornea un objeto pues el desfase es esto es digamos un paralaje con respecto a un valor inicial nos voy a empezar diciendo que desfase es igual a cero y entonces lo que voy a decir es que cuando punto anterior voy a decir desfase menos menos o sea quitarle un valor a desfase y desfase más más lo que quiere decir sumarle un valor a desfase con esto lo que hago ahora es aquí donde pone el píxel conecto y digo desfase por 200 más píxeles entonces yo ahora vengo aquí copio esto y fíjate que esto lo que va a hacer es que progresivamente va a disminuir insisto progresivamente valores o va a aumentar progresivamente valores sr algo así fíjate que puedo tirar uno y otro y otro y otro y puedo tirar uno y otro y otro y otro como verás ahora aparte de que a la meteré más elementos evidentemente pero esto nos permite no ya que él pasa fotos que hicimos el otro día pase digamos el solo sino que esto nos permite que nosotros podamos elegir cuando pasamos una foto o cuando pasamos otra fíjate que en un momento de repente tenemos como una especie de filas donde yo puedo elegir digamos que trozos quiero ver pero ahora a continuación el ejercicio se va a complicar vamos a por ello verás vamos a ver voy a copiar esto voy a deshacer momento y eliminó la variable desfase verás hace un momento esto era estático eso quiere decir que cuando sea por defecto es cero porque si yo no le digo nada es cero yo le puedo meter doscientos y menos doscientos pero claro si ahora recargo le meto menos 200 pero esto ya no me responde porque porque le ha aplicado menos 200 pero yo no quiero aplicar menos 200 yo quiero decirle a estos de unos 200 quitarle otros menos 200 de la misma forma se hago así me hace más 200 pero si yo vuelvo a aplicar no me va sumando para que creado una variable precisamente he creado una variable para eso he creado una variable para decirle que el valor de desfase es desconocido y es variable es cero al principio y que cada vez que yo pulsa el botón vaya quitándole y quitándole y quitándole y quitándole o vaya poniéndole y poniéndole y poniéndole y poniéndole y de esa forma yo no pongo 200 sino que pongo lo que o sea 200 x el desfase y de esa forma es infinito cuidado es infinito quiere decir que también tiene problemas porque yo hago así y si te fijas lo que ocurre es que llega un momento en el que se acaba pero sigue des pasando no pasa nada porque ahora luego lo que vamos a hacer es poner límites y al poner límites evidentemente pues pone evitaremos digamos que se pueda ir más allá de como te digo los límites del archivo antes de crecer más eso sí yo creo que ya es conveniente que empecemos a separar esto es una aplicación típica en en html css y javascript a la que luego por cierto cuando toque cuando llegue el momento le meteremos php y mysql porque los elementos saldrán de una base de datos pero es la típica que empiezas con un archivo y llega un momento en que crece hasta que se hace incómodo de trabajar entonces para ello es para lo que vamos a crear un nuevo archivo a este archivo le voy a meter el estilo lo guardo como a ver momento está desplegando vale lo guardo como voy a crear una carpeta nueva llamada estilo lo guardo como estilo css ahí lo tenemos ahora voy a reajustar la sangría y lo mismo hago con javascript con el javascript hago un nuevo archivo lo pego reajustó la sangría lo guardo dentro del proyecto en la carpeta una carpeta llamada js y lo guardo como cody por punto js me dan igual los errores son correctos y ahora lo que tengo que hacer es re enlazar aquí en el script digo que esto está en j s barra código j s para que el programa entienda dónde está y ahora el estilo lo cambió por un link que es igual a esta el sip y aché red es igual a estilo estilo css y de esa forma externalizado los archivos y evidentemente me aseguro de que esto sigue funcionando exactamente igual no sea que al externalizar los post hubiera cometido algún error y me lo hubiera cargado que eso a veces puede pasar también te lo advierto entonces ahora una vez que tengo esto una vez que externalizado a continuación si tengo una sección quiero hacer pues como estas plataformas de vídeo quiero poner diferentes secciones vale entonces cojo la sección voy a hacer una cosa en aquí voy a poner h 2 digamos últimos estrenos y así cuando habrá acopio copio y pego y pego voy a tener unos cuantos hago así y tengo diferentes luego cambiaremos últimos estrenos por lo que sabes cosas que te pueden interesar series de misterio vete a saber entonces esto parece que está bien parece que esto está preparado para que digamos cada uno de los elementos cada uno de los sliders funciona independientemente pero lo cierto es que no lo cierto es que no porque si yo toco un botón automáticamente se me mueven todos da igual que el botón toque porque automáticamente se me mueven todos entonces vamos a analizar el por qué ocurre esto y vamos a ver cómo podemos solucionarlo tiene solución porque precisamente la solución no es difícil pero sobre todo el reto que tiene este ejercicio es entender por qué está ocurriendo esto no te preocupes porque el código html sea muy extenso evidentemente porque sabemos que esto lo he hecho en plan de copiar y pegar para luego poder pues automatizarlo con javascript con php o con lo que sea pero de momento ahora a continuación lo que me interesa es ir al código ahora trabajaremos por cierto un poquito la cabecera pero ahora el momento lo que me interesa es ir al código vamos a ir aquí al código vamos a guardar el estilo y verás el problema está en que yo he creado una variable de desfase y yo he dicho que cuando pulse el botón anterior sobre el rival le apliqué ss ss pero yo no especificado que ribbon yo no especificado si es un rival o son todos los ritmos entonces qué es lo que hace el programa lo que hace el programa es automáticamente y decir todos los ribbons los tiro para un lado bien entonces en este caso lo que tengo que hacer es que cuando este botón anterior ahora es cuando te voy a explicar el significado de la palabra this cuando pincha el botón anterior no quiero que cualquier ribbon tenga este estilo lo que quiero es que solo el rival que yo te diga solo el rival que pertenezca a este elemento es el que tiene que realizar esa función entonces para ello voy a hacer lo siguiente vamos a voy a dejarme escribir una línea aparte voy a decir dis punto paren paren quiere decir es el elemento paterno sabes el elemento superior vamos a verlo botones a no votar es así seis botones y vale muy bien ahora veis al elemento superior ahora ves otra vez al elemento superior punto parent dentro del elemento superior búscame un elemento llamado rigor punto find ribón y a ese elemento sobre ese elemento a continuación sobre cada uno de esos elementos aunque en este caso hay uno es cuando realmente le voy a aplicar mira casi espera estévez vamos a verlo no sé si va a funcionar moment in déjame formular lo lo pego también aquí vale algo así vale y fíjate que me está funcionando sólo sobre este elemento pero cuidado esto está bien esto está cerca de estar bien pero no está bien todavía porque yo ahora lo que voy a hacer es que cuando pincho aquí fíjate que blanco me va a este elemento o sea no se lo has visto pero para que veas lo que quiero decir voy a llevar a este hasta el final y ahora con uno que mueva aquí me lo lleva también hasta el final porque por una razón muy sencilla porque cada sección eso es hayas llegado a la conclusión y es que cada sección debería tener su desfase pero el problema he creado un único desfase entonces a continuación lo que voy a hacer es aprovechar me de que cada una de las secciones va a tener su propio desfase a continuación voy a decir que el desfase me da un poquito igual porque lo que voy a hacer es lo siguiente bar mi desfase es igual a gris de par en par en punto find it a ver a ver de cero punto y en este caso lo que quiero es sacar quiero sacar la propiedad css left vamos a verlo con solé punto nov miguel fase voy a voltear un momento esto para comprobar si lo he hecho bien o no bien desfases norte fine si lo que ven lo maté o un segundo y no hace nada bien y ahí es el problema atributo tal vez este cero a mi fine vale porque quiero hacer evidentemente que cuando pulsó el botón me quiero ir al ribbon y quiero sacar su atributo left y me dicen de su agenda bien le voy a decir punto beach function y le puedo decir bar mi desfase es igual a cero mi desfase es igual avis punto atributo left y ahora sácame el desfase andy fire css y me dice cero píxeles entonces ahora si está reconociendo ese valor ahora es cuando lo que puedo hacer es el desfase y decirle mi desfase es más igual a 200 claro cuidado porque son cero px el px cuenta o sea esto es una cadena de caracteres para que lo entienda si fuera cero yo podría sumarle 200 pero px es una cadena de caracteres hay comandos en javascript que me permiten eliminar digamos cosas lo permiten eliminar digamos entonces vamos a ver javascript string replace string replace vamos a ver uno que sea sencillito str replace que si vengo por aquí y digo mi desfase es igual a mi desfase place cuando te encuentres px reemplazarlo con nada y entonces ahora con sólo mi desfase le doy y ahora me dice es cero y si ya es un 0 ya lo puedo sumar y ahora vengo aquí y digo mi desfase más igual 200 y creo que este es menos igual 200 ella puedo desbloquear esto si todo va bien ahora hago así cuidado vamos a ver desfase is not y find porque es mi desfase agua sí porque el 200 y no hace falta hago así que fíjate que es independiente de este de aquí ahora funciona correctamente bien ahora cada uno tiene su propio desfase y no se confunden los unos con los otros de la misma forma ahora a continuación puedo hacer lo mismo para el siguiente con la diferencia de que es más igual algo así y fíjate como ahora este suma o él te resta y este resta por aquí y luego suma hola hola hola una vez este funciona varias veces pero ese funciona una vez al error no lo sé error 432 qué curioso vamos a ver qué curioso porque además este de aquí menos 200 no da exacto pues bueno es un poco lo de menos vale pero fíjate una cosa que ocurre mi desfase más igual a 200 vale vayamos obligarlo por uno y el por uno lo que hace es forzar a que sea un número 200 ahora sí vale vamos a probarlo aunque ahora sí vale te explico el truco que acabo de hacer porque sé que acabo de poner menos o sea por x y que ha pasado aquí vale entonces verás ya antes me dado cuenta de una cosa es que fíjate que estos números que aparecen aquí son azules pero antes de poner menos uno antes de poner menos uno fíjate que yo hacía así y el número es el número es negro y algo así y es azul pero si algo así es negro pues lo que ocurre es que para el sistema esto es una cadena de caracteres no es un número es como si fueran letras es un problema conocido de hace muchos años de javascript y esto es un número la cuestión es que aunque sea un string aunque internamente es un string pero fíjate que es un número entonces cuando eso ocurre hay un truco por cierto hay un método legal que se llama to number pero hay un truco que consiste en multiplicarlo por 1 y multiplicarlo por 1 sí o sí lo convierte en un número entonces es un truco sencillo que nos sirve precisamente ahora fíjate que todos los números que salen son de color azul cuando es así bueno qué curioso eso no lo sé eso no lo sé entonces aquí el desfase teóricamente está leyendo vamos a hacer una cosa aclaró claro claro yo interpreto que es que fíjate que en cada uno de estos elementos yo le he puesto un margin creo creo creo creo que debe ser por eso me hago así y poner 200 vamos dejar de verlo y algo así y pone ribbon 200 aguas y ahora pone 400 600 400 200 puntos 0 2 0.02 hay un error si hay un error hay un error parece que es en el redondeo del último número hay una forma de arreglarlo te lo digo porque no es tampoco la primera vez que veo ese error hay una forma de arreglarlo te vas a sorprender de lo cutre que es esto que es partirlo por cien a hacer un punto round de ese objeto partido por cien y luego todo eso todo eso ya y multiplicarlo por 100 o sea se divide por 100 se redondea al siguiente número y luego se devuelve a 100 entonces hago así aguas y generalmente ese truco suele funcionar entonces estamos a vamos a ver replay 6 nota función un momento porque me ha fallado eso cuando yo teóricamente no he tocado mi desfase a problema problema es que el replay es funciona sobre cadenas si yo lo convierto números en ese caso no funciona entonces lo que hago es que más punto este por uno no parto por cielo de ello hago el mar round y ahora todo esto lo multiplicó por cielo esto lo pasó aquí vamos a verlo ahora me es fácil places mucha función a este 100 no sé en qué momento 200 0 – 200 menos 400 ahora sí ahora ya lo empezamos a tener en funcionamiento vale ahora vamos a la siguiente parte donde yo me estoy dejando este este banner libre para que cuando haga clic en un objeto digamos que al hacer clic se cargue la información ahí arriba vamos a ver cómo lo podemos hacer entonces para ello para ello vamos a vamos a ver para ello hacer para ello a continuación en el estilo en el index dentro del eje ver donde suele puesto o la voy a poner a uno y luego y ahora vivo class destacado hoy de destacado en el destacado voy a decirle al sistema que quiero un h1 título accede un subtítulo descripción y aquí arriba la imagen foto barra curso de fe voy a utilizar de momento vale ahí lo tenemos entonces este destacado por ejemplo lo quiero un poco hacia la derecha o sea quiero que esto sea como la parte quería arriba del todo entonces me voy aquí al destacado estilo del destacado de la misma forma ahora luego haré secciones en la parte de arriba todo esto sería estilo del pasa fotos digamos ya vemos lo así es el nombre es lo de menos para luego quemarlos y ahora en el destacado voy a decir que iré destacado por sitio absoluta wish 80% wright 0 píxeles height 100% vale ay madre mía cuánto salvan with 80 píxeles de hecho era 80 por ciento incluso vale ahora destacado ing es papá which 100% para que me ocupe todo allí por cierto en destacado quiero top 0 píxeles para que llegue arriba del todo y voy a hacer una cosa voy a hacer una cosa que consiste en que la imagen va a tener uno para citi de 0.5 eso lo que hace es hacer que las cosas sean semitransparentes como puedes ver y voy a probar una cosa voy a probar una cosa recuerdas que antes es una sombra exterior después voy a probar ahora una cosa que es hacer una sombra interior por cierto destacado height no sé si eran 200 recuerdo 400 personas más overflow sigan a ver a ver me sale mejor una letra giren parece que eran 600 no eran 400 y ahora voy a hacer una cosa box shadow 0 pixeles 0 pixeles 50 pixeles 60 pixeles black in set ese parámetro no lo habíamos visto antes es lo que hace no sé si lo ves ahí se ve poco se ve poco 160 hoy lo que hace es hacer una sombra interna en lugar de hacer una sombra en lugar de hacer una sombra externa fue una sombra interna vale vamos a ver 20 píxeles ok donde está el texto bueno no pasa nada porque el texto está por aquí en alguna parte entonces para ello memoria destacado h 3 coma destacado h4 coma destacado p y lo que hace eso es que posición de momento absoluto y vamos a ver si es cierto que aparecen hola dónde estáis top 0px él es ahí aparece descripción ahora vemos dónde están los demás en trabajo a h1 h2 no quería que fueran h1 h2 por cierto porque el nuevo h1 h2 y h3 vamos a hacer que sea h2 y h3 vale ya y de momento los tengo bien ahora lo que quiero otra de esas cosas que solo puedo conseguir con javascript es que el título sea usa cuando yo hago clic quiero que lo que yo haya hecho clic suba allá arriba o por lo menos vaya cargando o lo que sea o también lo que voy a hacer es que cuando yo haya hecho clic por ejemplo se abra una nueva ventana y aparezca la información de lo que yo he seleccionado pero pero lo quiero con javascript es decir para mí sería muy sencillo que al hacer clic se abriera una nueva ventana con un híper enlace con una etiqueta y me fuera a otra página pero eso no mola eso es muy html yo quiero algo que mole yo quiero algo rollo javascript yo quiero algo que cuando haga clic derrepente aquí en el medio haga luz y se abra algo con una animación y aparezca la información entonces yo a continuación lo que voy a hacer es lo siguiente me voy a index y en cada una de las secciones en cada una de las secciones a ver bueno a continuación de cada una de las secciones voy a hacer un a ver cómo lo voy a llamar dime las detalles de momento voy a crear uno de los detalles para verás porque como estos son los detalles guardo y fíjate qué cara pone estos son los detalles voy a estilizar un poco como si sus detalles fueran una caja digamos como hemos hecho antes in set entonces para eso lo que hago es que estilo de los detalles en los detalles detalles guys 100% height de momento 400 píxeles para probar background rgb 20 20 20 el de antes era 40 los cincuenta y cincuenta y cincuenta cincuenta más voy a poner 80 80 80 para esto ponerle cuarenta y cuarenta 40 la verás por qué y esto es porque quiero ponerle un boxeador pero píxeles 30 píxeles 30 píxeles 0 píxeles black in set y esto lo que va a hacer es que los detalles no sé si los ves ahí pero sea como una caja metida adentro vale pero te digo más y lo que te voy a decir es que esto fíjate lo que voy a hacer parece que lo voy a matar hi 00 píxeles vale ya está allí frito overflow hidden eso quiere decir que lo que sobresalga se minimiza por cierto déjame hacer una cosa también pero píxeles martín 0 píxeles y ahora a continuación me voy a javascript y en javascript le voy a decir qué cuando sobre un artículo haga clic era igual de momento que artículo a los detalles pero a qué detalles pues ahora hablemos de ello de momento al único que hay le quiero aplicar un css donde perdón donde el height sera 400 píxeles por cierto qué le tengo que decir a esto transition un segundo ya sabes para que haga la animación sula si yo hago esto guardo y cuando hago clic en un elemento fíjate que se abre ese elemento se abre con animación y si yo por ejemplo a continuación hago clic en otra parte por ejemplo sobre el fondo hago clic manoseo ahora veremos sobre donde pues lo queréis cerrar los detalles vamos a ver eso cuando sobre igual me va a funcionar bien esto cuando sobre el body haga clic voy a hacer una cosa voy a hacer una cosa en estilo voy a crear un estilo abierto height 400 píxeles y voy a decir a detalles primero remezclas abierto y luego detalles a las abierto va a ser un poco confuso claro porque se le quita y se le pone allí los errores por cierto cuidado nada a clases me formé falta una s la ley hará algo así y no se nota no se nota porque voy a hacer una cosa que es establecer un time out un time out es cuando en javascript se está out no quieres que algo se haga hasta algún determinado tiempo entonces lo meto en un time out y eso lo que hace es que hago así ahora poner los detalles y ahora si cojo otro lo que hace es que cierra no vuelve a abrir es como que lo cierra con unos detalles y lo vuelve a ver con otros de hecho lo puedo dejar segundo y medio digamos algo así se abre aguas y se cierra y luego se abre pero ahora quiero evidentemente lo mismo para cada uno de ellos pero problema cada uno de ellos debería tener su bandeja de detalles no estar compartiendo la misma bandeja de detalles vale no pasa nada porque al a continuación vamos a trabajar sobre eso pero antes de ello quiero una cosa y es que en los detalles claro si yo ahora hago clic y se me carga el curso de cee no tiene ningún valor porque todos son iguales entonces voy a meter tres o cuatro diferentes para asegurarme de que cuando haga clic en me carga los detalles correspondientes vale pues vamos a por ello vamos a la html voy a tocar ahora algo sencillo espera que no he copiado muy bien me voy a proyecto web me voy a foto cargo estos me voy atrás me voy a la app me voy a foto los pego para reemplazar vale foto dyn foto que más rollo me das qué está pasando aquí foto vale dejar una cosa voy a cerrar ese archivo y lo voy a volver a abrir para que el sistema se dé cuenta de ahora sí es el clásico salí de entrar entonces no menos de cuerpos ya lo tenía ahora curso a ser más más lo dejaba curso de linux como sabe que no puede ver un curso de wordpress el curso de marketing digital y ahora lo que voy a hacer es que copio este ribbon copió el section de hecho el sexo está y lo pegó 1 2 3 y 4 veces de esa forma comprobamos como ahora pues digamos como diferentes elementos y ahora se hago así ahora lo que quiero es comprobar que según el que pues aparecerán los detalles del correcto para ello lo que voy a hacer ahora es copiar y pegar voy a copiar y pegar del destacado he pasado creo aquí detalles algo así y ahora lo que voy a hacer es decirle al sistema que fíjate que me ha cargado el df porque es el que he puesto a ella a palo seko voy a estilizar un poquito antes de nada que se vea por lo menos los textos ahora verás una cosa muy divertido ah vale donde están los títulos igual se me han ido abajo y ahí están esto es detalles entonces en estilo estilo de los detalles detalles h 2 creo que no coma detalles h 3 detalles p por sitio absoluta posición relativa abrimos uno dónde están los títulos es tan bajo es tan bajo y top 0 píxeles abrimos bien ahí están los elementos fíjate de que pone título no sé qué le voy a hacer lo siguiente detalles h 2 20 píxeles left 20 píxeles detalles h 3 top 50 píxeles me la acabo de inventar y detalles p top 80 píxeles detalles img weeks 100% yo para frikis 0.5 vale entonces cojo uno de los elementos tenemos título subtítulo de descripción pero yo lo que quiero ahora yo lo que quiero ahora es que en el momento en el que yo haga clic aquí yo lo que quiero es que me cargue esa imagen y quiero que me cargue ese título y quiero que me cargue ese subtítulo es decir quiero que al hacer clic me transporté la información aquí abajo para hacer eso por tanto voy a hacer lo siguiente voy a javascript y en javascript voy a decir que cuando sobre un artículo haga clic esto ya lo tengo lo que quiero es hacer lo siguiente bar título es igual a algo si vale título es igual cuando yo hago clic en un artículo en estas cuando hago clic en un artículo fíjate que el artículo tiene un h 3 entonces esto es dice en este punto find me encuentras él el título según la nada despuntó fine h 3 y para cada uno que te encuentras aunque solo te debes encontrar uno pero bueno función título es igual a dis punto texto el título es el título que te encuentres ahí dentro de la misma forma como te puedes imaginar subtítulo subtítulo es el h 4 y descripción es encuentra el p ahora que teóricamente los he encontrado es cuando voy a aplicarlos y ahora digo sobre detalles punto fine sabes que puedo hacerlo directamente detalles h no me acuerdo detalles h2 h3 detalles h 2 punto text es igual a título detalles h 3 es el subtítulo detalles p detalles p es igual a la descripción vale ya continuación y a continuación vamos a verlo ya continuación la imagen vale bar imagen es encuéntrame el ing y es su atributo src entonces detalles img src no su atributo srf es imagen si todo esto ha ido bien y no da ningún error que ya me extrañaría que no diera error quiero decir si hago así como por ejemplo linux y un segundo y pico después fíjate que me ha cargado el pingüino de linux y me dice curso de linux si yo cojo java de hecho ahí me ha cambiado ya me carga la tacita de java y me pone el curso de java todo esto todo esto si quieres ves que hago clic y cambia automáticamente se nota el truco vale para que no se note el truco lo que puedo hacer es cogerlo y meterlo todo y meterlo todo dentro del time out dentro del time out que si te acuerdas es aquello que ocurría dentro de un segundo y medio entonces ahora hago así vamos a verlo entonces ahora algo así se me abre vale a ver momento séptimo artículo servidores con linux y recogido nada vale qué raro qué imagen y el h2 no lo encuentra claro claro claro es que el llamado avis pero dices lo he metido dentro de un time out vale no pasa nada no pasa nada porque puedo cargar esto pero solo decirle que lo aplique esa carga loya pero aplícalo dentro de un segundo y medio vamos a verlo pico se aplica y ahora con joel de linux se cierra lo ha cogido ya y para cuando se abre ahí tenemos el de linux hay por ejemplo tenemos ya sea tú fíjate que en este caso insisto sí puedo hacer así y ahora que lo veo de wordpress y se me carga el de wordpress date cuenta que toda la interactividad que estamos haciendo hoy la estamos haciendo con javascript date cuenta que este proyecto sin javascript no sería nada o sea esto mismo con html sería que cada vez que hiciera clic se me cargaría una página nueva y tendría que meterlo todo en bueno tendría que hacer tantas páginas como proyectos bueno una movida imagínate con javascript esto nos da una experiencia mucho más fluida y de hecho yo ahora mismo por ejemplo puedo hacerlo más fluido con unos pocos pasos más por cierto que ya sé que me vas a decir que hay que tener cuidado en este caso porque como te diría yo tengo un destacado pero si yo hago clic se me debe abrir en el destacado debajo no en el destacado de arriba lo mismo de antes te acuerdas ya que que tengo que hacerlo independiente pues no pasa nada tranquilo porque me acuerdo de ellos no lo vamos a dejar nos vamos a acabar la clase de hoy sin que eso esté hecho vale pero para que veas que las cosas poco a poco van saliendo bien antes de eso quería decir antes de eso por ejemplo yo tengo aquí un resumen de la serie que voy a ver pero yo a continuación cree ver los capítulos ayer como vale más información pues yo puedo venir por aquí puedo venir aquí puedo venir voy a hacer un poco de trampa si me lo permites es que si te enseñamos a la trampa y aquí en el detalles voy a poner un button más info más información en vena más formación pero me sale un botón horrible por decir algo y claro más info me sale un botón horrible palabras a ver hay links y así está abajo del todo y eso es porque en css le tengo que decir detalles button detalles button voy a decir botón 20 píxeles por ejemplo y detalles botón vale y voy a hacer una cosa voy a decirle height 400 píxeles para que no tenga que tragarme la animación de entrada madrid madrid 6 [Música] pero a quién le he puesto yo en qué momento botón 20 píxeles left pero esto qué desmadre es o sea es como que es verdad a 200 píxeles sí pero no pero no sé por qué se comporta así pero mira lo voy a hacer y ya está vale pues lo que quiero que veas es que es un botón horrible es un botón feísimo entonces lo que quiero que veas es que en internet hay muchos recursos donde puedes usar estamos creando nuestro css desde cero hay uno que es da button factory y cuando digo da este botón factory que lo que hace es lo siguiente hago así hay whatsapp en sí pero quitamos sí pero no ahora ya ha sido adquirido ha sido adquirido y además si además antes había como una galería de botones no da igual no en vevo y vamos a ver vale y le digo esto en el es copio ese código y aquí donde pone de talleres button lo pego y ahora fíjate que al hacer así pues me queda un botón más bonito vale por cierto le voy a poner border pero pixels vale y ahora lo que quiero es que cuando pulse el botón de más información pues esto se habrá más todavía para darme más información pues ahora vengo al código y digo cuando sobre más info haga clic quiero crear una función mediante la cual a detalles le aplique una clase le aplique una clase abierto muy abierto que sea height 800 píxeles ‘la clase’ muy abierto entonces esto lo que hace es quedar así en el estilo voy a decir cero píxeles cargo una imagen le doy más información y se me abren más detalles todavía entonces ahora lo que hago es que cuando haga así cargará esa clase no se la he quitado vamos a actualizar el código cuando sobre arte que haga clic quítame abierto y muy abierto es decir es decir aguas y y se abre y ahora cojo otro y se cierra pero si yo hago más información y hago así también se cierra y se me abre el siguiente y ahora es cuando quiero resolver lo de que haya diferentes secciones a la verdad en primer lugar dentro de invex a continuación lo que voy a hacer vamos a verlo estás estas aquí en detalles detalles en tres secciones sección [Música] / sección y sección en perfección y disección pero hay un problema y es que señora guarda y recargo cuando hago así se me abren todas las secciones no es entonces claro yo en este caso lo que quiero hacer es decirle que cuando esto ocurra no quiero que me abra todas las secciones es decir no quiero vamos a ver arctic el detalles vale no quiero que me abra sí decía que lo que no quiero es que cuando haga clic sobre arte y que él me actúe sobre todos los detalles fíjate que lo que está haciendo es actuar me sobre todos los detalles que haya en un momento dado en cualquier parte yo lo que quiero es decirle que sólo me actúe sobre los detalles que haya a continuación hay una forma de hacerlo que es la siguiente y es que si yo estoy aquí en el arctic el momento yo estoy aquí hay una hay un selector que es villa melo capilla me el que venga a continuación entonces para eso arctic el parent parent vamos a verlo vamos a verlo voy a parent parent y a continuación cojo next jquery qué es este hay que escoger el siguiente francés punto texto lo mismo lo mismo hago para aquí esto me lo voy a dejar un momento y lo que hago es muy abierto no haz class estés aquí paren paren del par ente está dentro del set time out es peligroso a ver qué pasa vamos a probarlo como mucho dará un error vamos a ver pincho el error en la línea 40 interesante muy bien es visto punto parent punto next de hecho juraría que había dos parents punto y lo mismo aquí vamos a verlo recargamos toco una de estas de momento no sé nada vale voy a expresión ar sección detalles para entrar en next voy a buscar y no se le ha aplicado a nadie a las clases que esto me ha parecido que se le aplicaba pensar una cosa voy a poner un momento aquí ahora sí ahora sí pero más vale fíjate que se ha abierto se ha abierto solo el de esa casilla correspondiente si ahora toco aquí se abre sólo el que le toca si yo abro aquí se abre sólo el que le toca o sea de momento lo está haciendo correctamente el problema está el problema está vamos a ver en que como esto deriva de dis no puedo meterlo dentro de un time out hay una cosa que puedo hacer y es que el ritmo class tiene creo mezclas no tiene un fullback deja de pensar como lo podemos hacer porque necesito el dis bueno a ver creo que hay un truco es el siguiente bar este es igual a vis y entonces vengo aquí y digo este 3 es una forma de el dis y meterlo creo que esto puede funcionar algo así así mira y funciona y además ahora algo así me lo esconde y funciona y ahora hago así y funciona en el siguiente cuidado cuidado claro claro me carga en todo es el mismo porque pues porque aquí lo que estoy haciendo vamos a ver es que aquí en este día claro tendría que vamos a ver bis h3 y este this detalles vamos a ver sabes lo que te digo lo que es esto y lo está aplicando al detalle h2 pero aquí el detalle jce h2a cualquier detalles h2 y yo no quiero decirle cualquier detalles h2 yo lo que quiero hacer es que dentro de éste es detalles y dentro de este h 2 voy a hacer una cosa déjame buscar una cosa jquery find a ver si me permite trabajar sin hacer un ford edge for its me da un poquito de find punto vale a ver si me dejan pero punto find busco el h2 y le pongo el texto esto es el h3 esto es el pp y esto es el ing y si todo va bien si esto ha ido bien le doy no ha ido bien porque fíjate que no me está cogiendo el correcto vale al parecer en next a clase o sea el clas vamos a verlo no paren paren next to find h 2 texto es dentro de detalles busca el h2 o me he dejado algo o me he dejado algo también puede ser no no debería ser directamente ahí de las calles abierto y esto va a funcionar esto no va a funcionar porque tiene el dis lo tengo que poner con este de la misma forma que no ha funcionado el otro tampoco va a funcionar este vale vamos a verlo ahora sí y ahora ahora vemos como sí que funciona correctamente en cada una de las iteraciones valera evidentemente lo que quedaría es utilizar un poquito y tal pero ya vamos teniendo esto por aquí vale ya vamos viendo cómo se aplica en cada uno de los destacados y fíjate qué hará cada uno de los destacados tiene su propio aparte podemos hacer esto al cuidado con él más información no ocurre lo mismo no no no y es que ocurre lo mismo que antes y es que pues al pulsar más información trabaja más información sobre detalles entonces en este caso lo que tengo que hacer es que no lo aplique vamos a ver no lo aplique a esto sino que lo aplique al resto haz clases muy abierto vamos a verlo habrá uno por aquí habrá otro por allá pero ya más información vamos a ver dónde está más información claro detalles más información es no tiene el class abierto vale pues es al parent tal cual el parents of class hacemos así hacemos así y ahora hacemos y vemos como de hecho al hacer así se cierra ese se abre ese y al hacer así sólo afecta a uno solo afecta al que toca dicho lo cual ya tenemos este ejercicio bastante avanzado fíjate que es pues eso como una como una web de contenido que si el que lo sirve tipo o netflix tipo menú en la televisión y toda la interactividad de hecho por cierto no sé si de hecho al principio de la clase pero en la interactividad de netflix está hecha en javascript porque antes de ser una app de móvil o de ser lo que sea y va directamente vía web a ver momento antes de terminar lo que quiero es hacer una serie de comentarios sobre el código para ayudar en su lectura y esto es cuando el documento esté preparado y yo ahora lo que hago es cuando pase el ratón por encima del artículo quiero que se haga grande cuándo para ser el ratón fuera del artículo quiero que haga pequeño de vuelta vale a ver esto qué es esto es cuando haga clic en el botón anterior quiero que la tira actual avance una casilla cuando hagas clic el botón posterior quiero que la tira actual retroceda una casilla esto en el montón de código esto es cuando sobre un artículo haga clic lo que hará es a los detalles les quita la clase abierto dentro de un segundo y medio carga las nuevas características y cógeme los datos de título texto etc del artículo en el cual he hecho clic es un poco tenemos un código que contiene comentarios para saber qué es lo que hace en cada momento y cuándo haga clic en el botón de más información en ese caso haz el bloque más grande todavía vale entonces dicho esto una vez que tenemos esto entre otros meses por ejemplo por cierto hablaremos de ajax que es la tecnología que ya verás que es muy interesante es cuando a continuación vamos a hablar de eso que te comentaba que son los aspectos psicológicos de la programación entonces yo he hecho esto y lo he hecho esto con bastante soltura porque llevo años trabajando con esas tecnologías pero algo que ocurre en html y que también ocurre en css y qué ocurre más todavía en javascript es que cuando un alumno se mete a trabajar de repente tiene como agobio hay varios tipos de agobio tienen nombre de hecho hasta cada uno de los tipos de agobio tiene nombre hay un agobio que es el agobio de la hoja en blanco el agobio del ajo en blanco está en hoja en blanco y filiar a por dónde empiezo yo entonces yo te voy a plantear una cosa y esto insisto es como una especie como te diría yo de apoyo psicológico para que en un momento dado no te exijas a ti mismo más de la cuenta por que exigirte a ti mismo más de la cuenta puede derivar en frustración y la frustración al menos demasiada frustración no te va a ayudar a avanzar un poquito de frustración te pica pero demasiada frustración te deprime y no es cuestión entonces nadie aprende a correr sin antes haber aprendido a caminar y sin antes haber aprendido a gatear esto quiere decir que en programación por mucho que yo oí evidentemente para que la sesión cunda pues he hecho bastantes cosas en programación desde cero intentar hacer todo este bloque desde el principio es garantía de fracaso entonces yo lo que es como el lugar de garantía de éxito pues claro es garantía de fracaso yo lo que suelo hacer es decir mira si quieres hacer un ejercicio así empieza con algo mucho más sencillo empieza con un index e.html y crea un artículo y asegúrate que sobre ese un artículo puedes poner una imagen y un h 3 y un 7 4 y 1 y un texto y una vez hayas hecho un artículo a continuación estilizar ese artículo y no trabajas en la pantalla con nada más que no sea un artículo y sólo cuando digas vale este artículo ya lo tengo dominado es cuando copias un segundo artículo y entonces vamos a ver qué pasa el trabajo con dos y entonces intentas hacer algo como por ejemplo lo del botón algo como ejemplo del botón que era te acuerdas no sé te acuerdas que no tienes grabado en los vídeos lo que he hecho y al principio de que cuando pulso un botón en la consola sale hola pues ese tiene que ser tu objetivo inicial cuando pulse un botón en la consola sale hola y hasta que la consola no te salga hola no continúes haciendo nada más vale lo que te quiero decir es ves paso a paso ves poco a poco ya no teme está expresión porque nadie te está metiendo presión entonces luego también te voy a decir que cada persona tiene una forma de ser entonces hace dos años a este curso lectivo que hemos pasado no el curso lectivo anterior y tenía un grupo de alumnos entonces tenía me encontré una cosa muy curiosa no me la esperaba tenían el mismo grupo de varios alumnos tenía dos alumnos que por cierto se llama muy bien entre ellos entre todos entre estos dos que te voy a decir entonces había uno que para empezar ya venía con formación de base y entonces iba muy sobrado iba muy bien tenía muy buen nivel y el río participaba en la clase de forma muy positiva y tenía un compañero que era muy negado pero muy negro pero el tío lo sabía es de estas personas que saben que son negadas y no pasa nada sabes entonces él me decía yo voy a un ritmo muy lento y yo le decía tú tranquilo no pasa nada pasa un ritmo muy lento ya está lo que nos pille es en la clase lo pillaran en casa porque era una clase como esta donde yo grabo los vídeos entonces el tío lo que tenía es que estaba acostumbrado a no entender las cosas y estaba acostumbrado a que bueno no lo entiendo hoy pero con esfuerzo lo voy a entender no llegaba tan lejos como nuestros compañeros pero el tío sabía cuál eran sus limitaciones dejamos por llamarlo así y lo que hacía es que había aprendido a sortear sus limitaciones exacto exactamente eso suplía falta de rapidez con esfuerzo y por tanto al final le funcionaba y le funcionaba muy bien tenía este compañero que trabajaba muy bien o sea es que las personas que no son los que tenían formación de base sino que además un tío que mentalmente inteligente mentalmente rápido le planteas un problema te una solución con lo cual destructivo mueve la cabeza hasta que un día llegamos a un problema en el que él no encontraba una solución en un problema complicado te lo voy a decir era un problema del que yo estaba en clase y dije pues mira ahora dependemos de ocurre una solución y él dijo tranquilo que a mí se va a ocurrir y se puso y de no encontrar la solución se puso el nerviosísimo porque no estaba acostumbrado a fallar ya no estaba acostumbrado a no funcionar y le dije que se cálmate no pasa nada o sea no has encontrado la solución no pasa nada pues mañana la encontrarás y el tío ya se fue de fin de semana buscando la solución al problema y vino el lunes más amargado todavía porque no había encontrado la solución entonces era una solución haber en una solución a un problema complejo que se llama triangulación voronoi ya no te creas que era un problema sencillo es voronoi o de lone el boro no se monta encima de drones dado una serie de puntos es averiguar la arista mínima o sea que parece un problema sencillo pero te puedo asegurar que no lo es pero el tío viene el lunes ya el tío vino frustrado pero por qué porque no estaba acostumbrado a fallar entonces por eso te digo que los aspectos psicológicos de la programación a veces son más importantes de lo que parece porque en programación es importante la gestión de la frustración curiosamente en este caso que te estoy encontrando para este grupo que te estoy contando el alumno que rendía menos pero no ya por programación sino por cualquier cuestión de su vida se había acostumbrado a gestionar su propia frustra de frustración y aparcar la allá vencerla en ese problema concreto en la vida ya no sé decirte vale pero en ese problema concreto digamos se había amargado mucho menos que su compañero al entonces esto es por lo que en programación hay que pues muchas veces ir paso a paso no intentar correr más de la cuenta la programación escúchame lo que te digo es más una carrera de fondo que una carrera de velocidad o sea no intentes correr porque javascript no se va a ir tú tranquilo no lo vas a perder o sea no va a desaparecer aquí lo que tienes tiempo de sobra vale entonces dicho esto dicho esto a continuación te digo el siguiente aspecto psicológico relacionado con la programa el siguiente aspecto psicológico es que somos personas humanas y no somos máquinas lo cual quiere decir que cada persona tiene su manera de funcionar tiene su ritmo y yo no te puedo decir a ti cuál es el tuyo tú tienes que saberlo entonces hay personas que lo que dicen yo ahora a continuación evidentemente te voy a proporcionar la copia de estos archivos para que tú los tengas disponibles y puedas trabajar con ellos entonces hay personas a las cuales les digo no te diré el código es broma evidentemente o sasha yo siempre doy el código a los alumnos vale pero les digo no no mires el código trabaja desde cero lo que te decía al síndrome de la hoja en blanco entonces alumnos se mueren porque dice mira no sé cómo empezar no sé por dónde empezar vale y hay otros alumnos que te dicen no no no me des tu código quiero hacerlo yo desde cero y si yo fallo ya mira de tu código no me digas toma mi código y empieza desde aquí porque me estás cortando mi libertad que lo que quiero es empezar de una hoja en blanco pues lo que te he puesto estos dos ejemplos para que para que veas que tampoco las personas somos blanco o negro hay infinidad de tonos de grises pero te ponemos de ejemplo para decirte que yo lo que suelo hacer es proponer múltiples metodologías pero al final tú tienes que buscar cuál es la metodología que más te convenga teniendo en cuenta que yo te voy a poner el código a tu disposición tú tienes que saber o tienes que averiguar cómo funciona tú y tienes que saber si lo que prefieres es empezar de una hoja en blanco e ir mirando con los vídeos o mirarte un taco de vídeos y luego probar tu solo sin mirar los vídeos o mi código y modificarlo porque modificando el código de otras personas también se aprende es una forma muy buena de funcionar es decir y me da igual qué metodología uses pero tienes que buscar la metodología que mejor se adapte a tu forma de aprendizaje a tus características de aprendizaje y al final todos los caminos llevan a roma es decir al final me da igual como aprendas siempre que aprendas es decir yo no te voy a venir el próximo día o el siguiente evento de unas cuantas semanas y te voy a decir o haces o trampa porque empezaste desde mi archivo cuando tenías que haber empezado desde una hoja en blanco me da igual es decir yo de cara a programar he empezado de muchas formas diferentes no te digo que empezaron las formas diferentes es que en un momento dado he empezado en muchos lenguajes de programación diferentes pues en algunos lenguajes de programación directamente sobre todo cuando tenía más prisa he empezado copiando y pegando el código de otras personas y modificando lo sé cuando tenía prisa por aprender algo y ha dicho mira no estoy para tonterías ya quiero copiar y pegar código otra persona modificarlo y así porque yo sé que así funciona bien entenderlo y ha habido veces que tenía más tiempo he dicho no quiero empezar de una hoja en blanco y quiero ir pasito a pasito haciéndolo todo desde cero porque por ejemplo hay lenguajes en los que sí es copias el código de una persona funciona pero claro dices sí pero como como no copie código y lo haga yo va a fallar y no quiero fallar y lo quiero aprender bien porque por lo que sea lo quería aprender bien pero hay otras veces que no es necesito aprender un lenguaje para hacer algo muy importante con ello sino simplemente para resolver un problema muy concreto de un cliente voy a aprender todo el lenguaje para para resolver un problema muy concreto lo que es copiar y pegar modificar algo funciona pues sí pues ya estamos acabo sabes entonces por eso digo que al final da igual la forma en la que aprendas único que importa es que aprendas vale lo digo porque le digo todo esto te estrechando este sermón por una razón muy sencilla y es que ahora viene ese peligroso momento en el que tú te pones a practicar por ejemplo ahora a continuación vengo a y digo mira para la semana que viene intenta hacer esto o sea coge esto intenta hacerlo tú y ese momento es muy peligroso porque es un momento que puede dar rienda suelta a la frustración vale entonces cuando eso ocurra tú simplemente estate tranquilo más tranquilo quiere decir que la frustración en programación es totalmente normal yo aparte suelo aplicar otra técnica es una técnica peligrosa que es la técnica del correo nevera y a dormir es la técnica de correo nevera ya dormir quiere decir que un problema no me sale hay veces que algunos los problemas que has visto que hoy resuelto así al vuelo pero lo es resuelto al vuelo como por ejemplo el problema de éste pues lo resulta bueno simplemente porque me ha salido anteriormente y me acordaba de la solución de alguna u otra vez que me ha ocurrido pero estoy igual la primera vez que me ocurrió me utilizó una tarde para averiguar lo que pasaba entonces cuando eso ocurre cuando tienes un problema muy grande y te caes en ese problema a veces cuanto más te ofreces es peor cuanto más te cuanto más ves en el árbol menos ves el bosque entonces yo tengo la que la técnica desgraciadamente de correo nevera dormir prestaciones de correo navegador mini quiere decir que salte del problema mira tu correo electrónico como que dice mira tu correo electrónico que definir aguas admira las noticias mira cualquier cosa y eso lo que hace es que despeja tu mente vale y cuando cuando vuelves al problema lo ves con un poquito más de claridad la siguiente técnica es nevera nevera quiere decir que físicamente te levantas del sitio donde estás trabajando te desplazas hasta la nevera eso hace que andas la sangre circula y todo esto quieres que no al comer algo en el estómago se pone en funcionamiento es como el correo electrónico para un nivel superior vale yo te debo decir que he abusado de esta técnica demasiado por lo cual tengo en torno a unos 15 kilos de sobrepeso o sea que ten cuidado con la técnica nevera vale o si lo haces coge productos sanos y tal y luego y luego también está la técnica cama a dormir es decir si nada de esto funciona tú tranquilo porque lo que no salga hoy saldrá mañana y además te voy a contar una cosa que vas a creer que soy de algo así como una secta o algo así pero te pongo la página de la wikipedia para que veas que esto no es una movida que me inventado yo entonces si buscas ondas alfa eso vale pues algo exacto pues las ondas alfa e insisto lo digo mirarlo en la wikipedia que lo diga yo o sea que no esté con una movida sino mira lo mismo y lo verás los seres humanos generalmente en nuestro día a día funcionamos con ondas beta las ondas beta es lo que estás leyendo ahí es el rango más alto de la frecuencia entonces las ondas beta nos permiten a los seres humanos estar pendientes de muchas cosas a la vez pero concentrarnos en ninguna de esas cosas en las ondas beta evolutivamente nos han venido muy bien para sobrevivir porque nos han permitido digamos como teoría yo vale el homínido en la jungla le permite estar atento a muchos peligros a la vez y por tanto que no se te coma el depredador más grande vale para para que me entiendas las ondas alfa funcionan a un nivel más bajo y por tanto nos permiten pensar en menos cosas a la vez pero concentrarnos en esas cosas menos cosas de camino al sueño es decir cuando te acuestas primero funcionan las ondas en unas beta luego funciona se mueve en unas alfa y luego entras en delta y en zeta entonces siempre hay un momento que llaman el momento de la creatividad en el que cuando te vas a dormir justo en ese momento encuentras las soluciones a aquellos problemas que no habías encontrado mientras estabas despierto pero cuidado no te descuides porque a veces te puedes dormir y probablemente se te va a olvidar la solución para otras movidas que esto nos pasa a todos de hecho el momento antes de dormir se asocia con la creatividad de un profesor en la universidad que me decía que las tres ces de la creatividad son cámara coche y cuarto de baño que son esos momentos en los cuales puestos ondas cerebrales bajan porque estás estás fuera de peligro es una actividad que realiza constantemente y por tanto estás me estás digamos más atento a una tarea concreta entonces con esto lo que te quiero decir es que cuando te digo vete a la cama lo que te quiero decir y esto pasa muchas veces es que ese problema que estaba todo el día todo el día todo el día que no sea la solución que no sale hay veces que te vas a dormir bien te dices si la solución era esta vale y con suerte con suerte te acuerdas y al día siguiente pues lo aplicas y ya está vale es como cuando te dejas un proyecto calculando de proyectos que hay veces que requieren cálculo de nador y de repente cuando estás a punto de dormir te dices ostras active tal parámetro la respuesta siempre es no es decir si te lo preguntas antes de dormirte es que no lo activas te o sea nunca ocurre que te levantas por la mañana y se examina flipo sí que lo active no si te si te asalta la duda mejor levántate porque es tiene es que no lo activas te haces lo que te quiero decir insisto que referencia a la wikipedia para que tú mismo en busques información sobre esto lo que te quiero decir es que cuando te digo que el tercer paso es a la cama lo que te quiero decir es que desde el punto de vista de la búsqueda de soluciones la cama hace más que simplemente dormir y descansar sino a veces hace que el cerebro se pone en una posición tal que te ayuda un poquito a buscar mejores soluciones vale dicho esto dicho esto que conminó a que para la semana que viene intentes hacer este ejercicio donde evidentemente la gracia sería no que hagas exactamente lo que yo he hecho sino que lo hagas a tu modo a tu rollo tanto en cuanto a html css como a javascript y una vez que te hago ese encargo de la misma forma también te digo tómatelo con calma ves poco a poco no corras porque en programación correr es peor vale ok entendido

la clase de hoy es una clase un poco extraña porque en principio parece que vayamos a dar un paso atrás y de hecho incluso probablemente es cierto que vamos a dar un paso atrás y es que he llegado un momento cuando ya tenemos una aplicación o va a ser el curso de java es el curso de aplicaciones web cuando ya tenemos una aplicación ya sea de escritorio ya sea web realmente independientemente del lenguaje de programación con el que sea es cuando necesitamos que todo este contenido que he puesto estático es decir este contenido que he puesto de mentira digamos pues ese contenido salga de algún contenedor de información que sea real por eso llegado un momento es imprescindible empezar a trabajar con algo que se llaman las bases de datos si abro freeman dentro del proceso de desarrollo de una aplicación hemos empezado con lo clásico que es html css javascript en el caso de una aplicación web y ahora teóricamente por orden y no habría mucho problema en hacerlo así protésica mente por orden habría que continuar con php y con una base de datos que en este caso sería mysql entonces lo que ocurre lo que ocurre en este caso es que si yo empiezo con php que sería un camino perfectamente viable yo lo que tendría que hacer llegar un momento sería interrumpir php no ya para mostrar como php se conecta a una base de datos serón para mostrar cómo funciona internamente por dentro una base de datos y luego volveríamos a php entonces en este caso lo que prefiero es directamente empezar con mysql centrar nuestra importancia en mysql y a partir de aquí una vez que hayamos aprendido a trabajar con una base de datos es cuando ya saltamos a un lenguaje del servidor que entre otras cosas hace conexiones a bases de datos pero hace evidentemente muchas cosas más dicho esto las bases de datos con respecto por ejemplo alguna sesión anterior como por ejemplo justo la anterior no son particularmente difíciles es decir la sesión anterior probablemente fue un poco heavy metal la clase de hoy no va a ser desde ese punto de vista tan difícil pero va a ser una clase probablemente muy poco atractiva la clase anterior la clase anterior era una clase muy atractiva visualmente porque todo lo que íbamos haciendo evidentemente tenía su forma visual todo lo que íbamos haciendo tenía su representación en pantalla y por tanto es una forma muy guay de aprender a programar porque así todo lo que vas haciendo vas viendo que tiene una función por ejemplo cuando yo no sólo desde el punto de vista visual sino funcional pinchaba este botón pues iba viendo como los cuadros iban pasando entonces es una forma muy gratificante de empezar a trabajar las bases de datos como verdaderas visualmente no son nada gratificantes pero y de hecho te voy a decir algo que durante años he dicho a los alumnos que he formado en el ámbito concreto de los videojuegos ya que durante unos cuantos años bastantes como diez más o menos he estado trabajando en formación entre otras cosas pero en el mundo de los videojuegos pues los de los alumnos de videojuegos que son de los más visuales que tengo siempre se resisten al uso de trabajo con bases de datos pero yo siempre digo detrás de cualquier aplicación detrás de cualquier web detrás de cualquier cosa detrás de cualquier videojuego hay una base de datos alguien tiene que crear a alguien tiene que gestionar alguien tiene que mantener esa base de datos entonces las bases de datos pueden no ser nada visuales no no son nada bonitas gráficamente digamos pero eso lo que hace al final es que hay menos programadores que se dedican a trabajar con bases de datos porque los programadores se suelen dedicar a todo aquello que es más visual se pueden elegir se dedican a aquello que es más bonito y eso que hace pues es lo que hace es que a nivel laboral hay un hueco y ese hueco quiere decir que el mercado necesita personas que manejen bases de datos pero no hay tantas personas formadas en trabajar con bases de datos porque han elegido o mejor dicho no han elegido especializarse en esa tarea y es por eso parece que te esté vendiendo lo del tema de bases de datos y de hecho otros dependiendo porque lo que te estoy diciendo es que con las bases de datos vale la pena tener esa paciencia porque luego esa paciencia tiene compensa entonces en primer lugar lo que nos hace falta es instalar en nuestro ordenador un servidor de bases de datos vamos a trabajar con eso tengamos en cuenta un concepto que no suelo comentar mucho porque probablemente este es un buen momento para comentarlo y es que yo lo que estoy haciendo es desarrollar una serie de aplicaciones en local el local quiere decir que la estoy desarrollando en este equipo pero las aplicaciones evidentemente en un momento dado si son aplicaciones en la nube las migrar hemos a la nube eso quiere decir que cuando lo hagamos probablemente en esa nube que de hecho más adelante definir exactamente qué es eso de la nube pero en la nube ya habrá instalado un servidor de bases de datos en mysql o en cualquier otra tecnología porque el proveedor de servicios que contratemos para ese fin ya nos habrá provisto ese servidor arrancado y preparado pero cuando nosotros estamos desarrollando en nuestro equipo que es ahora mismo el caso lo primero que tenemos que hacer es crear una base de datos en local eso quiere decir que nos hacen falta dos cosas nos hace falta por una parte la base de datos en este caso podríamos ir a mysql y nos podríamos descargar mysql es tan sencillo como abrir un navegador y poner download mysql bicycle quieras y eso nos instala una cosa que se llama el servidor de bases de datos pero hay una cosa muy divertida de hecho ya empezamos porque claro venimos aquí decimos trasera y ahora que es ahora que cuál es el correcto vale pues tenemos que buscar una cosa que es el mysql community server que es el servidor de comunidad comunidad quiere decir que es la versión gratuita con la cual podemos empezar a trabajar y no tenemos que pagar la licencia hasta que no hagamos nuestro profesional y comercial y todo eso y luego también tenemos que instalar el mysql work page ya que el servidor no es más que un servidor y el servidor es ciego y el servidor exige que nos conectemos a él mediante línea de comandos el mysql work games es una aplicación visual que nos permite trabajar con bases de datos pero un poco con formularios y con tablas y con botones y en definitiva de una forma que podamos aproximarnos pues como te decía más visualmente yo no suelo optar por este camino sino que suele optar por otro camino diferente que es el uso si estamos en windows de una aplicación llamada sham que podemos encontrar en apache friends punto o hereje y esta aplicación tiene en un solo paquete todo aquello que podemos necesitar no solo para trabajar con bases de datos sino para desarrollar aplicaciones también con php dentro de nuestro propio ordenador esta es la aplicación que yo recomiendo para windows también la tenemos disponible para camps perdón para linux y para mac en el caso de que trabajemos para mac yo suelo recomendar y es el que tengo instalado el man que es como una que es como un champú pero simplificado y optimizado para marc y aunque también existe el shampoo para linux los usuarios que manejan linux que suelen manejar más con línea de comandos y por tanto yo suelo recomendar tres o cuatro líneas de comando que básicamente te instalan algo muy a un shampoo entonces yo lo que suele recomendar es para windows el samp para linux línea de comandos y para mac el mando yo de hecho el que tengo instalado en este momento es el map entonces en primer lugar descargamos e instalamos la aplicación que sea necesaria la descarga del sunp viene a ser vamos a probarla aunque olvida de acaba de descargar 156 megas descarga más o menos rápido dependiendo del ordenador que tengamos dependiendo de la conexión a internet que tengamos ya partir de ahí una vez que lo tengamos instalado la instalación es todo lo siguiente siguiente siguiente cuando digo siguiente siguiente siente quiere decir que es una instalación de confianza no es la típica instalación que te mete basura y que te mete pues cosas raras vale yo en mi caso lo que voy a hacer es que voy a irme a aplicaciones dentro de aplicaciones voy a encontrar que tengo el mapa el simbolito es como un pequeño elefante y lo que voy a hacer es que lo voy a arrancar una vez que lo voy arrancando en mi caso lo tenía ya ha instalado veremos qué y este es el punto de unión este es el punto de coincidencia con otros paquetes de servidor como por ejemplo el samp que tenemos un apache server y tenemos un mysql server cuando te instales el sample si estás en windows verás que de hecho está apache está mysql está file fila está el servidor este de correo que ahora mismo no me acuerdo que es de color azul en alguno ahora mismo creo que es cerberus y está java enterprise vale pero no nos va a hacer falta nada de eso únicamente nos va a hacer falta el apache server y el my sql server por eso digo que aunque mamá no tenga todo lo que tiene lo que tiene camps tiene lo suficiente para que me valga entonces estemos en sampués tenemos el man o estemos donde estemos lo que hay que hacer es buscar un botón donde aparece la opción de start servers yo en mi caso voy a arrancar los servidores los dos voy a buscar una captura de pantalla de buscar una captura de pantalla voy a poner el control panel como yo en este caso no tengo no tengo windows voy a buscar una captura de pantalla del panel de control de sant como podrías decir te lo podrías descargar para mac pero tampoco porque no es exactamente igual entonces este es el aspecto que tiene la cabeza el panel de control de la anp en windows entonces cuando te aparezca ese panel de control simplemente le tienes que dar a start tanto a apache como a mysql y ya está no tiene más misterio simplemente es darle a start en los dos y asegurarte que aparecerá un icono de color verde al lado de apache y al lado de mysql y no tocamos de momento ni file fila ni mercury que hacer con el servidor este de correo electrónico que te decía ni tome cut que es para desarrollar aplicaciones web con java enterprise apache vamos a hacer este mensaje que tenemos la pantalla y que ya sale hace unos cuantos años cuando instalar en windows concretamente unos cuantos años para que tengas la idea sale desde windows vista por qué pues porque windows vista en el primero que implementaba el user account control que es el guaje date cuenta que esto es un warning no es un error lo digo porque esto durante años he tenido algunos que me han dicho esto y los alumnos en cuanto sabe claro y les gustan vale entonces simplemente lo que te dice es que es una advertencia no es un error de hecho te permite continuar y te dicen algunos algunas funciones del sunp probablemente están restringidas sin embargo yo que llevo años dando clases con el samp en windows te digo que ninguna función está restringida o ninguna que yo haya encontrado claro hay una opción yo hace muchos años la recomendaba cuando me empezó a salir esto pero ya hace años que no que es desactivar el user account control en el panel de control pero es que él you ser account control desde win vista de más recientes existe precisamente por tu seguridad para evitar que el malware se instale y haga operaciones en tu sistema operativo que tú no quieres vale entonces yo lo que te voy a decir es que si te sale este mensaje tú simplemente dale a ok continúa instalando y no pasa absolutamente nada y a continuación lo que te va a decir es que el el samp es muy puñetero en el sentido de que si se encuentra una aplicación que está usando el mismo puerto que apache y apache usa el puerto 80 lo que hace es que no arranca apache entonces por ejemplo hay una aplicación muy conocida que es el skype que usa el puerto 80 y a un nivel teórico perdón a un nivel práctico quería decir aunque a nivel teórico dos aplicaciones no deberían compartir el mismo puerto de red pero a un nivel práctico pueden compartirlo sin ningún problema entonces apache está pensado en este panel de control samp para que si se encuentra el puerto 80 en uso dice hay alguien que está usando el puerto 81 a rango entonces la solución cuando eso ocurre es muy sencilla es tan sencilla como simplemente apagar el skype o cualquier otro programa que usa el puerto 80 arrancar apache y luego entonces volver a arrancar de skype ya que por ejemplo skype no se queja pero apache sí y por ejemplo si enciendes apache y apache arranca correctamente y luego arranca es skype a skype usa el puerto 80 luego apache no dice es si había arrancado pero no porque haya arrancado el programa sino que apache ya no lo vuelva preguntar nunca más vale entonces si te ocurre ese problema en el caso de que ocurra la solución es buscar todas aquellas aplicaciones que tengas que esté usando el puerto 80 y apagarlas temporalmente y luego deberá arrancar las y ya está por defecto por defecto fíjate que aquí se me ha arrancado el sham por defecto en mi caso dado que el man usa otros puertos verás que yo tengo el local hole 2.888 8 es decir el man para mac por defecto usar estos puertos pero verás que cuando lo arranques en pc no usa el puerto 8 888 sino el 80 y por tanto no aparece los de 2 puntos 8 888 tú simplemente tranquilo y ya está cuando lo tengas arrancado lo que tendrás que hacer es lo siguiente tendrás que poner localhost barra en mi caso 2 puntos 8 888 en tu caso simplemente localhost barra y tendrás que poner php miami tras lo cual entrará directamente a esta página que te estoy mostrando en la pantalla esta es la cuestión y es que camps en una sola instalación te instala tanto el servidor de mysql como una utilidad que es esta de aquí que se llama php my admin que es una utilidad mediante la cual gráfica y visual vas a poder utilizar vas a poder gestionar tus bases de datos como tiene te digo de una forma mucho más sencilla el php my admin que tengo yo por defecto instalado en champ de hecho está visualmente un poco anticuado esto quiere decir que tiene exactamente lo mismo que tiene el ph media admin que vas a tener tú pero el mío es un poco más feo a mí me da igual porque mientras que haga lo que yo quiero me da igual que estéticamente sea feo pero desde el punto de vista de la formación lo que he hecho es que me he instalado una segunda versión que ahora verás que voy a acceder con el usuario root root y ahora verás que lo que hace es que tiene un aspecto más moderno y se va a parecer muchísimo más por no decir que va a ser prácticamente igual a la aplicación que tú te vas a encontrar en cuanto entre en tu php mallado vale te lo digo porque por tanto en tu caso donde yo por ejemplo tengo esta dirección tengo ahora mismo esta dirección en pantalla pues la tuya no será exactamente así la tuya será localhost le quitamos los otros le quitamos dos puntos y que está niño y le quitamos también el my admin 2 vale la tuya será más o menos como la estoy mostrando ahora mismo en pantalla yo como ya te digo tengo los ochos y tengo el ph probé admin 2 porque tengo mi sistema configurado no como viene por defecto sino que me lo he ido tocando vale pero simplemente lo que quiero que me confirme es llegado un momento es que llegas a esta pantalla evidentemente cuando llegues a esta pantalla pues verás menos bases de datos aquí a la izquierda de las que tengo yo porque tú tendrás un sistema recién instalado por defecto yo veo más bases de datos porque son las que he instalado recientemente en mi equipo pero no pasa nada evidentemente así que confirma me en cuanto lo tengas vale esto que estamos viendo aquí lo voy a hacer un poquito más grande para que lo veas mejor esto que estamos viendo aquí es el panel de control de php admin para gestionar las bases de datos en mysql que haya en nuestro equipo en primer lugar vemos que por una parte a la izquierda tengo el listado de bases de datos que ahora mismo tengo instaladas en mi ordenador en mi servidor de mysql y con lo que haga aquí a la izquierda lo que vamos a hacer es que vamos a gestionar todo aquello que haya a la derecha ahora de momento no hay mucho como mucho podemos cambiar el tema vemos que tenemos en mi caso el tema metro ahora se actualizará vemos que es un tema un pelín más moderno vale un pelín más visual tengo el tema original que es el antiguo pero estéticamente ves es el tema que tenía hace un momento estéticamente no suele gustar mucho y el tema que desde hace unos pocos años viene por defecto con mysql y con ph novedad min que es el tema pm a home a entonces lo que voy a hacer es partir tengo que se puede cambiar el tema pero voy a estar trabajando todo el rato con el tema que viene por defecto lo primero que quiero con un servidor de bases de datos cómo te puedes imaginar es crear mi propia base de datos así que voy a hacer clic aquí en nueva y a continuación voy a especificar cuáles son los datos de mi base de datos puedo trabajar con una base de datos que previamente hubiera sido creada pero no quiero eso yo lo que quiero es crear mi propia base de datos voy a ponerle un nombre y condiciones para poner un nombre no debe tener un número en el primer carácter de curso aplicaciones web puede tener varias palabras pero no te recomiendo que tenga espacios entre las palabras y no debería tener acentos ni ejes ni cesce villas ni caracteres que digamos difieran del juego de caracteres anglosajón vamos a ver que luego dentro de la base de datos los datos que guardemos y que para poder tener acentos años y todo esto pero el nombre de la base de datos no te recomiendo que tenga estos caracteres a continuación viene un parámetro que bueno es un poco difícil de comprender pero si abrimos un poco la mente veremos que es un parámetro completamente entendible que es la colación la colación que este desplegable es el juego de caracteres que vamos a utilizar por defecto nos movemos en un t f8 que es el juego de caracteres que generalmente sirve para para occidente pero a continuación si nos fijamos veremos que por defecto tengo el general pero veo que tengo juego carácter el caracteres croatas checos danés esperanto y bueno no se usa pero ahí está el estonio en alemán en húngaro en islandés en letonia en lituano y tengo dos para español y para español de los tened en cuenta que cada idioma tiene su propio juego de caracteres otros por ejemplo los acentos en las vocales lo vemos como lo más normal del mundo pero un inglés para un inglés un acento una vocal es algo extrañísimo de la misma forma por ejemplo los alemanes tienen un carácter que es la beta que es como una especie de s estirada que para nosotros es extrañísimo y por ejemplo los franceses pues tienen el acento circunflejo vale el acento digamos que es como un la vocal y luego una especie de lo que sería una s la idea es que cada bueno no te digo ya no te digo ya si nos vamos por aquí arriba a los been no está el defile el big five es por ejemplo para el juego de caracteres chinos entonces la idea es que nosotros muchas veces damos por defecto que estamos trabajando en españa pero mysql es una base de datos para todo el mundo entonces la colación nos invita a decir que juego de caracteres concreto vamos a utilizar en mi caso me voy a ir a ute efe 8 y voy a elegir o spanish fit que es el español moderno o spanish 2 que es el español tradicional da igual cual cual cojamos voy a el tercero 8 spanish zip y voy a pulsar sobre crear a continuación si te fijas porque tampoco es que gráficamente haga una referencia muy fuerte pero si te fijas habrás visto que aquí a la izquierda ha aparecido el curso de aplicaciones web evidentemente a ver el momento que estoy evidentemente en este caso también como te puedes imaginar pues vamos a verlo pues me dice no se han encontrado tablas en la base de datos porque evidentemente acabo de crear una base de datos pero esta base de datos ahora mismo de momento está vacía cuál es la siguiente operación que vamos a hacer pues evidentemente vamos a crear tablas en la base de datos una vez que tenemos una una base de datos vacía a continuación es cuando se nos invita a crear una nueva tabla dentro de la base de datos en este caso voy a hacer la típica tabla voy a hacer una serie de tablas básicas y típicas para que luego puedan servir para prácticamente cualquier aplicación que construyamos entonces dentro de cualquier aplicación existe suele existir una tabla llamada usuarios en una aplicación de comercio electrónico esto se llama clientes en una aplicación de aprendizaje se llama alumnos vale pero no dejan de ser usuarios en definitiva así que la llamo usuarios y especificó el número de columnas que voy a utilizar generalmente cuando estoy creando una tabla ahora que estoy aprendiendo muchas veces no va a preguntarme pero yo cuántas columnas voy a utilizar no lo sé si todavía no sé qué voy a hacer realmente digo que cuando estás creando una tabla ya sabes a lo que vas cuando la estás creando ya tienes una idea de cuántos campos van a hacer más necesitar lo que te quiero decir es da igual lo que elijas aquí porque si más adelante te hacen falta más campos los vas a poder añadir y si te sobran campos los vas a poder eliminar así que no pasa nada yo de momento lo que voy a hacer es poner 10 campus 10 columnas y me da igual si luego necesito más necesito menos porque sé que lo voy a poder ampliar o recortar como yo quiera elijo 10 columnas pulso sobre continuar ya continuación viene esta pues como te digo molesta ventana molesta desde el punto de vista visual y bonito que me dice vale pues ahora vamos a configurar estos días qué me has dicho que quiere es tener como ves es un trabajo muy de formulario es un trabajo parece como de muy de oficina es un trabajo nada visual pero como ya te digo esto sienta las bases del como luego se va a comportar cualquier aplicación que haga uso de esta base de datos yo te voy a decir una cosa que insisto parece que te esté vendiendo y que éste está intentando que te den ganas trabajar con bases de datos y de hecho es cierto lo estoy haciendo pero en cualquier curso es que se me pasa igual en cualquier curso entonces la edificación no pues mira estos son los cimientos para que tengas la idea entonces los cimientos son algo que son muy poco bonito pero no hace falta que te expliqué la importancia de construir unos buenos cimientos para una edificación porque si no hay buenos cimientos todo lo que hagas después pues no es que esté mal pero evidentemente siempre tendrás el reconcome de que los cimientos no eran todos los buenos que debían ser pues esto es lo mismo estamos haciendo los cimientos de una aplicación y por eso aunque parezca una tarea que no sea especialmente gráfica y bonita de hacer pero te aseguro que tiene mucha más importancia de lo que ahora mismo parece entonces vamos a empezar con un campo que yo te voy a recomendar que pongas en todas y cada una de las tablas que hagas en tu vida yo diría que incluso aunque no lo necesites que es un campo que se llama identificador tú fíjate que pincho y nada más pinchar de proyectos anteriores que he hecho ya directamente mysql me dice mira parece que quiere es un campo que se llama identificador porque siempre que entras aqui creas nunca se llama así entonces el campo identificador es como una especie de dni es como una especie de identificador inequívoco que va a ser único para ese registro entonces a un nivel técnico no es obligatorio que una base de datos tenga siempre un identificador pero no te va a hacer ningún daño te va a dar más alegrías que disgustos así que siempre que puedas meter un campo llamado identificador a continuación viene la tipificación del campo que es qué tipo de dato va a contener el identificador su número entero y por tanto lo voy a dejar como entero en mysql tenemos un montón de datos tenemos los cuatro principales que son números enteros pequeñas cadenas de texto grandes cadenas de texto y fechas y luego por grupos tanto como vea parar porque me tiraría que la vida pero por grupos tenemos campos numéricos el número diminuto número pequeño número mediano número gran número decimal flotante doble procesión números reales bit que es 10 muy lejano que es verdadero o falso número serie tenemos fechas tenemos cadenas tenemos espaciales tenemos incluso que podemos guardar e información en formato j son vamos de momento con los cuatro primeros y dado que el identificador va a ser un número entero lo voy a dejar como int y a continuación viene la longitud de este campo yo tengo te voy a decir la mala costumbre de meter siempre el número lo ves aquí 255 entonces 255 lo que quiere decir es que voy a usar 8 bits para este campo pero aún porque tuvieras otro bits pues vale que no estás contando a un nivel verdadero a un nivel real a un nivel práctico lo que quiere decir es que en ese campo identificador voy a admitir si yo meto números puedo meter números que tengan 999 99 y así hasta 255 9 imagínate el número que sale de ahí imagínate ese número con 255 9 entonces mi pregunta es yo voy a crear tantos usuarios en una tabla como para tener 255 si es que en el mundo no existirán más que 16 sabes que probablemente se pueda meter todos los átomos del universo pues igual los metería pero para tratar las personas del mundo aunque tú digas ojalá es que me sobran 255 caracteres entonces es lo que te digo es que a un nivel didáctico para protegerme ahora volver a ser los siguientes campos lo que hago es meter 255 caracteres para que pues por si acaso lo que hago es insisto otro vuelvo a decir no a un nivel en producción sino a un nivel didáctico a un nivel docente decir mira pon 255 y así sabes que nunca se te va a quedar pequeño aunque por cierto que si te queda pequeño luego se puede ampliar que no se recomienda pero se puede es decir para que te hagas la idea y siempre recurriendo al mismo ejemplo y modificar una estructura de una base de datos aunque es posible es como modificar unos cimientos que posible posible posible lo que se dice posible es pero no es nada recomendable porque es muy costoso entonces aquí ocurre exactamente lo mismo entonces insisto desde un punto de vista didáctico lo que estoy haciendo es que no tengas un límite pero si esto fuera una base de datos real yo lo que estaría haciendo es cargar con muchos más datos de los que necesito y eso podría hacer que mi base de datos fuera más lenta de lo que podría ir ahora bien cuando te digo esto también vamos a poner un poquito las cosas en contexto porque de qué tipo de aplicaciones estamos hablando estamos hablando de una aplicación empresarial para una empresa que te diría pequeña que tiene no lo sé porque tiene 10 20 30 100 200 usuarios pues tranquilo que esto no se va a notar ahora bien estamos hablando de twitter estamos hablando de facebook estás hablando de una aplicación que realmente usan decenas de millones de personas cada día pues en ese caso ahí sí que igual importa ese parámetro pero claro cuántas aplicaciones hacemos que sean twitter o facebook pues no tantas lo que quiero decir es que a un nivel teórico sí que hay que restringir ese parámetro a lo que sea real pero a un nivel práctico tampoco te preocupes tanto porque puedo tirar con 255 y mi aplicación prácticamente no va a sufrir esa penalización de rendimiento que te decía hace un momento en definitiva con todo esto lo que te digo es que una cosa es la teoría pero otra cosa es la práctica la teoría dice una cosa pero claro la teoría no sabe si esa misma teoría se está aplicando a una aplicación pequeña oa una aplicación gigante luego la práctica te dice que si la teoría pero sé cuando la tengo que respetar y sé cuando me la puedo saltar siguiente en el campo identificador resaltar estos campos por aquí en el campo identificador hay dos parámetros que voy a activar más una si este campo es un índice el índice es este campo que te decía que es como una especie de dni les digo que es una clave primaria en la ventana de esta que aparece voy a aceptar el parámetro que viene por defecto simplemente aceptó que sea una clave primaria y ya está y por último voy a marcar este parámetro que dice que es auto incremental cuando dice que es auto incremental quiere decir que yo no me voy a preocupar de asignar el identificador sino que va a ser la base de datos la que automáticamente se ocupe ella misma de ir aplicando un identificador que sea un número incremental con respecto al último número ahora luego lo vas a ver de hecho a continuación una vez que tengo este parámetro auto incremental es cuando voy a continuar creando nuevos parámetros y aquí ya metería pues parámetros tales como por ejemplo es hablando de usuarios pues voy a poner usuario el nombre de usuario voy a hablar de la contraseña no me gusta poner contraseña porque lleva una ñ entonces no me hace mucha ilusión las señas en los nombres de los campos otra cosa luego será en los datos almacenados en la base de datos para un argumento me estoy refiriendo a los nombres de los campos entonces yo lo que suelo hacer es poner password y luego tenemos por ejemplo también el nombre del usuario el nombre de la persona no sabía lo sabía lo sabía sabía que mi pregunta vamos a ver por nada en particular es decir es una costumbre que tengo entonces la costumbre que tengo es que siempre identificador la pongo con mayúsculas pero los campos los pongo en minúsculas pero un momento momento te explico el porqué de esa costumbre aunque fíjate que me está parece un hombre entre edad también tiene que ver con a ver si esto también tiene que ver como veis por aquí con una nomenclatura especial que usó en una cosa más avanzada ya te diré que es enlaces entre tablas que es poner reservar las mayúsculas para esto que se llama efe acá luego también depende del tipo de aplicación que esté haciendo es una aplicación por ejemplo si es un cliente que me dice oye yo sólo pongo mayúscula quiero decir que al final el cliente manda pero te voy a hacer lo siguiente ahora mismo estamos creando una base de datos y en un momento dado haremos una cosa que es conectarnos a la base de datos desde un lenguaje de programación cuando eso ocurre te voy a decir una cosa y te voy a decir muy en serio y es que la primera vez que haces eso es un infierno absolutamente porque conectar un lenguaje de programación a base de edad la primera vez da mogollón de errores entonces un error por el cual lo que hago es en las clases los campos los pongo todos en minúscula un error es que en la base de datos haya expuesto al campo con mayúsculas y en el lenguaje de programación le están llamando con minúsculas y por mucho que las letras sean iguales el sistema dice no no me puedo conectar porque no existe ese campo o sea el sistema no te dice el sistema no está el inteligente para sacar tu mensaje de error y te dice no es que te has equivocado la mayúscula no el sistema dice tú has pedido un nombre con mayúsculas aquí existe nombre con minúsculas es que no existe y tú claro te rompe los cuernos mirando la pantalla porque dices pero como dice que no existe es escribiendo adelante hasta que al cabo de unas horas te das cuenta de que el problema era las mayúsculas por eso yo lo que es placer a nivel didáctico no ya a nivel yo profesional por general profesional ya estoy acostumbrado a tener en una pantalla en otra pantalla la base de datos y voy conectando pero porque lo he hecho muchas veces a lo largo de muchos años entonces a un nivel alumno lo que te recomiendo es que de momento lo pongas todo con minúsculas y así minimizaremos las probabilidades de error que ya de hecho ya verás que se producirán bastantes errores en los sucesivos y y a continuación te voy a contar una anécdota vale entonces es una anécdota para que te hagas la idea de hasta qué punto sucede esto con la base de datos hace años tenía un alumno excelente que ha tenido muchos excelentes vale pero en este caso hablo de uno que sea abanico entonces un día estaba yo en casa 3 me llama y me dice oye voy caminando por la calle y estoy muy nervioso y yo dije interesante no es algo que me suelen decir en formas de programación entonces digo bueno pero qué te pasa y dice mira llevo toda la tarde intentando conectar una base de datos no me sale y me puso tan nervioso que he tenido que bajar la calle a dar un paseo y claro le dije vale me parece bien pero si estás en la calle no te voy a poder ayudar entonces cuando te calmes y subas a casa cuando estés delante del ordenador y así te puedo ayudar entonces lo que te quiere decir la moraleja de esta historia es que el alumno que me llamo era un alumno de los buenos de los excelentes de los cañeros y aún siendo un alumno cañero simplemente llegó un momento en el que en petit ción con bases de datos se enganchó y no sabía salir de ahí lo peor como suele pasar en estos casos lo peor es que en lo que se había enganchado de una chorrada con lo cual cuando me compartió la pantalla y le dije lo que era casi se enfadó más todavía de la chorrada que era vale pues lo que te quiero decir es que por eso hago estas cosas y otras que ahora a continuación te diré como por ejemplo en los privilegios que luego te diría que es poner el mismo nombre de usuario de la misma contraseña que en una base de datos en producción es una muy mala costumbre pero a nivel didáctico lo hago para que la gente tenga menos probabilidad de error vale pues lo hago por esto entonces ahora lo que voy a hacer por ejemplo exponer o apellido unos apellidos o apellidos o ya como quieras balear lo como quieras voy a poner email voy a poner dirección voy a poner teléfono vale y ya está yo que sé y de momento nada más fíjate que me sobran dos campos pero no pasó nada porque ya te ha dicho antes que si llamo diez campos y luego no uso los últimos dos pues el programa nos va a ignorar y ya está no te digo nada no te digo nada o sea esto es un curso específicamente de tecnología vale no te digo nada aunque de la misma forma te digo que existe que en el momento en el que meto dirección y teléfono sabes automáticamente tengo como una personita en la oreja de la agencia de profunda tos que me está diciendo porque está guardando esto sabes sabes que todo lo que es crear una base de datos y guardar datos personales de personas pues tiene una parte técnica que es esta que estamos aprendiendo pero luego sabes que hay una parte legal que es toda aquella que está relacionada con la l open y con la rcp que son la legislación que ahora mismo está vigente en cuanto a la que te dice que puedes guardar que no puedes guardar que está justificado guardado y todo esto vale lo que quiero decir es que si esto fue una formación de carácter legal en el momento en el que yo estoy guardando la dirección pues habría alguien que me preguntaría está justificado según la l o puede que guardes los datos de dirección de los usuarios pues sí lo puedes guardar pues no lo tienes que borrar vale pero no es este tipo de información es esta es una información más técnica entonces a continuación el usuario no va a ser un número entero va a ser una pequeña cadena de caracteres el password va a ser una pequeña cadena de caracteres el nombre va a ser una pequeña cadena de caracteres apellidos en esta tabla todo va a ser marchar incluso el teléfono porque el teléfono en el momento en el que le metamos un 34 el signo más en el momento en el que le metamos unos paréntesis pues ya no va a ser un inc ya no va a ser un número entero entonces por eso lo pongo marchar a continuación podría especificar el máximo número de caracteres que tendría cada uno de estos campos en este caso como te digo para acabar pronto lo que voy a hacer es que voy a poner 255 en cada uno de los campos porque si no se nos hará eterno tener que irnos preguntando a cada campo pues cuántos caracteres máximo podría tener mi usuario cuantos caracteres máximos puede tener un nombre pues espérate que vaya al instituto nacional de estadística que me saque una lista de nombres y que vea cuál es el que más caracteres tiene pues no voy a hacer es cuál lo que voy a hacer es meter donde los 952 y ya está la única razón que existe para ahorrar en cuanto a la longitud del campo es para ahorrar no ya sólo en el peso de la base de datos que al final mayormente vamos a guardar texto aunque se pueden guardar otras cosas pero mayormente vamos a cortar texto pero también en la rapidez en la búsqueda cuanto más peso artificial tenga esa base de datos más lentas se van a hacer las búsquedas pero te lo vuelvo a decir otra vez esto que te acabo de decir es la teoría en la práctica para una aplicación de un tamaño intermedio la aplicación práctica de esto que te acabo de decir es que con un tv de tamaño excesivo la búsqueda se haga en 0 0001 segundos te lo prometo ahora luego lo verás y si lo afinó la búsqueda se hará en 0 000001 segundos es decir diez veces más rápida pero claro 10 veces más rápida sobre una marca que el ser humano no puede apenas percibir 3 la teoría dice que esta velocidad es 10 veces más rápida que esta velocidad de aquí pero la práctica dice que vamos a ver quién se da cuenta de esto vale insisto lo digo una vez más todo depende del tipo de aplicación que esté desarrollando una cosa es hacer una aplicación hablemos de tiendas online si quieres vale una pequeña tienda online y otra cosa es que le estuviera haciendo la base de datos del corte inglés o del media market o de un gigante de estos que deberían mandar para la cantidad de gente que va a estar cada día manejando esta base de datos ahí sí que igual tengo que ajustar y tengo que afinar vale entonces vamos prácticamente al finalizar la creación de esta base de datos de momento veo abajo que tengo un motor de almacenamiento y no debe vale tengo el comentario de la tabla aquí voy a guardar los datos de mis usuarios motor de almacenamiento de momento no te voy a hablar de él más adelante hablaremos en otros de almacenamiento porque de vez en cuando vienen muy bien para hacer ciertos tipos de operación pero ahora de momento lo único que quiero es pinchar el botón de guardar quiero fijar la estructura de esta base de datos de esta tabla de la base de datos y quiero empezar a hacer cosas con la base de datos en este caso cómo podemos ver aquí arriba tengo una cosa que se llaman las migas de pan me dice que sobre el servidor localhost dentro de este servidor estoy en la base de datos curso aplicaciones web dentro de la base de datos curso aplicaciones web estoy una tabla usuarios y bueno aparece el comentario que he puesto para tener una idea de qué va esa tabla a continuación a continuación una vez que estoy dentro de la tabla usuarios te voy a hablar de una vamos a ver que haga esto un poco más pequeño te voy a hablar de una metodología que se usa para trabajar con datos que es la metodología cruz entonces de hecho hay varios autores que la extienden a cruz entonces básicamente para que tengas la idea eso te dice que cuando aprendes a trabajar con una base de datos las cuatro eventualmente cinco primeras operaciones que tienes que aprender son operaciones para create para crear registros para leer registros para actualizar registros y para eliminar registros y eventualmente hay una quinta operación que es search buscar registros que es parecida a la operación de read pero con condiciones quiero leer registros pero donde se cumplan ciertas condiciones todo esto en mysql se implementa a través de una serie de comandos entonces los comandos sql que van con los que vamos a estar trabajando son los comandos insert para crear voy a hacer esto un poquito más pequeño mariño para que podamos trabajar la falta de partida en el escrito lo vamos a hacer con insert read lo vamos a hacer con select habréis lo vamos a hacer con update tal cual del itd lo vamos a hacer con delito y ser vamos a hacer con select con una cosa que se llama where entre otras cosas al seleccionar donde se cumplan una serie de condiciones claro para esto yo lo que haría ahora es meterme dentro de esta pestaña llamada de sql y empezará a invocar comandos de hecho fíjate que por defecto ya viene uno que es select y select e hemos dicho que sirve para hacer una lectura de la base de datos pero yo no voy a hacer esto esto sería meternos como digamos tirarnos de chapuzón a la piscina yo lo que voy a hacer es enseñarte una forma más sencilla de entrada de gestionar una base de datos y poco a poco inevitablemente nos acabaremos metiendo dentro de la sintaxis de sql es decir vamos a empezar a trabajar con la base de datos en plan fácil en plan sencillo pero no te voy a ocultar que nuestro objetivo al final es acabar trabajando como mínimo con estas cuatro palabras reservadas de sql porque son las cuatro palabras con las cuales se gestiona el 95% de cualquier aplicación no son los únicos las únicas sentencias o son los únicos comandos sql pero son desde luego los más importantes que debes aprender voy a empezar con el primero que escribí y para ello antes de crear nada en sql lo que voy a hacer es pinchar este botón en el que pone insertar entonces pincho insertar y a continuación me dice inserta un usuario voy a insertar un usuario el identificador nuevo relleno porque antes he dicho que se va a encargar automáticamente el programa de rellenarlo entonces el usuario es jugarse la contraseña que de momento está a las claras ya hablaremos de esto más adelante de codificación de contraseña voy a poner mi contraseña así están las claves como te digo no está codificada nombre josé vicente apellidos carratalá sánchez email info jose vicente carratalá puntocom dirección d y teléfono teléfono 26 20 81 17 18 con esto ya tengo unos registros y a continuación lo que voy a hacer es continuar mucha atención a lo que va a ocurrir ahora en la pantalla porque cuando le doy a continuar el programa me dice te insertado una fila esto quiere decir que yo no he tenido que insertar nada pero además lo que más me importa es que el sistema me está llevando ahí lo tienes allá arriba también lo tienes aquí abajo de hecho cuál es la consulta sql que corresponde a esa inserción entonces yo veo que de hecho el haber rellenado esos formularios y haberle dado a enviar corresponde a una sentencia sql recuerdas que creía era insert que dice insert into usuarios con estos nombres de columna los valores y como puedes ver los valores que he introducido en el formulario otra cosa que yo suelo decir es que el lenguaje sql aunque evidentemente hay que tener cuidado con él porque es un lenguaje razonablemente estricto pero yo suelo decir que si sabes inglés ya sabes la mitad de mysql porque si te fijas la sentencia prácticamente habla en inglés es insertada dentro de usuarios con estos campos de aquí los valores y los valores y ya está casi lo puedes leer al vuelo vale otra cosa que te voy a decir por cierto quizás es un buen momento para empezar a hablar del lenguaje sql el lenguaje sql es un lenguaje común a una gran cantidad de bases de datos hoy en día el lenguaje sql por cierto sql wikipedia es un lenguaje que tiene ya unos cuantos años es un lenguaje creado en 1974 tendrá como 40 y 46 años entonces quiero decirte que un lenguaje de programación que tiene 46 años sigue vigente no es moco de pavo aunque evidentemente por supuesto tiene dialectos y tiene versiones y todo esto pero es un lenguaje que vale la pena aprender porque es el estándar en trabajo con la gran mayoría de bases de datos desde hace 40 digo más de 40 años y parece que lo va a seguir siendo durante unos cuantos años más no están muriendo sino más bien al contrario bueno pues voy a continuar y a continuación vamos con la segunda operación que es la operación read a continuación yo simplemente lo que tengo que hacer es pinchar aquí en usuarios o bien en examinar es lo mismo café lo mismo pincho en examinar me saca el registro que ha insertado y si nos fijamos de hecho arriba una vez más me está sacando la chuleta y la chuleta me está diciendo que leer a palo seko todos los usuarios es select como te había dicho aquí select select asterisco asterisco almohadilla from usuario se selecciona melo todo la almohadilla quiere decir no filtros yo lo quiero todo de la tabla usuarios y lo que hace el programa es mostrar me lo por pantalla como ves php malla admin lo que hace básicamente es convertir los clics del usuario en sentencias sql y además te las muestra en pantalla lo cual me parece muy didáctico para que tú en un momento dado sepas el clic que has hecho como se hubiera expresado en una sentencia sql por una razón muy sencilla porque recuerda que estamos aprendiendo y estamos obteniendo de manera fácil pero cuando te estés conectando a una base de datos desde un lenguaje de programación sea cual sea no vas a tener la manera fácil no vas a tener que hacer mediante sentencias sql por eso está bien que este sistema nos permita hacerlo en plan fácil pero a la vez nos dé pistas de cómo se realizaría utilizando el lenguaje sql vamos a continuación con el siguiente elemento y hacer esto un poquito más pequeño bien y el siguiente elemento es la break es la actualización yo lo que voy a hacer es que voy a editar esto quiere decir que no voy a borrarlo ni voy a crear un nuevo voy a modificar este de aquí entonces pincho editar y por ejemplo en apellido lo que voy a hacer es poner un acento a la es decir he hecho una modificación sobre uno de los parámetros a continuación pulso continuar y me vuelvo a fijar una vez más en que por una parte evidentemente me hace la modificación pero además aquí arriba tengo el comando sql correspondiente la modificación que es update usuarios set apellidos es igual a carratalá sanchis con acento donde el identificador sea el número uno es muy importante que el programa tenga un identificador para que sepa cuál es el registro que tiene que modificar es decir yo siempre pongo el mismo ejemplo tú imagínate que eres un policía que estás en una comisaría y que tienes que detener a alguien ha metido dos personas en la comisaría y tú dices vale aquel que se ame jose a la cárcel pero hay dos jueces y tú dices nuestra sala la cual es entonces vale aquel que sea mejor ser vicente pero hay 2 jose vicente porque es perfectamente posible el nombre no te sirve para poder identificar inequívocamente a quien tienes que modificar y tú dices vale aquel que se llame josé vicente carratalá pero puede haber de hecho los hay diferentes jose vicente es carratalá luego no puedo identificar inequívocamente a una persona con su nombre su primer apellido e incluso con los dos apellidos no se puede identificar porque hay personas que comparten nombre y dos apellidos el dni es lo que identifica inequívocamente a una persona de la otra porque salvo error informático dos personas nunca deberían tener el mismo dni pues el identificador es el dni del registro quiero modificar a este registro donde el identificador sea igual y yo de esa forma me voy a asegurar de que sólo quede modificado aquel que me entere es es por esto es una de las razones por las cuales te he recomendado que cualquier tabla que hagas a partir de ahora siempre siempre siempre aunque a nivel teórico no haga falta pero a nivel práctico te recomiendo que siempre le pongas que ese campo identificador si no lo llegas a usar no pasa nada no te va a molestar no te va a hacer daño pero si lo acabas necesitando pues ya lo tienes ahí bien a continuación voy a eliminar entonces para eliminar en este caso voy a usar el botón de borrar hago clic en el botón de borrar por supuesto como la eliminación ya sabemos que es un tema muy delicado pues antes de borrar nos saca una ventana modal una ventana flotante de confirmación es cierto que deseas hacer esto del it from usuarios no lo voy a hacer porque está claro que funcionaría pero porque lo que quería era esto lo que quería era sacar esto que era sacar que compruebes que el borrado realmente es un comando llamado del cuidado del lead con un where porque si yo no pongo el web si yo pongo del it formó usuarios lo que va a hacer es cargarse todos los usuarios tengo que decirle un where para decirle a quien me quiero cargar de hecho en plan bautismo de fuego quiero que sepas que hay un dicho popular que dice que uno no es programador hasta que no ha hecho un delito es sin un web y por tanto se ha cargado una base de datos o una tabla y esto tú ríete pero a todo el mundo le ha pasado entonces lo que tienes que rezar es para que cuando te pase la base de datos que elimines no sea muy importante o tuvieras copia de seguridad vale porque yo soy una persona de las crisis y aparte es algo que es vox populi que se aprende mucho más de los fallos que de los aciertos entonces a nivel tampoco quiero profundizar demasiado en esto pero a nivel cerebral por una cuestión evolutiva guardan mucho más en tu cerebro guarda mucho más registro por un tema evolutivo por un tema supervivencia los sucesos negativos que los sucesos positivos los sucesos positivos es como como te diría yo un niño te puede preguntar mil veces una cosa y tú le dije ayer puñetas pero pero ese mismo niño él se te escapa porque no lo ves pone la mano en el fuego de una vela se quema el dedo ese niño no va a poner el dedo otra vez por qué pues porque la sensación de dolor hace que en tus neuronas se escriba una asociación que es mucho más fuerte en el dolor en el error que en el acierto vale entonces lo que quiero decir con esto es que a todos nos ha pasado de eliminar una base de datos sin poner un web por tanto cargarla todas y del calor que te entra en ese momento del soponcio que entra de no me digas que me acabo de cargar la base datos entera o la tabla al menos pues es como meter el dedo en la vela la llama se le hace una asociación en tu cabeza que te impide a partir de ese momento poner un desliz en un web ya lo verás ríete de mí pero esto que te estoy diciendo es completamente cierto vale entonces evidentemente más adelante vamos a hablar de un concepto cómo te puedes imaginar que es el de copia de seguridad entonces si hacemos copias de seguridad periódicas con la suficientemente periodicidad pues con suerte cuando te llegues a cargar esa tabla pues tendrás una copia de seguridad que recuperar y no habrás perdido mucho con suerte pero ya me lo dirá cuando ocurra ahora a continuación ahora a continuación una vez que tenemos esto lo que voy a hacer es realizar estas mismas cuatro operaciones de hecho ahora verás que también utilizó el search pero mediante los comandos sql para ello tengo aquí una pestaña llamada esquivel si cuelo sql como lo quieres pronunciar y lo que voy a hacer es borrar el por defecto aquí viene marcado con un selector a borró y lo que voy a hacer es escribir mi propia cadena como ya te digo sabiendo inglés prácticamente sale solo entonces vengo a insert quinto usuario los usuarios values y te digo lo siguiente tenemos lo siguiente el la sintaxis dice que yo puedo venir aquí y en primer lugar especificar los nombres de las columnas y luego los valores de las columnas adicionalmente hay otro tipo de sintaxis que me permite cargarme los nombres de las columnas siempre que aquí ponga todas las columnas por cierto que ya que te digo esto no me dirá alguno presenta aquí es donde la puedo consultar pues me voy a mysql documentation y pongo insert y verás que puedes ir al manual de usuario oficial de mysql y verás que en este caso te dice cuáles no es especialmente fácil de leer te lo voy a decir vale pero te dice cuál es la sintaxis veis por ejemplo insert into table name nombres de columna y valores vale pero si nos fijamos para que hay diferentes ejemplos pero si nos fijamos habrá una sintaxis a la parra fastidiar no aparecen a la documentación pero habrá una sintaxis que me permita insertar sin los paréntesis aunque no parezca en la documentación vas a ver cómo lo voy a hacer y va a funcionar en el momento en el que nos metemos con sql en el momento en el que nos metemos a meter código las probabilidades de error aumentan como te digo exponencialmente una un tipo de error muy característico muy común en mysql que mis alumnos iban cometiendo a lo largo de los años miles de millones de veces una preguntas más repetidas es la siguiente si yo a mysql que tiene en este caso es tabla 1 2 3 4 5 6 7 8 campos si en el insert le meto 7 en lugar de 8 no va a hacer nada si elemento 9 en lugar de 8 no va a hacer nada es elemento 5 en lugar de 8 no va a hacer nada si mysql me pide ocho campos yo tengo que meter ahí 8 piezas de información cualquier variación dará error entonces yo lo que suelo hacer es lo siguiente pongo null en el primer campo no quiere decir vacío porque recordemos que ese campo no lo gestiona yo es el identificador lo gestión automáticamente del sistema para exponer nules como decir yo no te digo nada porque primero lo que tienes que hacer y a continuación pongo una coma y pongo comillas y digo atención fíjate cómo voy hablando en voz alta vale y pongo el campo nuble es el campo nombre uno evidentemente un y pongo 2 3 4 5 6 7 8 y por tanto yo me acabo de hacer una plantilla donde sé que esa plantilla va a funcionar porque tiene los 8 campos que me está pidiendo esta tabla son campos que van entre comillas porque son marchar si fueran números irían sin comillas pero como son marchar para entre comillas y yo ahora pongo la información y yo ahora pongo pedro es el nombre de usuario -pedro password es la contraseña ahora el nombre los apellidos pérez el email pedro gmail.com o la que va a aumentar dirección la calle de pedro y número de teléfono 1 2 3 4 5 6 con esto yo lo que tengo es una una sentencia sql tengo una petición a la base de datos que lo que va a hacer es insertar un registro ahora le daré al botón de continuar al darle el botón de continuar van a poder pasar dos cosas o bien que aparezca un mensajito de color verde que me diga o que lo has hecho correctamente en este caso garantizado que si o bien sigue cometido algún error que parece que no que aparezca un mensaje de color rojo que me diga has cometido un error y que con cierta probabilidad me pueda dar pistas de en qué consiste el error mira sabes que te digo voy a cometer un error voy a quitar el teléfono les quitó el teléfono sabemos que me pide ocho campos estudiando siete y luego has tomado el error le voy a continuar y me da un error y de hecho me dice el número de columnas no corresponde al número al número real en la línea número uno es decir vemos como era un mensaje no me lo da tan mascadito no me dice tú has metido siete y esperaba ocho no me daba tan detallado pero por lo menos sí que me dice que el error tiene que ver con el número de columnas entonces que vengo aquí y ahora vuelvo a meter el número de teléfono voy a cometer otro error y es que voy a poner al uss con dos eses evidentemente esa palabra está mal hecho fíjate que incluso aquí aparece un pequeño mensaje de previsualización de error le da continuar y tengo otro error y me dice hay un símbolo no esperado inesperado y me dice evalúes me dice no no sé qué es eso de valores vale entonces corrijo algo es otra cosa que puedo hacer es inserto evidentemente como yo suelo decir cuando pongo algo en inglés es que tiene que estar en inglés no puedo poner inserto o insertar tiene que ser insert vale tiene que ser esa palabra en inglés un segundo entonces en definitiva como te digo una vez que hemos cometido una serie de errores manualmente vale y hemos visto como la sintaxis de mysql pues tiene que ser respetada porque si no la error y si el aero estaba poniendo un inserto para darle a continuar y comprobar que efectivamente terror dice inserto no sé qué es eso vale entonces solo cuando ponemos la sentencia se q l correcta insert into usuarios values y los valores que haga falta es cuando a continuación podemos darle al botón de continuar y cuando todo esté correcto es cuando vemos por el mensaje no es verde sino que es amarillo me dice ha insertado una fila el aire de la fila porque es automático es la 2 el último era el número uno pues ahora es el número dos me dice la sentencia sql aunque tampoco tiene mucho color porque ya sé que es decir se cuele porque acabo de hacer yo y ahora lo que puedo hacer es quiero listar los usuarios vamos a hacer lo segundo vamos a hacer el río mediante un select mediante sql esto es muy sencillo realmente vale ahora puedo ir a sql de hecho fíjate que ya viene la plantilla hecha select almohadilla from usuarios aparece la coletilla que es el where que es la condición aparece un extraño where 1 esto a los estudiantes cuando empiezan es como esto que es pues where uno es igual como decir over true y huerto donde sea verdad es como decir donde ninguna condición donde donde ok vale entonces es muy extraño aunque esto luego en programación tiene su gran utilidad esto es como decir selecciona todo de usuarios donde dale caña así que de momento lo voy a quitar para no marear t y le doy a continuar y comprobamos que lo que he hecho es sacar los dos los dos registros que tengo hasta el momento podría hacer un ride con un search es decir con condiciones donde yo podría decirle que quiero select o el from usuarios web he hecho una cosa y es que aquí abajo incluso aparecen los cinco botones correspondientes a las cinco operaciones que te decía entonces web y ahora digo identificador es igual a 1 entonces lo que hago es que estoy haciendo un listado pero estoy poniendo una condición de búsqueda es que no quiero ver todos los registros sólo quiero ver aquellos registros que tengan el número uno pincho continuar y compruebo que es cierto que en este caso sólo me ha filtrado el registro que tenga el número uno no sólo puedo filtrar por el identificador sino que si me voy a ventana de consultas puedo decirle que en lugar de el criterio como identificador quiero donde el nombre sea igual ahora ten cuidado porque si voy a filtrar por una cadena de tipo bar char tengo que poner comillas cuando son números no hace falta poner comillas pero cuando son cadenas de caracteres el for médicos y que hay que poner comillas y pongo jose vicente entonces le voy a continuar y compruebo que es cierto que me encuentra el registro cuyo nombre empieza por contiene jose vicente pero hay un problema y es que si yo era a continuación digo vale quiero aquellos registros cuyo nombre sea jose el signo igual corresponde a una igualdad absoluta y eso quiere decir que se le voy a continuar me dirá que no hay ningún registro por mucho que yo diga no pero sí está jose vicente pero mysql me dirá así pero todo este vídeo jose no josé vicente una cosa es una cosa y otra cosa es otra cosa para ello hay búsquedas con comodines en lugar de utilizar en la búsqueda con igualdad puede utilizar una búsqueda utilizando el comando like like es como como vale encuéntrame en hombres como este y en el like debo poner almohadillas que empiecen por jose o que acaben por jose yo lo que voy a hacer es poner una almohadilla delante y una almohadilla detrás para decirle que quiero encontrar ese nombre o bien al principio o bien al final bien en cualquier posición le voy a continuar y encuentro de esta forma que ahora si me dice que es josé vicente cuadra con esa esa búsqueda que acabo de hacer desde el punto de vista del estudiante el like con almohadillas el like con comodines constituye un gran avance porque nos permite realizar búsquedas muy potentes de una forma muy fácil desde un punto de vista purista siempre se ha dicho que las búsquedas con like y almohadillas reducen el rendimiento una barbaridad entonces ahora por fin te voy a poder explicar en la práctica lo que antes te estaba explicando con la teoría y es que date cuenta que si yo le pongo un nombre like jose con dos almohadillas le voy a continuar y no es que yo te lo diga sino que es que el mismo sistema te lo está diciendo la consulta tardo 0000 5 segundos o sea tarda pero vamos a ver también te digo que en esta tabla si sólo hay dos registros pero la tabla donde hay 10.000 registros tampoco tarda mucho más queda tengo el número es más lo voy a copiar recuperar 000 cinco segundos ahora voy a hacer una petición sin like voy a hacer una petición exacta le doy a continuar y fíjate que la petición ha tardado este caso ha tardado más es curioso vale debe haber ocurrido algo en el medio voy a hacerla otra vez mira 0.003 esto me es un poquito más lógico es que depende de como pilles a la base de datos horas después tardar más oa veces puede tardar menos esto me parece un poquito más lógico fíjate que el where con almohadillas tardaba 0,0005 con igualdad tarda 0 0003 vamos a ver dónde va es que no va a ninguna parte a nivel teórico sí que es cierto que va más rápido a nivel práctico a nivel perceptual ningún ser humano puede distinguir esa velocidad vale por esto digo que yo por una parte te encuentro la teoría pero yo soy muy poco purista yo soy muy de la práctica y tampoco nos iremos con la teoría bien sigamos a continuación a continuación es cuando vamos a ampliar poquito más esta base de datos permíteme no hacer un delito sí que voy a hacer una ley y así actualizamos o algún registro de la base de datos no haré un delito pero a continuación lo que vamos a hacer es crear nuevas tablas en la base de datos y veremos que ahí es donde gana gana digamos no ya sólo en complejidad sino en posibilidades bueno una vez voy a ir a usuarios entonces quiero actualizar el registro dos a continuación voy a realizar esa modificación para ello por ejemplo pues su identificador por ejemplo es el número dos me voy a cambiar mi correo electrónico y voy a hacer lo siguiente voy a decir borró este select y pongo update abrid sus usuarios set e mail es igual a info cogersa puntocom tenía hasta su momento info arroba jose vicente que rota la puntocom vale pero claro cuidado porque ahora tengo que poner un where porque si no pongo un web lo que haría es actualizar a todos los registros de la base de datos es casi tan dañino como un delito entonces web identificador es igual a uno entonces en este caso lo que hago es decir que quiero cambiar el email a info arroba hocker segundo con sólo donde el identificador sea igual a 1 si todo lo he escrito correctamente y en este caso parece que si le doy a continuar y me dice que una fila afectada me voy a usuarios y compruebo como en el registro número uno veo como el email ya no es info jose vicente catalá puntocom sino que es info arroba cogersa puntocom vemos cómo es posible hacer una beit mediante un sql y lo que te decía permíteme que no haga un delito más que nada porque necesito tener datos en la base de datos para ahora continuar haciendo las siguientes prácticas evidentemente pues a ver voy a volver a cambiar el correo entonces te voy a decir que en sql si lo hago por ejemplo un update cuando el programa cuando el programa me mete comillas el programa sí que usa unas comillas especiales para evitar la colisión con otros tipos de comillas que son estas comillas de aquí que es un acento abierto pero yo lo que hago es utilizar estas aplicaciones y usuarios set el email es igual a veces pongo las comillas sencillas que hay debajo de la interrogante que es info josé vicente carratalá puntocom y y puedo utilizar en lugar de esas comillas estas comillas de aquí vale evidentemente si abro con sencillas cierro con sencillas y si abro con dobles cierro con dobles y tiene que haber una concordancia ahora de la misma forma no te digo que mysql utiliza las comillas abiertas para no colisionar para no facilitar colisiones como por ejemplo las siguientes yo quiero cambiar el nombre y digo nombre es igual a atención aquí en el problema jose vicente el guapo pero hay un problema porque estas comillas yo quiero que sean como de un mote pero si aquí pongo comillas sencillas y aquí pongo comillas dobles perdón aquí comidas sencillas también el programa cree que estas comillas sencilla están cerrando a estas comillas y esto va a dar error tomar un error común piano entonces de esta forma yo puedo seguir la misma regla en sql que sigo en cualquier otro lenguaje de programación que es que si las comillas externas son comillas sencillas las comillas internas son comillas dobles y no hay ningún problema si las comillas externas son comillas dobles las comillas internas son comillas sencillas y no hay ningún problema o puedo seguir la regla de que si tanto comillas internas como externas son sencillas hay un carácter de escape que es la contra barra mediante el cual yo le puedo decir al programa que estas comillas de aquí también son sencillas pero no cierran a esas comillas de ahí en cualquiera de estas fórmulas de comillas es válida mysql lo que hace es que por defecto me pone estas comillas de acento abierto para evitar este tipo de colisiones que se suelen dar de hecho en muchos casos vale pero fíjate que si yo uso cualquier fórmula en este caso voy a usar la fórmula de las del carácter de escape web identificador es igual a 1 debería continuar y fíjate que me voy a usuarios y he metido jose vicente el guapo vale es decir he metido algo que va entre comillas no es lo que te quiero decir es que las comillas por defecto las que suelo poner son las que están debajo del signo de interrogación pero más allá de que sean estas comillas porque pueden ser las dobles lo importante es que entiendas que el tema de las comillas al insertar cadenas es delicado porque como dentro haya otras comillas hay que tener cuidado con escapar las correctamente y verás yo en este caso estoy diseñando como te puedes imaginar una base de datos genérica no te digo genérica quiere decir que ahora mismo todavía no sabemos para qué la vamos a utilizar estamos aprendiendo algo que nos sirva para prácticamente cualquier tipo de proyecto entonces claro en programas de aplicación es decir cualquier a veces es decir mucho porque hay muchos tipos de aplicaciones entonces hay una cosa que es lo que se suele hacer en bases de datos que sirve para enseñar varias cosas a la vez que es algo así como la santísima trinidad del comercio electrónico la santísima trinidad del comercio electrónico así como en religiones y el resto de padre-hijo espíritu santo pues en el comercio electrónico la santísima trinidad es clientes productos pedidos sólo cuando hay clientes productos pedidos es cuando la tienda funciona si falta alguna de estas patas la tienda no funciona entonces si te fijas no ya sólo para tiendas online sino cualquier aplicación web tiene usuarios pero que que tenga usuarios a cualquier aplicación web hace algo entonces esa aplicación web tiene también servicios los servicios son productos por ejemplo y una vez que tienes usuarios y una vez que tienes productos servicios es cuando los usuarios contratan o se asocian a estos productos y luego podemos crear mil millones de hablas más pero prácticamente en cualquier aplicación de gestión de empresa de comercio de lo que sea lo mínimo es crear estas tres tablas nucleares entonces ya tengo la tabla de usuarios a continuación vamos a crear la segunda tabla de productos o servicios o lo que sea vamos a ponerle un nombre genérico para luego poder reutilizarla yo puedo a continuación crear una tabla de dos formas diferentes y es lo mismo o bien creó una tabla desde aquí poniendo un nombre y poniendo el número de columnas o bien pincho este botón que haya aquí que pone nueva pero claro si yo pongo ahí nueva en principio parece que no voy a poder elegir el número de columnas pero da igual porque antes ya he dicho que se pueden ampliar todo lo que haga falta entonces a continuación la unidad aquí nueva se me crea automáticamente con cuatro columnas pero no pasa nada porque fíjate que aquí arriba le puedo poner por ejemplo cuatro más le doy a este botón continuar que no tiene nada que ver con este botón de aquí de guardar y fíjate que lo que hace es que me mete cuatro columnas más puedes meter tantas columnas como quieras nombre de la tabla no sé voy a poner es que no se me ocurre una palabra que sea más global ya que engloba productos y servicios no se me ocurre una palabra que se llama superior más genérica más abstracta gestión gestión y gestión y luego ya veremos como llamamos a la contratación de igual da igual lo que lo que quiero es hacer algo tan genérico que luego sirva de plantilla para que hagas lo que hagas simplemente modifique esta plantilla y ya lo tengas un lugar tener que empezar desde cero entonces voy a empezar de nuevo déjame quitar esta chuleta porque no nos hace falta no quiero guardar esto vale y voy a empezar como antes identificador es un número entero tiene longitud 255 es índice primario acepto esta ventana que sale flotante y le doy a auto incremental prácticamente cualquier tabla que hagas te digo ya que va a tener esto aquí arriba identificador entero 255 primario auto incremental a partir de ahí lo que vamos a hacer es introducir una serie de productos por ejemplo voy a poner nombre el nombre del producto anticipo un problema y es que en usuarios hay una columna que se llama nombre vale pero pero quiero que sea así porque quiero enseñarte ese problema para luego enseñarte resolver ese problema así que quiere quiero la colisión quiero la descripción quiero el precio quiero el peso quiero las dimensiones y no sé el momento y quiero en la existencia o sea quiero saber cuántas unidades tengo en el caso de que sea un producto físico bien ahora lo que hago es qué nombre es un marchar descripción podría ser un campo razonablemente grande pues lo que voy a hacer es poner un texto para que sea un campo que pueda crecer precio es un marchar porque igual le ponemos el euro detrás no lo sé marchar eso es marchar dimensiones sabes podría poner geometría porque son son datos espaciales pero bueno voy a poner un marchar y existencias en este caso que ponen un número entero porque existencias es el número de elementos que hay ya a ver depende del tipo de producto que sea igual me queda en medio media unidad en el almacén mete a saber pero yo en este caso lo que voy a hacer estudiar por unidades enteras verás verás efectivamente no ya sólo para guardar la información sino el precio si es un campo numérico el hecho de que sea abarcar hace que el precio esté aguardando como una cadena alfa numérica con una cadena de caracteres y eso en un futuro nos podría causar problemas de que en lugar de sumar por ejemplo encadenar a mysql tiene un comportamiento bastante bueno en el sentido de que aunque los campos numéricos se han marchar luego no suele dar muchos problemas a la hora de hacer cálculos matemáticos ahora bien dicho esto lo cierto es que por ejemplo en el precio le podría poner que es un campo decimal o un campo flotante mucho cuidado porque atención fíjate que he pinchado un decimal y quería que lo viera no sé si lo ves porque parece prendido en la pantalla pero quería el everest la chuleta que es mero la chuleta que aparece a la derecha y nos dice cuál es la fórmula para meter ese número y nos dice quiero que me digas los dígitos y los decimales ya me tienes que poner dígito coma es decimal entonces yo por ejemplo voy a decimal y así como aquí voy a poner el 255 aquí los 55 aquí 255 personas aquí aquí en los 55 lo voy a decir cuál es el máximo que puede costar un producto en mi tienda pues por ejemplo imagínate con producto emitida puede costar un máximo de 9 mil 999 son cuatro números con lo cual pongo un 4 y a continuación pongo una coma y digo vamos a ver en el sistema en el euro en españa’ cuántos dígitos máximo puede tener un producto teóricamente puede tener 2 aunque hay muchas empresas que en su catálogo de productos especialmente en productos pequeños pero tenemos que el precio unitario es muy pequeño porque la unidad es pequeña pueden tener tres decimales aunque por supuesto luego en el total total de la factura tiene que tener dos decimales vale yo en este caso con un 2 y con esto lo que estoy diciendo es que voy a tener cuatro posiciones numéricas dos posiciones decimales ahora peso voy a poner marchar 255 dimensiones como nosotros ya el formato de banner voy a poner más cartón 55 luego siempre puedo venir aquí y puedo modificar la estructura ya sabes que te he dicho antes que no es recomendable pero poder se puede hacer y por tanto ahora a continuación lo que hago es lo siguiente a continuación voy a pulsar sobre guardar tengo la tabla de gestión y una vez que he insertado una vez que he creado esta tabla a continuación voy a insertar registros yo te pregunto qué vamos a vender y mientras me da igual carla tiene estamos porque atractivos entonces vamos a insertar e intentamos un nuevo registro lo voy a hacer en este caso mediante formulario para que es más sencillo fíjate que el campo texto aparece con una con una entidad diferente con respecto a lo que puedo rellenar con el campo marchar entonces digo calcetines blancos y digo maravillosos calcetines frescos para el verano y la bola porque hay precio cuidado decimal 42 voy a meter 5.0 cuidado ten en cuenta que mysql es originalmente era un software que vas a reír sueco actualmente es propiedad de la empresa oracle que es norteamericana entonces eso quiere decir que los decimales van en conjunto y no con coma aunque la base de datos esté en castellano pero el sistema numérico no es el español donde los decir los decimales son las comas y los separadores de millar o millón son los puntos aquí es al revés decimales punto y separadores son comas peso 13 y dimensiones uno por uno por uno me acaba de inventar y existencias tengo diez unidades así que a continuación debería continuar y ya tenemos este elemento insertado correctamente precio de hecho fíjate qué puesto 5.0 yo no recuerdo haber puestos dos ceros pero como me he comprometido a 5,2 perdón a 42 automáticamente el sistema me ha rellenado con los dos ceros prospectivos voy a insertar unos calcetines más y ya pasamos la tabla de ventas voy a insertar ahora quiero calcetines en el día del padre y digo calcetines horribles porque sí no no son del día del padre son precio nos encuentra portantes pues 3.2 para reponer al otro 0 peso un kilo de calcetines uno por uno por uno y existencias tengo diez unidades les voy a continuar y me voy a gestión compruebo como ahora tengo dos productos dentro de de la base de datos y ahora es cuando voy a crear una tercera tabla no ya sólo estas tablas sirven a nivel de crear una plantilla para que luego lo pueda utilizar en prácticamente cualquier tipo de aplicación sino que también es la tercera tabla va a tener un factor idac tico que es el que es lo que ocurre cuando cruza los datos de otras tablas vamos a por ello a continuación lo que voy a hacer es crear una tercera tabla esta tabla que voy a hacer te lo digo ya de entrada parte de un supuesto que es incorrecto entonces el supuesto en el cual voy a partir es que un usuario compra un producto si ese caso si ese supuesto fuera cierto la tabla que yo iría a crear ahora sería correcta en ese caso rara vez suele ser correcto lo normal es que un usuario compra varios productos en cuyo caso habría que crear dos tablas una que se va a pedidos y otra que se llama líneas de pedido pero a continuación voy a empezar con la tabla pedidos para ello voy a crear una nueva tabla se va a llamar peligros voy a meter cuatro columnas más la primera ya sabes el identificador es entero 255 index y primario le voy a continuar y es auto incremental y ahora a continuación lo que tengo que hacer es poner el usuario el usuario realmente no es un dato que pertenezca a esta tabla sino es un dato que se saca de esta tabla entonces a continuación la voy a llamar y de usuario porque ahí no voy a meter al usuario voy a meter al líder del usuario lo voy a meter como el dni del usuario y metiendo el dni del usuario y luego cruzando los datos podré sacar el resto de datos del usuario a continuación de la misma forma que antes cosa que acabo de hacer el usuario voy a hacer y de producto aquí no meteré el producto entero sólo meteré el ide del producto pero hay un problema y el problema es el siguiente y es que trabajando de esta forma y ahora por ejemplo podría poner otro campo que es la cantidad es decir la cantidad de productos que voy a comprar la cantidad de este iré haciendo esto yo solo puedo comprar un producto dicho esto dicho esto hay gente que podría decir bueno no técnicamente porque puedes poner y de productos y cantidad 2 pero esto es pan para hoy hambre para mañana porque dices vale muy bien con esto puedo comprar dos productos y si quiero comprar tres pues yo podría poner y de producto tres y cantidad 3 pero siempre siempre siempre podrá aparecer a alguien y decirme y si quiero comprar cuatro productos es decir aunque yo crea y 500 productos siempre vendrá alguien dirá y si quiero comprar 500 uno hay diferentes estrategias en principio atención una vez más te voy a hablar de la diferencia entre la teoría y la práctica en principio esto que acabo de hacer no se debería hacer nunca esa es la teoría la práctica dice que si mi cliente me asegura y me jura que en su empresa nadie puede comprar más de tres productos y cumple su promesa en este caso esta solución tampoco es mala es válida vale entonces esto es lo que se llama una relación de 1 a n es decir un usuario puede comprar n productos cuando se produce una relación de 1 a n teóricamente los n productos comprados deben ir en otra tabla diferente esto ahora mismo hoy todavía no lo vamos a hacer pero que sepas que se puede hacer lo cual me lleva a hablarte aunque sea superficialmente de otra cosa y esto que te acabo de decir esto de que cuando un usuario compra de productos automáticamente hay que crear otra tabla tiene el 4 acabo de decir solo por cómo te lo acabo de decir tiene pinta de regla tiene pinta de regla repetible tiene pinta de caso que se suele dar entonces una vez más lo vuelvo a repetir una vez más yo soy una persona que intentó conocer la teoría pero no sólo la teoría sino que luego la práctica hace que la teoría ya veremos cómo se aplica dicho lo cual te quiero decir que existe una cosa que se llama normalización de bases de datos y de hecho existen según el autor evidentemente pero existen wikipedia e incluso una serie de reglas formales y las reglas formales ahí las tienes son por ejemplo las formas normales es una serie de cinco reglas más esta e incluso hay reglas de coz y hay otros autores que proponen otras reglas pero en definitiva como la normalización de bases de datos es algo que es duro lo que ocurre es que aparecen una serie de personas serie de reglas que dicen mira no te compliques sigue estas reglas de cabo a rabo o sea no pienses tú sigue eso tal cual y tu base de datos tendrá una buena forma una buena forma desde el punto de vista en el que podrá crecer correctamente representar a los datos correctamente no habrán fallos en las personas los datos no habrán duplicados no habrán datos que sobre cosas de éstas vale entonces quiero decirte que estas formas normales existen y están bien así que te voy a decir que es una no no lo son están muy bien están muy bien pensadas son una de esas cosas que tiendo a no enseñar las tiendas a no hacer demasiado hincapié en ellas porque son lo típico de que cuando un alumno lo ve se vuelve talibán en el sentido de gua pues cualquier cosa que no cumplen las normas formales es que no vale es como evernote flip es vale ya conoce las formas normales pero cuando esté justificado tranquilo que te las puedes saltar cuando esté justificado vale pues de momento lo que voy a hacer es poner y de usuario atención como él y de usuario es un y de y el ide es un número lo voy a dejar en entero 255 aunque sobra pero bueno como el id de producto el y de identificador no es un marchar es un número lo voy a dejar en entero 255 y en este caso la cantidad vale pues hay empresas que te venden porciones de productos no te digo que no pero yo por ejemplo voy a asumir que esta empresa que vende productos enteros no teniendo medio calcetín no te vende un tercio de cafecito teniendo un pack de calcetines o no te lo vendo pero tengo un decimal de calcetines entonces voy a que es un número entero me sobran cuatro campus exactamente igual porque ahora al meter el programa nos va a quitar le digo guardar y a continuación dentro de pedidos voy a introducir un pedido lo voy a introducir de una forma que te va a parecer terriblemente incómoda de hecho lo es pero ten en cuenta que el objetivo de la base de datos no consiste en manejar nosotros directamente como seres humanos la base de datos consiste en que luego manejemos la base de datos a través de un lenguaje de programación donde comportando porque esto que también se queda trabaja para ser terriblemente incómodo pero tranquilo que luego tiene su razón de ser entonces insertó un registro y no meto el identificador porque ya sabes que yo nunca lo meto de la gestión automáticamente el programa y le digo el usuario 1 que es jose vicente que yo me acuerdo que es jose vicente y tú dirás sí pero luego acuérdate cuando tengas 3000 usuarios sobre quién es cada uno de ellos el usuario uno va a comprar el producto calcetines blancos que era el número uno que una vez más te digo luego acuérdate de memoria y va a comprar tres unidades de calcetines uno así que le doy a continuar y esto ya es el pedido está claro que ocurre que luego voy a insertar y voy a decir el usuario 2 que es pedro va a comprar el producto 2 que es calcetines del día de padre va a comprar lo que se 5 acaso tienes para regalar allá de los padres que amigos pero que ya sean padres pobrecillos desgraciados que ya han caído pero le voy a continuar y vale y claro si yo le he hecho un vistazo a esta tabla esto es muy duro de leer salió como me voy a acordar de memoria quién es cada usuario y qué y cuál es cada producto es más aquí está la cantidad pero dónde está el precio pues el precio está en la tabla de gestión así que tengo la información partido en dos tablas tengo por una parte el usuario y tengo por otra parte el pedido y luego pues está perfecto el producto vale pues ahora a continuación vamos a ver una cosa que son las peticiones cruzadas y verás como con las precisiones cruzadas podemos aunar el contenido de estas tablas voy a hacer una demostración de la precisión cruzada pero no te asustes porque la voy a hacer rápido en la próxima sesión la volverá a explicar poquito a poquito lo que quiero es que veas cuál es la utilidad de tener la información en varias tablas y quiero que veas como luego efectivamente las vamos a poder cruzar entonces a continuación me voy a sql solo se pueden hacer peticiones cruzadas utilizando sql no se pueden hacer peticiones cursadas directamente me voy a sql y ahora digo select all from pedidos insisto lo voy a escribir rápido y el próximo día lo volveré a escribir pero explicándole poquito a poquito y diré left join salió in unir unir por la izquierda usuarios donde pone realmente en pedidos y punto y de usuario es igual a usuarios punto identificador o sea qué columna de pedidos corresponde con qué columnas de usuarios y además le digo que también quiero gestión quiero unir con gestión gestión no con pedidos punto y de producto es igual a gestión punto identificador con esto yo de momento lo que acabo de hacer es una super petición he hecho una petición pero que involucra a tres tablas a pedidos a usuarios ya gestión quería continuar y al darle continuar fíjate que me aparece identificador pero me aparece un usuario me aparece nombre y apellidos y me aparece calcetines blancos y descripción y precio y dimensiones entonces me aparece todo y al cruzar la información no sólo tengo esto no sólo tengo esto sino que tengo también todo lo demás pero además yo puedo hacer más cosas yo no quiero ver esto si ya tengo el nombre para que quiero ver los numeritos de identificación entonces yo puedo hacer cosas mucho más avanzadas y decir select usuarios punto nombre as nombre como usuarios punto apellidos as apellidos coma gestión punto no tan peligroso punto cantidad las unidades y de no saber gestión punto nombre as nombre del producto como era fíjate lo que voy a hacer atención pedidos a perdón y gestión punto precio más precio y ahora atención porque voy a hacer gestión punto precio x gestion.pe perdón perdón no gestión punto precio x pedidos punto cantidad as total entonces claro fíjate evidentemente como se acaba de complicar la petición sql por supuesto pero si no he cometido ningún error y creo que no ahora le doy a continuar y fíjate que uniendo esas tres tablas me dice que josé vicente carratalá ha comprado tres unidades de calcetines blancos que con un precio de cinco euros por unidad tres por cinco es igual a 15 entonces eso de crear una tercera tabla como en la tabla de pedidos que tenga un idioma tan marciano que trabaje todo con numeritos ahora mismo te podrá parecer inconveniente pero desde el punto de vista de que tú luego no vas a trabajar directamente con esa tabla sino que vas a unir la información de esa tabla para obtener resultados verás que es así como realmente se trabaja es lo que acabo de hacer como te digo es una cosa que en bases de datos y una importancia capital que es el lef que son las uniones con otras tablas y esto es lo que en la próxima clase volveré a explicar poco a poco volver a explicar paso a paso para que veas cómo funciona para que veas cuántas puedes poner para que veas que de hecho y ahora quiero hacer todo esto pero además de todo esto le digo que wear usuarios punto identificador es igual a unos lo quiero las compras de jose vicente pues le doy a continuar y verás que sólo aparecen las compras de ese usuario o se hubiera puesto fecha pues le podría decir quiero ver las compras que se han hecho desde la fecha tal hasta la fecha tal es decir esto que estás viendo aquí se parece mucho más a lo que es sql las peticiones sql pueden llegar a ser bastante complejas pero evidentemente sirven a un propósito y al propósito que sirven es para poder cruzar información y para poder mezclar esa información y para poder trabajar de una forma muy potente y muy eficaz verás esto que hay aquí es algo que también te explicaré que se llaman los alias de los campos cuando yo no quiero que aparezca usuarios punto nombre o no quiero que aparezca aunque internamente esté minúsculas pero de cara al cliente final quiero que aparezca con mayúsculas yo lo que hago es que pongo esto ahora bien cuando lo que pongo tiene diferentes palabras si no pongo comillas falla ves allí que me da un error entonces realmente para hacerlo bien tendría que poner comillas en todos porque los alias técnicamente hay que poner comillas pero lo que estoy haciendo es que cuando puedo saltarme lo menos alto y cuando no puedo saltarme lo que es cuando hay espacios entre los nombres de las palabras ahí es cuando pongo comillas pero para hacerlo bien ya dice que te recomiendo que la hagas bien siempre la idea es poner es porque fíjate que si no pusiera esto si me pusiera esto le daría continuar y me aparecería nombre con minúsculas entonces como llega un momento en el que ya no estoy trabajando tanto para mí sino que estoy formateando la información para cómo se la voy a presentar al cliente final yo para mí puedo decir quiero trabajar con minúsculas porque trabajo más cómodo pero el cliente final le puede decir me da igual a cómo es decir yo lo quiero con mayúsculas con lo cual los alias de columna me sirven para que yo pueda trabajar como yo quiera pero de cara al cliente final yo le puedo aprender la información cómo quiere el cliente

pues vamos a continuar y voy a entrar en php 2000 yo pongo una falta que lo pongas pero yo pongo usuario y contraseña voy a entrar dentro de la base de datos que hicimos el otro día y el objetivo de hoy hay varios objetivos en el día de hoy evidentemente todos ellos muy importantes pero el primer objetivo consiste en analizar en desgranar poco a poco las peticiones cruzadas ya que yo te diría que cuando una base de datos está en producción en real es decir cuando una base de datos es de verdad yo te diría que el 90% de las peticiones que hagas a la base de datos incluirán datos de varias tablas a la vez entonces recordamos que tenemos una tabla de usuarios y recordamos que tiene un identificador tenemos una tabla de gestión que tiene productos que tiene también un identificador y recordamos que tenemos una tabla de pedidos que aparte de tener su propio identificador identifica al usuario mediante el id de usuario e identifica al producto mediante el id del producto la idea es que aquí en el usuario no me hace falta meter todo el usuario porque simplemente lo que hace falta es que la referencia al identificador pero cuando eso ocurre lo que pasa es que esta tabla de pedidos es muy difícil de leer entonces si quiero obtener no ya una petición a la tabla de pedidos sino una petición cruzando los datos entre la tabla de pedidos en este caso la tabla de usuarios y la tabla de gestión es cuando tengo que hacer una petición de tipo join lo que se llama en sql una petición de tipo join esto que vemos aquí es una clave externa o una clave ajena mientras que este número es una clave propia porque es una clave específica de esta tabla esto es una clave pero no es una clave de esta tabla es una clave que está haciendo referencia a otra tabla vamos a sql y voy a hacer el momento tiene una consulta de grabado anteriormente esto es porque el otro día me dejaría la consulta anterior de igual no la quiero entonces le digo select all from pedidos where 1 esto recordamos que lo puedo quitar select el from pediros asterisco select almohadilla le doy a continuar y salen los pedidos sale de momento lo mismo lo que estoy haciendo es pedir en crudo lo mismo por cierto que dispositivo que te acostumbres a separar las peticiones en líneas y de y de esa forma ahora cuando la petición se complique haciéndola en varias líneas podremos entender mejor qué es lo que hace cada línea entonces voy a bajar aquí abajo voy a quitar este estos estos caracteres estos comillas y ahora quiero ser el from pedidos y quiero cruzar cruzar de momento todos los cruces que vamos a hacer lo vamos a hacer por la izquierda así que le point y digo la tabla con la cual quiero cruzar si de momento los hacemos por la izquierda entonces verás te digo porque muy brevemente pero tampoco me quiero complicar ahora mismo demasiado con ello verás cuando yo empiezo con una tabla principal selector from pedidos lo que hago es decirle al sistema que la tabla de la izquierda es la principal y la tabla con la cual 1 es decir usuarios es en este caso la tabla que viene por la derecha en estas dos tablas existe un parámetro coincidente que es por ejemplo en este caso el id de usuario y en este caso ocurre que en ambos dos sitios existe el id de usuario con lo cual eso quiere decir que da igual que a un raid join que que haga un lesión porque en los dos casos existe una clave ahora qué pasaría si en una de las dos tablas no existiera esa clave pues lo que pasaría es que mandaría la tabla left o la tabla right es decir si yo hago un cruce con left y en pedidos existe en la clave y en usuarios no existe al programa le da igual porque left existe en pedidos pero si pusiera el right join y existiera por ejemplo aquí pero no existiera aquí que es la right right manda y entonces no aparecería ningún resultado pero insisto esto ahora mismo de momento es un poco complicado para el nivel en el que estamos vamos a hacer un lección podríamos hacer un link realmente y vamos a por ello entonces si yo ahora le doy a continuar lo que va a ocurrir es que tengo un error porque me dice me has dicho un leve join me has dicho que una una tabla con otra pero cuando las tablas se unen es algo así como cuando uno las piezas de un puzzle en gestos a ver qué pieza coincide con qué pieza entonces sabemos que en pedidos vamos a las columnas en pedidos el líder de usuario coincide con el identificador del usuario de otro fíjate que tienes hay una clave entonces yo vengo por aquí y pongo on y le digo pedidos punto y de usuario es igual a usuarios punto identificador lo que estoy haciendo es decirle al sistema cual es la columna de una tabla que corresponde con la columna de la otra tabla si ahora le doy a continuar ahora si comprobamos como tengo la unión de la tabla de pedidos con la unión de la tabla de usuarios y al hacer esto observó que esto para empezar está correctamente hecho pero observo que tengo información de sobra porque digo si ya me das el usuario para que me das aquí los datos del usuario para que me das el ide de usuario si ya lo tengo aquí y de hecho si quiero por ejemplo hacer un listado de lo que han comprado los usuarios quiero su nombre sus apellidos y su dirección para facturar pero no quiero su usuario y su contraseña entonces vemos que cuando hacemos un leve join el asterisco nos dice que lo seleccionamos todo y yo quizás no lo quiero seleccionar todo vamos a ver eso entonces para trabajar con eso a continuación lo que vamos a hacer es lo siguiente en lugar de poner un asterisco yo voy a decir lo que quiero y digo usuarios punto quiero el nombre como usuarios punto apellidos como usuarios punto email y digamos que ya está de momento vale entonces yo vengo por aquí le doy a continuar y sólo obtengo los tres campos que yo he especificado por defecto si yo no digo nada sale el nombre original del campo yo puedo utilizar una cosa que se llama alias que exponiendo as y pongo lo ideal es que pongan comillas sí o sí todas las veces pongo nombre del usuario as apellidos del usuario y as e mail del usuario esto no modifica los nombres de las columnas originales pero me permite que al formatear la salida pues aparezca un poquito más digamos mejor formateada álvarez acá un poquito más clara yo a continuación voy a separar un poquito de esto no pasó nada porque pongas espacios aparte estoy poniendo espacios para que entiendas mejor el significado de cada bloque yo puedo hacer aquí varios joint de hecho como ya te digo hacer varios jones cuando la base de datos se complica es lo más normal del mundo entonces yo vengo aquí y digo left join y rompan pam pam pam join donde estás en gestión y ahora tengo que decir que es lo que coincide con pedidos punto y de producto es igual a gestión punto identificador cuidado porque en este caso lo que ocurre es que he empezado ya a filtrar vale entonces continuó sale de momento lo mismo pero como he empezado ya a filtrar ahora vengo por aquí y digo pedidos punto no pediros punto cantidad cantidad de producto pedido coma gestion.pe no me has producto comprado como gestión punto precio as precio del producto y tal y como hicimos el otro día pedidos cantidad multiplicado y esto quiere decir que hay operadores aritméticos x gestión punto precio as subtotal por ejemplo y entonces lo que ocurre ahora es que le doy a continuar y fijémonos que tenemos que el nombre de usuario apellido de usuario email de usuario cantidad que ha comprado el producto que ha comprado precio que vale cada unidad precio el producto por unidad podría haber puesto y es un total y de esta forma como verás tenemos una petición que bueno nos ha costado unos cuantos minutos de hacer pero como te puedes imaginar pues es una petición totalmente y absolutamente útil desde el punto de vista del momento notificaciones vale desde el punto de vista de barbaridades tablas y evidentemente poder trabajar con todos estos datos ahora esta petición como ya te digo nos ha costado un poquito de hacer y ahora debo tener mucho cuidado es más debo tener mucho cuidado no debe tener mega cuidadísimo porque si yo ahora pincho en cualquier otra parte de la interfaz de usuario yo voy a perder esta petición entonces es una petición que me ha costado un poquito de hacer y no quiero perderla para empezar evidentemente te podría decir que la podemos copiar y podemos abrir un procesador de textos y la podemos pegar vale para no perderla pero es la manera un poco chapucera de no perder la información entonces para ello te voy a decir que aquí abajo hay una serie de herramientas tales como por ejemplo puedo imprimir la consulta puedo copiar la consulta al portapapeles puedo exportar la nueva hora ahora luego a continuación te voy a hablar de exportaciones e importaciones puedo crear un gráfico pero la herramienta de la cual te quiero hablar ahora mismo la herramienta de crear vista una vista es algo así para decirlo coloquialmente como una petición sql que tú te guardas para más adelante y ahora verás por qué voy a crear una vista pincho crear una vista y el sistema vale me dice ver nombre esta vista se va a llamar a pedidos de cliente evidentemente era la petición vale voy a bojan o poner espacios por si acaso me mola mucho voy a poner quien bajó y ya está así que le doy a continuar y ahora quiero que te des cuenta de lo siguiente y es que aquí a la izquierda donde antes tenía tablas ahora además tengo vistas en vistas yo voy a poder crear diferentes vistas pero de momento tengo una llamada a pedidos del cliente y si hago clic en pedidos de cliente te darás cuenta de que con un solo clic obtengo el listado de elementos que hay dentro de esa de esa vista pero es que te digo más para qué sirve una vista si yo exporto hoy imprimo esto esa exportación es estática quiere decir que sale lo que haya en ese momento pero las vistas son dinámicas y esto lo que quiere decir es que si yo era voy a crear un nuevo pedido por ejemplo y quiero crear un nuevo pedido donde el usuario uno va a comprar el producto 2 iba a comprar 4 unidades del producto 2 voy a continuar evidentemente no relleno el identificador ya sabes tengo ahora 3 pedidos y si yo me voy a la vista pedidos del cliente fíjate como ahora me aparecen tres líneas y dice que ahora pues he comprado aparece que lo puesto aquí le he comprado este tercer pedido la idea es la siguiente la línea como ya te digo de las vistas es que más allá de que en un momento dado no es mala costumbre y que cuando haces una petición compleja te la guardes en algún blog de notas yo lo que sé es que me suelo auto enviarle correo electrónico por si acaso la pierdo pero además de ello si la vista la vas a reutilizar más adelante y en breve es bastante bueno es bastante recomendable que te hagas una vista para poder llamarla tantas veces que quieras o bien atención o bien desde en la propia base de datos o bien desde el propio lenguaje de programación porque fíjate que aquí no estoy dejando de hacer un select from pedidos de cliente y tú dirás qué ventajas tiene esto pues la ventaja es muy es muy sencilla cuando estemos trabajando en un lenguaje de programación y cuando haga una petición una base de datos como te puedes imaginar es mejor en el lenguaje de programación hacer esto qué hacer esto de aquí también te digo que esto que te acabo de decir es un poco interpreta bleu en el sentido de que hay diferentes estilos de programación entonces hay personas que lo que hacen es decidir que ya que hay una base de datos y ya que la base de datos tiene potencia vamos a hacer todo lo que podamos en la base de datos y vamos a darle a la base de datos las consultas lo más más caras posibles y hay personas a la base de datos perdón al lenguaje de programación quería decirte al lenguaje de programación vamos a dar las consultas lo más más caras posibles otras personas que dicen no no yo lo que prefiero es que la base de datos me dé los datos en crudo y ya filtra en ello en el lenguaje de programación y a día de hoy no después de años de experiencia no te puedo decir si una es mejor que la otra yo particularmente suelo hacer la primera que es intentar hacer todo lo que pueda en bases de datos y dárselo más caro al lenguaje de programación porque ella haré otras muchas cosas del lenguaje de programación pero hay veces cuando tengo que trabajar en equipo que he tenido este tipo de discusiones cuando te digo discusiones yo te digo discusiones agrias sabes y no sino lo que los ingleses llaman disca eso es valiosa conversar y decidir vale y hay veces que pues alguien que está en el equipo se maneja muy bien con lenguaje de programación y dice bueno pero porque no puedo hacerlo con lenguaje de programación dices por ningún motivo particular quiero decir no hay nada que lo prohíba padre no hay no hay nada que lo deje de recomendar pero bueno pero ya que estamos sabes entonces ese es un poco la cuestión vamos a continuar bien hace un momento no he querido hablar de la opción de exportación porque quiero hablar ahora de forma específica vale quiero hablar de todo lo que se puede hacer con las opciones de exportación y de importación no ya tanto de mysql sino de esta aplicación de php mayadin entonces si yo tengo por ejemplo una serie de usuarios puedo exportar cualquier tabla voy a empezar con la tarde de usuarios porque es especialmente ilustrativa entonces lo que voy a hacer a continuación es darle a exportar así que pincho a exportar vemos que aquí arriba tenemos exportar e importar pincho a exportar y al exportar yo puedo realizar una exportación rápida o puedo realizar una exportación personalizada puedo elegir algunos campos no recomiendo tocar mucho de esto ahora hablaremos de ello y sobre todo yo puedo elegir una serie de formatos de exportación te voy a decir que la mayoría de ellos no los conozco vale pero bueno la verdad es que la mayoría de ellos tampoco pero hay formatos como por ejemplo uno muy útil que es el formato sql el formato sql es el formato nativo de la base de datos lo que hace es exportar en este caso la tabla algún formato que me va a permitir más adelante un momento que se me ha ido el otro monitor a un formato que me va a permitir llevarme la información a otro servidor porque esto es algo de lo que no hemos hablado hasta el momento que es donde se guardan estos datos y por ejemplo hasta este momento así como por ejemplo en cualquier lenguaje de programación te puedo compartir los archivos en este caso no te he compartido los correspondientes a base de datos porque no hay archivos esto técnicamente que te acabo de decir no es cierto por cierto pero vamos a decir que no hay archivos todo se gestiona a través de ph media mientras supongamos que tú dices no yo es que quiero mi información me la quiero llevar vale si te la llevas en formato sql luego lo puedes importar dentro de cualquier otro servidor mysql puedo exportarlo por ejemplo en formato pdf el archiconocido formato pero voy a exportar más cuantas vamos a ver diferencias vamos a ver diferencias sql no exportó me hago una carpeta exportaciones y exportó importaciones parece que sea vamos a ver exportaciones y editó el archivo sql y si te fijas aparece en un lenguaje de programación en un legado que está en un lenguaje de programación que guarda todos los datos y además en un futuro me permite importar toda esta información en otra base de datos y eso ya ese que ya te lo he dicho antes lo vuelvo a repetir porque es importante a continuación voy a exportar en formato pdf el formato pdf sirve para unas cosas y nos sirve para otras es decir yo vengo por aquí usuarios abro el archivo pdf y veo que tengo esto pero que tengo un pdf que como te puedes imaginar contiene exactamente lo que le he pedido entonces quiero que ocurre pues que si yo tengo un cliente un cliente que no es programador cliente que no es informático y me dice oye quiero que me saques un listado de la gente que tengo en la base de datos esto no sólo vas a enviar en sql porque esto que estás dando le pasará es un pdf porque para un administrativo digamos es mucho mejor directamente un pdf pero claro si tú lo que quieres es guardar los datos en un formato que más adelante lo puedas meter en cualquier otra parte pues claro en un pdf no lo vas a poder hacer pdf está muy bien para imprimir pero yo no puedo un pdf y con esto luego insertarlo en otra base de datos lo que te quiero decir con esto es que cada formato sirve para una cosa diferente en la misma línea del pdf tenemos el formato donde estás open document texto ya como word pero de openoffice o de libreoffice como quieras llamarlo vale entonces lo abro y verás que tengo algo parecido a lo que tengo con el pdf pero el formato editable de hecho las últimas versiones de office es ahí está a la base de datos estructura de la tabla y el volcado de la tabla muy bonito y además editable lo puede editar puedo hacer lo que quiera pero luego no puedo volver a importarlo sin embargo estos como un informe digamos sin embargo tengo open document spreadsheet que es lo que diríamos pues creo que sería como un excel para entendernos como excel pero de open office on libre office lo abro se me abre en un formato de hoja de cálculo yo ahí te voy a recomendar si alguna vez utilizas la opción de hoja de cálculo es ir a personalizado y marcar una opción que es poner los nombres de campo en la primera fila entonces lo lanzó de nuevo lo vuelvo a guardar lo abro y verás que le ha puesto los nombres de campo en la primera fila y entonces y entonces la idea la idea es la siguiente la idea es que con todos aquellos formatos que son formatos de texto yo luego lo voy a tener difícil para poder volver a importar esto pero todo con todos aquellos formatos que están estructurados y que están en tablas como por ejemplo este formato opendocument spreadsheet luego lo tengo fácil para importarlo en otra parte por ejemplo para a continuación aquí añadir un nuevo elemento y luego importarlo no lo voy a hacer ahora mismo pero ahora a continuación lo haré entonces ahora cuando leemos de importación tengo también el formato de microsoft word que es parecido al formato de open document text si hablamos de spreadsheet te voy a decir que el formato de spreadsheet como ya te digo es gratuito es compatible pero su formato pesado entonces hay un formato mucho más ligero que es el formato csv o hay uno optimizado que es el csv para excel voy a el genérico el csv tiene cuidado la limitación de que el documento express y lo que hace es que te guarda varias hojas si hace falta el psv solo guarda una hoja le digo una tabla exacto una hoja exacto de hoja de cálculos o una tabla le voy a continuar y este archivo este archivo csv este archivo csv yo lo puedo abrir con un editor de textos y tiene este aspecto tiene a la vera de su momento tiene este aspecto que estás viendo aquí es un archivo de texto y de hecho csv quiere decir como separated values o lo que es lo mismo valores separados por comas en tres claro la información está estructurada aunque parezca que no porque parece que está caótica pero yo te digo que está estructurada y de cara a leer esto por parte de un lenguaje de programación como puede ser php o puede ser cualquier otro lenguaje de programación leer un archivo csv es mucho más fácil que leer un archivo de ese o leer un archivo excel la idea para leer un archivo de ese un archivo excel hace falta alguna librería aparte que la salle las hay a montones vale pero hace falta una librería mientras que para leer un csv lo puedes hacer directamente con prácticamente cualquier lenguaje de programación de base en tres una vez más no te estoy diciendo recuerda que uno sea mejor o peor que el otro lo que te estoy diciendo es que cada uno tiene ventajas y desventajas con respecto de hecho si existen es cada vez existe un montón es para que puedas elegir el que en un momento dado para ti te represente más ventajas o desventajas digamos vale más formatos de exportación por ejemplo tenemos el formato j son del cual no te ha hablado hasta ahora ya hablaremos en su momento te diría que a nivel informático hay dos formatos que con los años se han convertido en un estándar para compartir información que son antiguamente el xml que curiosamente tenemos por aquí el yet another mark martin language tenemos el xml como un poco más antiguo y tenemos la j son que en los últimos años le ha comido terreno al xml yo lo digo jota son en el mundo anglosajón se llama jason vale pero enrique j son entonces el guardo como j son le doy a continuar y luego lo voy a abrir al igual que el csv la gran mayoría de lenguajes de programación modernos vienen preparados para leer j son y este es el aspecto que tiene un j son vale después es información estructurada puedo ver el identificador por el usuario por el password ya está todo bastante bien estructurado y luego tengo el xml el xml te voy a decir que es un conjunto superior con respecto al html o lo que es lo mismo el xml es el genérico y el html es un tipo de xml el xml es un lenguaje de marcas donde tú te puedes crear tus propias marcas el html es un lenguaje de marcas donde te han creado ya para tí unas cuantas marcas lo abro con brackets y esto es la pinta si te fijas se parece un poco en cuanto a menor que mayor que etiqueta que se abre etiqueta que se cierra etiqueta que se abre etiqueta que se cierra vale se parece a html pero es xml y como ya te digo estos dos lenguajes el xml y el jota son son dos lenguajes pensados para transferir información de un programa a otro en este caso de una base de datos a un programa quiero decirte por cierto que json quiere decir javascript no tensión o lo que es lo mismo notación de objetos para javascript pero eso no quiere decir que sea únicamente para javascript eso quiere decir que originalmente este formato se creó para javascript pero a lo largo de los diez últimos años más o menos se ha convertido en un estándar para compartir información en prácticamente cualquier lenguaje de programación aunque en ninguno de los pasos este de java estoy por el medio vale o sea que si alguna vez buscas información y ves que pone javascript no tensión no te leyes es para cualquiera luego evidentemente tenemos otros formatos tales como por ejemplo póster o php array me lo saca en una matriz de php pues bueno si en algún momento dado voy a hacer una exportación y es y esa exportación la voy a meter directamente en un programa de php por puñetas pues ya la tengo en formato php es decir yo por ejemplo imagínate que quiero meter algo dentro de un programa php pues yo podría sacar un formato csv el formato csv es compatible con cualquier lenguaje de programación y luego en ese lenguaje de programación podría parchear el fsv para trocear lo pero claro si estoy en php para que quiero un csv y empezar a trocear lo si lo puedo sacar directamente en un array nativo pues esfuerzo que me ahorro vale entonces simplemente pues que sepas que se puede hacer y luego hay otros formatos que yo siempre he considerado más extraños como el formato latex donde latex es algo así como el open document texto o el word pero para escribir documentos científicos o documentos académicos latex es un editor de textos pero que funciona todo con códigos digamos en el mundo de la investigación se usa bastante en el mundo del día a día no tanto entonces es un formato bastante extraño yo una vez a las 1000 tengo algún alumno que me dice oye si yo utilizar látex para tesis doctoral pues vale pero no es lo más común de mediawiki table media wiki es el software que hay detrás de la wikipedia entonces si yo entro en la wikipedia y me voy abajo del todo abajo abajo del todo abajo super abajo mega abajo del todo veras que pone power by media week y yo puedo hacer clic en este enlace esto mucha gente no lo sabe y me puedo ir a media week y punto o hereje get mediawiki y me puedo bajar el software de la wikipedia o sea no me puedo bajar la wikipedia como te puedes imaginar lo que hago es que bajo el software de la wikipedia lo que quiere decir que yo me puedo crear mi propia wikipedia en mi página web pero claro cuántas veces uno hace esto pues muy poca es decir igual en algún instituto en algún centro de formación haces esto con fines docentes pero no es lo más normal del mundo que alguien visitar una wikipedia entonces por claro de la misma forma pues tampoco es muy normal que una base de datos se pueda sacar como tabla de mediawiki vale y lo mismo con el formato texto y texto o sea la idea lo que quiero que sepas es que en algún momento tú vas a tener que sacar información de mysql la vas a tener que llevar a otra parte en lo que quiero decirte con esto es que quiero que sepas que hay múltiples formatos en los cuales puedes sacar la información y cada formato tiene una utilidad diferente hay formatos para ir de mysql a mysql y hay otros formatos para compartir información de mysql con otras cosas digamos y una cosa muy importante que te voy a decir es que esta opción de exportación es la que también sirve para hacer copias de seguridad cuando yo cojo no ya la tabla de usuarios sino cuando yo cojo la propia base de datos fíjate que de hecho clic en la base de datos le doy a exportar y le doy a guardar en formato de sql por ejemplo rápido continuo y quiero que sepas que yo ahí me acabo de hacer una copia de seguridad de toda la base de datos y me he hecho una copia de seguridad en el propio formato sql eso quiere decir que si yo me cargo la base de datos yo puedo recuperar la base de datos completa utilizando ese archivo sql con esto evidentemente lo que te quiero decir es que una operación que debes hacer cada equis tiempo cuando manejas una base de datos es hacer esto mismo que acabo de hacer que es una exportación en formato sql para quedarte tranquilo de que si le pasa algo a la base de datos tú tienes la base de datos en un formato que luego vas a poder recuperar y ya sé que me preguntaras porque es lo que me pregunta todo el mundo de baile y cómo puedo hacerlo automatizado que no lo haga yo manualmente sino que se han automatizado te enseñaré a lo largo de la formación hacerlo automatizado pero no me gusta que los responsables de las bases de datos se acostumbren aquí un programa automatizado lo haga por ello es esencial es una buena costumbre asumir la responsabilidad manual de hacer copias de seguridad de bases de datos bien dicho esto salvo la exportación ahora con la exportación ya hemos visto cómo podemos tener la base de datos en la mano vale pero salvo la exportación dónde está mi base de datos realmente esto es generalmente algo que pregunta siempre la gente cuando empezamos con base de datos de proyecto en qué carpeta está y yo suelo decir para intentar distraer la atención de la gente yo suelo decir esto no está en ninguna carpeta esto está en la memoria del ordenador es mentira evidentemente vale pero no solo decir porque la verdad verdadera es que esto está en una carpeta del disco duro pero tú no debes tocar nunca bajo ningún concepto esa carpeta si te preguntas dónde está yo te diré que está por ejemplo en mi caso en el mmamm en tu caso del sunp es muy muy prácticamente igual no hay alma y dentro del man veo que por aquí tengo bueno para seguir dv mysql vale estoy en red de la carpeta de creo que en tu caso igual se llama mysql me parece que en lugar de tener mysql 57 en mi caso y veo que tengo una carpeta que se llama curso aplicaciones web ya tengo una carpeta por cada una de las bases de datos que tengo aquí ya continuación entró dentro de esta carpeta y tengo unos archivos efe rm y unos archivos y bb los archivos efe rm son los que tienen la descripción de la tabla los archivos y bb son los que tienen los datos de la tabla no los toques no nosotros en este momento te digo por qué te digo por qué nosotros estamos trabajando con un sistema de gestión de bases de datos que se llama mysql cuando hablamos de un sistema de gestión quiere decir que nosotros no gestionamos los datos el sistema de gestión gestiona los datos nosotros nos comunicamos con el sistema de gestión el sistema de gestión hace de intermediario pero en este caso hace de un intermediario muy necesario porque realiza un montón de operaciones te lo digo si abres esta este archivo con algún editor de texto te darás cuenta que es un archivo de texto y lo editas como diciendo la voy a editar por detrás la base de datos lo que puede ocurrir es que cuando cargues de nuevo la base de datos la base de datos esté corrupta aunque hayas metido una coma más o les metido un registro más estará corrupta o puedes correr el riesgo de que esté corrupta mi recomendación yo te he dicho dónde están pero de la misma forma que te digo dónde están no los toques porque quien los toca es el sistema de gestión de bases de datos de la misma forma hay quien dice pues mira me cojo esa carpeta de curso de aplicaciones web me la copio en un pendrive y me la llevo a otro ordenador y con eso emigrado la base de datos no si haces eso corres el riesgo a un 95 por ciento de posibilidades de que no te funcione lo de esta carpeta y copiarla en un pendrive y llevarte la otra parte eso es un caso extremo eso es un caso en el que todo lo demás haya fallado el motor de base de datos te haya reventado el ordenador se ha ido a la y digas mira esto es lo último que me queda vale con lo cual si es lo último que te queda pues vale pero si tú lo que quieres hacer es o bien una copia de seguridad o bien una migración a otro ordenador la forma correcta de hacerlo es lo que te ha enseñado antes exportar en formato sql continuamos y lo descargamos esa es una exportación correcta de base de datos vale pues con esto lo que te quiero decir es que ya no quiero decirte porque claro te seguía tratando como un niño bueno quiero decirte no toques esta carpeta es como un niño caca no se toca vale quiero decirte que si la buscas está ahí pero no está ahí para que se supone que la tengas que tocar si no está ahí precisamente para que no la toques y para que la gestione de forma manual el sistema operativo vamos a hablar de importación y ahora a continuación hablaremos de motores de bases de datos y ahora luego realizaremos unas cuantas peticiones más a la base de datos de la misma forma que se puede exportar también se puede importar exportar es importante evidentemente como mínimo en formato de sql no te puedes imaginar como mínimo para hacer copia de seguridad lo vas a utilizar unas cuantas veces al importar lo que hacemos es meter información en bloque dentro del sistema yo puedo importar no tantos formatos pero puedo importar en formato sql puedo importar tabla mediawiki de pasando esto no tengo ni idea que es archivos de forma de ry si te digo la verdad nunca he preocupado de saber qué es y tampoco ni nunca me encontrado con ese formato en mi día a día tal que haya dicho eso o ni nunca en un alumno me ha preguntado y es que me han pasado un archivo error y que yo haya dicho pues déjame que me mire qué es eso no sé qué es eso el csv sí que no sabemos si el documento es principal entonces quiero mostrarte lo fácil que es meter información dentro de mysql me voy a ir a line ine nombres de persona xcel el ine sabes que es el instituto nacional de estadística de españa entonces vamos a ver yo quiero el listado con los 100 no los quiero todos bueno nombre de los residentes pues ya está mira nosotros recién nacidos madre de dios en el dinero te puedes imaginar la de cosas que hay justamente hay un serio en línea hay de todo es increíble entonces voy a darle a ir año 2019 se debe seleccionar la opción y juraría que es la opción pero parece que no entonces 2018 ir y fíjate que me lo guardo en formato hoja de cálculo open open office open xml proyecto escena de trabajo eso quiere decir que me la bajo en xlsx cuidado porque excel soporta open document de spreadsheet pero no pasa nada porque si tienes instalado en tu ordenador el libre office te lo puedes convertir de excel palabras me lo voy a abrir con el libre office abro el archivo xls los tengo por aquí vale vamos a ver si me lo coge correctamente este no está muy bien formada total vale ahora sí muy bien pues quiero el total entonces voy a hacer una nueva hoja de cálculo total me copió esto me copió esto me lo pegó aquí y entonces digo nombre niño si podemos evitar la ñ casi que mejor nombre de vino total ni no nombre ni na total ni ná y esta esta columna la eliminó y ahora me guardo esto vamos a ver voy a hacer una cosa es que esto no está muy bien formateado voy a esto lo voy a pegar aquí claro exacto y eso para una base de datos es mejor y ahora género pongo género no sexo porque un día hablando discutiendo con un amigo mío en el coche me dijo es que la gente usa mal el término sexo cuando realmente ese género me dijo él sabes yo no soy entendido estas cosas pero me dijo me dijo el género es hombre o mujer el sexo es mucho o poco vale entonces por eso tiende a poner género y no sexo entonces voy a poner pues yo que sé una h vamos a ver hasta aquí y una m de hombre mujer masculino femenino yo que sé lo que sea vale entonces ok alguna vez he contado esto en clase cuando digo lo del sexo mucho poco o nada o nada también puede ser el resguardo esto y lo guardo el escritorio como nombres niños lo guardo atención en hoja de cálculo o df como desee en resguardo y ahora mira y ahora yo me puedo venir aquí voy a tablas le doy a importar en cuanto coja el archivo automáticamente como por la extensión va a filtrar en open document express y no ha hecho falta que lo haga yo la primera línea de archivo contiene los nombres de columna de la tabla esto es muy importante y le doy a continuar si todo ha ido bien ahora verás que en la base de datos curso aplicaciones web ha aparecido hoja 1 lo puedo cambiar o preocupes y fíjate que tengo aquí importados automáticamente todos los registros de esa hoja de cálculo porque luego puede formatear vale pero fíjate que lo tengo no tengo automáticamente importado a continuación a continuación te voy a decir que has visto que al importar como yo me he dejado el nombre hoja 1 has visto que se ha quedado hoja 1 no te preocupes no pasa nada porque hay una pestaña específicamente llamada operaciones dentro de la cual yo puedo realizar ciertos tipos de operaciones como por ejemplo en opciones de la tabla yo puedo cambiar el nombre de la tabla a nombres ni nos vale o lo que sea o con minúsculas o con lo que quieras ahora luego lo haremos del motor de almacenamiento entonces le doy a continuar y fíjate que el hecho de que apareciera hoja 1 pues no tiene ninguna relevancia porque yo lo puedo cambiar más adelante de la misma forma utilizando operaciones de exportación y exportación te voy a contar un truco acuérdense de esto que te voy a contar porque es imprescindible y no es un truco de mysql es un truco de cualquier base de datos te voy a contar una historia que me pasó hace años es parecida a alguna historia que te contado anteriormente en cuanto a alumnos excelentes que en un momento dado se traban con alguna parte de conexión a base de datos por ejemplo esta no es la misma historia hace unos cuantos años estaba impartiendo un curso antes hace años me dedicaba a eso ahora ya mucho menos de gestión de este hecho yo trabajaba con este software de esta software que se llama open rp cara de hecho se llama todo es un hombre muy extraño pero vale entonces la idea es que cuando yo hago esto yo aplico informáticamente el erp y hay personas que lo gestionan en este caso había una persona se llama diego que era el encargado de gestionar el erp entonces claro cuando hay un tema informático voy yo y lo hago pero cuando hay un tema de por ejemplo importar la base de datos antigua de clientes pues no es un tema informático es un tema administrativo vale y lo hacía esta persona que la casa había delegado en el llamado diego entonces me llamó una mañana hace unos años cuando estamos con este proyecto y me dijo oye mira es que necesito una reunión contigo porque estoy muy agobiado porque llevo dos semanas intentando hacer algo y no me sale yo cuando llegó no me dijo dos semanas dije dos semanas como ya no me antes sabes no tardes dos semanas en llamarme bueno pues nos reunimos y el problema que tenía era el problema que te voy a contar a continuación y es que yo tengo por ejemplo por aquí una tabla de usuarios y está la de usuarios tiene 1 2 3 4 5 6 7 8 campos sí cuando hagas una importación en esta tabla si yo abro por ejemplo ahora un archivo de excel y ese archivo de excel tiene siete campos no va a entrar porque esta tabla tiene ocho si yo en ese archivo de excel elemento 9 campos tampoco va a entrar porque esta tabla tiene 8 campos pero qué ocurrió en aquel caso es que este chico vino con una hoja de excel que el que nos había preparado sabe todos los clientes y vi la hoja de excel y dije vale vamos a contar dije mira hay 123 457 campos pero te digo de memoria problema cuántos tenía tendría más de 7 y entonces me fui a la base de datos y dije mira tu tabla de la base de datos tiene 8 campos entonces claro dije es que no le has puesto un campo aquí que aunque lo vas a dejar vacío lo tienes que poner vale entonces le metieron hoja de excel un campo vacío y le cogí la hoja de cálculo la metí en la base de datos entró a la primera y yo en ese día yo sentí en mis carnes lo que era la mirada de rayos láser de superman porque ese tío me estaba fundiendo con la mirada o sea los ojos inyectados en sangre sabes como las películas de miedo yo claro ya me miraba porque osea el tío te lo juro que me dijo no me insultes y yo claro me giré como perdonarnos de insultado yo no insulto a nadie y me dice no no ya no me insultes te quiero decir de que sea miénteme dime qué es más complejo o sea porque si tú llegas los ves a la primera y yo llevo dos semanas con esto me hace sentir con lo cual dime qué es un tema delicadísimo moquegua qué difícil que era esto y yo a pues mira no había caído lo siento sabes entonces lo que te voy a enseñar es el truco que le enseñé a esa persona ese día y el truco que enseñó siempre en las clases de base de datos que es un truco con el cual no falla la importación y el truco porque ya te digo que si te falla importante puedes agobiar bastante y el truco es el siguiente deja que el propio programa te dé una plantilla quieres importar algo antes exportarlo entonces yo vengo aquí y primero exportó no exportó por ejemplo en psv quiero los nombres de campo en la primera fila y esto es usuarios ahora a continuación ahora a continuación me lo abro con libreoffice por ejemplo hago así y ahora lo que hago es decir quiero crear a jaime jaime password fíjate que sólo estoy rellenando las columnas jaime garcía martínez jaime correo puntocom la calle de jaime y teléfono triqui triqui ahora lo que hago es que eliminó los dos registros que ya tenía guardo esto y al guardarlo me está haciendo de plantilla ya sabes qué identificador no lo toco porque lo va a tocar automáticamente el programa entonces a continuación me voy a importar me voy a seleccionar me voy a usuarios me voy a estar continuo me dice qué pasa así lo que pasa es que vale bueno dos consultas ejecutadas vale ok porto juraría que no he visto la opción de la primera columna contiene bueno sí sí no pasa nada preocupes lo que voy a hacer es no sé si no tengo por aquí abierto todavía si me voy a cargar a primera columna es que no me quiero cargar la primera luna a verme a probar un poco raro esto importó los usuarios y ahora me dice está muy bien bueno pues bueno se queja de que el interés incorrecto vale pero fíjate que casi tenía ya y lo es de hecho me dice una columna de importación ejecutada pues mira como sé que tengo hasta el número 2 por la meta del 3 y ya está vamos a darle a él importó selecciono usuarios psv continuar y se acabó vale y ahora me voy a usuarios y verás que tengo ahí a jaime correctamente metido o sea el truco es el siguiente el truco es sencillo es que como al importar las probabilidades de error son muy grandes el truco consiste en no permitir que haya esa probabilidad a hacer una exportación y al exportar te está dando el programa la misma plantilla que está activando cuál es la estructura que tienes que hacer y así no es que no te puedas equivocar como has visto pero las probabilidades de equivocarte pues son mucho menores evidentemente como has apuntado muy bien si yo lo guardo en el problema no es guardarlo el problema es importarlo porque por supuesto aquí al guardar con open document mi problema es el siguiente voy a exportar y exportar voy a decirle que open document spreadsheet le digo que personalizado y efectivamente pongo los nombres de campo en la primera fila pero eso también lo tenía en el csv y yo ahora lo que hago es importar y esto me da miedo me da miedo por una razón muy sencilla que ha ocurrido antes cuando hemos importado un archivo o de ese pues lo que ha ocurrido con nombres de niños es que ha creado una nueva tabla pero yo no quiero crear una nueva tabla que lo que quiero es importar en una tabla previamente existente por eso esto que te voy a decir si te digo la verdad no es una certeza al 100% pero a lo largo de los años de usar page o media admin igual me estoy equivocando no lo sé te lo puedo asegurar al cien por cien como se suele decir en estos casos no pondría los huevos la tapa del piano entonces no me apostaría digamos entonces lo que es lo que lo que yo suelo hacer es que si lo que quiero es crear una base ahora una tabla en la base de datos uso el formato o de ese y si lo que quiero es importar en una tabla existente uso el formato csv ya te digo que así como hay otras cosas que te puedo decir que tengo una seguridad del cien por ciento de esta no pero pero nunca he querido arriesgarme a meter usuarios encima de usuarios y que me fastidie la tabla anterior usuarios igual a la base igual lo detecta y la mente a continuación pero no lo sé nunca me querido arriesgar y quiero hablarte de una cosa que no te va a ser importante ahora pero quizás este sea importante el día de mañana que es la siguiente cuando yo creo una nueva tabla voy a hacer como que crea una nueva tabla no lo voy a que acabar de crear te explica dos parámetros de nombre de nombre de columna tipo de dato longitud valor predeterminado no pero bueno tenemos comentario de tabla tenemos cotejamiento y esto es por si en una base de datos en español yo fuera guardar por ejemplo una tabla con caracteres en chino no es normal pero podría ser y si lo fuera es hacer que sepas que se puede hacer es decir se puede variar la colación o lo que se llama el cotejamiento para una tabla concreta pero un parámetro del que no te ha hablado no te va a ser importante hoy pero quiero que lo recuerdes para más adelante no te vas a acordar pero quiero que recuerdes que te lo expliqué y que tendrás un vídeo en el cual tenía es el detalle pero no pretendo que te acuerdes de esto de memoria para una serie de años es el motor de almacenamiento no te he dicho nada de esto todavía cuando creamos una tabla por defecto viene el motor y no debe y no te ha dicho nada porque el motor no debe es el correcto en la gran mayoría de los casos y por eso en la gran mayoría de los casos no hay que cambiarlo ahora bien si despliego esta lista que tengo el antiguo formato my y sam el antiguo formato may y sant existe porque tenemos el merckx mi isám mrc es mertz tenemos un formato llamado memory que yo lo recomiendo mucho a alumnos por ejemplo de videojuegos arte explicaré por qué tenemos el formato black soul que es agujero negro que lo que entra ya no sale es un formato de base de datos donde lo que metes lo tira y todos fantásticos formatos de datos que da todo el que me todo dato que tira en alguna ocasión hace muchos años como te puedes imaginar la y la documentación y dije para qué sirve esto y en la documentación pone un caso de uso que es para diagnóstico que sí que sirve pero como te puedes imaginar no se usa todos los días y luego tengo el formato csv que me guarda realmente la base de datos en formato csv y el formato arkaitz que lo que hace es que la comprime a continuación te voy a explicar cada una de cada uno de estos motores de base de datos te lo voy a explicar si puedo porque suelo encontrar una tablita bastante chula en la propia documentación mysql storage engine sí pero no bueno voy a esto y voy a esto sí pero no trabaja esto ahí estamos vamos a ver vale para empezar vamos a ver una de las principales una de las principales ventajas que tiene y no debe es que tiene road level lo que si nos fijamos de hecho aquí se pinchó y no debe me aparece por ahí road level locking y claves foráneas él lo que la plana en la que tienes que fijar es lo que que es el bloqueo qué es lo que ocurre cuando dos personas acceden a una misma base de datos pues teóricamente para mantener la integridad la base de datos si la primera persona accede la base de datos se bloquea para esa persona y cuando esa persona acaba su transacción la base de datos se desbloquea para atender a la segunda persona la segunda persona no se encuentra la base de datos bloqueada sino que cuando la segunda persona hace una petición esa base de datos entra en una cola y la base de datos cuando se desbloquea automáticamente atiende al siguiente en la cola y esto que te estoy contando dura millonésimas de segundo o sea esto dura prácticamente nada y no debe es un motor de base de datos que en lugar de bloquear la base de datos entera hace row level locking es decir si yo estoy trabajando con usuarios y yo jose vicente estoy editando este este valor del nombre que está en un roe está en una fila tu puedes editar otros valores sin tener que entrar en una cola porque el sistema lo que hace es bloquear solo esa fila pero no bloquea la tabla entera ni bloquear ni bloquea la base de datos entera eso quiere decir pues que nos ahorramos con las de prioridades de usuarios y por tanto lo que quiere decir es que la base de datos funciona no sólo más rápido que también sino más eficientemente porque tú me dirías si estoy editando la línea de jose vicente para qué puñetas quieres bloquear toda la tabla bloquear solo jose vicente vale entonces antiguamente la base de datos que venía por defecto era my hisham my y sam tiene una buena aquí tiene una buena digamos un buen ratio de carga pero sin embargo tiene table level blogging no row level lo que lo que quiere decir es que cuando tú lees te bloquea toda la tabla hasta que acabas de realizar tu transacción vale entonces es por esto que mi isám desde luego sigue valiendo pero desde hace unos cuantos años no sé 67 años la tabla que viene por defecto el motor que viene por defecto es y no debe te vuelvo a decir lo mismo del otro día hay que tener en cuenta que esto tiene un efecto perceptible por el usuario cuando estamos hablando de tablas gigantescas cuando hablamos de la gran mayoría de aplicaciones tú nunca vas a notar la diferencia entre y no debe o mais am al esto es cuando hablamos de tablas brutalmente grandes ahora mi isám tiene una ventaja que no tiene y no debe que tampoco creo que vayas a usar en tu vida y es más deseo que lo uses porque si lo usas es que te irá muy bien para lograr el que tiene un motor que es el merge mi isám el merge maysam lo que hace es que agrupa una serie de tablas idénticas my y sam esto qué quiere decir pues ahora verás supongamos supongamos que yo soy insisto imagínate un gobierno entonces yo soy un gobierno y yo quiero guardar millones de registros yo quiero guardar a millones de usuarios y sabes que los meto en una tabla de usuarios como esta que tenemos aquí y es que llega un momento que en un solo ordenador en una sola máquina en un solo servidor es que el servidor se me peta va lento porque tengo millones de usuarios claro yo lo que podría hacer es que como soy un gobierno tengo mucha pasta entonces lo que hago es que no quiero montar un servidor quiero montar 10 servidores que dice 10 dice 100 en lo que hago es que a cada servidor le meto un grupo de personas pero cuidado pero quiero que cuando yo haga una búsqueda yo no tenga que ir servidor uno busco servidor dos busco servidor 3 busco yo quiero que esos equis servidores se comporten como si fueran un solo servidor de base de datos eso es lo que se llama un clúster mysql y cuando haces eso tú puedes guardar en cada servidor una tabla diferente pero si quieres que la misma tabla esté en diferentes servidores en ese caso tienes que usar el merge my hisham pues eso lo que hace que insisto es maravilloso pero es un caso muy concreto y por cierto es maravilloso pero configurar eso es la muerte o sea esto es la leche de complicado pero evidentemente cuando hemos configurado por vale la pena si lo usas te sirve perfectamente para eso para tener como una especie de lo que se llama computación distribuida en el que varias máquinas puedan participar a la vez en un mismo cálculo bien tenemos también csv que como te puedes imaginar mete los la información en campos separados por coma como cuando hemos exportado vale entonces las tablas csv no están indexadas pues lo que te quiero decir es que por defecto no se usa el motor csv solo se utiliza para exportar pero no para guardar información ahora tú sabes lo que son los archivos zip todo el mundo lo sabe pienso cuando tú tienes un archivo cualquier otra carpeta muy grande tú la cipe as pero qué pasa si luego quieres buscar dentro de esa carpeta pues no es tan sencillo o tienes que abrir el archivo zip o tienes que descomprimirlo entonces el motor arkaitz sirve y atención a las dos condiciones que te voy a poner sirve para poner cantidades de datos muy grandes para que no ocupen tanto en en el disco duro porque al final esto usa disco duro como te puedes imaginar pero el acceso a esas tablas dado que están comprimidas es lento es muy lento es caro imagínate que eres un gobierno y accedes pues una vez al año a la declaración de la renta de un usuario pero si tú accedes a un dato una vez al año pues igual la guardas en arkaitz porque es un montón de información y tú no accedes todos los días si es información a la que hacen es todos los días no te vale la pena meterla en arkaitz pero si es información que haga que access una vez al año para que la quieres guardar el himno debe si es que la vas a acceder una vez al año con lo cual en ese caso te interesa guardarla en formato arkaitz insisto sólo para datos que te utilicen gigas y gigabyte gb si no la recuerda march amount vale esa cantidad es muy grandes bien luego tenemos el formato black soul el formato black soul lo que hace es que las peticiones que realices siempre devuelven un conjunto vacío y en este caso fíjate que quieres por una pequeña descripción de estas tablas se pueden usar en configuraciones de replicación donde los statement se usan a los se envían a los servidores esclavos pero el master no contiene su propia copia de la información es decir te acuerdas que antes por ejemplo con el merge maysam te puesto un caso en el que varios servidores hacen lo mismo esto imagínate que digo si quiero enviar información quiero que los esclavos se guarden la información pero el maestro nos la guarde pues es uno de los pocos casos en los que me puede interesar un motor que aparentemente no sirve para nada como es el black hole te estoy explicando para qué sirve dudo muchísimo que lo quieres utilizar nunca vale pero por si alguna vez te lo preguntas y ahora hay un motor que sobre todo como te digo en operaciones de videojuegos a los alumnos que tengo de ese tipo de alumnos y que sólo recomendar el que no está aquí que es memoria yo ante este demostrado que para bien o para mal las bases de datos que he guardado se guardan en el disco duro me morí en cambio guarda la información en la rama como te puedes imaginar el disco duro es más grande que la ram pero el disco duro es mucho más lento que la ram entonces claro si yo guardo datos en la rama el acceso a los datos es mucho más rápido antes se llamaba hit evidentemente y bueno ahí no lo pone pero te lo digo yo hay que tener cuidado porque si apagas el ordenador todo lo que haya en la ram desaparece porque es lo que tiene la ram no es yo te cuento te cuento un escenario de aplicación yo tengo alumnos que desarrollan videojuegos y por ejemplo en una tabla de un videojuego tenemos no tres usuarios sino que tenemos tres mil usuarios en un juego online los tres mil usuarios tienen una coordenada x y y ceta en un videojuego y en un momento dado y esto que te voy a decir te aseguro que no es broma a 30 veces por segundo o a 60 veces por segundo la base de datos tiene que preguntarse a cada usuario dónde están el resto de usuarios y tiene que actualizar los datos de equis y zetas de cada usuario te lo digo insisto calcula 3000 usuarios y al ser una petición perdón a una petición a hacer 60 peticiones por segundo a 3.000 usuarios es una locura pero es necesario en determinados contextos como por ejemplo los videojuegos es claro hacer esa petición a una tabla que está en el disco duro el disco duro lo machaca cuando tienes una petición de ese tipo una petición en las que x veces por segundo tienes que hacer un montón de peticiones ahí es donde debes saber que tienes una un formato un motor de base de datos que se llama memory que puedes utilizar para ese para ese uso claro la gente me suele preguntar oye pero qué pasa si por lo que sea en un momento dado se apaga el servidor si se apaga el servidor la información se perderá y si se pierde la información pues lo que ocurre es que los usuarios dejarán de saber dónde están eso efectivamente se puede dar hay operaciones tales como por ejemplo la tabla de posiciones la mantengas de memoria y una vez cada cinco minutos hagas una copia de esa tabla a una tabla que esté en disco duro de tal forma que si se cae el videojuego si se cae el servidor pues puedes recuperar donde estaban los personajes hace 5 minutos no lo pierdes todo digamos no le dices a tus usuarios oye que habéis perdido toda vuestra partida en suerte de la tío que perdió todo pues más vale eso decir mira te devuelvo a donde estaba dos minutos vale entonces ya te digo que te estoy poniendo el ejemplo de x siguen ya gaceta pero imagínate que esa tabla guarda x y z vida del personaje armas del personaje de salud del personaje objetos recogidos en un momento dado decirle al usuario hoy empieza desde cero puede ser una putada muy grande mientras que si le dices mira he perdido un cacho pero te devuelvo donde estabas y lo que tenía que hacer cinco minutos pues bueno pues el usuario se quejará igualmente pero por lo menos pues no se quejará con tanta razón bien las bases de datos te cuento te cuento te cuento porque he puesto esta voz te voy a hacer un pequeño resumen de lo que va a ser la siguiente clase pero pero de hecho cuando te digo un resumen lo que te quiero decir es que hasta lo tengo por aquí quiero decir está planificado o sea que no voy a inventar sino que decir lo que preguntar qué es basados en ficheros y todo eso vale entonces vamos a ver te cuento el próximo día pero resumo como ya te lo contaré más más extenso te diré que en estas dos clases nos hemos basado mucho en trabajar con bases de datos en el modelo relacional de tipo sql pero esto no es lo único que hay son si te digo la verdad las bases de datos más extensas son las más utilizadas pero no son las únicas que hay en la próxima clase tengo previsto hablarte de bases de datos en archivos planos bases de datos documentales bases de datos de imágenes bases de datos no basadas en tablas bases de datos donde cada registro puede tener una una duración diferente vale pero antes de hablar de eso que ellos eran la próxima clase porque eso se sentía mucho lo que estamos haciendo hoy vamos a acabar mysql bien pero antes de hablar de eso sí que quiero responder a tu pregunta si no la llegas a hacer tú sinceramente yo no lo hubiera resuelto porque es algo que intento hacer como que no existe ahora bien no palabras porque cuando yo creo una nueva tabla aquí en tipo de dato vengo por aquí y veo que existe el campo blog el campo blog almacena en este caso una longitud máxima de 65 mil bytes pero no te ocupes porque también tenemos campos tiny blog tenemos mails y un blog y tenemos long block el long lo almacena 2 a la 32 mira para que tengas la idea lo estás viendo en la pantalla hasta 4gb para para decirte qué no solo vas a poder sino que el tamaño es prácticamente ilimitado porque meter 4 gigas en un registro pues a ver si se puede hacer pero no es lo más recomendable evidentemente para ello como te digo hay que trabajar con el campo blog y vamos a nombre de tabla archivos identificador entero 255 primario incremental y esto es archivo lo meto como campo blog de momento vale y no pongo nada y le voy a guardar y ahora si yo me voy a archivos y yo me voy a importar veré el perdón a importar insertar quería decir veré como yo puedo seleccionar un archivo me dice máximos de 4cast pero ya sabes que por utilizar o me dio un blog o long blog para tener más información ahora bien ahora bien dicho esto yo me voy al curso de aplicaciones web y yo veo que ahora mismo esta base de datos me estaba ocupando y no que te lo diga que lo estás viendo la pantalla 80 casa yo ahora hago una captura de pantalla esta captura de pantalla la tengo en el escritorio ocupa 743 cas me voy a archivos insertó un nuevo elemento captura de pantalla le voy a continuar normalmente así se acaba si momento archivos voy a meterle un long love y así nos curamos entonces cambiar tipo long love y así me cabe todo y en cierto y seleccionó archivo continuó ahí está eso es el binario el binario 1 perdón álex adicional y voy a examinar vamos a ver y me dice que contiene un archivo blog de en 726 cast de hecho si hago clic me lo puedo bajar me lo descargo es un archivo binario reinterpretar para que sea una imagen no es lo de menos tranquilo que no está ya atrapado para siempre pero lo que me importa es que yo ahora me voy a la base de datos y la base de datos bueno ahora me dice que ocupa 80 casas se ve que no ha acabado de actualizar pero claro como te puedes imaginar esa base de datos no ocupa 80 casas de hecho si le doy a exportar pues verás qué curso aplicaciones web exportar y de hecho creo que esto me va a servir para ilustrar te lo mejor posible esto ocupa ahora 1 con 5 megas y si yo ahora lo abro con editor permíteme ponerme un poco dramático pero quiero ilustrar un concepto a continuación explicar de hecho no está bloqueado del griego pasado en mi cara pero no está esta idea la que tengo ahora cuando abra ese archivo que ya te digo que está tardando porque es 15 megas a ver si lo puedo intentar abrir con otro el xerez no sé si lo tengo operativo a edith pero también le va a costar dexter y no lo tengo disponible vale bueno pues vas a ver que si antes eran 80 casas de hecho que no es que te lo diga yo sino que tenemos una exportación de antes si yo subo arriba php miami heat acata archivos y esto de aquí eso de ahí eso de ahí eso de ahí eso de ahí es la imagen es la imagen es la imagen es la imagen es la imagen es la imagen es la imagen es la imagen es la imagen es la imagen es la imagen es la imagen es la imagen es la imagen y al final tengo el resto de la base de datos los nombres niños y todo eso lo que te quiero decir con esto es que se puede pero no es recomiendo porque cuando empezamos a meter archivos dentro de una base de datos esto mismo que estoy haciendo yo estoy dramatizando ya lo sé pero esto mismo que estoy haciendo yo es lo que luego hará el gestor de base de datos cuando busca algo dentro de la base de datos insisto otro vuelvo a decir estoy gra matizando no es realmente así no es que para buscar un nombre de un niño se va a tragar toda la información binaria de la imagen no es tampoco eso pero lo que te quiero decir es que la base de datos crecerá hasta que el 99 99 por ciento de lo que ocupa sean los archivos y el 0,001 sea texto para buscar y entonces será como buscar una aguja en un pajar desde el punto de vista en que el motor tendrá que ir apartando mogollón de información que realmente no les sirve para buscar entonces por eso mi respuesta a tu pregunta es si se puede y no solo quiero que se baje se puede si no te demuestro cómo se hace pero una vez demostrado esto te digo no te recomiendo hacerlo mira cuando en una aplicación tú lo que necesitas es que el usuario suba imágenes mediante una cosa que ya veremos que es el formulario html que gracias a php es capaz de hacer que la información realmente suba al servidor hay un campo que de tipo input que es fácil que te permite subir archivos imágenes o lo que tú quieras ahí hay dos tipos de estrategia una de ellas es voy a estar por aquí una bella es la estrategia de guardarlo en campo blog pero otra que es la que suele utilizar yo es la información en texto la guarda en una carpeta y la información de imagen guardo el nombre de la imagen en la base de datos pero el archivo lo guardo directamente en la carpeta correspondiente y así la tabla de la base de datos sabe dónde tiene que ir a buscar es decir es una solución mixta en la base de datos en lugar de guardar la imagen completa guarde el nombre de la imagen para que luego cuando procesó ese registro le digo al sistema vete a la carpeta de imágenes y búscame la imagen que tiene este nombre concreto vale y ahora por último y cuando digo por último quiero decir que en la próxima sesión vamos a aprender a cómo conectarnos a una base de datos mysql desde un lenguaje de programación voy a entrar dentro de la base de datos y voy a entrar dentro de privilegios y ahora mismo no me podría conectar a esta base de datos desde cualquier otra operación desde cualquier otra parte porque se requiere un usuario y una contraseña para que desde cualquier programa informático nos podamos conectar a una base de datos mysql por seguridad evidentemente esto hará que la primera conexión a una base de datos sea complicada pero te aseguro que por seguridad te conviene entonces me voy a privilegios y dentro de privilegios hay una serie de usuarios en este caso el usuario root que es el usuario maestro este no hay que usarlo nunca que tienen privilegios para acceder pero yo quiero agregar una cuenta de usuario pincho en agregar y a continuación configuró nombre de usuario lo voy a llamar curso aplicaciones web nombre del host dónde está este usuario está en local está aquí mismo en este servidor y pone localhost en contraseña voy a poner curso aplicaciones web y me dice que la tengo que repetir porque la contraseña es extremadamente débil pues porque la contraseña coincide con el nombre de usuario que a su vez coincide con el nombre de la tabla entonces yo ahora mismo tengo que dejarte una cosa muy clara y es que yo estoy haciendo esto con motivo didáctico es decir yo sé que la primera vez que nos conectemos a una base de datos desde php un lenguaje que sea nos va a costar y sé que un origen de error es precisamente el haber puesto mal o el nombre de la base de datos o el nombre del usuario o el nombre de la contraseña lo que hago para que el alumno para que al alumno le resulte más fácil conectarse es poner el mismo nombre en base de datos en usuario y en contraseña pero te lo vuelvo a decir una vez más porque estamos en un curso fuera una base de datos real en producción de verdad de la buena esto sería una práctica fatal habría que poner diferente nombre de usuario diferente nombre de contraseña y por ejemplo una contraseña que tuviera mayúsculas minúsculas números caracteres extraños lo que fuera para que fuera difícil de averiguar y difícil de asaltar por eso te digo una vez más estoy poniendo curso aplicaciones web porque es que además como estoy configurando hoy el usuario y no nos conectaremos hasta el próximo día es que yo pongo ahora una contraseña del próximo día ya verás que diríamos que contraseña pusimos no me acuerdo entonces por facilidad insisto no por seguridad sino por facilidad lo que estoy haciendo es poner cursos aplicaciones webs le digo otorgar todo los privilegios para la base de datos curso aplicaciones web si de esto no tocó nada de momento le voy a continuar bien en la siguiente pantalla actualizo los privilegios ahora lo haremos los privilegios le doy a continuar esto me permite especificar para cada usuario qué es lo que puede hacer cada usuario pero por defecto quiero un usuario que puede hacer de todo porque estará digamos usarlo de usuario maestro le doy a continuar y con esto sí ahora me voy a curso aplicaciones web y me voy a privilegios te darás cuenta como ahora existe el usuario curso aplicaciones web que tiene permiso para entrar específicamente dentro de esta base de datos esto que hemos hecho es imprescindible para que el próximo día o cuando sea como te digo nos podamos conectar desde php o desde cualquier lenguaje de programación a la base de datos con la que queramos trabajar en este caso esta base de datos vale antes de acabar vamos a trabajar con esta tabla que tenemos por aquí olvidaba que es un hombre niños entonces yo lo que quiero por ejemplo es aprender realizar algunas operaciones que no hemos realizado hasta el momento en este caso me preocupa la del tema de los números porque aquí ha pillado el decimal como punto igual lo vuelvo igual lo vuelvo a importar igual lo vuelvo a importar igual lo vuelvo a importar porque el programa ha creído que está en decimales entonces me voy a editar buscar y reemplazar voy a buscar todos los puntos los voy a reemplazar por nada hello bien vamos a ver sí sí probablemente muy bien datos datos los datos partos datos formato celdas sí correcto no quiero un número quiero un texto desde web ahora sí aunque lo coge como texto luego se hace falta lo cambio a número entero en mysql entonces vengo aquí esta tabla de nombres de niños la voy a borrar entonces vengo aquí y le digo eliminar la tabla ahora me vuelvo a importar el archivo nombre es niños la primera línea de archivo contiene y si en un momento dado esto aquí lo tenemos ya hoja 1 operaciones nombres niños si en un momento dado esto me pudiera causar problemas desde el punto de vista en el que la estructura mira la pillado como entero pues ya está fenomenal y va a cambiar el tipo de dato pero la ha pillado bien vale pues me voy a ir a sql y quiero enseñarte que existen más comandos que iremos viendo a lo largo de los días como por ejemplo el comando de agrupar yo quiero saber cuántos nombres de niño tengo y quiero saber cuántos nombres de niña tengo lo que hago es que me vengo por aquí y digo select count un hombre vino en este caso no me va a decir los nombres me va a decir que en total tengo 200 nombres porque porque era si te acuerdas cuando lo hemos sacado de línea eran los 100 más repetidos y los cientos de nombres de niña más repetidos pero yo ahora quiero agrupar por género que insisto me va a salir 100 y 100 pero porque está localizado se realizó inicial es que ha salido bien pues le puedo decir select count y digo group by género le voy a continuar y me sale efectivamente 100 y 100 que es lo que estaba previsto además de contar yo puedo sumar pero lo que quiero no es saber los nombres sino que quiero saber cuántos niños hay en cada nombre sano y noia en cada nombre porque eso ya lo tengo sino cuántos niños hay en en esto en niños y en niñas vamos a verlo para ello te diré que en mysql tenemos una cantidad prácticamente no trigo ilimitada pero muy grande de funciones matemáticas una de ellas es un entonces select sum total ni no froome pero nombres niños nombres negros esto lo que hace es que si voy a continuar me suma que en total hay 211 mil 529 niños pero yo a continuación puedo decirle que esto no quiero grupo by género y entonces déjame ponerle aqui género sumtotal nino así no tengo los datos anónimos sino que tengo el género y el dato y me dice que los hombres son 109.000 y las mujeres son 101 mil es decir todo esto evidentemente que ahora mismo sobre un campo de nombres de niño puede resultar un poco chorra pero realmente no lo ves esto lo que hace con un campo por ejemplo de pedidos es quiero saber los periodos de marzo quiero que me hagas una gráfica que me haga los de marzo los de junio los de julio y los de no sé cuántos quiero saber los pedidos más frecuentes por cliente quiero saber de qué pueblo me piden más productos quiero saber si todos estos son peticiones que tú puedes hacer para en un momento dado obtener resultados y darle como ya te digo la información más cara al lenguaje de programación porque hacer eso con el lenguaje de programación se podría pero fíjate que hacer esto que insisto es una suma que al final hecho hay bastantes sumas hacer esto en el lenguaje de programación sería unas cuantas líneas y aquí date cuenta que sabiendo los comandos correctos de sql y en tres líneas lo tenemos

vamos a ver en un sistema informático evidentemente hay una necesidad voy a abrir el free main para empezar a escribir un poco hay una necesidad que consiste en escribir información que persista entonces en este caso vamos a trabajar con bases de datos aquí previamente he apuntado mysql vamos a apuntar otras cosas a continuación es más lo voy a borrar un segundo para luego probablemente lo voy a volver a escribir pero estamos hablando en definitiva de que lo que queremos es guardar información guardar información para que más adelante la podemos usar la podamos usar de una forma eficaz de hecho si yo por ejemplo entro al disco duro y voy a la carpeta del escritorio yo voy a ver que tengo una serie de archivos bueno esto es una base de datos es decir una base de datos es cualquier sistema que sea capaz de almacenar datos de una forma ordenada de una forma estructurada por ejemplo un disco duro de un ordenador almacena archivos en carpetas y tú puedes crear y de hechos sueles crear una jerarquía de archivos y carpetas y tú en un momento dado cada vez que accesa el sistema te encuentras la misma jerarquía es una jerarquía esperable es una jerarquía lógica eso no quiere decir que todas las bases de datos sean bases de datos basadas en archivos y carpetas pero es inevitable reconocer que es un tipo de base de datos entonces en el concepto de base de datos hay base y hay datos los datos son todos aquellos que genera una aplicación informática y el concepto de base de datos consiste en guardar estos datos de una forma como te digo estructurada y ordenada a continuación vamos a hablar por hacer un pequeño resumen de cuáles son las bases de datos con las cuales te puedes encontrar en tu día a día y digo un resumen porque en la práctica en la historia de la tecnología reciente y moderna especialmente en la historia de la informática aunque haya una serie de bases de datos y han acabado teniendo más fama y que tienen una mayor cuota de mercado pero y esas son unas pocas pero hay infinidad de tipos diferentes de bases de datos hay tantos tipos de base de datos como necesidades han ido teniendo los desarrolladores de a lo largo de las décadas entonces cada vez que un desarrollador ha tenido una necesidad que no cubría un motor de base de datos que existente pues se creaba un nuevo tipo de almacenamiento que ocurre que hay tipos de almacenamiento que han sobrevivido más y mejor y hay tipos de almacenamiento pues que no han sobrevivido tanto entonces por eso te digo que yo aquí ahora te voy a poner unos cuantos ejemplos pero esto no quiere decir que lo sean todos bien tenemos bases de datos basadas en archivos y en carpetas como te digo por ejemplo si yo guardo en una carpeta imagínate un montón de pdf es con facturas eso es una base de datos que igual no es una base de datos demasiado eficiente para realizar ciertos tipos de operaciones bien pero es una base de datos te voy a contar una historia que me contó un amigo hace muchos años de hecho hará datos no sé cómo 15 años más o menos pero es una historia que te va a ayudar un poco a ilustrar el concepto que te quiero mostrar a continuación este amigo mío hace ya tengo una serie de años unos cuantos bastantes años estaba empezando un programa de doctorado en tecnología gráfica y entonces me dijo lo siguiente me dijo mira me han dicho en una de las clases de preparación del doctorado el microsoft paint que lo pongo aquí en la pantalla para que sepas de qué programa estamos hablando el paint vale pues me han dicho en la clase de doctorado que yo de preparación al doctorado que el paint es un programa de tipo cada es decir de tipo computer assisted design es decir un programa de diseño asistido por ordenador y entonces yo le dije pero qué barbaridad como como el paint de windows o cualquier paint realmente como el paint de windows va a ser un programa de diseño asistido por ordenador que hagamos los programas de edición este ordenador por ordenador se parecen más a esto que tengo en la pantalla ahora mismo que a este programa de aquí entonces este amigo me dijo bueno es que nos han dicho esto en la general de actuado precisamente para decirnos que todo es relativo entonces qué quiere decir computer assisted design quiere decir diseño asistido por ordenador entonces el 20 ayuda a diseñar y diseñas con el ordenador pues en ese caso el 20 es un programa de ordenador ahora comparativamente a otros programas del estudio de ordenador como autocad o como revit o como muchos otros más podríamos decir que el 20 es un buen programa de diseño asistido por ordenador pues igual ya no vale pero no se puede negar que es un programa de gestión de diseños de ordenador y otra cosa que me dijo este amigo es que dice claro hoy que hay extras de 15 años imagínate pero me dijo hoy entendemos que el paint es un programa de pintura pero tú imagínate lo que hubiera sido el paint en 1950 si hubiera existido el 20 en 1950 pues eso hubiera sido lo más de lo más de la tecnología cuando hoy es un programa pues que sirve para para pintarlo girar un poco y ya está comparativamente evidentemente a otras soluciones de software que hay entonces te cuento esta historia para decirte que con las bases de datos ocurre lo mismo una base de datos por ejemplo una carpeta de pdfs es una base de datos pues si técnicamente lo es ahora es la mejor base de datos que existe actualmente en el mercado pues no probablemente no lo es vale pero eso no quita para que sea una base de datos en un momento dado a lo largo del tiempo han ido existiendo otros tipos de base de datos que son bases de datos basadas texto en archivos estas bases de datos reciben el nombre de flat file archivo plano o texto plano la diferencia entre estas dos es que en esta carpeta o en este tipo de base de datos en una carpeta tenemos una serie de pdfs y eso es la base de datos en esta voy a quitarlo de en archivos editar el nodo basadas en texto si quieres que pueden tener varios archivos y esto lo que quiere decir es que aparece el concepto de archivo que contiene datos por ejemplo por ejemplo si yo abre un editor de textos el editor de texto es más plano que te puedas imaginar y yo pongo bueno voy a poner todo un juego tan javier como su correo como su teléfono y ahora pongo juan coma su correo como su teléfono donde pone su correo iría a su correo y donde para su teléfono podría su teléfono entonces yo ahora hago así a la imagínate que hubiera diferentes entradas y yo ahora esto lo guardo y yo ahora esto lo guardó en un documento llamado mi base de datos ahora mismo tiene él el formato rtf que es texto enriquecido lo podría bajar a texto plano es decir podría irme al formato podría convertirlo a texto sin formato y podría guardar me lo como archivo txt la pregunta que yo te hago es esto que tengo en la en la pantalla es una base de datos o no lo es correcto vale pues por lo que sabes hasta ahora quizás si sólo hubieras tenido la información o el concepto en la cabeza de una base de datos como por ejemplo mysql pues tú dirías que esto es un archivo de texto pero no es una base de datos pero con la abstracción que te acabo de dar esto es una base de datos claro que ocurre pues que con respecto a los sistemas sql que ahora los que ahora a continuación hablaremos pues evidentemente en un archivo no tenemos pre implementados una serie de sistemas de por ejemplo indexación realización de búsquedas ordenación optimización concurrencia no lo tenemos pero es que todas estas ventajas no son las que definen lo que es y lo que no es una base de datos una base de datos es un sistema que contiene datos tenga una serie de herramientas o no tenga una serie de herramientas y entonces este archivo en un momento dado contiene datos se da la circunstancia de que yo podría programar una aplicación en el lenguaje que fuera es decir o bien en un lenguaje de escritorio o bien en un lenguaje web o en el lenguaje que yo quisiera y esa aplicación informática sería capaz de escribir aquí abajo nuevas líneas para meter nuevas entradas en la base de datos y también sería capaz de conectarse leer este archivo y sacar información y presentarme la en pantalla si luego en ese caso este archivo es perfectamente una base de datos no es igual la mejor base de datos del mundo pero es una base de datos al fin y al cabo ahora bien voy a hablar un momento de los sistemas de bases de datos centralizadas para a continuación retomamos por ejemplo este tipo de archivos de bases de datos ya que te voy a contar que estos archivos este archivo que tengo ahora mismo en la pantalla por ejemplo va a tener ventajas con respecto a otros sistemas de gestión de bases de datos con el tiempo los archivos que contienen datos han ido teniendo diferentes formatos tenemos por ejemplo formatos texto plano digamos un archivo txt el problema de estos formatos es que no tienen una estructura determinada así que a lo largo del tiempo han ido apareciendo otros formatos que sí que tienen una estructura previsible como por ejemplo el formato csv el formato csv como separate & values o lo que es lo mismo valores separados por comas ya nos da un poco de pista de cómo cómo debe ser la estructura de este archivo para que sea compatible entre varias aplicaciones luego con los años e insisto han ido apareciendo otros tipos de formatos tales como por ejemplo en los últimos años el json a ir apareciendo el formato xml en cuanto a formatos abiertos también tenemos formatos propietarios por ejemplo el archivo xls o sea para entendernos excel es un archivo que siendo un programa de hoja de cálculo ya que una hoja de cálculo no es una base de datos pero al final por una mera cuestión de comodidad hay muchas personas que usan excel como si fuera una base de datos y por qué no quiero decir se funciona funciona no está teóricamente diseñado para eso pero si cumple la función pues no hay mayor problema con el tiempo lo que ha ido ocurriendo es que las bases de datos basadas en texto ahora luego de hablar de ventajas y desventajas han tenido una serie de desventajas siendo una de ellas la concurrencia es decir el acceso simultáneo de varias personas o de muchas personas que quieren hacer uso de la información en ese momento es cuando han aparecido sistemas de gestión de bases de datos son sistemas que actúan de intermediarios y lo que hacen es que permiten centralizar la información centralizan la información en un servidor ese servidor tiene un software que es el intermediario y es un software al cual múltiples personas se pueden conectar y ese software lo que hace es canalizar la información dentro de los sistemas de gestión de base de datos a día de hoy tenemos dos tipos principales que son los sistemas de bases de datos con datos relacionales muchas veces se llaman sistemas de datos sql y también tenemos las bases de datos no sql en un primer momento en la aparición del concepto de no sql era tal cual se leía tal cual bases de datos sql que no son de tipo sql sin embargo si te fijas este concepto es un poco hater porque es un concepto bastante negador entonces con los años este concepto se ha suavizado y por tanto ahora se dice que estas bases de datos que son es not only sql no solo sql las bases de datos sql las bases de datos de tipos relacional eso quiere decir que la información se guarda en tablas estas tablas están relacionadas y hay un poco lo de las bases de datos relacionados y relacionales hay otra serie de características como las tablas tienen índices y claves para poderse relacionar entre ellas esto lo hemos visto anteriormente entonces las bases de datos relacionales tienen ventajas pero claro que es lo que ocurre cuando por ejemplo cuál se ha dado antes esta duda por ejemplo queremos guardar archivos como un pdf o como un word o como un lo que sea dentro de una base de datos que es lo que es recomendado en ese momento existen una serie de casos dentro de que hay una gran cantidad de necesidades a día de hoy que se pueden solucionar con bases de datos relacionales de tipo sql y por eso es por lo que ese tipo de base de datos a día de hoy son las más extendidas pero existen otros muchos escenarios en los cuales podemos no necesitar trabajar con tablas con filas y columnas con duplas con datos con celdas sino que la información que tenemos no se estructura fácilmente en tablas en ese caso es donde usamos bases de datos de tipo no sql que son bases de datos por ejemplo documentales estos estas bases de datos tienen la capacidad los sistemas de gestión de bases de datos tiene la capacidad de centralizar la información y permiten la concurrencia la concurrencia consiste en que múltiples usuarios puedan acceder de forma eficaz sin que se produzca pérdida de datos a un mismo archivo entonces te insisto una vez más que hay muchas más bases de datos en el mundo pero vamos a partir con estas tres como representativas de la gran mayoría de base de datos que te puedas encontrar entonces a continuación lo que quiero hacer es hablar te de cuáles son las ventajas y las desventajas de cada una de estas bases de datos las bases de datos basadas en archivos y carpetas tienen la ventaja de que puedes tratar directamente la información en el disco duro es decir pueden ser suelen ser de hecho que suelen tener una estructura no previsible esto quiere decir que mira yo por ejemplo me vengo aquí y me vengo aquí y hago una base de datos y aquí por ejemplo meto música y aquí por ejemplo meto documentos pero es que en documentos aquí meto pdf y aquí meto word pero claro en música no tiene nada que ver en el música no hay pdf word o igual aquí en documentos hay dos subniveles de carpetas y en música sólo hay un sub nivel y ahora de repente creo otra carpeta que es portafolio mi portafolio tico tiene cinco niveles de complejidad es decir los sistemas de además que en documentos puedo meter una serie de documentos en música a otros formatos en portafolio otros formatos hay formatos que se pueden repetir de portafolio a pdf música probablemente no es decir tienen una estructura no previsible y es muy dinámica es decir mediante la creación de nuevas carpetas la creación de jerarquías de carpetas y mediante la colocación de archivos yo puedo trabajar sin ningún problema es más en esta carpeta yo puedo crear aquí en documento es meter un pdf de 100 megas y al lado un pdf de un mega y no pasa nada mientras que ya sabemos que por ejemplo en una base de datos eso no es tan fácil hay que declarar el tipo de dato que vas a meter y hay que indicar vale cuál es la longitud máxima del tipo de dato entonces hay veces en las que hay desarrolladores que cometen el error de que llegan a una empresa y ven que la empresa tiene toda su página de facturación contabilidad recursos humanos estructurados en carpetas y archivos y hay programadores que toman el error de decir no no esto hay que pasarlo a una base de datos sql cálmate igual no sé por qué insisto es que desarrolladores que tienen la mente de que una base de datos mysql no es oracle y eso no es vale ahora si la empresa está guardando datos en carpetas y quiere hacer una serie de operaciones que justifiquen que a partir de esa estructura de carpetas se genere una base de datos sql no te digo que no vale pero a priori pues esta forma de estructurar los datos puede tener sus ventajas y eso puede ser una base de datos y luego por supuesto los lenguajes de programación prácticamente cualquier lenguaje de programación es capaz de trabajar con una carpeta que a su vez tenga azúcar sube sus carpetas y tomar eso como una base de datos eso no es ningún problema a continuación desventajas evidentemente el que la estructura sea no previsible es decir que la estructura sea muy fluida conlleva una falta de estandarización una falta de estructuración y esto puede desembocar en dificultad para manejar los datos porque en bases de datos donde la información está en tablas y en columnas y en filas puesto al final dice es quiero y la tabla tal fila tal columna tal ya está me da igual lo que busque pero sé que busque lo que busque va a ser tabla tal fila tal columna tal siempre en archivos y carpetas pues claro tú dime qué archivos tienes y te diré cómo puedes proceder es decir cada proyecto digamos tiene unas características especiales de hecho cuando se hace un proyecto de big data lo primero que es el placer es precisamente estandarizar la información vale entonces por ejemplo si quiero hacer búsquedas muy profundas o búsquedas rápidas o búsquedas muy dinámicas este sistema le puede dar desventajas pero si quiere obtener un sistema donde pueda ya te digo convivir en el mismo sistema imágenes jpg documentos word archivos de excel archivos pdf este es el sistema correcto en este caso a continuación tenemos las bases de datos que hemos comentado que son basados en texto con las bases de datos basadas en texto tenemos que como vemos tenemos archivos son archivos de tipo flat file son archivos que contienen datos entonces se pueden vamos a ver se pueden estructurar en estructura libre y estructura conocida el txt o similares tiene estructura libre y todos estos de aquí tienen una estructura conocida la ventaja las ventajas que nos da este tipo de archivos es la portabilidad si yo hago un sistema mediante un servidor de mysql yo tengo que contarle al cliente un servidor mysql para que esto funcione en cambio un flat file un archivo txt no requiere ningún servidor la aplicación puede guardar directamente información en formato txt portabilidad ligereza compatibilidad cualquier lenguaje de programación fácilmente puede escribir puede leer archivos en estos formatos que tenemos por aquí desventajas primera la seguridad los archivos de texto plano evidentemente no suelen tener usuario y contraseña y por tanto cualquier persona que intercepte la información va a poder leer la información y concurrencia esto es como es un lenguaje de programación que accede directamente al archivo no hay un sistema de gestión por encima y eso quiere decir que generalmente no se suele permitir que varias personas accedan al mismo tiempo al mismo archivo porque si lo hicieran la información podría quedar corrupta hay más desventajas por ejemplo el tamaño el tamaño suele estar limitado cuidado a unos cuantos gigas con lo cual tenemos que plantearnos si nuestra base de datos realmente va a ocupar esos gigas porque probablemente no y si no ocupa todos los gigas entonces para que digamos para que despreciar un sistema de tipo flat file hay una solución intermedia es un sistema un poco particular qué es esquiú light esquiú light o dicho en castellano ese culito es un sistema que trabaja con bases de datos con archivos de texto plano pero a la vez trabajando con texto plano incorpora las herramientas y algunas de las ventajas que tenemos en los sistemas de tipo sql vale entonces en definitiva tenemos desde algo totalmente libre hasta algo estructurado y ciertamente estandarizado hasta algo que es como si fuera una base de datos un servidor sqlite pero pero en texto plano además yo te puedo decir que en un momento dado durante un tiempo hace unos años entre 2010 y 2013 tenía una aplicación en funcionamiento para la universidad politécnica de valència esa aplicación atendía a un par de centenares de alumnos a la vez y estaba hecha en ese culito y respondía perfectamente lo que pasa es que luego más allá de 2013 decidimos reprogramar la en mysql para aprovechar otras características que tienen mysql que no tiene security como por ejemplo la seguridad pero lo que te quiero decir es que te estoy poniendo un ejemplo de aplicación que daba servicio diariamente entre semana evidentemente a un par de centenares de alumnos y lo hacía correctamente osea sqlite el problema que tiene es que tiene un mailing muy malo porque como pone élite la gente automáticamente lo cataloga como ‘la y te es que es una mier vecilla y no es así vale sino que es una base de datos que rinde muy bien y que trabaja muy bien pero que evidentemente en un momento dado pues se puede quedar pequeña con respecto a lo que es una base de datos más grande y luego a continuación ya hablamos de los sistemas de gestión de bases de datos más grandes como son los clásicos en lo que a día de hoy conocemos como los clásicos que tienen ventajas y tienen desventajas las ventajas son la potencia son sistemas de gestión de bases de datos como cuáles por ejemplo pues vamos a ver como por ejemplo para poner nombres encima de la mesa igual que aquí he puesto nombres pues mysql en una gran medida oracle que es de la misma empresa realmente microsoft sql server que es lo mismo pero de microsoft post cree sql y un montón más ahora mismo no me viene ninguna otra a la cabeza o sea mi cabeza está diciendo saber eso 3 más de usarlas con más frecuencia pero lo mismo no me sale igualarlo cuando me salgan puestas a punto por aquí potencia herramientas por supuesto usan el lenguaje sql con todas las ventajas que esto nos comporta ya que es bueno digamos difícil de aprender pero una vez que lo aprendes vamos a hacer prácticamente lo que quieras con este lenguaje claro desventajas requieren montar un servidor con estas no con estas tu programa directamente escribe archivos o directamente escribe documentos o lee documentos y ya está con éstas no conecta se requiere que exista un servidor centralizado y encendido 24 horas al día tienen una estructura muy determinada por cierto dado que ya me acuerdo de nombres dado que estaba hablando de no sql pues tengo también mongodb estas de aquí son de tipo sql esta de aquí es de tipo no sql estructura por ejemplo otras desventajas ineficientes a almacenamiento de archivos las de tipo sql las de sql sí que son eficientes para almacenamiento de archivos vale entonces en definitiva un momento porque se me está quedando un poco frito hay en definitiva lo que te quiero decir con todo esto es que lo que quiero es ponerte encima de la mesa una serie de alternativas para que sepas que no todo es mysql no todos son tablas no todos son índices no todos son búsquedas select y todo eso sino que existen una serie de bases de datos existen una serie de alternativas que en un momento dado te pueden servir para trabajar ahora qué es lo que ocurre pues que tú en un momento dado según lo que quieras hacer tienes que conocer cuáles son las ventajas y las desventajas de cada una de cada uno de estos sistemas de base de datos para elegir aquella que tenga un venga más lo digo porque quizás voy a ponerte dos casos extremos pero quizás pueda escoger el camino de matar moscas a cañonazos qué quiere decir que para una aplicación pequeña y sencilla montes un servidor de por ejemplo mysql cuando después de hacerlo digas o tú mismo digas o tú mismo digas a lo largo de los años o venga otra persona y te diga pero a ver pero por favor pero para el chorrada de aplicación para que has montado un servidor mysql pájaro no quiero que digan porque es lo único que conozco pues no lo que quiero es que conozcan las cosas también puedes conocer puedo también puedes cometer el error contrario que puede ser planear una aplicación que sea una aplicación corporativa que tenga requerimientos de seguridad a la cual vayan a acceder de forma de forma simultánea miles de usuarios a la vez y que cometas el error de planificar la con un flat file con un texto plano con lo cual pues que hayas elegido por simplicidad un sistema que con el tiempo se te quede pequeño y acabe siendo incorrecto entonces ya no te estoy diciendo coge uno coge otro lo que te estoy diciendo es abre un poco la mente con respecto a lo que es un sistema de gestión de bases de datos un sistema de almacenamiento de bases de datos abraza todas las alternativas que tienes a tu disposición analiza cuáles son las ventajas y las desventajas y en un momento dado toma la mejor decisión que esté a tu alcance vamos a hablar un poco de espacio y vamos a hablar un poco de tiempo entonces en cuanto a la pregunta que me has hecho acerca de si es viable o es recomendable o es factible en un momento dado mezclar bases de datos mezclar tecnologías de bases de datos yo te digo que sí por supuesto que es perfectamente factible y recomendable y no sólo no solo anteriormente te he puesto algún ejemplo donde por ejemplo pues como te digo pero enseñó por ejemplo en mi propia web vamos a verlo dentro de lo que es la página de cursos voy a abrir el fila tengo la piel no no no no es camisa de once varas brass yo tengo por aquí este listado de cursos y atención esto que estás viendo es un wordpress wordpress es una aplicación a ver que habrá por aquí wordpress es una aplicación estándar basada en mysql vamos a ver y contenido aquí y esto que estás viendo si aquí ves que pone curso de payton es porque aquí hay una carpeta llamada curso de payton y si veis que pone curso inteligencia artificial es porque aquí hay una carpeta llamada curso inteligencia artificial es decir esto que estoy viendo aquí esto bebe directamente de las carpetas que estás viendo aquí en el ftp por tanto yo te estoy mostrando y de hecho incluso si yo entro por aquí pincho aquí y ves que ahora cuando y ves que hay una carpeta de wordpress y unos archivos por aquí es que yo pincho aquí en wordpress hay una carpeta y hay archivos eso lo que está haciendo es que por ejemplo este mp4 es ese mp4 y este txt contiene la duración del vídeo y ustedes son una mezcla de lo que ves aquí de basadas en archivos y carpetas y estoy usando archivos de texto en formato txt para la duración porque pues como diría aquel porque puedo es decir porque he llegado a la conclusión de que es la solución más cómoda para mí pero además fíjate que yo te justificado que con este sistema está basado en archivos y carpetas y a la vez está basado entre xt pero es que además entró en el panel de control del sistema como te digo es un sistema wordpress es decir es un sistema predeterminado para hacer páginas web dentro del cual yo me he hecho una extensión está siendo programado como una especie llamémoslo así de plugin para wordpress y este plugin funciona como yo quiero que es con archivos pero si yo me meto en wordpress y me voy a entradas porque por ejemplo quiero redactar una noticia más del blog estas entradas esto que estás viendo aquí aunque no se ve desde aquí proyecto lo digo tú te lo crees estas entradas se están guardando en una base de datos mysql por qué pues porque wordpress funciona con mysql entonces o sea no sólo es que yo te digo que puedes mezclar bases de datos como tú quieras es que yo te hago una demostración de que en esta aplicación que te acabo de enseñar que es una aplicación que uso día a día y estoy mezclando sin ningún problema archivos y carpetas basadas en texto y mysql es decir yo soy una persona desde el punto de vista del desarrollo muy poco purista entonces yo soy de la opinión de que si algo funciona funciona entonces te digo que igual otro desarrollador verá de dixon o si acaso no base datos mysql mete las duraciones de donde existe el señor mysql y me da igual decir siempre que me resuelva la papeleta y por ejemplo como ya te he dicho antes hemos hablado que siempre que se comió una serie de características quiere decir que hemos hablado de que una desventaja de los archivos txt es la seguridad pero yo por ejemplo esto que hemos visto antes que tengo aquí poníamos a la pantalla la duración de los vídeos si alguien deja que el servidor y se lleva los archivos txt que se lleva la duración de los vídeos me da igual llévatela eso no o sea no hay ningún problema con la seguridad ahora bien cuando yo guardo información de que alumnos acceden a qué cursos yo lo estoy guardando en una base de datos mysql porque porque quiero seguridad no la voy a guardar en un archivo txt porque el archivo txt no me da esa seguridad es lo que te quiero decir no es sólo que se pueden mezclar sino que yo de hecho mezclo pero insisto con criterio vale la cuestión de todo es que todo está bien si se hace con criterio ahora a continuación ya hemos hablado de espacio hemos visto un espacio donde conviven múltiples soluciones y conviven perfectamente o sea el usuario final ni se entera de si lo que hay es archivos carpetas textos mysql el usuario final solo sabe que se le da al servicio que ha perdido independientemente de cómo funcione por bajo ahora vamos a hablar del tiempo entonces una de las principales dificultades cuando diseñamos un sistema informático es el tiempo es saber cómo esa información va a perdurar en el tiempo hay veces en las que ocurre por ejemplo ante este puesto un caso esta aplicación que desarrollé para la upv desde 2010 hasta 2013 que la desarrollé en formato basado en texto y llegó un momento en el cual tuve que cambiar de un sistema basado en csv a un sistema basado en mayor persona de un sistema basado en ese kulite a un sistema basado en mysql qué quiere decir esto pues que a mitad de vida de un programa tienes que cambiar de idea tenés cambiar de tecnología tienes que reprogramar el sistema pero sabes que ocurre que aquí en este sistema me ha pasado lo contrario y es que dado que el sistema es grande quiero decir que tiene un gran número de ítems sabe cursos de productos y hay una serie de alumnos conectados a la vez en este sistema los usuarios están en mysql pero en un primer momento el sistema tenía los cursos y las unidades lectivas en formato mysql pero más adelante a lo largo de los años me di cuenta de que el sistema mysql es muy bueno para almacenar por ejemplo alumnos pero no me daba una buena solución para almacenar por ejemplo carpetas porque yo por ejemplo metía carpetas y metía vídeos y luego me tenía que ir a la base de datos mysql a dar de alta aunque lo hiciera automáticamente porque tengo un script gracias o lo emplean como una araña digamos verde igual pero estaba doble esto lo tengo por una parte del sistema de archivos o por otra parte de la base de sql y cuidado y cada vez que por ejemplo borramos una carpeta la base de datos no se actualizaba automáticamente con lo cual con el tiempo decidí que me convenía pegar un salto desde mysql hasta un sistema de archivos basado en carpetas que antes de explicado esto y parece que el sistema basado en archivos sea más antiguo y más peor que mysql cuando no es así vale lo que quiero es que pienses únicamente en ventajas y en desventajas todo está justificado si el criterio es correcto según las ventajas y según las desventajas el problema es ese el problema es que reprogramar una aplicación cuando la aplicación está en funcionamiento como te puedes imaginar es delicado porque pues porque una máxima de la programación es que ningún programa funciona a la primera ninguno en todo el mundo hay varias verdades una de ellas se está ningún programa funciona la primera otra verdad universal es que ningún programa se desarrolla en el tiempo que estaba establecido para desarrollarlo ninguno al en ningún proyecto de programación se entrega a tiempo ninguno vale y hay otra máxima de la ingeniería esto ya no sólo de la informática de la ingeniería en general que dice que si algo funciona no lo toques vale entonces claro cuando una aplicación está funcionando pero tú ves que podría funcionar mejor con otra tecnología el hecho de desmontarlo en una tecnología cuando ya hay usuarios que lo están utilizando y montarlo en otra tecnología un paso atrás es un riesgo y tienes que pensar te muy bien si la recompensa merece la pena el riesgo entonces con esto lo que te quiero decir es que la decisión de cuando empieza un proyecto la decisión de elegir qué base de datos se va a usar te aseguro que es una decisión emocionante como te digo no no esperas para quejarme déjame explicarte la palabra emocionante cuando aprendes a programar con estos primeros proyectos esa decisión es un marrón porque es una visión de mucha responsabilidad puesta sobre una persona que está empezando a programar pero oye nadie hacemos sabiendo o sea todos tenemos que pasar por ahí todos tenemos que pasar por el marrón de tener que tomar esa decisión con los años cuando ya has hecho muchas aplicaciones y muchas bases de datos y ya sabes que con lo que vas a decidir probablemente no te vas a equivocar ya no es una decisión de tensión sino que es una decisión emocionante en el sentido de que tú sabes que las decisiones que estás tomando van a marcar el futuro de esa aplicación pues es emocionante por eso es como te diría yo tú que estás mucho en el mundo de la edificación no te has imaginado más lecturas por la ciudad y tú dices esta ciudad ya era así antes de que naciera o sea imagínate que de repente sabes que estuvieras en el terreno vacío y te dijeran azul a la ciudad como tú quieras estos días wow pues a esto es a lo que me refiero me refiero como emocionante en que hay muchas veces las que llegas a una aplicación que a otra persona ha desarrollado y dices esto es lo que hay pues me hemos dado que hay pero el día que alguien te dice no no a tu la aplicación tú tienes que decidir cómo se estructura como funciona es emocionante cuando sabes que muchas de las cosas que van a pasar a continuación dependen de las acciones que tú tomes en ese momento por eso quiero decir que ahora no lo ves pero pero más adelante dentro de unos años entenderás por qué por qué te digo la palabra emocionante directo la compartida es probablemente se analizamos qué es lo que ocurre en una aplicación estándar por ejemplo tengo esta app donde tenemos una mezcla vamos a verlo tenemos una mezcla de html css y de javascript vamos a verlo voy a abrir esto con brackets tengo un archivo html ok no pasa nada entonces vamos a ver qué es lo que ocurre con este archivo html esto es lo que estamos viendo en la pantalla como ya sabemos es un archivo html tiene una serie de etiquetas tiene una serie de textos el archivo html tiene en este caso esta aplicación tiene una carpeta llamada estilo que tiene un archivo llamado estilo css lo pincho lo arrastró y veo que aparece el contenido de este archivo pss cuál es la diferencia entre el archivo html y el archivo css por una parte es el lenguaje pero que el lenguaje sea lo de menos no es el lenguaje es la filosofía la idea es que en el archivo html tengo la estructura del documento y en el archivo css tengo el estilo del documento yo lo que hago es que separó separó lo que es estilo y separó lo que es estructura que luego además si vale ok es cierto están en dos lenguajes de programación o mejor dicho en dos lenguajes de marcaje diferente pero lo que importa realmente es la función que hacen y luego por otra parte dentro del archivo de html veo que se está cargando un elemento llamado código punto js entonces me voy a la carpeta js veo que hay código y veo que tengo un archivo javascript donde este archivo javascript es el responsable de que cuando yo pulso en los botones pues por ejemplo se vaya de un lado a otro y que cuando yo pulse un elemento segundos después se abra y en más información se abra y luego se cierre y en definitiva la interactividad al igual que hace un momento está hecho en otro lenguaje diferente esto es html esto es css esto es javascript pero el lenguaje es lo de menos lo que importa realmente es la separación y cuando hablamos de separación hablamos de que aquí en el archivo html tenemos la estructura y el contenido es el problema en el estilo css tenemos únicamente el estilo la estética y en el archivo javascript tenemos únicamente el comportamiento pues nos metemos en el archivo html y si hemos visto que una tendencia una tónica es separar vemos que el archivo html en sí mismo no está separado si nos fijamos de hecho dentro de esta metodología de separar veremos que en el archivo html tenemos por una parte la estructura pero por otra parte tenemos el contenido el título sub título descripción título subtítulo si quieres me preocupa poco pero lo que es el contenido lo que es por ejemplo el artículo vale cada uno de estos artículos sí que está mezclado la estructura con el propio contenido de la web entonces qué ocurre pues que deberíamos separar y una forma de separar consiste en trabajar los datos de forma separada a la estructura hay múltiples formas que podemos utilizar hay múltiples recursos que podemos utilizar uno de ellos es trabajar con el lenguaje xml porque el lenguaje xml porque ya estamos trabajando con html y html es una derivación del lenguaje xml entonces a continuación te voy a hablar de los fundamentos de xml y vamos a ver cómo gracias a xml podemos separar la estructura del contenido para que tengas una idea de entre comillas verdad de la burrada que tengo en pantalla tampoco es tan bordada pero nos pasemos pero bueno para que te hagas la idea esto es como si fuera indistinguible el edificio de sus ocupantes como si los ocupantes del edificio estuvieran pegados a las paredes del edificio qué barbaridad una cosa es un edificio y otra entidad diferente son los habitantes del edificio y tiene que quedar muy claro cuál es la diferencia entre ambos pues en este caso no está quedando claro porque en este archivo html lo tenemos todo mezclado y claro no es posible no asignar que no sea posible de hecho es posible pero no es recomendable que no podamos separar la estructura de los datos que es lo que tenemos ahora mismo aquí ahora mismo esto que estamos viendo en pantalla no es ni más ni menos que una mezcla de estructura de datos vamos por tanto a hablar del archivo xml nosotros de hecho en el momento en el que empezamos a trabajar con html realmente estamos trabajando con una variación de xml voy a crear por aquí una carpeta xml dentro de esta carpeta utilizamos el programa brackets utilizando el programa brackets lo que voy a hacer es crear un archivo xml creó un nuevo archivo con archivo nuevo lo guardo como y me voy a escritorio me voy a xml y me lo guardo como archivo punto con la extensión xml xml viene de que le voy a poner aquí en la pantalla xml wikipedia de extensible markup language en el momento bueno sí sí sí si buscamos xml en la wikipedia más que nada me interesa analizar palabra a palabra verás que estamos hablando del extensivo la palabra que me interesa es extensivo porque es extensible y cuando dice extensible es que xml insisto al ser un lenguaje sí pero no un lenguaje de programación sino un lenguaje para guardar datos es un lenguaje extensible en el sentido de que te lo puedes extender como a ti te dé la gana siempre que cumplas una serie de pequeñas reglas claro que sí que ahora a continuación te voy a mostrar pero a diferencia de un lenguaje basado en xml como por ejemplo html en el que las etiquetas ya están creadas y tú no las puedes elegir la esencia del del xml es que tú te lo puedes definir tú te lo puedes crear ahora más allá de extensible que como ya te digo es la palabra palabras importante es un markup language es decir es un lenguaje que sirve para marcaje no es un lenguaje de programación es un lenguaje basado en etiquetas y como el lenguaje basado en etiquetas se usa como la gran mayoría del lenguaje de etiquetas para contener datos cualquiera puede el formato xml y se lo puede hacer para lo que quiera por ejemplo el formato html como te digo es una parte del formato xml también te digo que en este caso en la pregunta de si fue antes el huevo o la gallina es decir tú dirás si el xml es para todo y el html es un subconjunto de xml en ese caso xml será anterior a html en este caso no si nos vamos a la documentación a cualquier documentación veremos que html se crea en el año 1991 y sin embargo xml es del 98 y esto es porque primero nace el lenguaje html y luego en un momento dado dicen oye el caso es que la filosofía del html mola podríamos html y hacerlo más abierto todavía vale pues por eso se suele decir que html es un tipo de xml cuando el nacimiento es al revés cuando fue primero html qué xml entonces a continuación lo que voy a hacer es decirte cómo estructurar un archivo xml cuando te digo extensible lo que te quiero decir es que de la misma forma que hemos hablado previamente de bases de datos el archivo xml no solo se puede utilizar para como decía yo para la web no sólo se puede usar para cualquier uso del archivo xml se puede utilizar para lo que quieras hasta el punto te voy a dar un ejemplo para que veas cuál es la importancia real y palpable del archivo xml de tecnología xml si yo me voy a libreoffice y cuando te digo libreoffice te digo el también el office de microsoft word hay una serie de formatos que están basados en xml si yo cojo por ejemplo un documento de reiter lo que sería el word y pongo aquí hola y lo guardo y lo guardo con el formato o dt sé que suena muy mal vale lo veo dt pero es open documento lo digo porque es que siempre que le digo a alguien lo del documento de te tengo que hacer la aclaración porque claro en castellano suena como el documento de te y la gente se elegirá como que me has dicho y yo no que es el open de documento para entonces pongo aquí hola lo podría haber guardado estoy pensando en la carpeta esta que tenía yo antes xml lo guardo allí y yo ahora ese documento lo cojo lo abro con brackets no me va a dejar abrirlo con brackets a pelo pero lo voy a vivir manualmente lo abro a ver está en formato binario vale y si ese documento yo lo abro con un editor es que directamente vale este documento lo abro con un editor de texto yo veré que el documento está basado en xml es decir está basado a ver se me deja en opciones los filtros en opción es guardarlo directamente si me voy por ejemplo a word m xml plano es lo que estabas viendo vamos a ver vamos a ver hoy quiero llegar es que en este caso estoy en maca ahora mismo no tengo aquí el office instalado pero te iba a hablar de lo que ocurre en word pero gracias por haber visto este formato porque se adelanta un poco a lo que iba a explicar y es que incluso en el formato de the office desde 2007 están obligados a poner no solo su formato propietario sino el formato doc x es decir office en xml lo cual quiere decir que lo voy a guardar y a ver si todo va bien y lo puedo abrir con brackets al hacer los brackets bueno he cerrado yo entonces cojo el dock x lo meto ahí nada igual me lo coge como un archivo un archivo binario pues lo que quiero es un poco indicarte que incluso los últimos formatos de programas de ofimática como el office están obligados a guardar en el formato xml ya quiero decirte que esta estructura de xml es más importante y es más prevalente de lo que te puedas imaginar pero de la misma forma que el office guarda en xml cualquier programa informático puede utilizar el formato xml para guardar información como le dé la gana ahora lo de como le dé la gana es lo que a continuación te voy a explicar en este caso lo que he hecho es crear un archivo xml lo abro con brackets vamos trabajarlo con brackets tenia brackets por aqui sirve cualquier editor de texto evidentemente como te puedes imaginar entonces en primer lugar como ocurre prácticamente en cualquier el lenguaje yo tengo que crear una cabecera entonces para crear una cabecera lo que hago es indicar la siguiente etiqueta pongo menor que mayor que y dentro de esta etiqueta menor que mayor que pongo interrogante xml esto quiere decir que este archivo es xml esto quiere decir que lo que va a encontrar a continuación es contenido xml a una etiqueta yo le puedo poner propiedades y atributos entonces en este caso a continuación lo que voy a hacer es decirle versión es igual a 1.0 porque porque me da la gana es decir como si pongo 0.1 vale la el número de personal decides tú y encoding esto sí que es importante voy a poner un 8 para que me respete los caracteres que encontramos dentro d europa occidental finalizó con un interrogante mayor que y esto que tenemos aquí es la primera etiqueta que debemos meter en un archivo xml la etiqueta fíjate que teóricamente no haría falta porque está el archivo él se llama xml se supone que todo lo que hay adentro es un xml por lo cierto es que no lo cierto es que tenemos que poner esta primera etiqueta para que cualquier programa que interprete esté xml sepa que lo que va a encontrar a continuación va a ser marcaje xml una vez que hemos colocado esta extraña etiqueta es extraña por dos cosas la primera razón es porque empieza con apertura interrogante y la segunda razón es porque se abre y no se cierra es decir ella misma se abre y se cierra a continuación todo el resto de etiquetas tienen que seguir las siguientes características en primer lugar la etiqueta que se abre se cierra de hecho si utilizamos aplicaciones tales como por ejemplo brackets veremos que brackets nos cierra automáticamente las etiquetas hemos visto anteriormente que cuando trabajamos con un archivo html el archivo html ya tiene una serie de etiquetas creadas por tanto pongo html cierro la etiqueta y me aparece otra etiqueta que tiene una barra que se llama igual entonces esta es la etiqueta de apertura esta es la etiqueta del cierre la de apertura no tiene barra la de cierre tiene barra y si hay una de apertura tiene que haber una de cierre pero con la etiqueta html yo como te diría yo no tenía más remedio que utilizar esta nomenclatura esta etiqueta html con xml yo puedo utilizar lo que me dé la gana entonces algo por ejemplo que anteriormente hemos visto un poco de coña es que longaniza cierro y me aparece la etiqueta de cierre de longaniza esto en html se puede hacer no es legal pero tampoco la fallo ahora pero pero no es legal pero técnicamente no es parte del lenguaje html bueno pues yo dentro de xml puedo crear la etiqueta longaniza y no pasa nada puedo hacerlo si está justificado para mi programa de hecho quiero que veas no soy yo no no solo escritos o sets no excepto longaniza en castellano esto quiere decir que puedo crear automáticamente mis propias etiquetas entonces en este caso evidentemente vamos a hacer algo que nos sirva si me meto aquí se lo meto en la app veremos como en este caso tenemos por aquí vamos a verlo pues una serie de contenidos tenemos un contenido que tiene una imagen que tiene un título que tiene un subtítulo y que tiene un texto pues eso qué quiere decir eso quiere decir que yo puedo venir al archivo xml y yo puedo crear diferentes cosas vamos a ver yo voy a crear un artículo y quiero que veas que lo estoy poniendo en castellano y por tanto no es el arctic el que encontramos dentro de ese artículo y se llama artículo como se podría haber llamado de cualquier otra forma si creó la etiqueta de apertura creó la etiqueta del cierre y atención a continuación voy a explicar lo que se llama el árbol xml si lo que voy a explicar a continuación se llama el árbol es precisamente porque tiene estructura data extractores tiene esta estructura que vas a ver entonces tiene la siguiente condición y es que dentro del artículo yo por ejemplo voy a poner título abro título cierro título una etiqueta puede contener tantas etiquetas como tú quieras y a su vez puede contener tantas sube ti que estás como tú quieras en este caso esto se llama la etiqueta raíz en estos momentos pero no puedo hacer esto esto es absolutamente incorrecto y de hecho si te fijas brackets me lo está marcando de color rojo entonces la etiqueta título se tiene que cerrar jerárquicamente en consonancia con la etiqueta arte a artículo ahora yo puedo venir aquí y puedo crear subtítulo puedo crear descripción y puedo crear imagen no estoy creando específicamente en castellano porque tú ya sabes que yo suelo decir que si algo está en inglés es que hay que respetarlo en inglés pero si algo está en castellano es que puedes poner lo que quieras entonces en este caso de hecho incluso no tiene por qué coincidir ni que esto se llame h3 y esto se llame h3 es lo que quiero llamar títulos puede ver como tú quieras tampoco tiene por qué coincidir el orden aquí tengo imagen título subtítulo digital y aquí fíjate que la imagen va al final no hay ningún problema ahora bien dentro de lo que es la definición de un nodo raíz pues sí que ocurre que yo no debería tener esto de aquí vale porque jerárquicamente verás que estos dos no dependen de nadie es decir cuando yo tenía esto solo éste era esta es la etiqueta raíz pero ahora que tengo esto quién es la raíz nadie es la raíz y eso no es correcto entonces yo lo que debería hacer es crear otra etiqueta por ejemplo llamada artículos y ahí no hay ningún problema en xml de la misma forma que ocurre con html las sangrías no son funcionales eso quiere decir que el programa va a trabajar igual de bien si la sangría está bien puesta o si está mal puesta como en este caso pero sin embargo en pro de la claridad y en pro de la legibilidad es mucho mejor que las sangrías estén correctamente puestas de hecho incluso en este caso también sería admisible que introdujera una serie de espacios de espacios para que visualmente se pueda reconocer perfectamente la diferencia entre un artículo y otro vale tener en cuenta que en la gran mayoría de los casos los archivos xml no los va a tocar un ser humano los archivos xml los escribe un programa informático y los lee un programa informático pero sin embargo a diferencia de los archivos binarios a diferencia de los archivos propietarios la idea del xml es que el formato esté lo suficientemente abierto y sea lo suficientemente claro no sólo para que cualquier persona lo pueda leer sino que cualquier persona pueda abrirlo pueda ver la estructura y pueda decir ay mira qué bien pues me voy a programar un programita que va a poder leer este archivo yo con el formato de word con el formato nativo propietario de word no podría hacer eso porque yo no puedo yo como persona ser humano leer el formato de word a pelo pero con un archivo xml sí que puedo entonces tenemos ya el árbol vemos como bueno esto sería el título del curso esto sería la descripción del curso esto sería bueno pues este curso se va a ir de esto y de lo otro y de lo otro de más allá y esto sería pues por ejemplo ing barra curso punto jpg vale para que para que nos entendamos luego pues déjame que copie te esto un par de veces y luego evidentemente cambiaría en cada una de las iteraciones por supuesto y como te puedes imaginar tenemos el árbol tenemos el prólogo tenemos los elementos xml los elementos xml al igual que los elementos html son las etiquetas es lo que sea que hay entre la etiqueta de apertura y de cierre fíjate que al principio cuando tenía título tenía dos niveles de jerarquía padre-hijo ahora tengo hijo padre y abuelo es decir que puedo hacer tantos niveles de jerarquía como sea necesario siempre que evidentemente respete los los parámetros ahora dentro de las etiquetas al igual que ocurre en el lenguaje html puedo tener atributos simplemente debemos entender que los atributos tienen que ir en parejas de clave valor y el valor tiene que ir entre comillas entonces en artículo por ejemplo yo puedo decir que categoría categoría insisto lo estoy poniendo en castellano para que tú vieras qué se puede poner lo que tú quieras es igual a comillas comillas y voy a poner programación en este caso voy a poner aunque podría porque es un atributo pero no voy a poner acento entonces como veis yo puedo poner atributos donde pongo pareja clave valor la clave sin comillas el valor con comillas categoría programación categoría diseño y de hecho esto no me obliga a que todos los artículos tengan ese atributo evidentemente sí que es recomendable que si pongo categoría a uno le ponga categoría a todos los demás vale pero simplemente quiero que sepas que no es absolutamente necesario vamos a ver voy a ponerlo las formas por si acaso bien otra cuestión es que y esto es lo más difícil qué que te voy a enseñar o de lo más difícil que te voy a enseñar de xml y es que debemos tener cuidados deben debemos tener cuidado de no establecer colisiones entonces voy a crear voy a crear otro documento este va a ser planificación de cursos punto xml y bueno pongo el mismo prólogo este esta parte de arriba se llama prólogo pongo el mismo prólogo para el siguiente documento y ahora yo vengo aquí y digo el calendario pero sabes qué un calendario al final una parrilla de programación puede tener filas y puede tener columnas entonces claro yo recuerdo que hay filas y columnas dentro de html porque a mí me puede convenir esta forma de guardar contenido hay un problema y el problema es que cuando cualquier lenguaje procese este documento especialmente si el lenguaje de destino es html va a ocurrir un problema y es que estoy paseando etiquetas que ya existen en ese otro lenguaje de programación si esto lo meto en un lenguaje como java que no tiene estas etiquetas no va a pasar nada pero si lo meto en html sí que hará un problema entonces en este caso se suele resolver el problema mediante el uso de un prefijo entonces voy a poner xml cr xml y de esta forma yo puedo usar estas etiquetas si me hacen sentirme más cómodo porque me hacen sentirme más cómodo pues porque las conozco de trabajar con html pero a su vez estoy poniendo un prefijo para que no sean exactamente igual que las de html el prefijo sé que tú quieras evidentemente vale entonces en este caso yo estoy usando el prefijo idea una el prefijo html en este caso se suele usar también o bien el prefijo h para cabeceras o bien el prefijo efe para formato vale simplemente que sepas que podemos utilizar prefijos digamos pre marcados para xml con respecto a html pero vamos básicamente podemos hacerlo tal cual vamos a continuar a continuación vamos a empezar a visualizar archivos xml entonces para ello me voy a ir al primero que tiene una estructura más completa y yo lo primero que te voy a decir es que los archivos xml no se visualizan automáticamente osea ten en cuenta que un archivo xml es un archivo de texto es un archivo de datos no tiene un visualizador asociado sin embargo si yo abro un navegador web suficientemente actualizado la gran mayoría de navegadores web como un poco de cortesía están preparados para de alguna forma presentarte entre comillas correctamente documentos xml válidos ahora te digo los de baleros me voy a escritorio me voy a xml cojo el archivo xml y lo voy a lanzar a un navegador como google chrome vale y en este caso a versión no soportada 0.1 vale versión 1.0 ahora recargo bien y en este caso en este caso fíjate que me está poniendo bueno para empezar has visto que se había detectado un error o lo que ella consideraba que era un error no me lo pone correctamente o sea no me muestra la información luego tienes que en este caso el navegador chrome tiene integrado un validador de archivos xml a continuación vemos que aparece el documento de tal forma que yo puedo plegar y desplegar cada uno de los elementos vale esto quiere decir que en este caso yo lo que estoy haciendo es visualizar el archivo html perdón visualizar el archivo directamente en crudo dentro de por ejemplo un sistema de información como por ejemplo un navegador web dicho esto dicho esto a continuación es cuando yo lo que quiero es utilizar esta información yo lo que quiero es abrir esta información con un documento para ello es decir como te puedes imaginar si yo tengo un documento html y tengo un documento xml yo quiero que el documento html contenga la estructura y quiero que el documento xml contenga los datos pero claro me hace falta algo para poder unir los dos y ese algo es javascript pero nosotros ya conocemos javascript de hecho ese algo de hecho podría ser php también pero todavía no conocemos php vale por tanto vamos a utilizar algo que sí que conocemos voy a poner esto todo esto en una carpeta a parte para no mezclar y voy a crear un archivo y html voy a escritorio voy a xml lo cargo como index.html y voy a escribir lo siguiente ahora este es un archivo html creo el body en el head voy a crear no voy a crear los bajos para no trabajar con jota cuello con javascript dib y de contenido y tengo que crear un objeto llamado xml voy a ponerlo aquí como comentario xml http request esto es un archivo que es que es xml y a través de http a través de la web realizamos una petición a ese archivo de hecho esto no solo nos va a servir para trabajar con archivos xml si no no es sino que nos va a servir más adelante para implementar una tecnología que se llama ajax que es xml asíncrono vale pero de momento de momento vamos a trabajar cargando archivos xml entonces en este caso voy a crear un pequeño código pero de firmar mi conexión es igual a new o sea un objeto xml http request mira como es un poco difícil de describir lo tengo aquí http respuesta punto y coma ahora digo mi conexión punto vamos a ver qué métodos tiene hay uno que es ready steady change o sea básicamente cuando la conexión esté preparada cuando la conexión sea ok esto es igual a una función anónima es decir una función que no tiene nombre y digo lo siguiente si algo es cierto y ese algo es hoy perdón espero if this punto red state es igual a 4 claro porque 4 pues porque es un estándar o sea red y state de 4 es ok está preparado la conexión responde y en este caso vamos a ver y this punto status es igual a 200 sabes lo del error 404 – se encuentra a 200 es se encuentra es guay entonces en este caso y a continuación lo que voy a decir es vamos a ver pues con sólo un momento y punto y voy a poner vamos a ver mi conexión y punto response text el texto de respuesta ya sabes que se está en inglés porque no dejaste que si yo pongo aquí pongo un punto voy por la erre y pone response text ahora cargaré de responsable pero bueno recoger response text para lo que te quiero decir con esto es que no lo puedes elegir tiene que estar en inglés ahora a continuación lo que hago es decirle mi conexión punto open y abro el archivo archivo xml y le digo que es true es decir que está sincrónico mi conexión punto senda ya envía la conexión vamos a ver qué sale le doy aquí a cargar le voy a cargar me voy a expecional los errores saber axis con vaya vaya vale te cuento vamos a ver este código originalmente tendría que funcionar pero no funciona porque los accesos mediante xml pues desde hace dos o tres años no se pueden hacer directamente a un archivo que abro en el disco duro pues lo que te dice es que de lord jim null está bloqueado por seguridad entonces lo que tengo que hacer es llevarme esto a un servidor local como por ejemplo el samp o el mambo entonces copio tú tenías el sampleo me lo llevo en mi caso el man me voy a ht docs me voy a pegar abro el mam es una pena tener que abrir un campo un manto tal paradigma xml pero en fin que se va hacer es que no lo controlo y ahora esto es xml vamos allá inspeccionó ahora sólo un error bien vamos a ver a un método no implementado vale ok el método no implementado perdón perdón perdón es que me falta el método y el método es get puede ser post o puede ser que me faltaba la palabra clave entonces ahora cargo y vamos a ver método no implementado si en la 16 un segundo vamos a esperar esperas atrás pero es que estoy modificando el que está en el escritorio es decir si lo he movido a la carpeta samp ya no debo modificar el que está en el escritorio tengo que modificar el que está en la carpeta samp esto es un clásico de los errores que lo sepas es lo nuevo aquí escritorio no yo lo muevo a aplicaciones más pero claro sí en bracket no le digo que quiero abrir ahora este de aquí para que es no lo sabe qué como archivo lo que vemos ahora recargo ahora si lo que estoy viendo ahora mismo en la pantalla es que en modo texto he cargado este archivo este archivo xml dentro de el archivo html evidentemente ahora a continuación lo que quiero hacer es lo siguiente lo que quiero hacer es que dentro de response text fíjate que aquí tengo un texto entero pero yo tengo también punto response xml guardo recargo y me da un documento y me da artículos y me da lo que yo quiera es decir vamos a ver para empezar este archivo xml http request se usa para muchas cosas en un primer momento estaba pensado para trabajarse con xml pero en la actualidad se usa en muchas ocasiones para trabajar con texto para meter en un archivo una cadena de texto plano y ya está claro que es lo que ocurre que si yo aquí le digo response text que es lo más sencillo pues al hotel tengo el texto a palo seko pero si tengo el texto a palo seko no puedo entrar dentro del texto no puedo integrar dentro del texto ahora bien si yo tengo response puntos a response xml esto es un xml lo cual quiere decir que yo ahora voy a hacer una prueba punto artículos a ver si me deja punto artículos de gandhi fine en este caso vale voy a decirle al sistema que lo que quiero es y tirar lo que quiero es circular y que lo que quiero esperar dentro de este archivo xml para trabajar con cosas para tratar cosas de hecho voy a decir lo siguiente bar contenido es igual a nada y ahora contenido es igual a mi conexión response xml de hecho esto debería estar aquí porque esto solo se ejecuta cuando esto está preparado con lo cual esto es cierto y ahora con sol contenido mira lo mismo y ahora a continuación lo que quiero hacer como te puedes imaginar es crear contenido lo que quiero hacer a continuación es parchear este archivo vamos a verlo a continuación lo que voy a hacer es que dentro del contenido voy a usar un método que es get element by name elemento mediante el nombre cojo el elemento mediante el nombre quiero el nombre artículo esto va a ser técnicamente una matriz porque artículo como ves aquí hay cuatro vamos a ver qué sale y esto lo quiero consolar lanzó documentando momento a que no del esto no de lista ver artículos esto fuera no de liszt me da una lista de 0 me da una lista de 0 me da una lista de 0 lo cual me extraño elements bites time a por el nombre de la etiqueta artículos ahora sí y artículos me da en este caso este elemento vamos a artículo ver a cuatro artículos fíjate que tengo aquí cuatro artículos pero además yo puedo venir por aquí y decir ahora sí sólo quiero el 0 sólo quiero el primero y fíjate que tengo un artículo o puedo venir por aquí punto get elements by tac name y el tag name es título recargo y me daba título 1 y el título es título que sí nos acordamos a título del curso vale y ahora lo que quiero es el no de val yo quiero no ya el título sino que hicieron lo que vale punto no de value no te vale o no del olivo no me das nada no deba libre cero vale me extrañó porque sí que me ha pillado el título de hecho título del curso en el html pues vengamos pues tener a html si esto mola mogollón esto mola mogollón es de lo mejor que tiene el programa en tecnologías web ya que cuando programas de otras tecnologías como java como python te tienes que empapar la documentación para ver qué tiene dentro pero aquí no aquí la ventaja del control es que el consolide lo saca todo y tú puedes ir viendo dónde está lo que necesitas eso está muy bien con lo cual yo aquí lo que tengo son los datos vale entonces y ahora por ejemplo aquí voy a poner lo siguiente mira voy a copiar para que para que veas el ejemplo y entiendas mejor el ejemplo curso aplicaciones voy a copiar la estructura que tenía aquí y trabajamos a una estructura que conoces está estructura vertical me la voy a copiar aquí en el gen en el bebé déjame variar la un poco para poner vive y de contenido y ve título h3 para ponerlo fácil y de título h 4 y de texto tú fíjate que yo borro esto borro esto borro esto si quieres poner un punto un punto y un punto y ahora lo recargo donde se me ha ido lo recargó y quiero que veas que aparece aparte de que la imagen estaba no encontrada voy a quitar momento la imagen pero quiero que veas que parece un punto y un punto y un punto se han puesto los puntos para que veas que aparece algo básicamente pero lo que quiero que veas es que ahora tengo aquí la estructura sin el contenido y tengo aquí el contenido es separado la estructura html del contenido y ahora lo que voy a hacer es lo siguiente vamos a ver ahora lo que voy a hacer es no voy a comentar vamos a poner el título y digo documento voy a hacer lo que temen y hacerlo con javascript puro sin usar jquery título h tres puntos inner html o sea para que lo entenderás pongo aquí y pone hola por qué pues porque le dicho que el documento vete al objeto que tenga el título h3 y su género html va a ser hola y le apuesto hola pues ahora lo que le voy a decir es que su línea de html va a ser cógeme el contenido coge mi artículo el primer elemento que veas coge el título y dame su etiqueta html ahora recargo guardo recargo muy bien el momento el número uno no es que no era no era mineral 7 ml no era en el html era de 0 a ver que me he cargado algo de 0 punto 1er html en un segundo ahora sí cogen esto mételo aquí y el título del curso quiero que veas quiero que veas que si ahora vengo aquí el documento h xml y digo título del curso número uno fíjate que es diferente del resto de cuatro cursos hago así a ver momento y pone el título del curso número 1 o sea quiero que veas que me está yendo al documento xml me está leyendo el contenido y lo está poniendo dentro del archivo index.hr ml evidentemente por cierto no sé si lo he hecho alguna vez pero leo el pensamiento pero dicho esto nosotros cilindros teniendo aquí entonces lo que estás pensando es menudo movido para total acabar poniendo en los datos en un archivo igualmente de etiquetas es decir verás ahora a las preguntas lo que necesites pero claro a ver a ver as la cuestión está en que como este archivo html tiene una estructura bastante predecible incluso este archivo se siente en una estructura bastante predecible aquí nos es muy fácil encontrar la información aquí fíjate que para hacer esto me es igual de difícil hacer esto que cargar el archivo que cargar el archivo xml es que la dificultad es la misma entonces yo entiendo que en el ámbito de aplicación en el que estamos trabajando ahora mismo no percibas cuál es la ventaja de xml sin embargo en una web real más o menos real por ejemplo cojo la mía por ejemplo si me voy al blog para que veas una web desarrollada que es lo que ocurre cuando abrimos el código html cuando abrimos el código fuente y eso que descubriendo un wordpress que la plantilla no le he hecho yo es una plantilla llamada sydney o sea que no es que lo complicado ayuda adrede me voy a ver el código fuente de la página y me encuentro que el código fuente de la página es esto de aquí y digo sí vale reconozco cierta estructura pero a la vez si busca entonces en este caso cuando la aplicación se complica es cuando vale la pena decirle a html que la estructura sea todo lo compleja que le dé la gana pero que el contenido de datos se mantenga limpio para que la estructura pueda ser compleja pero el contenedor de datos pueda ser limpio he ido al blog que no lo he programado ya vamos a cursos que sí que lo probado yo modestia parte de la verdad que cuando saque el código que estaba bastante limpio creo entonces vamos a ver este es el código no llega todavía este es el código entonces claro este es el código que tiene imágenes pero triana foto pero ten estilo por ejemplo el medio porque no me queda más remedio que ponerlo te lo aseguro porque tiene un contenido porque tiene un tal porque tiene un y que es en la duración del curso porque tiene un prender es claro digo aquí está mezclado todo está mezclado el estilo con iconos con contenido con movidas para tres cuando se complica y te aseguro que esto se complica es cuando ahora en este ejemplo no lo ves pero cuando se complica es cuando se ve claro que conviene separar las dos cosas ahora mismo en este ejemplo yo sé que parece que no tenga ninguna ventaja pero te aseguro que cuando la cosa se complica yo te puedo decir mira coge este archivo y complica lo lo que te dé la gana el archivo xml se va a quedar así de estructurado y no va y no va a cambiar por tanto qué pasa cuando html se complica no pasa nada porque esto también es un archivo que una vez hecho en principio no se tiene que porqué abrir por el ser humano todos los días pero yo te puedo decir complica el archivo html que el archivo xml que es el que de vez en cuando sí que puedes aceptar abrir va a mantener su pureza va a mantener su estructura y va a mantener su limpieza verás conceptualmente así como por ejemplo cuando enlazamos un archivo javascript lo que hacíamos era crear una etiqueta script lo que hacemos en este caso es decirle tú dame todo el javascript y una vez que me des el javascript ejecuta lo del tirón desde la primera línea hasta la última línea con el css ocurre exactamente lo mismo lo externalizados fuera y yo lo que hago es externalizar lo y decirle lm lo y ejecutarlo y ejecutarlo quiere decir estilizar las etiquetas de html desde la primera línea hasta la última línea con xml no es lo mismo porque estilo es un lenguaje define el estilo código es un lenguaje que define el comportamiento pero xml dentro de que también es un lenguaje pero define los datos pues yo lo que necesito aquí es meterlo en una variable para a continuación empezar a hilar por dentro del contenido y no cargar todo el contenido del tirón de vomita melo todo en pantalla sino ahora te voy a decir solo el contenido que yo quiero entonces por eso es por lo que no se puede cargar de la misma forma que cargamos lo otro de hecho de hecho esto no es sql evidentemente pero tiene similitudes con respecto a lo que es sql en cuanto a que no deja de ser una petición a una parte de los datos y luego además te voy a decir una cosa y es que vamos a ver voy a ver si te lo puedo demostrar vamos a ver voy a venir por aquí voy a crear un botón en el botón voy a decir pulsar y voy a decir un clic no estoy usando jquery con clic dale dale como sebastián es pitbull el cantante pues pues como tipo como dale 123 ale entonces yo ahora lo que hago es que le digo función dale lo que hago es meter esta información aquí dentro entonces esto y por tanto esto no se va a ejecutar hasta que yo no le vea el botón vamos a comprobarlo vamos a comprobarlo algo así y aparecen tres puntos y yo le doy a pulsa me hola venga voy a decir control y punto esperate hola si es que dale lleva paréntesis porque es una función vale vamos a verlo ahora le doy a el botón pulsa me y pone título del curso número uno yo te pregunto ya sé que estás que da igual porque estás queda como diciendo vale y que las da un botón de qué pasa no pasa nada pero que diría es que acaba de pasar ha pasado algo muy importante esto que acabo de hacer es eso que tú has dicho es decir se carga información cuando tú quieras y ese cuando tú quieras en tecnologías web recibe el nombre de carga asincrónica la carga asincrónica quiere decir que como te puedes imaginar que no es sincrónica y que no es sincrónica quiere decir que en cualquier documento yo lo que hago es que al principio del documento al principio cargo lo que necesite cargo cargo cargo cargo cargo y que sigo cargando y si luego resulta que antes de descargar otra cosa pues a se siente porque o lo cargas al principio o ya no lo puedes cargar con él con el xml http request se usa como ya te digo es la puerta de entrada la llave de entrada para un montón más de cosas pero lo que acabo de hacer es lo que se llama una petición asincrónica qué quiere decir que después de haber cargado la página cuando quiera yo puedo volver a cargar ese archivo o cargar dinámicamente ese archivo entonces esto es lo que como te digo y como te insisto nos abre las puertas a una tecnología que se llama ajax no este ajax sino otro ajax vamos a ver ajax javascript entonces ahora sí y wikipedia vale entonces ajax es asíncrono javascript y xml y es lo que acabamos de hacer que es mediante javascript cargar xml y hacerlo si quiero de forma sincrónica de forma sincrónica quiere decir entre otras cosas haciendo honor a lo que tú has dicho de que me voy a escritorio me voy a aplicaciones web cargo cargo index una de las muchas utilidades que tienen ajax es que yo por ejemplo cargo esto y yo por ejemplo tengo aquí voy a hacerlo pequeñito tengo aquí una serie de películas pero yo no las veo porque por ejemplo podría decirle solo cuando la película aparezca por la derecha es cuando en ese momento quiero que carguen los datos de la película o yo por ejemplo tengo aquí un scroll entonces yo en el scroll lo que hago es bajar y decirle solo cuando aparezcan en pantalla esos cuadritos es cuando quiero que ahora te vayas al documento xml o te vayas a la base de datos ya que también se puede hacer ajax con base de datos en lugar de con documentos xml porque recuerda que al principio te ha dicho que el documento que sml es una de las formas de almacenar datos y entonces haciendo eso es cuando puedo cargar un archivo vale es cuando puedo cargar información por tanto sirve para varias cosas para cargar información al vuelo sin tener que recargar la página para aligerar la carga de la página y no cargarlo todo al principio y cargar un montón de cosas que luego igual el usuario no necesita para es decir de esto de xml de htc request como verás nos sirve para muchas cosas insisto incluso antes de dicho que en lugar de response text para el lugar de disputa xml usamos ritmos text y puedo cargar texto plano o sea no estoy atado en ningún momento a trabajar con xml entonces con todo esto que es lo que vamos a hacer pues con todo esto lo que vamos a hacer es convertir a xml en nuestros contenedores de texto vamos a hacer que xml sea el archivo mediante el cual yo guardo la información ahora te voy a hacer un análisis y te lo voy a hacer más con fines didácticos para que me quede la garganta voy a hacer un análisis pero es que te voy a hacer no pretende ser la verdad o sea lo que te quiero hacer es un ejemplo de cómo pensar las cosas yo por ejemplo lo que haría es decir bueno para mi aplicación xml yo puedo crear muy alma otra vez bueno lo tengo aquí realmente yo puedo crear un archivo xml yo puedo crear una conexión a base de datos entonces te voy a decir una cosa hace cosa de 10 años yo estaba trabajando fuera de españa para una gran corporación en la cual no puedo decir el nombre porque lo que a continuación es parte del know-how interno de esa gran corporación y es muy conocida con lo cual entonces trabajando en esa gran corporación vi que esa gran corporación cuando sacaba algo de datos en lugar de hacer una petición a mysql que es lo que yo hubiera hecho trabajaban con archivos xml esa decisión no no se tomaba en esa oficina sino que venía de la central entonces yo me fui a él a uno de los promotores principales que había allí y le dije oye he visto esto o sea no en plan de te lo discuto sino en plan de si la feixa así por algo será y quiero saber ss por algo entonces yo vi que esa corporación usaba archivos xml en lugar de la base de datos y entonces este chico me dijo en perfecto alemán hay que joderse pero entre alemán e inglés nos entendíamos me dijo claro es que una vez que por ejemplo imagínate este artículo se mete en la base de datos yo no lo voy a variar entonces para que hacer una predicción sql a algo que no va a variar es decir las bases de datos mysql o la base de datos relacionales sql tienen ventaja cuando los datos están cambiando continuamente porque yo te pido hoy algo y te pido mañana algo y lo que te pido mañana va a cambiar con respecto a hoy con lo cual en ese caso vale la pena una base de datos mysql porque insisto porque cada vez que haces la petición la respuesta es diferente pero este chico me dijo pero esto que estamos haciendo es una petición a un catálogo de productos ese catálogo de productos no va a cambiar mañana ni va a cambiar pasado ni va a cambiar el otro como mucho cambia una vez al año si cambia una vez al año una vez al año que generamos el archivo xml pero no hay que hacer una petición por una razón muy sencilla porque cada vez que haces una petición a una base de datos mysql esa petición tiene un coste computacional y había miles de personas que utilizaban esa aplicación con lo cual o sea ir a una base de datos para decirle base de datos seleccionar productos de la base de datos donde ir es número total y la base de datos se vale tratar a tratar de recoger los datos te los doy eso tiene un coste pero realmente esta chorrada porque siempre que alguien pida al producto va a dar lo mismo entonces el chico éste me dijo en lugar de eso hacemos una xml porque siempre va a dar el mismo resultado y leer un xml computacionalmente es mucho menos pesado que leer os hay que hacer una petición mysql y luego por otra parte evidentemente como te decía antes con respecto a la seguridad el archivo que no tenía no guardaba correos ni contraseñas ni cosas sensibles a un archivo xml que si alguien lo pirateaba de fiascos pirateados ya te has quedado el catálogo de productos que por otra parte lo puedes consultar en la web ya que ahora te has quedado nada de valor vale entonces lo que te quiero decir con esto ya no te quiero decir esta es la verdad o utiliza siempre esto utiliza siempre lo otro lo que te quiero decir es ventajas y desventajas e incluso lo que te quiero decir con todo esto es que yo me encontraba en un escenario donde yo hubiera elegido una solución tecnológica como en ese caso hubiera sido mysql y una persona me justificó que había otra solución tecnológica que era menos pesada y por tanto más conveniente y ofrecía el mismo servicio que te estoy contando un caso concreto o sea de la misma forma que hay miles de otros casos por ejemplo fíjate que en el ejemplo que te he puesto antes con respecto a cómo estoy gestionando mi web no estoy usando xml para nada o sea que no te estoy diciendo xml para todo lo que te estoy diciendo es que todo en cuanto a gestión de datos son pros y contras la ley eventualmente en un momento dado hay que conocer cuáles son los pros y los contras de cada solución y elegir aquello que más te convenga vale

bueno pues vamos a empezar con php entonces php es un lenguaje del lado del servidor teniendo en cuenta que mysql es una base de datos que está instalada en el lado del servidor pues se requiere un lenguaje del lado del servidor también para poderse conectar correctamente a la base de datos entonces en este caso vemos que base de datos va en conjunción con un lenguaje de servidor cuando digo un lenguaje del servidor quiero decir que vamos a trabajando con php puede ser python puede ser java puede ser césar puede ser prácticamente cualquier otra cosa se ve que al pulsar alt y número 3 parece que ocurre otra cosa diferente entonces la idea voy a hacer estar este firewall de aquí la idea es que vamos a estar trabajando con php por varias razones la primera es porque es el lenguaje de servidor más extendido para hacer aplicaciones web ahora bien en el momento en el que hablamos del lenguaje del servidor eso quiere decir que tenemos que contar con un servidor nuestro ordenador de sobremesa no es un servidor web pero de la misma forma que anteriormente hemos instalado un servidor local para trabajar con bases de datos lo mismo ocurre con el lenguaje del servidor en este caso php el servidor el programa que nos permite convertir en nuestro ordenador en un servidor local es el mismo que hemos utilizado anteriormente es el samp o en el caso de que estemos en mac podemos elegir entre el man o el samp para mac es lo mismo realmente a nivel de php yo tengo por actyma anp y tengo por aquí samp y es realmente lo mismo en cualquiera de los dos casos lo que hace es habilitar al ordenador con el que estamos trabajando actualmente como un pequeño servidor web eso quiere decir que es un servidor web para desarrollo local no para este ordenador y convertirlo en un servidor web abierto al público pero eso es que nos permite crear aplicaciones en nuestro ordenador que luego subiremos a otro servidor que hayamos contratado a un servidor comercial que esté conectado y esté online y esté configurado las 24 horas del día una diferencia entre php y las tecnologías que hemos visto hasta ahora es que así como por ejemplo con las tecnologías que hemos visto hasta ahora nosotros podríamos hacer la carpeta en la que trabajamos en cualquier parte del disco duro al trabajar con php eso no ocurre así cuando yo instalo mampuján o lo que sea que instale debo tener en cuenta que dentro de esa carpeta aparece una sub carpeta llamada ht docs con samp ocurre exactamente igual y debe de tener en cuenta que todos los clips que creé deberán estar contenidos dentro de esta carpeta no pueden estar contenidos en ninguna otra carpeta del disco duro no funcionarán digamos en ninguna otra carpeta del disco duro los puedo tener en cualquier otra carpeta con la finalidad de tenerlos archivados pero no los puedo ejecutar desde cualquier otra carpeta para demostrar esto voy a hacer lo siguiente bueno en primer lugar evidentemente en mi caso voy a arrancar el mapa y una vez que ha arrancado el mando a continuación lo que voy a hacer es que voy a poner localhost 8888 en mi caso el 8 888 porque estoy con el man en mac si estás con el samp en windows no hace falta el 8 888 y voy a poner aprendiendo php y lo que ocurre es que al hacer clic al pulsar enter me dice que no existe esa carpeta porque pues por qué no la he creado todavía pero si yo ahora a continuación lo que hago es crear una nueva carpeta y la llamo aprendiendo php lo que ocurre es que ahora recargo esta carpeta y me dice que este es el índice de la carpeta aprendiendo php y lo que nos dice evidentemente de momento es que la carpeta está vacía luego vamos a empezar a crear cosas por ejemplo método dentro de aprende php voy a abrir un editor de textos en este caso va a ser brackets puede ser cualquier otro editor de textos eso no importa en absoluto y a continuación voy a cerrar este archivo en el servidor creó un nuevo archivo lo guardo como de hecho he dicho guardar todos guardar como me voy y aplicaciones en mi caso me voy a el mar me voy a ht docs me voy aprendiendo php y lo voy a guardar como por ejemplo php 1 php guardo ahora aquí recargo y me dice que esa carpeta ya contiene el archivo php 1 php lo que quiero que veas demostrado es que todo aquello que yo ponga a dentro de la carpeta ht docs es realmente lo que ocurre realmente a lo que llegó realmente lo que ejecutó cuando pongo localhost dos puntos en mi caso 8888 en tu caso o bien no pones nada o bien pones esto o bien puedes poner dos puntos 80 es lo mismo en mi caso 88 88 pulso php 1 php de momento no tiene nada y a continuación lo que voy a hacer es lo siguiente vamos a escribir el siguiente código y te digo lo siguiente un archivo php puede contener html de hecho te lo voy a decir con html un archivo php puede contener html guardo recargo y no hay ningún problema sale correctamente y además si lo inspeccionó verás cómo sale con la etiqueta de párrafo o sea realmente es cierto un archivo php puede contener html pero un archivo html no puede contener php cómo es esto de contener php pues lo que voy a hacer a continuación es que voy a escribir menor que interrogación php y por último interrogación mayor que y todo lo que escriba aquí dentro será php pero cuidado php es un lenguaje difícil en el sentido de que ya no es html donde puedo hacer lo que quiera y funciona no es css donde si cometo un error falla de esa línea pero todo lo demás funciona no es javascript donde si cometo un error no funciona el script pero la página carga sino que yo por hacer algo también de frente como poner hola solo he puesto o la recargo la página hola hola cómo estás hola cómo estás y esta página no funciona o sea no se ve nada aparece un http error 500 lo que quiere decir error del servidor cuando se dice error de servidor no suele querer decir que el servidor ha fallado sino que el script que había en el servidor ha dado algún error irrecuperable entonces esto es lo que tiene php por eso también en los cursos lo suelo enseñar después de haber enseñado html css y javascript para que dado que es un lenguaje más difícil y más puñetero que los demás pues por lo menos cuando llegue este momento que tengamos un poquito de soltura con programación así que la idea es que dentro de este hp no se puede poner cualquier cosa eso sí si yo quiero que php devuelva html no hay ningún problema lo puedo hacer con el comando echo el comando echo es como decir como que te vas la montaña dice seco echo es como quiero que lances algo por pantalla y entonces dentro de las comillas pongo esto es algo html desde php y no pasa nada entonces guardo recargo y fíjate que esto es algo de html desde php te voy a decir todas las formas que ahora a continuación en las siguientes unidades lectivas en los siguientes vídeos vas a comprobar como aunque php sea un lenguaje más puñetero que javascript todo aquello que prácticamente mucho de lo que te he enseñado de javascript lo puedes reutilizar para php no vas a tener que reaprender desde cero la primera demostración que te voy a hacer al hilo de esto es enseñarte los comentarios en php y básicamente lo que te voy a decir es que los comentarios en php son exactamente iguales que los comentarios en javascript así que doble barra esto es un comentario de una línea asterisco barra perdón barra asterisco y asterisco barra esto es un comentario de varias líneas que lo sepas entonces guardo recargo y fíjate que de hecho brackets me lo ha puesto de color gris y recargo y no aparece en la pantalla porque evidentemente es un comentario con esto para verás a continuación que nuestro aprendizaje en php va a ser bastante rápido precisamente por esta cuestión porque vamos a reutilizar una gran cantidad de conocimientos de fundamentos de lo de la programación de los que ya conocemos de javascript una cosa eso sí que te quiero enseñar que es diferente en javascript con respecto a php es que javascript es un lenguaje del lado del cliente esto qué quiere decir pues esto lo que quiere decir es que javascript se transmite entero al cliente y en el cliente se ejecuta php sin embargo es un lenguaje del servidor y eso quiere decir que este script php no se transmite al cliente sino que se ejecuta en el servidor y el resultado del script es el que se envía al cliente no se envía el script se envía el resultado del script y esto lo vamos a poder ver fácilmente señor pulso botón derecho aquí en el navegador y le digo que quiero ver el código fuente de la página pincho ver el código fuente y tú vas a ver que aparece esto es algo de html desde php que es únicamente el resultado del eco pero no el eco en sí mismo y por supuesto tampoco aparecen los comentarios entonces esto algo que hay que tener en cuenta y es que prácticamente todo lo que vas a hacer en php se va a quedar en el servidor y al cliente solo va a llegar el resultado de aquello que tú hayas escrito en php esto también hace que php no no es mi intención ya sabes compararlo con javascript porque la comparación es injusta porque la comparación a veces es improcedente porque lo que hace uno es lo que hace uno y lo que hace el otro es lo que hace el otro pero sí que hay una diferencia muy grande desde el punto de vista de la seguridad y es que en javascript la seguridad es muy difícil he hecho muchos alumnos a lo largo de los años me han dicho es que como puedo pretender tener algo de seguridad en javascript si es que le estoy enviando todo el código al cliente cualquier persona me lo puede pillar yo pues digo si eso es lo que hay hay técnicas hay trucos como buscar el código pero al final te van a pillar el código entre hp no ocurre así y por tanto todo aquello por ejemplo por esa es la razón por la cual las conexiones a base de datos se hacen desde php porque cuando tú pongas un usuario y una contraseña de la base de datos ese usuario y se contraseña no se va a transmitir al cliente sino que se va a quedar en el servidor y al cliente se le enviará únicamente el resultado de la petición vale esa es la cuestión entonces vamos a continuar y vamos a continuar con las clásicas declaraciones de variables estructuras de control en definitiva ahora verás que te vas a sentir bastante como en casa voy a crear un nuevo archivo lo voy a guardar dentro de esta carpeta lo voy a guardar como ph2 php php vamos a empezar trabajando con declaración de variables entonces php al igual que javascript bueno dos igualdades con respecto al javascript en primer lugar es un lenguaje de los que se llaman débilmente tipificado eso quiere decir que no tenemos variables donde tenemos que especificar el tipo de datos sino que yo por ejemplo digo dólar no confundir no tiene nada que ver la gente me lo confunde mucho el dólar de php con el dólar de jquery no tiene que ver en absoluto el dólar de jquery quiere decir selector el dólar de php quiere decir variable que decir voy a declaró una variable entonces yo digo edad es igual a 42 entonces a continuación yo digo nombre es igual a josé vicente débilmente tipificado al igual que javascript quiere decir que yo en ningún momento estoy declarando si esta variable es de tipo número entero o si esta variable es de tipo cadena de caracteres sino que yo lo declaro y el programa internamente ya ya sabrá ya se apañará para saber de qué tipo es cada cada estructura otra cosa que te voy a decir es qué al igual en hp al igual que javascript es un lenguaje de tipo multi paradigma eso quiere decir que ahora mismo estoy empezando con el paradigma de programación estructurada pero más adelante no todavía en la clase de hoy pero más adelante veremos que existe la implementación de otro paradigma que es la orientación a objetos pero php soporta orientación de objetos pero no es como java un lenguaje estrictamente orientado a objetos eso quiere decir que yo puedo empezar con programación estructurada algo tan sencillo como lo que estás viendo en pantalla y luego más adelante si quiero utilizar objetos ejecuto php 2 ves que el resultado en pantalla evidentemente es ninguno porque al igual que ocurre en javascript que yo declaré una variable no quiere decir que la tenga que sacar por pantalla solo cuando ponga echo era hueco las reglas de encadenación son las mismas con una pequeña diferencia mi nombre es punto nombre y es que el carácter de encadenamiento en php es el punto no el signo más como ocurre no sólo en javascript sin leer en la gran mayoría de lenguajes de programación hay muchas personas a las que esto les da rabia por una razón muy sencilla y es que php al final es un lenguaje que deriva de fe como muchos otros lenguajes y prácticamente todos los lenguajes que derivan de fe siguen la regla de que el operador de encadenamiento es el signo más pero tú ya sabes por qué creo que lo comentado anteriormente que me da rabia que en en javascript y en prácticamente cualquier lenguaje derivado de cee el signo más sea a la vez la suma y a la vez el encadenamiento porque es esa ambigüedad a veces nos da problemas entonces yo en este caso valoró positivamente que en php el encadenamiento sea el punto porque dar respuesta a esa ambigüedad porque cuando quieres hacer una suma aritmética pones un signo más y cuando quieres encadenar pones un punto y así entonces y mi edad es punto edad punto y coma al acabar cada línea al igual que el javascript pero en javascript si no lo pones no pasa nada y en php sí que pasa y cuando digo que sí que pasa quiero decir que recargo y pongo mi nombre es josé vicente y unidades 42 pero para hacer algo tan inocente como ir a la línea 4 y eliminar un punto y coma tú fíjate que lo único que he hecho es eliminar un punto y coma a continuación recargo y lo que ocurre es que http error 500 sólo por haber quitado un punto y coma por eso yo en este caso te vuelva a repetir que hemos empezado con otros lenguajes de de programación más sencillos precisamente para romper manos sin tener que ver un error en pantalla a cada dos pasos que cuando ya sabes programar pues te da igual porque sabes que al final le vas a solucionar pero cuando estás empezando a programar puede ser muy frustrante estar todo el rato viendo errores en pantalla vale por eso lo que te quiero decir es que si al practicar ves que te salen errores y ves que por cualquier fallo nada funciona pues es que php es así yo aparte también hay cursos donde se me olvida decirlo pues en este te lo digo porque me he acordado y yo también lo que ocurre es que llevo muchos años programando con php entonces qué ocurre que no cometo fallos no cometo fallos no porque sea así de inteligente yo sino porque me tiran tantas horas formando php que al final pues quieras que no la práctica hace la maestría y la única el único camino al éxito es la práctica entonces pues ocurre que no comento errores entonces claro esto lo que hace es que a veces no aviso de esto no digo que cometer errores es normal yo programa y no cometo errores todo sale bien fantástico prueba en casa comete errores y se frustra y si no le salieron es porque a mí si al entonces de vez en cuando cometo algún error como lo de quitar el punto y coma simplemente para que te des cuenta de esto para que te des cuenta de que con php cualquier puntería que no pongas automáticamente es un error 500 y que si te ocurre es normal y que tú ya sabes que yo digo siempre que programar sin errores no es un objetivo realista el objetivo realista es aceptar que vas a cometer errores y cuando los errores aparecen ser capaz de identificar dónde está el error te voy a decir también una cosa y es que yo tengo ahora mismo en la configuración de php en un modo bastante poco verbos o te lo digo te voy a decir que quiero decir quito el punto y coma le doy a recargar y dice esta página no funciona entonces claro yo digo a ver yo quiero algo como javascript que cuando algo no funcionaba por lo menos me decía en qué línea estaba el error e incluso me daba un poco de ayuda vale entonces te cuento el man yo lo tengo configurado por cierto está configurado tal y como viene para que cuando algo no funciona no me diga dónde está lo que no funciona simplemente me diga que nada funciona a continuación te voy a decir que eso tiene una razón de ser una cosa es tener una plataforma de desarrollo y otra cosa es tener una plataforma de producción en este caso el map que yo tengo parece que esté configurado para la producción si yo estoy en desarrollo y yo cometo un error yo quiero saber dónde está ese error pero si yo pongo un software en producción lo pongo en un servidor al que el público puede acceder yo no quiero que al público cuando le aparezca un error le diga el error está en la línea tal porque tienes un eco mal porque le estoy dando pistas a mis usuarios de cómo he hecho el programa por dentro y no quiero eso vale por tanto esto es lo que debería estar saliendo cuando el error de en un servidor en producción es decir cuando la aplicación esté publicada para cambiar esto no hay ningún problema nos vamos a la carpeta del servidor en este caso me voy a ir a ammán dentro de mamá me voy a ir con vamos a verlo porque no resisten con bhp pero bueno me voy a con y en mi caso en mamá me acumula un montón de versiones de php voy a ir a la última vale php 72 10 creo que estoy con esta y veo que tengo un archivo llamado php jenny es decir un archivo de inicialización voy a pulsar botón derecho a abrir con brackets también veo que es un archivo de configuración hay un montón de cosas pero de hecho no html error pero lo que voy a hacer es pulsar command efe control efe si estás en windows y voy a buscar errores y voy a buscar todas las líneas que tengan que ver con errores yo creo que la buena en que esta de aquí pero vamos a verla entonces vengo por aquí memory limit no a [Música] pero no esto es ese manual a que los errores no display errors error reporte vamos a seguir y habrá uno y habrá uno que me permita lanzar los errores en pantalla php error error level warning htm el error display error si está en un y el error reporting está en él vamos a ver vamos a ver qué puede ser una vía que estoy encontrando en lugar de tocar el archivo in y es en el archivo php establecer una serie de directivas de inicialización voy a meter estas tres directivas que es mostrar mostrar errores true verdadero mostrar errores de inicialización verdadero y el tipo de errores que quiero sacarlos quiero sacar todos entonces guardo recargo me vuelvo a decir me vuelve a decir esta página no funciona voy a inspeccionar vale me dice que el servidor ha respondido con estatus de 500 que es lo mismo pero yo lo que quiero es ver si el programa me puede sacar directamente la información que quiera vamos a verlo a continuación vamos a trabajar con operadores pero como te digo el trabajo con operadores va a ser muy sencillo desde el punto de vista por eso lo voy a hacer rápido porque es que es igual que javascript para no detenerme explicándote algo que ya conoces voy a crear un nuevo archivo lo voy a guardar dentro de aprende php php tres punto php y aquí dentro voy a hacer lo siguiente voy a declarar una variable llamada operador uno voy a llevar la 1 es igual a 4 operador 2 es igual a 3 y voy a decir echo la suma de los dos operadores es punto paréntesis mejor o uno más o dos el signo más la cruz nos sirve para operador matemático de suma y sería conveniente que pusiera un br de html para asegurarme que el salto a la siguiente línea entonces la suma de los dos operadores es evidentemente 4 más 37 a partir de aquí tenemos operadores aritméticos tenemos la suma tenemos la resta así que la resta de los operadores es el guión es el mismo operador exactamente qué tenemos en javascript entonces guardo recargo la resta de los operadores es 1 de la misma forma la multiplicación de los dos operadores es este disco para multiplicar la multiplicación de los dos operadores es 12 y la división de los dos operadores es la barra que hay encima del número 7 la división entre los dos operadores es de 1.3 333 3 de la misma forma también tenemos el resto entero de la división es el porcentaje el porcentaje no es dame el porcentaje sino que es el resto entero de la división entonces la división entre 4 entre 3 sale a 1 y sobra 1 el sobra uno es el resto entero de la misma forma tenemos también los operadores de comparación ya sabemos por qué no lo he dicho anteriormente pero lo he dejado un poco implícito que tenemos el operador de asignación que es la igualdad igual que en javascript digo esto porque tenemos también el operador de comparación que es la doble igualdad entonces es cierto que los dos operan dos son iguales y punto operando 1 doble igual operando 2 y no es cierto como no es cierto me va a decir hola así vale esto es algo que creo que te comenté en alguna otra ocasión y es que hay lenguajes y en este caso php es uno de ellos que cuando da falso no dice nada en pantalla es decir ahora pongo el operando 3 que es igual a 3 también y digo es cierto que el operando 2 es igual al operando 3 y en este caso me dice 1 vale pues hay lenguajes esto es mal por php donde debería decir si aquí me dice es 1 en el caso falso me debería es decir 0 pero aquí en php me dice 1 que internamente es un true pero cuando es falso en lugar de firme 0 no me dice nada vale esto no me gusta particularmente de php luego por otra parte es cierto que los operando son exactamente iguales en este caso son exactamente iguales es la triple igualdad y en este caso me dice 1 porque son iguales y el tipo de dato es el mismo pero si yo cojo el operador 3 y le pongo un 3 pero entre comillas los dos son un 3 pero esto es un número entero y esto es una cadena de caracteres un carácter realmente en ese caso no me sale nada porque me dice que es falso porque no son exactamente iguales porque el valor es el mismo pero el tipo de datos no lo es esto quiere decir que php es una demostración de que es un lenguaje débilmente simplificado lo cual quiere decir que por defecto no especificamos el tipo de datos pero eso no quiere decir que internamente no trabaje con tipo de datos porque eso te acaba de demostrar que el programa así que sabe internamente que esto es un número entero y que esto es un string de cadena de caracteres al igual que ocurre en javascript porque te vuelvo a decir que los operadores son exactamente iguales tenemos también el operador de no igualdad es cierto que el operando uno no es igual al operando dos es cierto que 4 no es igual a 3 esto es cierto y por tanto es cierto que puedan dos no son iguales pues me dice que true me dice que verdadero y además de todo esto también vamos a tener los operadores bule ‘nos entonces para ver los operadores bolea nos yo digo día es igual a miércoles un mes es igual a agosto entonces en este caso voy a hacer una validación para hacer una validación voy a hacer lo siguiente pico es cierto que las dos son ciertas y voy a decir díaz es igual al doble igual a miércoles and doble ampersand mes es igual a agosto y lo que ocurre en este caso es que guardo y recargo y me dice que es cierto que las dos son ciertas sí que es cierto pero qué ocurriría si yo le digo en este caso es cierto que día es igual a miércoles y mes es igual a octubre pues lo que ocurre es que una es cierta la otra no lo es y por tanto al validar lo que ocurre es que es falso es decir el operador booleana de suma que mediante el cual las dos tienen que ser ciertas para que la validación global sea cierta de la misma forma tenemos también el operador ahora es cierto que alguna de las dos es cierta el operador de oro se hace con al xerez el al que hay a la derecha de la barra espaciadora y el número 1 del teclado son las dos barras pipe verticales entonces digo día miércoles y mes octubre es cierto que alguna de las dos es cierta es si vale el resultado de sí porque mes no es octubre pero día así que es miércoles con que una de las dos sea cierta la expresión es cierta pero cuidado si digo es cierto que alguna de las dos es cierta día es igual a martes y mes es igual a octubre ninguna de las dos es cierta y por tanto da falso vemos por tanto que la forma de formular los tipos de operadores el funcionamiento de ellos es igual que lo que ya conocemos de javascript varía la sintaxis evidentemente porque la sintaxis pues bueno no te digo que tiene que variar porque así porque tampoco es cierto esto es algo que a lo largo de los años se habían quejado muchos alumnos y es que han dicho oye porque no hay un puñetero estándar porque los lenguajes de programación lo hacen todo igual si sea un lenguaje de programación dice cómo es que el resto de ganeko pues simularía pero desgraciadamente no es así -cada porque si en javascript se pone var lo que sea porque aquí pone se pone porque aquí se pone una puñetera un poquito de dólar pues mira por por qué es el hecho de creador el día que creó el lenguaje de programación ya es pero cada creador de cada lenguaje de programación lo ha decidido crear de una forma concreta de la misma forma que a lo largo del tiempo muchos alumnos han preguntado por qué los lenguajes de programación tienen que estar en inglés pues bueno a día de hoy para bien o para mal nos guste o no el inglés es el lenguaje predominante no ya no te digo ya en los negocios pero desde luego en la tecnología y por tanto prácticamente no es sólo ya los creadores de muchos de los lenguajes de programación fueran norteamericanos y por tanto o ingleses en algún caso y por tanto pues evidentemente han barrido para casa o sea no es normal que un programador norteamericano ponga un lenguaje en español sino que lo va a poner en su idioma pero incluso en el caso de php caso de php es una vez esas excepciones el creador de php es un programador llamado rasmus lerdorf entonces pongo php si suena un poco raro pero no sé en su país será un nombre que suene muy bien pero en español no suena del todo bien pero al fin que es va a hacer entonces vamos a verlo por aquí ahí lo tenemos lerdo que si te fijas es porque lo esté poniendo en la pantalla es un programador nacido en groenlandia entonces claro no tengo ni idea si te digo la verdad ahora mismo que poniente se hablan groenlandia vamos a ver en groenlandia se habla el beni parece que sí porque parece que pertenece al reino de dinamarca entonces claro pues este esta persona en su momento pues diría mira si hago un lenguaje de programación y lo hago en danés me voy a comer los mocos pues con lo cual lo hago en inglés para que tenga mayor aceptación en la comunidad digamos de lo que te quiero decir es que aún creo que creo que hay una excepción que es ser la pnc que es un lenguaje qué es un lenguaje de programación que creo que tenía alguna parte escrita en alemán pero salvo salvo esta cuestión pues estoy viendo que también había alguno de estos que estaba en alemán pero todos los demás están en inglés vale entonces pues bueno es lo que hay y parece que es lo que va a seguir viendo durante un tiempo que se va a hacer bueno vamos allá continuamos creando un nuevo archivo lo guardo en la carpeta y me voy a php 4 php y a continuación lo que voy a hacer a continuación es lo siguiente voy a hablarte de estructuras de control pero una vez más te voy a hablar de estructuras de control de un modo rápido porque las estructuras de control que hay en php son básicamente las mismas que tenemos en javascript tenemos las estructuras de control de bucle donde tenemos por ejemplo la estructura for la estructura force escribe exactamente igual tenemos que tener tres condiciones de inicio o sea tres condiciones que son inicio final e incremento entonces integrador es igual a cero punto y coma y tirador es menor que 30 punto y coma y tirador más lo que quiere decir en este caso que echo que sepas que hoy es el día punto dólar y punto del mes vr para bajar un punto y coma para acabar la línea y pongo php 4 y tenemos la estructura de control de repetición que lo que hace es por repetir algo x veces tantas veces como yo diga menor o menor que igual para que llegue a 30 tenemos también la estructura de control while la estructura de control while mucho cuidado porque yo vengo por aquí y digo día es igual a 1 y digo mientras que díaz sea menor que 30 exactamente igual que en javascript echo hoy es el día punto día me falta un punto del mes cuidado estoy entrando en un bucle infinito y los bucles infinitos en php están bastante poco tolerados así como en un momento dado he dicho anteriormente que los bucles infinitos en javascript si se manejan correctamente son incluso muy buenos en php generalmente en gran medida un bucle infinito nunca va a ser bueno entonces lo que hago es que recargo y fíjate que tengo tengo tengo me va sacando me va sacando esta página esta página va rodando y la gran mayoría de servidores tienen un límite de de 30 segundos de ejecución eso lo que hace es que después de 30 segundos de ejecución para evitar que colapse es el servidor lo que va a hacer el servidor es parar la ejecución de este script entonces como te digo porque puedes imaginar con un bucle while estoy esperando a ver si se cumplen los 30 segundos no existen servidores que igual me lo he tocado yo igual me lo he tocado yo entonces sí exacto voy a poner execution si me lo toca y es que fíjate que el maks execution time está a 30 segundos y yo me lo puso 3000 vale entonces voy a parar manualmente esto que se hace con la equis y aún así a veces que la equis ahora tarda un poco en responder me lo he parado yo porque no es que yo en mi tiempo libre me dediqué a hacer bucles infinitos en php sino que en mi tiempo libre hago algún tipo de software que por lo que sea tiene que realizar cálculos muy duros y esos cálculos pueden durar más de 30 segundos es decir es un entorno donde no es que se haya quedado enganchado infinitamente sino que es que yo le estoy pidiendo la máquina un cálculo que tarda más del tiempo límite pues por eso es por lo que me he tocado esto para poder superar ese límite vale entonces he dicho esto sí hay que tener en cuenta que en javascript como en una gran mayoría de los lenguajes que derivan de cee el tiempo se mide en milisegundos pero sin embargo en php el tiempo se mide en en segundos esto lo podemos averiguar de la siguiente forma por ejemplo y es que yo aquí voy a introducir una instrucción que está en php de una forma muy sencilla ojalá estuviera en los lenguajes de programación que es sleep sleep es para la ejecución durante x segundos y verás que si pongo 5 no son 5 milisegundos sino que son 5 segundos voy a arreglar esto voy a poner rodilla más más para que no se quede enganchado como antes y ahora recargo y fíjate que está a 5 segundos y entonces para ahora verás después de cinco segundos me ejecuta el código vale no tendría que haber hecho primero esto luego esto y luego esto otro lo que hace el programa es que internamente ha ejecutado esto ha esperado cinco segundos ha ejecutado esto y al final me ha puesto todo el contenido en pantalla en lugar de poner esto esperar cinco segundos y luego esperar cinco o sea y luego poner el siguiente contenido pero bueno luego también recordamos que aunque no se usa en una gran mayoría de las veces pero tenemos el bucle de control de baile que recuerda que es el que siempre digo que es el google de control americano porque dispara primero pregunta después entonces en este caso el mismo día es igual a 44 imagínate y digo tú ya ves while paréntesis y se pone un punto y coma en cualquier lenguaje de programación la estructura de control de wael es la única que tiene un punto y coma al final entonces de echo hola while día es menor que 30 esto nunca se debería ejecutar porque mientras que vía sea menor que 30 pero es que díaz no es menor que 30 por el bucle de while voy a quitar el slip como lo comentó pero el bucle de while hola me olvidado de algo díaz igual a 44 un punto no falta punto vale una vez dice hola porque dice primero haz esto y luego preguntarte de si lo tenías que haber hecho es claro para cuando llega aquí y dice cáspita no lo tenía que haber hecho pues ya lo he hecho es el bucle o igual ya te digo no se usa siempre no se usa para todo pero bueno de vez en cuando pues nos puede venir bien el siguiente archivo voy a estar trabajando con las estructuras de control condicional por tanto php 5 php bien y entonces a continuación lo que voy a hacer es trabajar con las dos estructuras que son if digo edad es igual a 42 y digo si edad es menor que 30 en ese caso pasa una cosa en caso contrario pasa otra vale entonces en este caso el echo eres una persona joven en caso contrario echo ya no eres una persona joven entonces pongo br en este caso voy a ir a php 5 en este caso me dice ya no eres una persona joven porque 42 no es cierto que sea menor que 30 por tanto no se ejecuta este caso de aquí sino que se ejecuta este otro caso de aquí de la misma forma tenemos también la estructura de control switch porque hay veces que la respuesta a una pregunta no es verdadero o falso hay veces que depende o sabe que hay varias respuestas correctas y también muchas incorrectas en este caso existe la estructura de control switch que evalúa algo y por una serie de casos a continuación lo que voy a evaluar es la variable día y digo que no case lunes 2 puntos eco hoy es el peor día de la semana siempre pongo el mismo ejercicio y acuérdate que hay que poner un break al final porque si no va ejecutando caso a caso entonces lunes martes miércoles jueves viernes sábado y domingo y que es default no me acuerdo ahora mismo si es lo que es escrito no es un día de la semana me acuerdo ahora mismo si es que es default o default directamente porque como cambian en cada lenguaje entonces vamos con case default si no pondré de faltas y no es una cosa es otra jueves viernes sábado y domingo una cosa que te digo te la llevé a decir porque me pasa a mí pero también te la voy a decir porque te va a pasar a ti es que aprender a saber varios lenguajes de programación es bueno y es malo es bueno porque te abre puertas pero es malo porque a veces te haces un lío porque mezclas los lenguajes de programación eso te va a pasar a ti cuando te des cuenta de que a veces en php encadenará con el signo más como si tuvieras de javascript pero cuando te pase simplemente que sepas que es normal martes hoy es el segundo peor día de la semana hoy estamos en el medio de la semana ya casi llegamos al viernes por fin es viernes el sábado hoy es el mejor día de la semana y qué horrible que mañana sea lunes vale pues en este caso igual me da error por el tema del case de fondo vamos a verlo correctamente entonces en lugar de case de fault pongo default vale me sigue dando un error sí porque me he saltado un punto y coma creo sí correcto y nos dice como hoy estamos a miércoles pues hoy estamos en el medio de la semana si yo pusiera longaniza el programa me diría lo que has escrito no es un día de la semana vale porque por eso en al igual en javascript que en cualquier lenguaje de programación en cualquier momento nos conviene poner un case default para atrapar digamos que es lo que ocurre si alguien pone algo para lo que en principio digamos que no está autorizado en un programa de aprendizaje estándar de php yo ahora a continuación te hablaría de funciones y probablemente a continuación te hablaría de objetos pero sin embargo lo que voy a hacer a continuación es hablarte de conexión a base de datos más que nada porque es un tema difícil y porque realmente trabajar con funciones no es un prerrequisito para conectarnos a base de datos entonces por eso como probablemente sobre todo especialmente en tu caso percibirás qué las funciones es algo teórico mientras que la conexión a base de datos rasgo ya más práctico con respecto a lo que muestra hasta ahora y lo que queremos hacer pues como ya llevamos un buen rato de teoría vamos a hacer algo que sea práctico algo que nos sirva para enlazar con lo que hemos visto anteriormente y ya habrá tiempo al final de esta clase o en la siguiente cuando sea para hablar de funciones y de objetos y de lo que venga lo que pueda alterar digamos ese orden natural en el temario pero esa alteración es posible sin que la calidad de la docencia se vea mermada entonces a continuación yo voy a hacer lo siguiente recuerda que esté prevenido anteriormente de que la conexión a la base de datos es algo que pues me fastidia bastante entonces para esto te digo en primer lugar debemos tener un servidor mysql server conectado en segundo lugar debo tener una base de datos en orden vamos a comprobar que la tenemos me voy a localhost me voy a php my admin 2 vamos a recordar que tenemos en mi caso voy a meter la contraseña en tu caso no hace falta vamos a recordar que tenemos una base de datos llamada momento voy a maximizar esto lo parto vale aquí tenemos una base de datos vencerás un poquito más pequeño una base de datos llamada curso aplicaciones web y recordamos esto para allá y recordamos que tenemos en privilegios tenemos un usuario llamado curso aplicaciones web que además tiene la contraseña curso aplicaciones web bien en este caso a continuación voy a en brackets a crear un nuevo archivo lo voy a guardar dentro de esta carpeta con el nombre de php 6 php voy a bhp y me voy a la documentación oficial y voy a intentar buscar el ejemplo más oficial que pueda los ejemplos oficiales también son extensos yo lo voy a limpiar pero tenemos que decir porque lo voy a limpiar y voy a poner php mysql y por que mysql es el conector antiguo mysql y es el conector nuevo y mysql y select así que vamos allá estoy en php punto net no estoy en una página extraña de letras a ver quién sino este documento oficial voy a buscar un ejemplo oficial estilo orientado a objetos no porque todavía no te ha enseñado programación orientada a objetos en php pero estilo por procedimientos como ves pérez multi paradigma entonces voy a copiar voy a pegar y tú dirás madre de dios del amor hermoso la de cosas que hay que hacer para conectarse a una base de datos en php no como te digo yo voy a este código que es el código oficial y lo voy a limpiar para que haga lo que yo quiero salud entonces a continuación verás qué este este ejemplo está muy bien desarrollado el ejemplo lo que hace es trabajar mucho con programación defensiva la programación defensiva que es algo que en bases de datos tiene mucho sentido no te digo que no pero es algo que ahora mismo nos como tenía yo nos estorba no estorba en el sentido de que no hace falta de programación defensiva para lo que vamos a hacer a continuación entonces y aquí lo que está haciendo es comprobar la conexión pero eso de entrada me crea más código que ahora mismo me altera porque me estoy acordando presiono quiero que te acobardes yo lo que quiero es minimizar este código para dejarlo en lo mínimo y más adelante te explicaré que estoy aquí es recomendable pero no obligatorio evidentemente esta línea es obligatoria pero todo este bloque no entonces lo borro crear una tabla que devuelven que no devuelven conjunto de resultados yo no quiero crear una tabla fuera este bloque también consulta de selección que devuelve un conjunto de resultados estos y entonces a continuación lo que voy a hacer a ver momentín vale si resultado vale entonces esto no lo quiero no lo quiero en una estructura de control condicional lo quiero en modo asertivo quiero asumir que el resultado va a funcionar correctamente y ahora esto no lo quiero esto de abajo es recomendable lo voy a dejar y esto de abajo no lo quiero mysql objeto no qué fechas está el dinero entonces vengo por aquí algo así y esto es la estructura mínima para conectarte a una base de datos esto es abro la conexión con la base de datos esto es le pido algo a la base de datos esto es devuelvo por pantalla lo que mire y por último buena costumbre en php y en cualquier lenguaje de programación cierro los recursos haya abierto php que es un lenguaje de programación que funciona en un modo muy automático se basa en la premisa de que los recursos se cierran solos los recursos se cierran automáticamente pero sin embargo aunque se basa en esa premisa es una buena costumbre especialmente si al día de mañana transiciones a otros lenguajes de formación más duros acostumbrarte a tú mismo cerrar tus propios recursos y no dar por hecho que el lenguaje de programación te los va a cerrar ahora a continuación vamos a rellenar los datos localhost es localhost o localhost es mi propio ordenador mayu ser es lo tenemos por aquí te acuerdas curso aplicaciones web correcto para hacer el usuario recordamos que es agregar cuenta de usuario y aquí había que poner curso a aplicaciones web hay que acordarse del nombre de host no es cualquier servidor sino que es local en mi caso me está diciendo que ya existe una cuenta evidentemente y para ahora para probar lo que estamos haciendo es que la contraseña dos veces vamos a poner la misma que el usuario que es curso aplicaciones web curso aplicaciones web y por último le daremos a continuar y por último nos aseguraremos de que en curso aplicaciones web privilegios halla un nombre de usuario que se llame curso aplicaciones web esto es uno de los grandes motivos que va a dar fallo entonces pongo aquí curso aplicaciones web my password curso aplicaciones web la base de datos se llama curso de aplicaciones web esto recordamos que es esta totalmente desaconsejado en el momento en el que vamos a trabajar con con esto con bases de datos digamos y no me sale en producción pero en este caso no estamos en producción en este caso estamos en desarrollo y para desarrollo aunque esta configuración sea muy insegura pero lo queremos la queremos para qué o sea fácil digamos una estabilidad es de error sean las menores posibles ahora le pido algo a la base de datos entonces en este caso por cierto aquí donde pone más el cuadro y me pone el resultado voy a hacer algo sencillo recordamos que tenemos usuarios pues voy a hacer algo sencillo como te digo y voy a hacer select asterisco lo que quiere decir se electrodo from usuarios vale una petición sencillita las más sencillas que podemos hacer y ahora señor ejecutó este escrito se escribe no va a dar nada porque dentro del while no estoy haciendo nada entonces recargo me voy a php 6 y veo que no tengo nada por cierto ahora que veo el nombre de archivo php ese y si que tenga que ver con el archivo no sé si sabes alguna asignatura digo yo por si te pones a investigar en alguna ocasión que no existe php versión 6 es algo bastante fatal el php salto de la versión 5.2 o 5.3 me acuerdo a la versión 7.0 lo digo porque si eso fue fatal se crearon un montón de años con php 5 y estuvieron mareando mucho la perdiz con cuando iban a sacar la siguiente versión de php y por razones que a día de hoy todavía desconozco el lanzaron php php 7 lo cual para ciertos autores de libros de texto fue una porque cuando se rumoreaba que iban a lanzar la siguiente versión de php hay autores que sacaron libros de php 6 y evidentemente se los comieron con patadas porque nunca existió php 6 pero claro es que si tú haces un libro no lo vas a empezar a hacer el día que sacaran lenguajes no empiezas a hacer antes pero yo que sé bien pues dentro del while voy a hacer un eco y digo que sepas que hay un registro y pongo br y punto y coma entonces ahora recargo y me dice que sepas que hay un registro y es cierto porque me lo dice tres veces porque si te fijas en la tabla de usuarios recordamos que tenemos tres usuarios pero claro que es lo que ocurre que yo no quiero que me diga hay un registro yo quiero que me diga cuál es el nombre del registro entonces para eso es para lo que aquí en esta línea en este bucle de control while hemos hecho que esta variable row equivale a el resultado convierte me lo en un fecha asoc page quiere decir es un verbo bastante curioso y quiere decir que si busca cuando es como cuando un perro le lanza es algo diferente pues bebés búscalo si hubieses él es el verbo que se usa en este caso y asoc es de asociativo o asociativo o sea ves busca y ponme el resultado en una matriz asociativa y esto quiere decir lo siguiente que yo la pongo row y hablaremos de matrices por las matrices son como las de javascript y pongo me voy a la columna y veo que pone usuario van o usuario no me gusta nombre os voy a poner nombre veo que lo que hace es convertirlo en una matriz asociativa de ahí lo de los corchetes echo row nombre br le doy a recargar y compruebo ahora así y mi nivel de tranquilidad ya sube bastante que obtengo ya lo que realmente está en la base de datos es decir no un hombre realmente es lo que está en la base de datos es más puedo encadenar puedo seguir encadenando y ahora pongo row apellido o apellidos recuerdo apellidos hay que poner lo mismo que esté fíjate voy a ponerle apellido y en la base de datos pone apellidos lo estoy haciendo mal a la breve recargo y no me sale nada porque no existe apellido es apellidos este es uno de los errores típicos tópicos característicos de conexión de php a base de datos pongo apellidos recargo era así jose vicente catalá pedro pérez jaime garcía martínez por cierto de ésta de este código como me lo he copiado de la web hay un par de cosas que me gustan entonces donde por el link voy a poner enlace por tanto en la siguiente línea aquí pongo enlace dónde poner row no me gusta que ponga row sino que ponga fila y así aquí pongo fila y pongo fila de esta forma y aquí donde pone el link pongo enlace de esta forma cumple la premisa que ya sabes con la que me gusta trabajar que es que cuando veas que algo está en inglés es que tiene que estar así y cuando veas que algo está en castellano es que puede estar como tú quieras porque cuando a veces hago esto y copio y pego el ejemplo y pongo row pasaron los alumnos llegan a la conclusión errónea de que es que hay que poner rojo y no hay que poner rojo sino que tú puedes poner el nombre de variable que quieras o hay veces que los alumnos llegan a la primera conclusión de que es que si no pones link no va a funcionar y no a mysql con exit que tiene que estar tal cual pero el nombre de la variable siempre que pongas aquí un nombre y aquí ponga es el mismo es el nombre que tú quieras evidentemente digamos dentro de un orden ahora a continuación viene cuando no sólo vamos a devolver información en pantalla sino que vamos a realmente unir html con php por cierto antes de continuar decirte más que nada para hacer la misma comprobación que hemos hecho antes que si me voy a esta página y veo el código fuente de la página veo que el código fuente de la página es este ya quiero que veas que en ningún momento se ha transmitido ninguna contraseña ningún usuario nada ni se ha transmitido la petición ni nada de código php sino que lo único que se transmite desde el servidor hasta el cliente es el resultado del código php no el código php en sí mismo vamos con la parte más difícil de la sesión de hoy que consiste en hacer un formulario html y hacer que el contenido del formulario suba al servidor para esto voy a hacer un archivo y lo voy a llamar atención lo voy a llamar voy a llamar php 7 punto atención html porque ahora a continuación voy a crear otro archivo y lo voy a llamar php 7 php ahí lo tenemos ahora sólo tenemos dos archivos php siete pero uno es html y otro este hp entonces dentro del archivo de php siete puntos html voy a crear un pequeño archivo html como te puedes imaginar a continuación voy a crear un forma cuyo action ahora así podemos hacer esto cuando estábamos trabajando con html puro no podemos parar así el action es ph p 7 punto de hp el mes o es igual por ejemplo a post el método puede ser dos o bien get o bien post en este caso he cogido pues porque es el más seguro pero realmente da igual el método que coja pero sí que es importante que el método quede claro en php 7 html es el método que tengo que usar en php 7 punto php es decir el método que declara en origen tiene que ser el método que declara en destino a continuación voy a crear un pequeño formulario y para ello aquí a continuación vamos a sacar en la base de datos voy a estructura de hecho para ello voy a ver qué campos tenía en la base de datos entonces digo input type text el nombre no tiene por qué coincidir pero yo te recomiendo que coincida por claridad usuario desde el punto de vista de la claridad y de la sencillez yo te recomiendo que coincida cualquier desarrollador más preocupado por la seguridad te recomendaría lo contrario para que no estés dando pistas a los usuarios a creadores de cuáles son tus nombres de campo en la base de datos pero bueno todo en informática tiene siempre varias perspectivas y ahora mismo estoy en la perspectiva de la sencillez y de que todo funcione bien pero no te quiero ocultar que hay otras perspectivas evidentemente porque de hecho hay una perspectiva que es la de la refactorización que es o sea que el código esté claro pero como te digo hay un dicho para que veas que no es cosa mía en seguridad informática que es security true obscurito aislaciones para que seguridad a través de la oscuridad nos referimos a oscuridad evidentemente haciendo que el código no sea claro haciendo que el código sea confuso vale pues eso que en ciertas disciplinas está prohibido en seguridad en ciertos entornos se alienta bueno pues place holder y voy a decir que el clic holder es introduce un usuario br y ahora voy a copiar lo mismo para contraseña en nombre y apellidos y e-mail dirección teléfono entonces password introduce una y contraseña nombre introduce un nombre apellidos introduce unos apellidos email introduce un email dirección introduce una dirección teléfono introduce un teléfono esto ha sido copiar y pegar y ahora al final input type submit valió enviar el botón de enviar si yo ahora ejecutó este código me voy a php 7 vas a poder comprobar el hola php 7 html aquí está vas a poder comprobar como tengo un formulario donde puedo introducir los elementos que necesite voy a poner un doble retorno de carro para que estén un poquito más más separados y ahora a continuación una vez que estamos ahí lo que voy a hacer es y rellenar y enviar entonces y ahora vengo por aquí introduzco un usuario una contraseña un nombre un apellido de nada porque no va a funcionar evidentemente introduzco un teléfono le voy a enviar fíjate que estoy en php siete puntos html le voy a enviar y salto a php 7 php pero claro php 7 punto php no hacen nada de momento no hace nada porque evidentemente lo acabo de crear y fíjate que el archivo está vacío así que lo que voy a hacer es en php 7 php voy a crear un pequeño código o crear un pequeño código que va a decir echo que sepas que el usuario que has enviado es punto y atención porque esta variable es un poquito especial es una variable reservada de php es dólar esto es lo raro post en matriz ya corchetes y voy a poner usuario punto y coma al finalizar hay una serie de variables reservadas en php que empiezan con dólar guión bajo una de ellas es post antes he dicho que si html envía el formulario por post en ese caso php recoge el formulario por post tiene que haber coincidencia y si aquí he creado un nombre un campo cuyo name es usuario es que aquí dentro tiene que poner usuario vale tiene que haber una coincidencia te aviso ya de que esto es otra de esas zonas donde los alumnos se enganchan y no salen del error se te ocurre simplemente quiero que sepas que es normal entonces guardo recargo y me dice quiero que sepas que el usuario es bueno voy a poner un usuario real hijo carsa contraseña el júcar sa nombre jose vicente ni a rellenar y ya está el carratalá entonces voy a enviar y que sepas que el usuario que has enviado es jugarse de la misma forma yo podría esto no es meterlo en base de datos esto simplemente ponerlo en pantalla para que sepas que la contraseña el password que has puesto es post password y eso es lo que hace lo que esté dentro del post lo que hace es leer la etiqueta llamada name no cualquiera de otra etiqueta no le type no le place holder únicamente lee la etiqueta llamada name por convención porque es así yo no puedo elegir lo puedo cambiarlo entonces evidentemente te haría la misma demostración para el número los apellidos el teléfono dirección y todo eso pero creo que no hace falta porque está claro cuál es la mecánica está claro cualquier confinamiento lo que me interesa realmente es ahora meter ese usuario en la base de datos entonces para ello voy a hacer un copia pega me voy a copiar la petición a la base de datos me la voy a pegar en el archivo número 7 respecto a los datos de conexión porque evidentemente me estoy conectando a la misma masa de datos como no estoy devolviendo nada sino que lo que estoy haciendo es meter algo en la base de datos la parte de devuelvo y el bucle while me lo puedo eliminar y ahora atención ahora atención voy a bajar esto se puede hacer voy a bajar la petición sql a varias líneas porque como va a ser larga quiero que se vea correctamente y voy a decir insert pinto usuarios values paréntesis y acuérdate de la chuleta acuérdate de la técnica el truco que te dije para insertar correctamente en php o en mysql perdón porque acuérdate que te dije que si mysql requiere ocho campos no le metas 7 no le metas nueve elementos 8 o no va a funcionar entonces en mi caso yo vengo aquí y veo que tengo ocho campos de los cuales el primero es el identificador entonces pongo null que ya cuenta como un campo y pongo atención uno dos tres cuatro cinco seis siete y ocho y yo así sé seguro que el número de casillas el número de campos que he puesto en php coincide con el número de campos que requiere mysql para verlo más claro porque si ahora empiezo a que poner post te va a salir arte lo digo ya lo que voy a hacer es bajarlo lo voy a bajar porque se puede hacer no hay ningún problema después de cada coma voy a bajar hazlo así porque si lo intentas hacer en línea con el tiempo lo harás en línea te digo yo que no pero al principio te va a salir una barbaridad incluso lo puede sangrar es perfectamente posible y ahora aquí dentro no olvides que estamos metidos dentro de una cadena de doble comilla lo que hago es poner comillas algo o sea no sé comillas algo entre comillas es decir comilla para escapar de la cadena punto porque es el carácter de encadenamiento en php punto para volver a encadenar y comilla doble porque vuelvo a entrar dentro de la cadena y ahora aquí pongo post usuario porque pongo puesto usuario pues porque tengo aquí la chuleta a la derecha que me está diciendo que el segundo campo que espera mysql es el de usuario ahora copio y pego para no tener que escribirlo todo cada vez y pongo usuario password nombre apellidos email dirección y teléfono te lo digo te he dicho antes te lo digo de nuevo y te lo repetiría mil veces más y es que esta es una de las partes no ya más difíciles de php en cuanto a que esto que he hecho sea difícil porque lo cierto es que no es difícil pero las probabilidades de cometer un fallo en este punto son muy grandes y lo peor es que cuando cometes un fallo en esta parte concreta php no te dice has cometido un fallo sino php te dice ok está correcto llegas a mysql y no lo ha metido y tú dices esto es frustrante porque si ya me frustra que php me diga errores que php me diga que está todo bien y mysql de ir a alguien nadie va a metido nada es más frustrante todavía porque dije me están toreando los lenguajes de programación vale por eso digo que insisto yo lo voy a hacer y claro como soy yo va a funcionar perfectamente con esta parte pero porque lo he hecho un millón de veces vale si no te funciona considera que es totalmente normal y habría que ver dónde está el error y por último lo que voy a hacer es echo el registro se ha metido en la base de datos punto y coma un poco para que el usuario tenga algún mensaje de feedback enresa la vuelvo voy atrás al formulario y digo quiero meter el usuario jv carratalá con la contraseña contraseña el nombre es juan vicente porque como ya tengo suficiente la base de datos para que sabía que es diferente en los apellidos es en garcía lópez el email es jv carratalá arroba curso puntocom la dirección es mi calle y el teléfono es este de aquí entonces a continuación lo que voy a hacer es que le voy a dar a enviar el registro se ha metido en la base de datos me voy a mysql este es el momento de la prueba de fuego si tienes algún tambor país abc redoble pues este es el momento si quieres encomendarte algún santo este también es el momento todo aquello que sepa que se va a rezar ahora es cuando el poder dar entonces le doy a usuarios y compruebo si es cierto wow no se ha metido qué mal me ha dejado el sistema qué raro insert into usuarios a ver pos teléfono aquí pero o sea el punto es el de encadenar vamos a ver no no no no pero no en cadena por nada porque es el último el último de aquí no es correcto y ser ciento usuarios values iguales porque estoy metiendo esto en un resultado voy a ejecutarlo directamente voy a ejecutarlo aquí directamente recargo de nuevos usuarios no vale insert into usuarios values null todo esto son bar charts eso marcharse tengo las comillas tengo las comas pos teléfono voy a quitar este espacio aunque dudo mucho que sea eso interesante vamos a ver curso aplicaciones web en curso aplicaciones web mysql query enlace vale en sartén los usuarios voy a hacer una cosa eco con él eco es que pues voy a hacer lo siguiente petición es igual a esto voy a poner aquí petición en competición y vamos a ver qué petición está lanzando en pantalla incer creo que es por la contraseña que está dando hay un error una cosa que puede hacer la siguiente voy a cambiar contraseña por contraseña envío me voy a comprobar si eso lo ha arreglado o no ahora sí vale efectivamente era ese carácter el que estaba corrompiendo porque por una razón muy sencilla y es que te acuerdas que yo le dije a la base de datos que la codificación tenía que ser usted f8 pero ese carácter raro extraño se sale de la codificación usted f8 entonces por esas razones por la que no lo ha cogido correctamente no pasa nada porque yo lo puedo cambiar fácilmente vamos a ver para cambiarlo fácilmente básicamente voy a ir a php 7 en el head voy a decir meta char set es igual a efe 8 para que me reconozca las señas voy a poner contraseña ahora no tengo que recargar y contraseña vale envío ahora sí y ahora si recargo ahora sí ahora josé vicente que retrasan sis con la contraseña y esto lo ha arreglado poniendo esta etiqueta en el archivo html porque esa etiqueta es lo que hace es la que hace que no sólo la base de datos esté codificada para usted f8 sino que también el propio formulario el propio archivo esté formateado para usted f8 en este caso por tanto lo que tenemos en pantalla es que así como por ejemplo cuando aprendimos a html aprendimos formularios llegamos un momento en el que te dije no podemos continuar porque con html podemos crear formularios pero no podemos procesar formularios ahora es cuando podemos procesar los formularios que hayamos hecho en html ya hemos visto por tanto como php no sólo es capaz de acoger esa información del formulario sino que evidentemente también es capaz de meter esa información dentro de la base de datos ya tenemos la conexión con la base de datos hemos realizado una petición de selección para devolver cosas en pantalla hemos realizado una petición de de inserción a partir de un formulario ahora que hemos cumplido este objetivo es cuando vamos a continuar con más teoría de php trabajando con funciones y trabajando con otros elementos tales como por ejemplo programación orientada a objetos para tener las bases suficientes para enfocar el ejercicio práctico pero por lo menos ya estamos viendo que no solo tenemos una base de datos sino que ya disponemos de un lenguaje de programación que nos permite el contenido de la base de datos y meterlo dentro de la pantalla antes de continuar has visto que de hecho ha estado bien así que lo prefiero has visto que me ha dado un error es decir si me da a mí un error que lleva años con esto imagínate los errores que tenga la aladi para integrar miles de millones de errores para darte cuenta de lo que he hecho lo que he hecho cuando me ha dado un error es bueno pues vamos a la petición vamos a devolverla en pantalla y vamos a averiguar dónde está el error es decir el problema no el problema en programación hablo en otras cosas de la vida pues no te digo yo que sea igual o que no lo sea pero en programación en el momento en el que algo te da error tú automáticamente tienes que tener esa mentalidad de bueno para un error no pasa nada vamos a ver dónde está el error y al final se encuentra también te digo una cosa esto que te voy a decir lo siento mucho llevo años diciendo solo a todos mis alumnos pero no no hay más remedio 23 por ciento de los errores no son culpa tuya son culpa del ordenador no es que estés haciendo tú nada mal es el ordenador en el que está el que está fallando el descaro esto confunde mucho a los alumnos porque cuando llevas años programando tú tú no aceptas que tú lo estás haciendo todo bien sino que tú aceptas que si hay un error pues igual es que has hecho algo malo pero después de haber hecho una serie de comprobaciones de rutina llega un momento en el que dices no soy yo o sea ya he comprobado todo lo que podía comprobar y estoy haciendo lo mismo que llevo años haciendo luego entonces es cuando tienes que asumir qué que el error puede ser del sistema no tuyo claro un alumno cuando empieza a ife oye esto no me sale y esto me da error y debe ser cosa ordenador yo siempre digo no míralo porque debe ser cosa tuya pero claro el problema es que en un 23 por ciento de las veces realmente nuestro lema del alumno realmente el problema de la máquina vale entonces claro para el alumno es muy frustrante y es muy poco seguro saber cuando el problema de la máquina o cuando el problema de suyo vale simplemente lo que quiero decirte es que hay veces que hay veces en las que puede ser muy frustrante enfrentarte con un problema y pelear pelear pelear pelear pero el problema y cuando llegas a otra persona dice minas que no encontró el error ayúdame esa persona te dice si no cosa tuya gestos al ordenador pues te cagas las bolas del ordenador porque es todo el tiempo que estaba buscando el error y resulta que no había error que buscar vale pues eso también que lo sepas yo pues también te digo que a ver probablemente dentro de 10 20 30 años la informática no sea así sea mejor pero a día de hoy es así también te digo que la informática a día de hoy es mil veces mejor y más cómoda de lo que era hace 30 años entonces es un poco que sepas que a día de hoy todavía probablemente hay cosas que mejorar pero aún así pues disfrutamos de ciertas cosas bien y continúo con los fundamentos del conocimiento que nos hemos dejado antes aparcados entonces continuó con la declaración de funciones voy a crear un archivo llamado php 8 punto php una vez más te voy a decir que la declaración de funciones en php es prácticamente igual que la declaración de funciones en javascript entonces básicamente lo que tengo que hacer es function para la palabra función viola así como los objetos se recomienda que empiecen en mayúsculas las funciones se recomienda que empiecen en minúsculas aunque te lo puedes saltar y funciona igual y eco hola cómo estás punto y coma si yo ahora guardo y ejecutó esto evidentemente no va a dar un resultado porque crear una función es como declarar una variable la memoria que tú crees una variable la memoria no quiere decir que el ordenador la saque por pantalla entonces así es como se crea una función así es como se llama a una función exactamente igual que en house cake de hecho esto salvo el eco esto podría pasar por código javascript copio pegó y me dice hola cómo estás a continuación recordamos que la gracia que tiene las funciones precisamente son las sobrecargas entonces las sobrecargas y los parámetros si yo digo hola jose vicente cómo estás yo ahora recargo y me encuentro con que esta función únicamente me sirve para jose vicente pero si quiero crear una función que sea polivalente esta función no me sirve la gracia de las funciones es cuando acogen parámetros porque eso quiere decir que se pueden reutilizar entonces hola asterisco puntos a perdonar comillas punto.com illas nombre y cuidado aquí tengo un error ahora y es que si recargo me dice esta página no funciona y la razón es porque si yo aquí he prometido que voy a pasar un parámetro aquí estoy rompiendo la promesa y por tanto el programa no sabe cómo se debe comportar entonces en este caso tengo que decir jose vicente y me dice hola jose vicente cómo estás voy a poner a continuación puedo es decir di hola javier y entonces hola jose vicente cómo estás hola javier cómo estás y vemos que la misma función me sirve para varias finalidades diferentes dentro de las funciones quiero hablar ahora de una cosa que se llama sobrecarga estoy hablando ahora de memoria voy a hacer una cosa que espero que me funcione bien igual me falla porque tengo ahora mismo en la mente que hay un lenguaje de programación que falla en las sobrecargas y ahora mismo no tengo en la mente si es php python me voy a jugar entonces voy a poner función dio la sin parámetros entonces en principio esto parece que estaría prohibido porque estoy declarando la misma función que antes pero antes la función tenía un parámetro y ahora la función no tiene ningún parámetro y entonces lo que voy a hacer es poner un echo y voy a poner hola cómo estás recargo bien vale pues parece que efectivamente esta función no admite sobre cada un segundo pues no me he colado de momento porque tal y como leemos en esta pregunta en esta respuesta sólo se admite sobrecarga en los métodos de las clases no en funciones fuera de una clase vale con lo cual de momento voy a aparcar esta sobrecarga y cuando veamos programación entrada objetos que serán la siguiente clase te enseñaré qué es una sobrecarga te enseñaré que si bien la palabra sobrecarga tiene connotaciones negativas prácticamente en todos los contextos que te puedas imaginar pero sin embargo en php y en prácticamente cualquier otro lenguaje de programación el concepto de sobrecarga es positivo nos permite hacer algo que mola bastante entonces esto es una una función una función con parámetros y a continuación de hecho vamos a empezar ya la programación orientada a objetos la promoción y venta de objetos es algo difícil de entender requiere un poco de explicación sé que te lo estoy explicando al final de la clase no lo sé así que mejor vale porque probablemente no te voy a explicar mucho de programación entrada a objetos pero lo que sí que quiero es que te quede claro el concepto vamos a ver antes de trabajar con programación orientada a objetos te estarás viendo que aquí hemos creado una función en el momento en el que creamos una función lo que estamos haciendo es encapsular algo de código el encapsulamiento de código nos sirve para más adelante reutilizar de forma eficiente ese código la programación orientada a objetos es un nivel todavía más profundo de encapsulación de información te voy a enseñar las bases te voy a enseñar los fundamentos y es muy probable que ahora mismo no te quede claro para qué sirve la programación orientada a objetos una una buena película una cosa que pasa a la gente a los alumnos que empiezan a trabajar comprobaciones de objetos es que piensan que gracias a esta metodología de programación dificulta artificialmente el entendimiento del lenguaje de programación y no es así pero sin embargo de la misma forma también te digo que la programación orientada a objetos no es en mi opinión recomendable para todos los proyectos solo cuando haga falta entonces no todo se tiene que hacer con programación orientada a objetos de esta forma es por lo que te digo que me gusta que php sea un lenguaje multi paradigma porque me permite trabajar orientado objeto cuando quiero y me permite no trabajar orientado objeto cuando quiero voy a hacer un nuevo archivo voy a guardar esto en php 9 php y siempre siempre para explicar programación orientada a objetos se pone el mismo ejemplo para que los alumnos que empiezan lo entiendan perfectamente y siempre se crea se crea la clase persona las clases pueden empezar con mayúsculas o con minúsculas en php en otros lenguajes de programación tal como por ejemplo java las clases tienen que empezar con mayúsculas por eso te recomiendo que la clase que tú crees aunque estemos en php las 10 es por mayúsculas y voy a poner personas voy a poner una clase persona porque de esa forma vamos a entender bien cómo funcionan las clases porque como entendemos cómo funciona una persona entenderemos cómo funciona una clase a continuación lo que voy a hacer es lo siguiente lo que voy a hacer es crear una cosa que se llama un constructor entonces el constructor se crea de la siguiente forma public function para usted decía que las clases tienen construir tienen funciones dentro que es constructo nombres reservados si lo pongo en inglés es que se tiene que llamar así y con dos guiones bajos al principio sí eso tampoco lo he elegido yo sino que es parte del estándar de php es estándar cambia del lenguaje de programación el lenguaje de programación a mí no sé igual es por manía pero en la metodología que más me gusta es la de java que es que si la clase se llama persona el método de constructor se llama persona pero bueno pues en php se llama construcc entonces el método constructor para que te hagas la idea es algo así como si dijéramos que te diría yo de momento como si dijéramos cuando nace la clase cuando nace algo entonces a continuación voy a hacer lo siguiente público la edad es igual a 0 cuando naces tienes 0 años público lo que se sabe no se te va a decir color pero no me quiero meter en camisas de once varas pelo pelo pelo pelo vale es igual a no mucho 3 tenemos ya dos tipos de variables hay una palabra que ha aparecido que es nueva que es pública no voy a profundizar mucho de momento en ella pero simplemente la palabra pública a diferencia de otras palabras que se pueden meter ahí como private o protected quiere decir que esa variable se puede ver desde cualquier parte de cualquier programa y tú dirás pues por supuesto pues no te explicaré más adelante que en php hay veces que te puede interesar que esa variable no se vea desde fuera pero de momento vamos a darle me vengo aquí a php 9 espero no haber cometido ningún error pues sí entonces en este caso vamos a ver a quitar el constructo ok vamos a prescindir del momento del constructo esto es otra forma de hacer un poco más bestia pero pero sirve igualmente y ahora yo digo lo siguiente voy a decir en este caso juan es igual atención a mi persona juan es una nueva persona que yo he creado en esa hora a continuación digo quiero saber la edad de juan la edad de juan es y atención porque pongo juan el guión mayor que es como una flecha hacia la derecha edad y voy a poner un ver recargo y me dice la edad de juanes 0 porque porque en el momento en el que creó a juan automáticamente se le asigna la edad y automáticamente se le asigna el pelo ahora además puedo decir el pelo de juan es juan pelo y el pelo de juan es no mucho comprobamos como tenemos aquí por cierto cuando estamos hablando de éstos llaman propiedades de un objeto aunque aquí las declara mos con dólar aquí no se pone dólar porque ya has puesto donald aquí lo digo porque como hay expuesto dólar mucha gente tiende a poner aquí también un dólar y no es correcto hay que ponerlo sin el dólar yo puedo también sobreescribir las propiedades por ejemplo public nombre es igual a nada cuando un niño nace no tiene nombre pero yo a continuación puedo decir lo siguiente echo el nombre de juan es juan nombre ahora mismo juan no tiene nombre pero yo no solo puedo utilizar esto para acceder a las propiedades sino que yo puedo escribir las propiedades juan sobre escribo juan nombre es igual a juan y con el nombre de juan ahora juan se llama juan ahora le he dado esa variable quiero decirte que esto que acabo de hacer en lo que es la metodología de programación orientada a objetos no se recomienda si yo lo he hecho y no ha dado error es porque es legal es perfectamente posible pero sin embargo cuando trabajamos con objetos hay dos objetos que se llaman el objeto setter y el objeto jeter es decir los seteros meten parámetros y los gaiters me devuelven parámetros lo digo porque yo ahora mismo estoy accediendo directamente a las propiedades y esto no es que te diga que se puede hacer es que estás viendo que se puede hacer pero no se recomienda hacer en este momento lo estamos haciendo porque es nuestra primera clase de orientación a objetos y lo que quiero es que la cosa sea fácil pero más adelante te enseñaré que no se hace exactamente así o no se debería hacer exactamente así hemos hablado de propiedades vamos a hablar de métodos para entenderlo una clase para empezar es un contenedor es una burbuja y esta burbuja va a contener dos cosas va a contener por una parte esto de aquí que se llaman propiedades y va a contener otra cosa que se llaman métodos las propiedades son variables los métodos son funciones es tan sencillo como eso ahora yo te digo una cosa cuando un alumno me pregunta cómo sé yo que es una propiedad y qué es un método la respuesta es muy sencilla y por eso siempre ponemos los que enseñamos bonitos en objetos la clase persona para que el alumno aprenda porque tú sabes cómo funciona una persona pues yo te digo si algo es un atributo pero no requiere una acción entonces es una propiedad pero si algo requiere una acción es un método entres por ejemplo nombre yo hago algo hago alguna acción por tener un nombre no hago ninguna acción es una propiedad luego lo meto en propiedades ahora yo digo hola decir hola no es una propiedad es un método hago algo hago una acción expongo public función de hola public quiere decir que se puede acceder desde fuera ahora de hecho lo vamos a hacer a continuación lo que hago es que pongo echo te estoy diciendo hola vengo por aquí y digo juan flechita viola comillas hay fletes a ras made el nombre de estos fantásticos paréntesis paréntesis porque es un método es una función recargo y dice te estoy diciendo hola esta es la diferencia entre un método que hace algo y una propiedad que lo único que hace es almacenar un parámetro ahora para ir terminando voy a hacer una cosa y no te quiero y marear pero estas propiedades las voy a poner como playmate privado privado privado si yo ahora intento acceder a la edad de juan me dice que esta página no funciona porque he intentado acceder a una propiedad cuando la propiedad es private y tú dirás qué sentido tiene esto pues esto tiene sentido veras voy a putear este código un momento ok pero todo esto ahora verás que funciona ok entonces yo te pregunto tú tienes una propiedad dentro de ti que es tu nombre hay una propiedad que dice que te llamas pedro pero yo te pregunto cómo te llamas claro no me ha respondido allí hay una propiedad y hay un método hay una propiedad yo no puedo acceder dentro de tu cerebro y puedo acceder a la información que hay dentro de tu cerebro yo a ti como persona te preguntó oye cuál es tu nombre y tú vas a tener una función public dime nombre y esa función me dice echo me llamo bis dejar para el momento él dice te explicará el disco es un poco puñetero this nombre y entonces ahora que me he dejado un segundo public a public function el fantástico porque lo he puesto ahí public función de mi nombre this nombre segundo te estoy diciendo hola y ahora juan di mi nombre guardo recargo hola me llamo vale no algo está mal this nombre a ver el segundo mis nombre sí ah no no no no no no claro por favor por favor es que el nombre de momento no era nada sabes nombre de momento le había puesto nada aumento 10 ahora vale es decir nombre te acuerdas que antes le había cambiado el nombre pero eso era antes ahora no entonces allí si te fijas estoy haciendo algo parecido a lo que ocurre dentro de tu cerebro yo no puedo intervenir dentro de tu cerebro y cambiar automáticamente has visto la peli en inglés es infección origen en españa vale pues es un poco como la peli origen yo no puedo meterme en tu cerebro y cambiar algo de información yo te puedo preguntar y tú buscas esa información en tu cerebro y tú me la dices vale pues esto es lo que esta función llamada dime nombre desde un punto de vista purista debería llamarse get nombre se recomienda que esté la palabra get para que entendamos que es una función de recuperación de la misma forma de la misma forma existen funciones y con esto acabó para no marear temas pero espero que el haberte puesto el ejemplo de la persona te ayude entender que eso tiene algo de utilidad ya veremos para qué vale pero tiene algo de utilidad que de la misma forma te digo que no se usa para todo vale no hay que usar programación entrada objetos para todo pero voy a poner ese nombre pero por ejemplo te convenzo de que digo mira ahora no tenía más pedro ahora te llamas juan que lo sepas vale entonces lo que voy a hacer es que dis à y set nombre nuevo nombre para entonces this nombre es igual a nuevo nombre se llama set se suele llamarse de la nomenclatura de lo que se llaman gathers y setters s porque voy a escribir algo vale entonces yo ahora vengo por aquí y digo juan juan se nombre de un nombre y mételo antonio y ahora después de haber hecho esto no tiene por qué devolver nada en pantalla vuelvo a invocar un nombre y fíjate que dice me llamo juan después de decir me llamo juan ha hecho un set nombre antonio y por tanto ahora me llamo antonio ahora el objeto no mediante como antes no mediante la intervención directa de los parámetros sino mediante el uso de una función intermedia lo que ha hecho es poder cambiar no sólo leer sino escribir parámetros una vez más como te dije el otro día que te dije el otro día pues que leo la mente entonces una vez más la mente cuando llego a esto cuando enseño esto cualquier alumno me dice a ver esto es un movido es decir si yo podía hacer esto si yo podía directamente intervenir el nombre no sólo me suelen decir la película está del cerebro que me cuentas me parece muy bien la entiendo pero el lenguaje de programación no es un cerebro y si en el lenguaje de probación puedo intervenir directamente un parámetro para qué puñetas necesito tener una función intermediaria para algo que podría hacer directamente y yo lo que digo cuando los alumnos me dicen esto yo lo que digo es que entiendo que ahora mismo no comprenda cuál es la función de proteger estos parámetros más adelante te voy a explicar que hay ocasiones en las que sí que tiene sentido pero cuando hace unos cuantos años yo asistir como alumno a un curso de programación orientada a objetos esto creo que te lo ha contado alguna vez y si no pues yo te seguiré contando y yo asistí a ese curso con alumno precisamente para como te diría yo limpiar algunos defectos que tenía y esto que dice es que me lo expliquen a través del tercero porque me he perdido algo porque el que lo impartirá el curso también era un crack que dice seguro que algo voy a aprender entonces esta persona para que ya muchas veces me preguntaba eso esta persona cuando hizo esa pregunta al principio del curso oye porque hay variables que son privadas y no se pueden ver desde fuera y porque no puedo tocar una variable desde fuera dije eso es el tío dijo imagínate un software de gestión de cuentas bancarias en un banco y dije no lo entiendo porque claro que imagínate un software mediante el cual cualquier persona desde fuera pueda cambiar el saldo de una cuenta bancaria otro imagínate que tú fueras por la calle y cualquier persona te dijera hola te llamas antonio y antonio claro uno dentro del set nombre tu puedes meter una serie de estructuras de control que te digan un momento antes de aceptar como verdad que me llama antonio vamos a comprobar si esa persona está autorizada a cambiarme el nombre es decir si va a un tiro por la calle y te dice tiramos antonio pues tuvieras me la suda algo que me digas porque yo no me llama antonio ahora si llega a tu madre y te dije mira está llamando toda la vida pedro pero es que resulta que es que realmente en tu partida de nacimiento pone antonio y justifica así con sus crías pues entonces eso sí que me cala así que me puedo creer me llamo antonio miñano padre antonio o vente a ser como me llamo pero si televisa una persona que está autorizada a ello pues en ese caso sí que activa ese código digamos vale entonces hay una serie de casos en los que no te interesa no todos insisto lo vuelvo a hacer una vez más no en todos los casos pero hay una serie de casos en los que te interesa que no cualquier persona desde fuera pueda cambiar las propiedades sino que sólo a través a través de una serie de métodos y evidentemente en esos métodos puedes poner códigos de protección sólo en ese caso esa persona pueda cambiar ese código lo que quiero decirte es que esto que te estoy contando y promueva el cierto que te he dicho antes parece que complique artificialmente la lógica del lenguaje de programación y de hecho es cierto que la está complicando pero tiene una razón de ser y más adelante verás que hay veces en las que esto que tenga cómo explicar no hace falta pero hay otras veces en las que te va a venir bien la idea es que para cuando llegue esas veces que te venga bien sepas que lo tienes disponible

la sesión de hoy voy a arrancar en primer lugar antes que nada voy a arrancar photoshop no porque vayamos a prender photoshop evidentemente sino porque lo que quiero hacer es antes que nada dibujar hacer un esquema de lo que vamos a aprender hoy para que para que se entienda correctamente entonces por una parte voy a ahí la propia para dibujar por una parte tenemos de lo que sería la parte vista al cliente vale porque digamos vamos a tener una aplicación que tiene dos partes una parte que es la parte que ve el cliente en este caso de la aplicación que estuvimos trabajando con html css y javascript tenemos ya estas tres partes claro en ese ejercicio tenemos que continuarlo porque esa parte digamos estática que yo hice programando e inventada digamos esa parte debe salir de una base de datos entonces hemos trabajado con bases de bases de datos hemos trabajado con contenido html hemos trabajado con scripts php hecho el último día fue precisamente esto realizar conexiones a base de datos pues hoy vamos a empezar a unir toda esa información vale por aquí está php y lo que vamos a hacer es que cuando esta página cargue lo que quiero que haga es conectarse a php php va a pedir la información de la base de datos la base de datos el aval de volver y ésta lo que va a hacer es publicarla en html es decir lo mismo que hicimos el otro día con un ejercicio sencillo pero ya que no con un ejercicio tan sencillo vale pero algo más real pero luego por otra parte tenemos también que esto será lo que ve el cliente pero como se introducen nuevos elementos digamos en la base de datos pues en ese caso vamos a empezar a hablar de un panel de control el panel de control que tiene también una parte menos vistosa evidentemente pero qué es la parte de html css y javascript del panel de control digo menos vistosa más que nada porque esta es la parte que ve el usuario final y esta es la parte que ve en los administradores de la página entonces digamos toda la vistosidad se suele dejar para el cliente final pero bueno evidentemente más allá de eso no hay ninguna otra razón que impida digamos hacer que el panel de control sea vistoso pues de la misma forma por ejemplo con php igualmente nos conectaremos a la base de datos y la base de datos alimentará el contenido del panel de control entonces esta es la estructura de cualquier aplicación web 2.0 típica clásica y tópica de hecho es una estructura que nosotros ya estamos en predisposición de implementar es decir conocemos todos los ingredientes tenemos todas las piezas en el tablero ahora lo que hace falta es empezar a unir esas piezas para que el proyecto cobre sentido vale pero es importante digamos que a nivel a nivel ejecutivo digamos tengamos una comprensión de cómo funciona todo por dentro vale cómo funcionan las piernas y he tirado estas dos líneas esta línea horizontal y esta línea vertical porque esto es lo que ve el usuario final y esto es lo que ve el administrador y luego por otra parte de esta línea hacia arriba es lo que se ejecuta en el lado del cliente mientras que de esta línea hacia abajo es lo que se ejecuta en el lado del servidor un poco por eso existen estas dos líneas que me permite un poco diferenciar una cosa de otra vamos a empezar con algo relativamente sencillo cómo va a ser es realizar un login un login quiere decir que lo primero que va a tener el panel de control es que va a tener el típico dime tu usuario dime tu contraseña pulsa el botón y según lo que me digas entrarás o no a la aplicación vale entonces para ello para ello vamos a ver por aquí recordamos que bueno hace ya unos días que estamos trabajando con el man o con el sham el proyecto que hicimos no me acuerdo ahora mismo si lo llegué a migrar al alma no lo sé ahora mismo creo que no así vale pues no recordaba entonces averages dukes y aprende php s evidentemente pero por fecha de modificación no el re de flix efectivamente vale vale pues si no lo hice en aquel momento pues este es el momento de hacerlo entonces me vengo por aquí curso aplicaciones web tengo por aquí la app y bueno en lugar de copiar la cosa en lugar de moverla voy a copiar la así que copio por aquí copio la app la pego por aquí vale y ahora a continuación entró dentro de la app voy a hacer una nueva carpeta y la voy a llamar la atención fíjate qué mala elección voy a hacer lo voy a llamar admin vale entonces en este caso le estoy llamando admin para que tú qué estás aprendiendo en otros momentos tengas claro de un solo vistazo cuál es la función de la carpeta admin si esto fuera una aplicación en producción evidentemente no te aconsejaría llamarla admin porque cualquier persona que entre a tu web a continuación me refiero y a ver si hay una carpeta admin sabes y ya han averiguado una parte para entrar pero bueno de momento la vamos a llamar admin porque luego más adelante la podemos cambiar de nombre siempre que queramos vale así que no hay ningún problema por eso entonces me voy a ir al local app en este caso tengo por aquí la aplicación que estuvimos haciendo haber que baje el nivel de zoom voy a entrar dentro de la carpeta admin vamos a ver que no hay nada de momento dentro de la carpeta admin porque él acabó de crear ahora mismo entonces lo que voy a hacer es que voy a abrir un editor en mi caso abro brackets voy a hacer un archivo nuevo vamos a verlo voy a hacer un archivo nuevo voy a guardar vamos a ver aplicaciones me voy al mar me voy a hc docs me voy a up me voy a admin creó el archivo index punto de momento html y lo que voy a hacer en este archivo va a ser algo tan sencillo podría ser algo tan sencillo como forma mejor es igual a post action es igual a login php que de momento no existe y voy a poner el clásico input type text es igual a usuario input type password hecho es un tipo de de input dentro de html name es igual a no me gusta la ñ por tanto voy a poner contra escena input type submit value es igual a enviar esto lo que hace es que si yo ahora le voy a recargar veo que tengo por aquí en la pantalla un formulario de ingreso que ahora mismo de momento no lleva a ninguna parte evidentemente vale pero tiene los elementos mínimos para poder funcionar evidentemente esto es un formulario a palo seko en un archivo html esto no es muy recomendable entonces vamos a vestir lo de las etiquetas mínimas para poder funcionar si te quedas mínimas para que esto sea mínimamente correcto vamos a meter esto hay dentro del body vale y ahora lo que voy a hacer es que voy a intentar aplicar el menor esfuerzo posible para esto de momento no ha cambiado estéticamente vale pero para que esto tenga pues una presentación un pelín más bonita vale entonces pero ya te digo con el menor esfuerzo posible vamos a intentar buscar el balance entre entre poco esfuerzo y mucho resultado previsto al revés esto allí está vale ahora a continuación lo que voy a hacer es lo siguiente body como html voy a decir que va a tener el background gray y el font family sans-serif y va a ocurrir esto para continuación voy a decir que el formulario va a tener un wifi de 200 píxeles de 200 píxeles un padding de 20 píxeles un background de color en blanco voy a decir martín auto para que se centre en pantalla y voy a decir border radio de 10 píxeles para que tenga el borde un poco de donde habito vale y con eso lo que ocurre es que estoy creando una cajita digamos en el centro de la pantalla he hecho una vieja cita visual pues es meter un boxeador de 0 píxeles 10 píxeles a 30 píxeles black vale para que tenga como una especie de sombrilla arrojada digamos hacia la parte de atrás y ahora pues básicamente lo que voy a hacer por aquí dentro es decirle que los input cualquier tipo de input va a tener un wish de 100% vamos a verlo por ahí pero tenemos 1 text align esto realmente va en el forma un text align de centre para que se merece entre en la pantalla no tengo muy claro centre y martín auto también para intentar centrarnos la pantalla vamos a probar un 80 por ciento hay ahora mejor vale y ahora pues un poquito de padding de 10 píxeles y un martín de 10 píxeles a ver qué pasa vale y eso ya tiene un poquito de forma vale recordemos el place holder el place holder que es introduce usuario y la contraseña introduce contraseña si sale contra seguridad vale hay mal escrito es porque aquí en el gel hay que poner esta etiqueta llamada me tacha charles set es igual a efe 8 vale ya era así contraseña aparece correctamente podríamos poner un logo aquí arriba pero tampoco me quiero enrollar mucho más que nada sería para que quedara bonito vale pero lo que quiero es más realmente la parte de base de datos que la parte de css porque álamos toca anteriormente pero tampoco quería que quedara cutre porque dentro de que quiero tocar la parte de base de datos pero tenemos que admitir digamos de alguna forma que las cosas entran por los ojos entonces muchas veces a lo largo de los años aunque yo sé lo que está ocurriendo y sé que lo que importa es lo de la base de datos pero cuando haga las aplicaciones son feas porque solo html php de datos es feo pues no mira la pantalla como diciendo qué duro es esto aplicación un poquito más bonita pues parece que la gente lo ve mejor digamos vale entonces por eso quería gastar un poquito de unos minutitos para dejarlo mínimamente estético tampoco con filigranas pero mínimamente estético ahora es cuando evidentemente como te puedes imaginar el siguiente archivo que voy a crear es el archivo login php entonces este archivo lo guardo lo llamo login hp y como en el día anterior lo que estuvimos haciendo es trabajar la conexión a base de datos a la base de datos con la que estamos trabajando en el curso es decir me vengo por aquí php mayad min 2 recordamos que tenemos en mi caso pongo una contraseña en el tuyo no pero en mi caso si tenemos una está una entrada llamada a cuatro aplicaciones web donde tenemos usuarios a la y recordamos que tenemos usuario y contraseña de hecho y recordamos que el otro día por ejemplo en el proyecto llamado aquí en el proyecto llamado php 7 por ejemplo teníamos un ejemplo de conexión a base de datos entonces lo que voy a hacer es reutilizar esfuerzo del otro día que para eso lo hicimos para ahora copiarlo y pegarlo en login php mira qué fantástico si parece que este hecho abre vete juro que no vale pero parece que me he dejado preparado pero que sepas que el usuario que es enviado es post usuario correcto que sepas que el password que se ha enviado es post contraseña el llamado al final y de momento voy a matar esta parte porque de momento no la quiero ejecutar ahora quiero primero que comprobar si estoy ejecutando correctamente esta parte de aquí arriba entonces lo vengo por aquí y pongo a ‘aa’ a ‘aa-‘ vale le doy a enviar y dice que sepas que el usuario es a que sepas que el password que has enviado es a es decir lo está cogiendo correctamente claro ahora el otro día hicimos una petición de integración a la base de datos yo no quiero una inserción en la petición yo lo que quiero es lo siguiente select all from usuarios es decir select all from la tabla usuarios web power usuario es igual a algo and password es igual a algo entonces ese algo voy a ponerlo en línea hasta que tiendas bien lo que estamos haciendo es algo va a ser como te puedes imaginar las variables que estamos trayendo para qué hay un truque té que suelo hacer que es poner límite uno límite uno es porque no deberían pero hay veces que hay duplicados de usuarios en la base de datos entonces cuando hay un duplicado es decir si hay un implicado quédate con el primero ya no quiero duplicados elimina elimina duplicados es una forma muy primitiva de hacerlo pero funciona entonces hago el query la petición no hace falta porque ya la se cierra los recursos el registro nos ha metido la base de datos y ahora lo que voy a hacer es lo siguiente vamos a ver me vuelvo no a php 7 sino php 6 voy a este while el while recordamos que lo usamos cuando hacíamos peticiones tipo select que es devuelvo por pantalla lo que me da y voy a hacer esto de hecho voy a hacer mira nombre y apellidos fantástico así lo quiero vale entonces yo vuelvo atrás pongo pongo pp le voy a enviar y aparte de esto evidentemente pero no ocurre nada abajo de hecho voy a moldear esto no lo quiero borrar pero lo quiere desactivar y no ocurre nada más bajo esta página no funciona porque no funciona momento a a bbb la página no funciona porque si lo único que he hecho es poner un comentario aquí y un comentario aquí y ahora sí que funciona pero si hago así y algo así porque no va a funcionar la página y si lo borro bueno pues el circo romano decreta que esto se queda no sé por qué pero no sé es que no tiene ninguna ninguna explicación alguna aplicación tendrá pero no lo estoy viendo ahora mismo bueno sí exacto bueno compararlo ya lo hemos comparado pero lo que quiero es que no me aparezca esto que sepas que el usuario examinado es éste porque ya estoy comparando ese usuario aquí pero fíjate qué estoy aquí a ver voy a extender lo estudio de si son posts son ecos son lanzar cosas por pantalla pero este digo que no entiendo según qué lógica por eliminar estos dos inocentes ecos son los que hacen que la página vaya o no vaya pero bueno no se ve igual lo que sea vamos a ver entonces lo que yo quiero ahora respondiendo esa pregunta que acabas de hacer es aquí decirle al sistema selecciona me usuarios donde usuario es igual estoy aquí en lugar de poner el while voy a poner un if por qué porque el live permite poner un else entonces echo no hay ningún usuario que cumpla esas características recargo tengo a recado tengo arrancado mysql vale o me debería decir una cosa o medio debería decir otra echo y aquí finalizó vale hay algún problema estoy en el noveno eco lo que estoy haciendo es ver hasta donde ejecuta y me dice hola pero cuando llega aquí es cuando deja de funcionar este es el problema ahí está resultado es igual a estoy aquí porque si no el programa no entiende cuál es el resultado ahora se le quitó el o la quito el aquí finalizó recargo y me dice no hay ningún usuario lo que no entiendo es que como como con esto funciona con lo otro no pero bueno lo quito y ya está dice no hay ningún usuario que cumpla esas características pero si yo pongo el usuario hackers a password mi contraseña jo carsa password mi contraseña entonces me dice que el nombre es este y los apellidos son estos es decir el sistema está detectando cuando estoy poniendo un usuario que es válido y cuando no estoy poniendo un usuario que no es válido pero yo lo quiero reducir todo a un sencillo pasas o no pasas entonces lo que voy a hacer es algo tan sencillo como decir pasas es igual ah no si quieres desde un punto de vista purista esto es un malgasto de recursos también se puede hacer pasas es igual a forest vale es igual a no pero esto gasta menos recursos entonces yo con esto lo que voy a decir es si hay un usuario que cumpla las condiciones pasas es igual a true y en caso contrario pasas sigue siendo igual a falls de esta forma al final validamos y ahora sí pasas claro en ese caso echo te voy a dar acceso a la aplicación en caso contrario eco no te voy a dar acceso a la aplicación vemos que si pongo algo que vale esta página no funciona porque me he quitado un punto y coma entonces continúa y te voy a dar acceso a la aplicación si pongo taka taka taka taka taka está envío no te voy a dar acceso a la aplicación una vez que tengo el acceso a la aplicación a continuación vamos a lo que sería el panel de control para ello voy a usar un sencillo truco sencillo sucio pero efectivo truco que es html re direct qué es una etiqueta para redirigir es esta de aquí para redirigir a otra página es esta de aquí y voy a redirigir en este caso a url panel de control php export llevar como quieras evidentemente entonces recargo y dice no te voy a dar acceso a la aplicación por cierto por cierto que aquí puedo poner otro re directo para enviarlo al index html es decir para enviarlo para atrás para enviarlo a la anterior vale 3 recargo no te voy a dar acceso a la aplicación cinco segundos y vuelvo al login vale si estoy aquí eso es lo de los segundos es que en lugar de ocurrir automáticamente pues digamos estas cinco segundos en otra pantalla un poco te están diciendo qué es lo que ha ocurrido si sí o si no se te devuelve hay muchas maneras de hacerlo de trigo este que estoy haciendo de hecho es muy primitiva vale pero a la vez es muy clara es muy didáctica más que nada para que así lo pongo en cero y pincho aquí y pongo uno que no y envío y entro automáticamente en esta página para que entonces no se ve que iba la otra he vuelto vale se hago así se ve que estoy aquí cinco segundos y se ve como vuelvo en ese caso a la otra entonces ahora bueno el panel de control no existe por cierto lo voy a crear ahora esto lo llamo en admin lo llamo panel de control php o como sea decir mientras hay una coincidencia y si estás viendo esto es que estás en el panel de control vale entonces pongo garza y mi contraseña dentro te voy a dar acceso a la aplicación y cinco segundos después si estás viendo esto es que estás en el panel de control pero ahora vamos a pensar mal ya tenemos ya un login que desde un punto de vista muy poco purista funciona pero la cuestión es si yo vengo aquí y yo estoy en el panel de control y yo tengo un usuario muy listillo y al usuario muy listillo dice oye qué pasa si pongo directamente panel de control php pues lo que pasa es que se salta el login y entra directamente al panel de control vale entonces algo que suele explicar en los cursos es que desgraciadamente para que entiendas lo que te voy a explicar a continuación y eso que la seguridad web no entra dentro de mis especialidades pero inevitablemente todos tenemos que trabajar con algo de seguridad web si queremos hacer aplicaciones web entonces kernighan y ritchie hay un libro que es el lenguaje de programación fíjate que es un libro que hasta el propio libro tiene su entrada en la wikipedia el libro es del año 1978 para que te hagas la idea y no es la primera edición creo recordar el libro original espera que te lo digo creo que era de antes esta es la visión original la primera edición esta es la segunda edición que es la que yo tengo y 78 y juraría que hay ediciones de antes pero vale entonces ahí hay mucha gente hay muchas personas que critican a este libro porque este libro hace muchas resoluciones como la que yo acabo de hacer es decir como lo de que programas panel de control y no tienes previsto que la gente se te salte el login y entré directamente al panel de control pues este libro está lleno de cosas así que no entonces claro hay mucha gente que lo critica por esto pero pero yo cuando vio las críticas digo sí pero ten en cuenta que estos agentes 68 en el 68 no había lo que hay hoy en el 68 no todo el mundo tenía acceso a la informática y en el 78 no había tanto internet y al 38 pues se ve que la gente era más inocente y no le daba por intentar trocar tanto las aplicaciones porque probablemente no tantas personas tenían acceso a las aplicaciones entonces la idea es que como no estamos en el 78 así que tenemos que prever un poco cuáles son los entre comillas malos usos que las personas les van a dar a nuestras aplicaciones entonces lo que tenemos que crear es algún tipo de clave algún tipo de llave que solo cuando has pasado por el proceso legal de login se te da esa llave si no has pasado por el proceso legal de login no se te da esa llave y si intentas entrar aquí directamente sin esa llave pues no vas a poder entrar entonces yo lo que voy a hacer a continuación es lo siguiente voy a utilizar una cosa que en php se llama sesiones las sesiones son precisamente para mantener información de una página a otra para hacer sesiones en php voy a escribir arriba del todo del documento session start esto quiere decir voy a arrancar una sesión y ahora a continuación lo que voy a hacer es decir lo siguiente no haya sesión pasas si no voy a crear una variable de sesión son un poco especiales porque tienen dólar guión bajo sesión y esto nombre inventario quiere decirnos cómo pasa es que el inventario sino que ésta tiene que ser así y ahora dentro del corchete es una variable reservada y si te fijas tiene la misma estructura que las variables postales reales get es el mismo tipo de variables son variables reservadas por el propio lenguaje y entonces digo sesión pasas es igual a de momento folks vale eso tampoco que sea muy seguro pero es para que entiendas cómo funciona entonces ahora ahora lo que hago es decir que si pasas si pasas sesión pasas es igual a otro y si no pasas se suben pasas es igual a falls que es lo que vamos a hacer pues lo que vamos a hacer es que en el panel de control voy a poner un pequeño script arriba del todo y ese pequeño script va a hacer lo siguiente una palabrita nueva que vamos a aprender hoy sí y set y se quiere decir si existe bueno perdón primero arriba del todo sesión start para que reconozca la sesión esto hay que hacerlo en todas y cada una de las páginas en las que queramos utilizar sesiones hay que poner arriba del todo sesión start entonces digo si existe sesión pasas y además o sea no sólo quiero que exista sino que además sesión pasas es igual a trump porque si además son pasas igual a font pues tampoco quiero que pase en ese caso voy a utilizar una instrucción que me encanta porque es graciosa vale pero a la vez es muy útil no hay muchos lenguajes que incorporen esta esta instrucción así tal cual pero es la instrucción die es la instrucción muere vale entonces muere lo que hace es que mata el hilo de ejecución suena un poco macabro vale pero lo que hace es terminar abruptamente el hilo de ejecución y por tanto no ejecuta nada de lo que haya desde esta línea hacia abajo eso es lo interesante porque se pone arriba del todo entonces te has intentado colar en el panel de control sin permiso entonces y fíjate que aquí abajo pone si estás viendo esto es que estás en el panel de control si yo ahora voy a panel de control php y no he pasado por el login legal lo que ocurre es que tú para el de control sin set sesión pasa a saber que había guardado bueno sí que parece que lo he guardado pero en este caso parece como que me está lanzando si se pensó en pasas como que me dice que sí que tengo como si como si se hubiera encargado login como si se hubiera pasado por el login a ver voy a hacer una cosa eco sesión pasas claro que no vamos a ver es igual a true eterna cosa voy a quitar a estos momentos claro claro que vamos a ver vamos a ver claro es al contrario o sea si no está puesta la sesión pasas y la sesión pasas es igual a folk y una de las dos sea si no existe o es falsa en ese caso te has intentado colar sin permiso estabas neurológica al revés vale ahora si te has intentado colar en el panel de control sin permiso ahora bien ahora voy a hacer un login legal voy a ir a jugarse y mi contraseña ha pasado no te voy a dar acceso a la aplicación haber mentido a mi contraseña así haber tocarse mi contra enviar aquí te voy a dar acceso a la aplicación y ahora cinco segundos después si estás viendo esto es que estás en el panel de control bien vamos a hacerlo un poquito más estético y es que vamos a ver vamos en el momento en el que aquí en el momento en el que creó variables de sesión técnicamente puedo crear tantas variables de sesión como quiera entonces eso es un paso es igual a true session nombre es igual a noche te quito h sesión hombre es igual a fila nombre de la misma forma sesión apellidos es igual a fila apellidos y de esta forma cuando estoy en el panel de control si estás viendo esto pues voy a poner por aquí eco bienvenido coma punto sesión nombre despacio sesión apellidos y por ejemplo un ver ahora mismo no porque no no he pasado por este lugar con estos parámetros los acabo de meter ahora entonces vuelvo atrás aucalsa mi contraseña enviar te voy a dar acceso a la aplicación y cinco segundos después me dirá bienvenido jose vicente catalá sánchez vale decir no sólo recuerda que puedo pasar sino que además puedo guardar en las variables de sesión técnicamente tantas piezas como quiera bien si hacemos esto evidentemente en cualquier aplicación tenemos que hacer ya hemos hecho el login pues tenemos que hacer el log out el log out es cuando yo estoy en un ordenador que no es el mío y antes de irme quiero cerrar sesión no sé que alguien o sea que alguien venga ahí y utilicé mi sesión al entonces vengo por aquí en panel de control esto voy a dejarlo aquí abajo eco hr log out php y cerrar sesión ferraz acción por ahí si hago clic en cerrar sesión me lleva al local php log out php no existe entonces me voy a crear un nuevo archivo lo llamo en admin log out php y básicamente lo que voy a decir es session start para luego decir session destroy sí exactamente vale los disponiendo en inglés y no el giro de los nombres pero efectivamente son un poco melodramático sabes entre el muere y él destruye pero mira que se va a hacer vale o sea de hecho en otros lenguajes de programación que existe este concepto y usan otro tipo de terminología nuclear o sabes o vaciar o blanquear pero no php porque destroy vale destruir si efectivamente mola más y ahora lo que voy a hacer es hacer un eco donde el eco va a tener una redirección y haber martín y algo así y quiero que me lleves a index.html voy a poner un segundo entonces vengo por aquí cierro sesión un segundo después vuelvo al este y vuelvo al panel de login y lo que voy a hacer ahora es comprobar si es cierto o no que efectivamente el cerrado la sesión entonces me vengo aquí voy a panel de control php y te has intentado colar en el panel de control sin permiso ya veo que lo del session destroy realmente es efectivo o sea realmente destruye las variables de sesión voy a hacer un pequeño inciso esto que te voy a decir no tiene nada que ver con el ejercicio que estamos haciendo ahora continuaremos la ejercicio que estamos haciendo pero antes de arrancar la clase estaba viendo una cosa en el proveedor de hosting y me estaban diciendo que tenía unas versiones de php anticuadas y me he puesto a cambiar las personas de php todo este digo esto a modo informativo y me han dicho que no puedes cambiar la versión aa php 8 beta y yo he hecho espérate que es esto de php 8 beta o sea no sabía yo que php ya estaba para salir en versión 8 de hecho éste guarda el otro día te conté lo de php 6 pues nada simplemente antes de empezar la clase lo que he hecho es ponerme a buscar php 8 vale más que nada más que nada porque php tiene un muy buen historial de cambio de versiones yo llegué a php php 3 con lo cual viví el cambio a php 4 que básicamente era lo mismo pero con más cosas viví el cambio a php 5 que básicamente era lo mismo pero con programación a lenta de objetos viví el cambio a php 7 que básicamente era lo mismo pero con más cosillas pero claro y ossa y todos esos cambios han sido no te voy a decir poco traumático es decir nada traumáticos en el caso de php porque son actualizaciones del lenguaje que básicamente se resumen en tranquilo que puede seguir haciendo lo que hacías y además tienes más cosas pero como hay otros lenguajes donde los lenguajes de programación donde cada actualización de versión me pone los huevos de corbata porque digo a ver esta gente a ver que han hecho ahora vale y siempre cuando veo una nueva versión lo que hago es tirarme en plancha para ver qué es lo que se cuece qué es lo que viene más que nada porque si la cosa va a ser traumática posible pues cuanto antes lo haga mejor es cuando antes empiecen a apoyarme lo mejor vienen donde simplemente lo quería decir que es que he hecho fíjate que por ejemplo primer enlace aparece morado porque yo he visitado entonces es simplemente para que le eches un vistazo si quieres cuando puedas a qué es lo que hay de nuevo en php en v8 para que veas que estamos hablando de nuevo estamos hablando otra vez de una nueva versión del lenguaje que te permite hacer lo que estabas haciendo exactamente como lo estamos haciendo y además tiene más cosillas por ejemplo en este caso aparte de que hay un compilador just-in-time hay una sección genérica de nuevas características de php 8 entonces pues bueno para que veas un poco qué es lo que lo que se puede hacer verás que pues son cosillas de hecho había visto una esta tarde nuevas funciones de php vale hay una bueno la de precarga está bastante bien y hay una pam pam pam pam pam pam para esta string contents vale y otra que es string starts y string en que esa está bastante bien también mira no lo sé no lo sé porque es a nivel admirado a ver a ver como de arrastre vamos a ver vale vale esta es la de arrastre vale bueno pues mira la coma de arrastre según esto es que sí por qué bueno sí a ver a ver a ver te cuento es es otra buena pregunta debes tener en cuenta que php es un lenguaje que tiene un carácter bastante abierto y esto no es que yo te lo diga sino que tú mismo lo puedes averiguar si pones php wikipedia y al poner bsp wikipedia al igual que por ejemplo html 5 verás que php php lo desarrolla el php group y el php group es un equipo de desarrollo compuesto por cierto por un consorcio de empresas donde están las típicas están google estará apple están tal derecho de hecho en facebook que ha hecho muchas aportaciones de valor al lenguaje php curiosamente que cualquier persona puede pertenecer al php group pero digo porque el otro día por ejemplo te dije quién era el creador de php pero esa persona en su momento y hace unos cuantos años que no es que se desentendió pero dijo mira yo no soy el dictador de php o sea esto organizarlo como queráis hacer que crezca claro efectivamente pero esto no ocurre igual en todos los lenguajes de programación por ejemplo java es un lenguaje que pertenece actualmente a la empresa oracle entonces ahora que es una empresa privada y ahora que no supone no nos somete a votación al menos nueva votación externa igual si la votación interna pero no someter a votación externa cuáles son cada una de las nuevas características para entonces ahí como ya te digo prácticamente todos los lenguajes que hemos visto html css javascript están gestionados por consorcios de empresas y de desarrolladores que lo que hacen es que pueden participar en el desarrollo del lenguaje de programación hay programas como por ejemplo yo soy muy usuario de un programa que se llama blender punto hereje blender 3d que es para un lander 29 madre adiós que dijo el tv parpadea su momento y cambian todas versiones entonces blender también es de la misma forma hay un creador original pero hay una comunidad extensísima de desarrolladores que participan en la creación y el derecho prácticamente cualquier persona se puede bajar blender puede proponer modificaciones y la comunidad las acepta o no no tiene por qué aceptar todas entonces por eso no es tan extraño lo del tema de los votos favor y los votos en contra entonces en este caso por ejemplo vamos a ver vale en este caso a ver a mí particularmente no es que no se me ocurra una forma de una utilidad para esto pero por ejemplo cuando yo lo que hago es colocar una serie de parámetros que por ejemplo derivan de la base de datos yo lo que hago parámetro como parámetro como parámetro coma y hasta ahora fallaba fallaba porque no podía haber una coma y nada después con lo cual me tocaba hacer una estructura de control de decir mira si este parámetro es el último en ese caso elimina me la coma que es un poco jodiendo paredes por lo que estoy viendo la coma de arrastre lo que te permite es tener un parámetro vacío al final preparado por si más adelante quieres meter más cosas claro cuántas veces era en ese caso pues muy pocas quiero decir que es una novedad que viene bien que éste no es que digas chorrada bueno viene bien te puede venir bien pero tampoco es una novedad que te cambie que digas madre dios por lo que aprendido no vale para nada sino que sabes entonces échale un vistazo y verás que pues prácticamente todo lo que nos encontramos está más o menos en esa en esa dinámica php es un lenguaje y en este caso te hablo de php pero igualmente te habló también de otros lenguajes de programación y de otros programas incluso es un lenguaje que en cualquier momento respeta las bases de funcionamiento y va corrigiendo no ya tanto errores pero sí desde luego carencias que tenía el lenguaje con aquellos que empezamos en su momento aprendiendo el lenguaje entonces esto es bueno para todo el mundo es bueno porque los que llevamos ya muchos años con el lenguaje no nos cambian no nos pone patas arriba lo que ya conocemos y es bueno para los que entráis de nuevo en el lenguaje porque entráis en un entorno depurado entráis en un entorno que es fácil de aprender y no tiene las caries y las carencias que tenían en años anteriores hay otros lenguajes y hay otros programas que en absoluto ocurren así verás te voy a poner un ejemplo de un ejemplo bastante concreto para que veas lo que quiero decir antiguamente y digo antiguamente porque este lenguaje de programación que te voy a decir va a morir y este sí que va a morir en diciembre de 2020 se le quedan cuatro meses que es el lenguaje actionscript y todos sabemos que va a morir porque es el lenguaje de flash y seguro que has visto en tu navegador chrome que te está diciendo flash va a morir en diciembre de 2020 entonces actionscript 2 action script 2 es el eje que es el lenguaje de adobe flash hecho aquí lo tienes en la página de la wikipedia es un lenguaje de tipo estructurado es decir como estamos trabajando nosotros la mayoría del tiempo sin embargo sin embargo esto es la versión que había desde el 97 sin embargo de hecho esta página es muy poco completa porque va directamente al actual script 3 3 perdón actionscript wikipedia a ver si podemos ver las versiones vamos a ver esto es mira sintaxis entonces actionscript es profesoral y si quieres puedes trabajar con clases pero cuando sacaron actionscript tenía una sed de atis diferentes y actionscript 3 era un lenguaje estrictamente orientado a objetos o sea claro no sólo actualizar un lenguaje es que cambiaron el paradigma completo o sea cambiando el paradigma de mira ya no puedes programar estructurado ahora tienes que programar estrictamente orientado a objetos pero lo peor lo peor de todo esto es que ese cambio se produjo en el año 2004 aquí no lo están diciendo no están diciendo el año del cambio pero mira a ver 2000 pone 2006 pero se les table realista ya te digo yo que era antes por cuestiones de fecha entonces en el año 2004 yo estaba impartiendo una asignatura en un máster universitario que consistía en enseñar a hacer aplicaciones multimedia a diseñadores de producto no eran informáticos eran diseñadores que ocurrió pues que a mí me jodieron vivo porque una cosa es enseñar así esas tres es enseñándole a alguien que va a aprender a programar pues dices mira aprende lo que haga falta aprender porque es lo que vas a tener que trabajar pero estás enseñando le a alguien que andrew programar a alguien que no es programador no va a ser programador sino que es diseñador y lo único que quiere es tener un poquito de conocimientos pues claro con programación estructurada yo podía enseñarles cuatro cosas y funcionaban perfectamente pero que imagínate a un diseñador industrial de repente tener que explicarle programación orientada a objetos pero me miraban con una cara b pero estás contando tío entonces yo les decía mira lo siento mucho pero es que esto es también el impuesto por el lenguaje de programación es que yo no os lo puedo simplificar más vale pues por eso te quiero decir que a lo largo de mi vida he conocido ejemplos de lenguajes de programación que en un momento dado sí que cambian y fastidia bastante por ejemplo otro caso bastante sonado y bastante famoso es el caso de payton el caso de payton de payton 2 a payton 3 aunque cambiaban unas pocas cosas a nivel sintáctico pero esas pocas cosas hacían que tu programa en python 2 no fuera compatible con python 3 es claro gracias a eso durante años hemos seguido arrastrando python 2 quiero decir que tú te metes en python punto o hereje y todavía a día de hoy le das a descargar vamos a ver el release es aquí para descargar python 3 lo que sea pero fíjate que todavía hay una realiza activa que es python 27 que se lanzó hace 10 años pero por esa incompatibilidad todavía dan soporte de esa versión entonces por eso lo que te quiero decir es que lo que has dicho de que php con los cambios de versiones estos cambios no suponen una amenaza sino que se suponen oportunidades para todos los desarrolladores o sea te digo es más importante de lo que piensas porque porque tranquiliza también te voy a decir que por ejemplo con las tecnologías que estamos aprendiendo en esta formación ten en cuenta que son tecnologías abiertas html css javascript php pero la base de datos es cerrada la base de datos mysql no es una base de datos abierta es una base de datos cerrada porque es de oracle y claro en cualquier momento oracle si mañana oracle recibir a alguien que me cargó mysql pues es un producto o sea no podríamos decir nada en contra así como por ejemplo no ocurre igual con php o con html o sea no depende de una única empresa y por tanto nadie se le puede cargar pero mysql no entonces quiero decir también que existe vas a reír pero lo de las versiones de en inglés que les hace mucha gracia de nosotros no lo vemos un poco extraño pues quiero decirte que hay una base de datos que se llamaría debe entonces maría debe es la versión gratuita de hecho fíjate ahí es la versión gratuita de mysql o sea lo que hicieron es que cuando vieron que ahora que compraba a mysql ante el temor de que oracle pudiera cerrar mysql lo que hicieron es sacar maría debe un grupo de desarrolladores sacaron maría debe a partir del código de mysql entonces lo que te quiero decir es que si en algún momento dado mysql nos falla nos podemos bajar maría debe y como te digo maría bebé es un clon de mysql es un clon lo que quiere decir es que está pensada para que puedas migrar tus bases de datos mysql amarilla bebé y puedas continuar trabajando correctamente no te estoy hablando de cómo te diría yo de repente una base de datos que tengas que reaprender otro desde cero verás la historia es la siguiente había una empresa sueca y lo de que te digo que sea sueca todavía explique más de que sea sueca pues ahora te explico la gracia que tiene que ser sueca o que fuera sueca que sea mysql ave el ave es algo así como sl en españa digamos es la forma jurídica mysql e hizo la base de datos mysql mysql ave la empresa a mysql fundada a mysql ave funda el 95 fue comprada de hecho fíjate usa la suecia al y copertino a nosotros en las sedes pero fundada no lo pone pero te digo yo que era tal vale un momento y b6 que pone oracle corporation que es el actual pero un segundo porque antes de ser comprada por oracle fue comprada por sun por sun microsystems entonces el primero sanz compró a mysql y luego oracle compró pasan y claro en el paquete de sant venía a mysql y venían un montón de empresas más entonces de hecho mira te voy a contar una cosa pero justo está en el tul tip que tengo en la pantalla y es que sun microsystems fue una de las dos grandes empresas informáticas que se fueron a la en el principio de la década pasada entre 2000 y 2005 por no saber ver los cambios de mercado que digo esto te cuento esto porque la historia de sant de la misma forma que la historia de sg y silicon graphics que es una historia muy parecida nos ayuda un poco a entender cómo en un momento dado empresas gigantes se creían que eran demasiado gigantes y no vieron digamos verás tanto sanz como sg sg workstation fabricaban estos ordenadores que eran super ordenadores lo del diseño es un poco lo de menos cierto es que cuando los peces eran absolutamente horribles estas empresas ya hacían estos peces que además tienen un diseño bonito pero además del diseño bonito además eran súper potentes si busco sanz workstation verás que hacían estaciones de trabajo también con su diseño pero con una potencia para que te hagas la idea usaban su propia arquitectura de procesador y por tanto su propio sistema operativo para para que te hagas la idea de hasta qué punto estamos hablando sanz tenía un sistema operativo llamado solaris y silicon graphics tenía un sistema operativo llamado brics que era una derivación del unics digamos vale pues cuando te digo que eran que eran potentes silicon graphics para que tengas una idea onix tex tex vamos a ver momento vale mira vamos a ver la onix por ejemplo da igual cuál de ellas a ver la onyx 2 la más grande en polígonos por segundo entendiendo que esto es para mover gráficos en 3d muy bien 174 millones incluso en algunos modelos como la infinidad reality 2 o bien 210 millones a día de hoy no hay un ordenador que mueva 210 millones ordenador de los que tenemos en casa digamos y esos ordenadores y estos ordenadores estamos dando de ordenadores del año 2000 más o menos entre 2000 2005 pero ahora claro la pasta que valían también a la cuenta por ejemplo vamos a ver en rama run run run run run run por ejemplo admitían monitores de 1920 x 1200 insisto hace 20 años esta es la resolución estándar de hoy 20 años después memoria ram insisto o sea desde 256 megas hasta 256 gb gigas de ram en serio pero imagínate a qué precios pero la cuestión es que lo podían hacer si querías la pasta suficiente lo podrían hacer insisto en el año 2000 vale acuérdate que ordenador tenía esto en el año 2000 y cuánta razón tenía y entonces pondrás en valor este este dato y sobre todo quiero llegar a procesadores aquí no aparece pues mira para el tema de procesadores te voy a contar una cosa y es que en el año 2000 trabajaba en la universidad entonces un día un jefe que tenía a otra persona y a mí nos dijo oye mira acercaros a una empresa que el parque tecnológico que vendes a nivel de silicon graphics porque como el gobierno nos ha dado una subvención para comprar equipamiento informático de alto rendimiento pues ir y mirar precios que se informen de precios porque esto no es lo típico que te dan un catálogo que tienes que la empresa y en hacer la visita y todo eso entonces llegamos este amigo y yo aquí el ordenador es muy amable y he llegado un momento nos enseñan una de estas nos enseñan una onix vale y en aquel momento ten en cuenta año 2001 2002 estamos con el cambio todavía del euro a la peseta vale por eso el precio que te voy a decir es en pesetas entonces en un momento dado llegar a una o nicks la onyx 2 es sg o nicks 2 y quiero ver google imágenes es esto es esto de aquí para que esta es la grande de aquí y por eso por eso bueno pues nos abrieron esta etapa y esa etapa de ese cacharro tenía dentro del ordenador 40 procesadores en una placa base ósea insisto de 40 procesadores que y claro y valía 40 millones de pesetas entonces claro cuando el que ya nos abrió la placa y nos quedamos flipando de ver 80 procesadores y metidos unos 140 y nos dijo 40 millones de pesetas porque esa la subvención que levantó la universidad no era de tanto dinero evidentemente porque no sólo generó no puso el suelo pero lo peor es que salimos de allí y yo le digo a este amigo ordenador una mesita y en un ordenador de 40 millones de pesetas entonces lo que te quiero decir es que el problema de estas empresas al igual que sanz y de ahí viene el problema de mysql es que eso esos ordenadores dentro de que te he dicho que eran muy potentes pero en su gran mayoría en el principio de la década anterior los peces crecieron de potencia como para plantarle cara en ciertas cosas entonces claro estas empresas no vieron venir esa amenaza esas empresas sabiendo que sus especificaciones estaban muy por encima creyeron que la gente seguiría consumiendo sus productos y lo que hizo la gente tanto usuarios de sant como usuarios de silicon graphics es que poco a poco se fueron pasando a los peces que cada día tenían más potencia que hicieron las empresas sg y sant pues entrar en pérdidas y ser adquiridas por otras empresas por ejemplo sanz fue adquirida por oracle y es lo que conocemos hoy en día porque oracle es una empresa que ha estado muy con el presente de los tiempos lo que ha hecho es dedicarse a bases de datos empresariales y ha ganado mucho dinero y silicon graphics cuenta la rumorología que fue adquirida por un entramado de empresas que realmente son propiedad del gobierno estadounidense por una razón muy sencilla y es que estas estos ordenadores eran tan potentes en el momento que eran los ordenadores que utilizaba el ejército estadounidense y otra serie de organizaciones gubernamentales por ejemplo para cuando querían lanzar un cohete y calcular la trayectoria para calcular la trayectoria entonces claro una empresa que fabrica el ordenador que te calcula dónde tienes que lanzar el cohete esa empresa no la puedes dejar caer no puedes dejar que cierre porque entonces el ordenador que es para calcular el cohete se quedó del pasado y eso no puede ser vale pero se comenta en su momento que el gobierno eeuu el momento rescató de esta empresa pero la rescató para con el tiempo irse cambiando del proveedor evidentemente entonces lo que ocurrió volviendo al tema de sant volviendo al tema de la compra de oracle ese claro ahora que decía mysql gratuito open office gratuito java gratuito tiene descaro cuando oracle comprueba sun oracle dijo con yo no me extraña que estés en perdidas 3 que lo regalas todo como lo va a estar en pérdidas entonces claro oracle que es una empresa que tiene muy claro que su objetivo en la vida es hacer dinero dijo no no no no esto de regalar tantas cosas se va a acabar y entonces claro a todo el mundo no pues son los huevos de corbata porque dijimos claro y si estamos usando mysql porque es gratuito ahora qué van a hacer sigue siendo gratuito pero en cualquier momento pueden decir que no por ejemplo java mira y fíjate que yo imparto muchos cursos de java pero yo me vengo aquí a java y nada más entrar tienes este lengua este lenguaje este cartel de color amarillo o sea que no es que te voy a contar una película mía que me montado yo sino que la podés leer tú mismo 3 desde el 16 de abril de 2019 me dice cuidado lt esto el nuevo acuerdo de licencia de oracle es sustancialmente diferente a las licencias ahora quejaba anteriores la nueva licencia permite ciertos usos como el personal y desarrollo sin coste alguno aunque podría haber tal pero si dice ciertos usos de tipo gratuito quiere decir que ciertos otros usos no son gratuitos entonces lo que te dicen es que te la nueva licencia para saber que puedes seguir haciendo de forma gratuita y que ella no puedes hacer de forma gratuita vale por eso te digo que en la compra de mysql por parte de oracle no te creas que está exenta de polémica porque claro si has estado utilizando durante décadas una base de datos geográfica y de repente ahora mismo en cualquier momento te pueden decir esto pues claro a nivel estratégico es algo que tienes que tener en mente para mí cuando cuando enseñó algo a los alumnos en este caso lenguaje de programación pues claro estoy enseñando algo que quiero que ese conocimiento dure digamos en manos de los alumnos el máximo tiempo posible no enseñar algo que el año que viene ya no puedan entrar porque cambio la licencia o lo han matado o lo que sea entonces por eso es por lo que esto no afecta en sí al propio lenguaje de programación pero sí afecta a lo que engloba al lenguaje de programación y lo último que me queda por contarte es que no te he dicho porque era importante que mysql ave fuera una empresa sueca y era importante porque hasta hace bien poco cuando tú creas una nueva base de datos en mysql la colación es decir el juego de caracteres se ponía siempre automáticamente en sueco entonces claro cuando ya enseñaba mysql a la gente le perturba mucho que cuando hace una base de datos cuando una tabla automáticamente se ponía en sueco pues la gente decía porque se pone en sueco y era simplemente porque la empresa original era sueca y por tanto un niño seguía siendo ese área no hace unos poquitos años que ya no que se pone en un en ute f8 y si quieres te lo pones en sueco vale pero era fácil saber hace años que el origen de mysql era sueco precisamente por eso porque la colación automáticamente estaba en trueque andrés claro con esto lo que te quiero decir todo esto que te estoy contando es un poco contexto de la informática es un poco de historia de la informática pero te voy a decir la importancia que tiene no ya esto que te he contado sino saber todo este tipo de cosas la importancia es la siguiente verás voy a sacar un editor de textos voy a escribir un par de cosas para hacer un pequeño una pequeña cronología en el año 1999 y me dieron una beca cuando estaba acabando la carrera me dieron una beca para un departamento de la escuela y el jefe que tenía en aquel entonces me dijo mira tienes que hacer una serie de aplicaciones multimedia y lo tienes que hacer con toolbox con una aplicación llamada tool box 4.0 y yo evidentemente pues aprendí a usar esa aplicación y ya está por el año 2000 acabando la carrera una amiga de carrera una amiga de la carne que me había visto que sabía usar tu el box otro punto cero porque lo había aprendido de aquella beca me dijo nombre no el turbo que es una cómo se te ocurre aprender eso tienes que aprender macromedia director esto es la marca a symmetrix lo que te estoy planteando es cuánto dirías que me duró el esfuerzo de aprendizaje de haber aprendido ese programa yo no no tampoco tampoco porque del 99 al 2000 pues me duró un año pero pero vaya pero no mucho más pero bien yo era joven sabes era inocente y bueno pues venga pues aprende un rato programa ya está allá por el año 2003 un jefe que tenía me dijo y nunca nunca he sabido cómo este tío me dijo esto pero me dijo déjate el director y aprende flash flash que va a morir en tres meses pero aprendes el flash y yo en aquel momento le dije pero si el director es mucho mejor que flash que me estás contando y el tío te lo juro se giró hacia mí me guiñó el ojo sin segundas intenciones y me dijo confía en mí cuando te digo que deje es director y aprendas flash 3 claro el tío era mi jefe con lo cual de origen alemán pues yo aprendo flash vale al año siguiente en 2004 director murió yo nunca he sabido cómo este tío lo sabía pero lo sabía pero lo supe bien entonces director me duró tres años y pues en 2003 de vuelta a reaprender algo que ya había aprendido en el año 2010 salió a html5 es el sfc desde 2003 hasta 2010 estuve utilizando flash y bien contento y refiere esto de que vaya a morir pues mira es una pena pero yo era usuario de flash me gustaba mucho sa no tengo nada en contra de flash el año 2010 salió html5 y por tanto por una serie de movidas entre apple y adobe flash empezó a morir o sea va a acabar de morir este diciembre pero flash empezó a morir en 2010 y yo tuve que aprender a html5 porque era lo que iba a reemplazar a flash entonces en 2010 verás en el 99 era soltero y no era padre pero en el 2010 ya estaba casado era padre y tenía menos tiempo para gilipolleces y simplemente lo que dije es mira es la cuarta vez que aprendo lo mismo o sea yo no quiero estar re aprendiendo siempre lo mismo yo lo que quiero es si tengo que hacer esfuerzo de aprendizaje quiere aprender cosas que me hagan avanzar pero no quiere estar dando vueltas siempre sobre lo mismo vale y entonces cada vez desde aquel momento no solo con este lenguaje sino más o menos a partir de aquella época cada vez que aprendo algo lo que hago es informarme al máximo posible de cuál es el entorno que rodea a esa tecnología y por tanto cuáles son las probabilidades de que esa tecnología dure mucho o muera dentro de poco porque si una tecnología va a morir dentro de poco pues mira ni me molestó en hacer el esfuerzo a menos que haya un cliente detrás para un proyecto concreto que me esté pegando una pasta que me haga que me valga la pena pero si no es el caso y no suele ser el caso pues ni me molestó entonces lo que te digo es que todo esto de sant y todo esto de silicon graphics y un montón más de películas de historias que hay a lo largo de los años con respecto a las empresas de software es algo importante sanz no es solo cotilleo sino es importante porque pone en dimensión la conveniencia o no de estudiar una serie de tecnologías o no molestarse en estudiarlas vale entonces también saber la historia de silicon graphics y saber la historia de sanz es importante para saber que de la misma forma que hay en aquel momento aquellas empresas eran imbatibles y nadie pensaba que podéis que pudieran caer en aquel momento cayeron es decir por una serie de errores estratégicos acabaron cayendo entonces conocer el pasado pues a veces te ayuda a comprender mejor el presente y también un poco a poder interpretar el futuro vale pues es por lo que dentro de lo que es programación lo que te he contado parece que no pero tiene que ver con el mundo de la programación programación no es solo sintaxis no es sólo código porque imagínate osea mysql es código es base de datos es lenguaje sql pero si mañana la empresa privada oracle dice que mysql se muere da igual el código porque mysql se muere y entonces te das cuenta de que el código no lo es todo de que saber cuál es el entorno de ese lenguaje y de esa empresa es igualmente importante vale por eso te digo que lo importante no son las dos historias concretas que te he contado lo importante es que te intereses tú mismo por el entorno y por la historia y por el presente y por él y por las tendencias de futuro para saber insisto lo que lo que te he dicho antes lo de que antes de la clase he visto lo de pasada lo de php 8 he dicho vamos a ver qué de qué va esto de php 8 sabes por qué porque me puede afectar porque quiero ver realmente si me puede afectar que si luego descubro que no mejor para mí pero podría haber sido que sí cuando estamos trabajando en un ordenador o en un servidor remoto da igual porque la pregunta realmente es la misma ese ordenador porque realmente con trabajo mi ordenador mi ordenador tiene un software que simula un servidor con lo cual técnicamente al final es un servidor en pequeñito ese ordenador tiene una versión concreta del software instalada y yo lo puedo averiguar de dos maneras aquí yo me puedo venir aquí yo me puedo ir a aplicaciones yo me puedo ir a man yo me puedo ir a bing creo que es php y el php aquí aparecen una serie de versiones con lo cual yo sé que ahora mismo en este ordenador estoy trabajando con php 7.2 punto 10 pero un momento un momento un momento porque yo esto lo puedo ver en este que es mi ordenador pero cuando yo estoy trabajando en un servidor remoto no tengo tanta libertad como para ver la carpeta de instalación del proveedor en ese caso te voy a enseñar una instrucción muy destroyer ahora verás de php la voy a poner dentro de esta misma carpeta admin por ninguna razón en particular lo llamo información php y atención fíjate lo que va a pasar pongo php y pongo una instrucción que existe desde hace muchos años en php que es php info dame la información del php instalado en este servidor si yo era me voy a admin y ejecutó información php atención y diego atención porque fíjate lo que va a salir porque esa pequeña inocente línea genera todo esto de aquí genera esto que estás viendo entonces php info en este caso porque php no es sólo el lenguaje de programación sino que además lleva un montón de librerías incorporadas vale entonces en este caso me está diciendo que estoy trabajando me confirma en este caso que estoy trabajando con la versión aquí no lo veía que me confirma que estoy trabajando con la versión php 7.2 punto 10 además me dice que estoy trabajando en este ordenador con este sistema operativo el comando de configuración la versión de apache la versión de cada una de las sub librerías que tiene el sistema sea todo y esto es exactamente igual que con cualquier otro lenguaje de programación quiere decirte que si yo tengo en mi sistema operativo instalado java y tengo java 7 java 8 es porque yo vengo por aquí y me voy mira por ejemplo python ya que lo tengo que avisar a baa1 por java pues yo sé que tengo python 27 y payton 37 y payton 38 porque veo las carpetas y porque me he bajado y me he instalado una versión concreta del lenguaje de programación y con java ocurre lo mismo ahora mismo no veo dónde se ha metido si no lo puedo averiguar si no puede averiguar arrancando netbeans que es el el entorno de desarrollo de jabato digo porque cuando le doy clic con botón derecho a uno de los proyectos que haya hecho últimamente pues me aparecen las versiones de java que tengo instalado en este momento ya que eso no te preocupes porque es un poco de menos porque siempre que trabajas en un ordenador o en un servidor o en lo que sea siempre vas a poder averiguar fácilmente y en el caso de php es tan sencillo como una instrucción puede averiguar fácilmente para ver qué está inicial izando y con qué versión estás trabajando o sea no vas a tener que ir a ciegas no vas a tener que ir a prueba error en plan de pongo esto y si falla es que no soporta y si lo soporta es que tengo esa versión sino que no va a ser algo más más concreto digamos por ejemplo [Música] manejar plataformas aquí pues me está diciendo que la presión que tengo instalada en esta máquina es la jota de acá 1.8 que corresponde en este caso a java versión 8 vale o sea da igual el lenguaje de programación con el que trabajes siempre vas tener un acceso relativamente fácil a averiguar cuál es la versión y por tanto qué cosas puedes hacer y qué cosas no puedes hacer fíjate que no creía que me ves preguntar esto creía que me ves preguntar otra cosa cuando has empezado tu pregunta pues creía que me ibas a preguntar hasta qué punto soy early adopter o no entonces claro entonces en lenguajes de programación en los cuales tengo cierta confianza y php es uno de ellos así que soy early adopter eso quiere decir que en cuanto pueda me voy a bajar la versión 8 igual no la beta pero sí cuando salga la final me voy a bajar la presión 8 y voy a empezar a trabajar con ella ahora bien por ejemplo por ejemplo hay otros lenguajes de programación como insisto python donde las librerías de payton 2 no eran compatibles con las librerías de payton 3 claro yo no me voy a cambiar del lenguaje de programación si cuando vaya a usar una librería por ejemplo una librería de proyección a base de datos una librería de generación de gráficas imagínate librerías muy importantes para proyectos pues resulta que no están disponibles porque entonces me puedo quedar empantanado vale entonces salvo algunos casos concretos yo no soy demasiado berlín docter y soy de la opinión de que los demás hagan de conejillos de indias y cuando la cosa ya esté más o menos estable es cuando llego y porque a lo largo de los años me he dado cuenta al ser a años anteriores- early adopter de que no tengo ninguna ventaja de ello si se ve una ventaja pues entonces me lo plantearía pero el early adopter al final es alguien que se come todos los marrones y al final del proceso no tiene ninguna ventaja competitiva sobre aquella persona que llega cuando ya el tema está limpio entonces pues ya te digo en años anteriores en décadas anteriores cuando me divertía ser el río adopters y que lo era ahora que ya no es un tema de tanta diversión pues ya tenés verás ante este puesto el caso de blender entonces para que te hagas la idea hay una página que se llama gráfico el punto o hereje que es una página que reúne a los desarrolladores de blender es decir así como si tú entras en vender punto o hereje es porque tú eres el usuario final de la aplicación y te quieres bajar ya la aplicación preparada para usar pero gráficos es un portal donde se reúne a los que están desarrollando blender bueno pues si yo me bajó las versiones de blender yo me doy cuenta de que bueno ahora porque estamos en agosto y en agosto evidentemente la gente se lo ha tomado con mucha calma pero yo veo las versiones que han sacado y veo que de ‘yesterday’ sino de ayer han sacado una 2 3 4 5 6 7 8 y no está ya es las monde es decir tú imagínate un programa donde cada día te pueden sacar 8 versiones diferentes entonces claro y cada versión no mira ésta tiene nodos extra y ésta tiene esto de aquí que ahora mismo no sé qué puñetas es y esto tiene el gris pencil para pintar en la pantalla y eso tiene un nuevo compositor y eso tiene las novedades del summer of code y eso tiene ya insisto te puedes meter aquí y te puedes volver loco viendo versiones claro y te vuelves loco efectivamente cuando alguna vez lo he necesitado para algún proyecto concreto porque para algún proyecto concreto yo sabía que había una versión en desarrollo que ya tenía lo que yo necesitaba y si me tenía que esperar a la versión final podrían pasar meses pues sí que he venido aquí y me lo he bajado y evidentemente en épocas anteriores donde pues nos ha dejado una versión de prueba de hecho a como mola y luego bajado otra vez el hecho igual como mola y diversión pues lo he hecho pero cuando llega un momento que el día ya no tiene horas y dices mira hay que priorizar y lo siento mucho pero no me queda tiempo para jugar pues en ese caso es cuando yo sé que esto existe pero ya hace mucho que no lo visito porque no tengo tiempo para ello y por qué es que insisto a lo largo del tiempo he visto aquí versiones que he visto que la gente las hacía volaban y luego por lo que sea no han llegado a la fase final y no las han metido en el programa final pues claro no voy a perder el tiempo con ese tipo de piel digamos entonces por eso es por lo que a lo largo del tiempo incluso yo hace años con tres estudio max era de los que sabía el concepto de plugin que te puedes bajar plugins trabajaba todos los plugins del mundo pero pero es que me los bajaba me no estaba y luego no utilizaba para nada o sea era era como como tiempo perdido entonces por eso yo insisto si eso me hubiera dado con el tiempo antes o después pero algún tipo de ventaja pero la única ventaja quemadas por encontrar la batallita es la única entonces claro esa desventaja por eso y efectivamente la batalla contra mis hijos por eso te digo que con el tema de php ochos y que probablemente pero no te quiero dar la impresión de que es que cuando sale un lenguaje automáticamente me tiró en plancha sino que soy más de bueno vamos a calmarnos sabes porque procesa te lo que pasó con con lo que te contaba otro día de php 6 o mejor dicho el no php 6 que si yo fuera early adopter me verá compra el libro dejaba 6 y luego me lo hubiera comido con patata en el libro de php 6 perdón y luego me lo voy a comido con patatas es como hay unas cuantas de esas hay unas contras as en software y también en hardware por cierto pues es por la razón por la que no soy el líder salvo existo salvo que haya una razón concreta que me justifique serlo en cuyo caso no tengo ningún problema por serlo pero sí que te puedo contar por ejemplo cómo se llama este tío es que el nombre es swift pero tu crema no ya se habrá quedado el curso antiguo a ver aunque sean mega pero no por el nombre del formador bueno pues conocí a un formador hace años que le pasó una cosa era en un viaje a austria en las opciones de linkedin para dar unos cursos entonces el tío tenía que grabar el que era especialista en apple tenía que grabar un curso de objetivo el lenguaje de programación que había antes en papel y el problema está en que el tío atenciones llegó al viaje tenía dos semanas para grabar un curso de horche 15 y justo al día siguiente de llegar al viaje apple presentó el lenguaje de programación swift que estaba llamado y de hecho está llamado a reemplazar a obxectivos claro tú imagínate que a este tío se le cayeron los huevos al suelo porque iba a ir dos semanas para grabar obxectivo fe habiéndose preparado el curso los ejercicios y todo eso y le dijeron mira es que si grabas el curso que traía este previsto es grabando un cadáver pero si te preparas swift vas a ser el primero que lance un curso porque lo han anunciado hoy pero claro el que lo dijo vale pero es que salvo han anunciado hoy no tengo ni idea porque nadie tiene ni idea porque le han lanzado hoy y entonces claro el un coordinador de allí le dijo mira yo te propongo es todo tuyo que se enteró y el tío al final dijo vale venga lo voy a hacer y estuvo una semana sin dormir para empollar se el lenguaje de programación y luego la siguiente semana sin dormir para grabar en una semana el curso que tenía planteado para grabar dos semanas pero pero luego a cambio pero luego a cambio realmente fue el primer curso en castellano en salir de swift y eso a ese tío le reportó no sólo dinero sino que le reportó muy buena reputación y luego pues yo supongo quiero creer que esta persona sabría transformar esa reputación en otras cosas en beneficios económicos en progresión laboral o en otras cosas vale pero lo que te quiero decir es que en ese caso no es un caso donde le dice yo presionaré un caso donde vi a una persona de hacerlo pero es un caso donde te lo planteas y dices bueno pues vale pues me vale la pena ser early adopter porque hay una empresa que está proponiendo algo y lo que me proponen me vale la pena pues vale pero no siempre evidentemente ahora es donde viene una cosa muy delicada y es que si ya tenemos el panel de control lo que quiero ahora es poder hacer cosas en el panel de control creo que anteriormente se ha hablado en bases de datos del modelo crudo el modelo cruz que sirve para explicar las operaciones de inserción creación read lecturas elección a blade realización y de eliminación pero que hasta ahora te explicado el modelo cruz directamente en la base de datos porque nosotros tocábamos la base de datos pero nuestros usuarios no van a tocar la base de datos nuestros usuarios van a tener un panel de control desde el cual tendrán que gestionar toda la información es decir que tenemos que hacer pues lo que tenemos que hacer y esta es la parte dura de la formación es implementar un panel de control donde los usuarios puedan interactuar con la base de datos sin tocar la base de datos vamos a hacer la parte más sencilla ahora verás que es la siguiente voy a panel de control por cierto voy a hacer un login voy a voy a cambiar la contraseña porque es mi contraseña voy a poner jugar sea y así como es más fácil escribirlo ya se ponga a jugar sajo karzai vale te voy a dar acceso a la aplicación y ahora un momento a obras que se redirige vale y a continuación en el panel de control voy a hacer lo siguiente h1 gestión de usuarios hace que esto no es un documento de tmb válido pero ahora luego lo convertimos en un documento html válido simplemente quiero que veas que pone gestión de usuarios y ahora el login me voy a copiar todo este código lo voy a pegar en panel de control voy a eliminar unas cuantas cosas evidentemente de usuarios si son estar no hace falta porque ya lo he lanzado el comentario no hace falta porque ya sabemos lo que hace le pido algo a la base de datos elector from usuarios esto es lo que le pido resultado eso y pasas ya no vale para nada esto no vale para nada devuelvo en la pantalla lo que me lo voy a hacer lo más comprimido posible para que entiendas bien lo que hace este es no vale para nada y me voy a cargar hasta el close fíjate que el código se queda en algo bastante pequeñito y ahora tú te acuerdas que nosotros anteriormente hemos aprendido a utilizar tablas y entonces yo vengo por aquí aquí abro una tabla aquí cierra la tabla fíjate que se abre y se cierra justo eso y ahora la tabla la vamos a por cierto voy a frenar esto va a ser muy feo pero para que lo veas morder uno para que tenga un borde una tablita ahí no se ve porque es un píxel pero ahora lo verás y ahora vengo por aquí y digo eso tr tr recordamos que es fila de tabla dv recordamos que es columna de tabla y yo lo vengo por aquí y digo show room o fila fila usuario y fila no me acuerdo si la password recordamos que también había un ph que era table link usuario y contraseña gestión de ola que ha pasado se me ha olvidado un punto y coma parece y fíjate que estoy teniendo un volcado en en html el usuario va a poder ver el contenido de la base de datos pero sin entrar a la base de datos de la misma forma yo puedo poner nombre y apellido se puede poner lo que quiera e incluso por ejemplo no voy a volcar el ive porque igual no quiero colocarlo porque cualquier o que el ide se quede en la base de datos o si luego él conoce a lo que quieras y ahora aquí pongo nombre y ahora aquí pongo apellidos y quiero que veas como cuidado tr así que esto se me ha quedado perdón fuera de la tabla tiene que estar dentro ok ahora sí usuario contraseña nombre y apellidos pero yo ahora además quiero implementar las cuatro operaciones de la base de datos así que para ello voy a poner aquí tv no perdón voy a poner a hr un informe y ahora sabes que para beber más que informe voy a poner bueno realmente son tres operaciones actualizar y voy a poner eliminar si guardo y recargo ahora verás que cada uno cada uno de estos registros tiene ver tiene actualizar y tiene eliminar usa para cada uno de ellos lo puedo gestionar y por supuesto ahora haré un formulario donde podría introducir un nuevo registro llegado a este momento quiero enseñarte una cosa que se llama es una chorrada visual pero queda muy bien que se llama font awesome entonces puntos es una librería de fuentes de iconos entonces puntos son donde ponen start for free lo que tienes que hacer es meter tu correo electrónico para que te envíen el kit entonces abro mi correo electrónico abrirlo por aqui momento voy directamente a ese correo a ver si ya me ha llegado de momento ha llegado y me dice confirma tu email address lo confirmo y entonces y entonces al confirmarlo más fortalece ok a registrar pero vale la pena jose vicente en 2010 y no me acuerdo cuando vi o qué sé vale y entonces me dice copia el kit y lo pegó por ejemplo y lo pegó aquí pero pero a continuación a continuación lo meto ahí quizás este momento es una buena excusa para crear él la estructura correcta es una buena excusa para crear la estructura correcta del documento html esto va en el gp no porque lo diga yo sino porque lo dicen los propios desarrolladores de fondo son y ahora tengo font awesome icons vivo quiero buscar mira el de ayer el beber el del del ojito y ahora vengo por aquí y ahora verás qué me dicen si quieres utilizar el icono del ojo lo único que tienes que hacer es copiar este código así que vengo por aquí aquí donde pone ver pego el código recargo esto fuera recargo aquí y fíjate que automáticamente aparece un objeto vale entonces como librería para meter para meter iconos es una librería que es muy rápida ahora verás cómo de rápida es porque yo ahora vuelvo a buscar y vigo font awesome icons abel no se sale con update y rifles refresh me puede valer y sale ese no sea hay varios entonces pillo esto lo veo ahí actualizó y fíjate que pone el de actualizar y hago lo mismo font awesome al consell it verás si efectivamente lo es no son píxeles es un archivo vectorial como por ejemplo de la papelera nativamente nativamente creo que no es un svg te lo digo porque opcionalmente hay una versión svg pero lo que sí que está claro es que es vectorial y eso quiere decir que lo puedes hacer todo lo grande que quieras que no va a perder calidad ya no son píxeles entonces vengo por aquí y ahora tengo allí la papelera vale ya así pues queda más bonito digamos de lo que quedaba antes y ahora lo que voy a hacer curiosamente es que curiosamente a la verdad es que voy a empezar por el de eliminar siempre que te explicado base de datos me dejaba eliminar para el final pero curiosamente al hacer paneles de control eliminar es el más fácil de hacer porque yo ahora vamos a verlo yo ahora me voy a venir por aquí me voy a ir h rev y voy a poner eliminar php fíjate que se hará pulso cualquiera me lleva a eliminar punto php eliminar no funciona todavía porque no existe de hecho vale pero lo importante es que yo le tengo que decir ahora cual quiero eliminar porque tendré que decirle quien quiero eliminar porque si ahora hago así eliminar dónde y de es igual a fila creo que lo llame identificador creo recordar vamos a verlo gm identificador suele recargo fíjate que si pulso en este es eliminar donde el ide es igual a 5 si pulso este es eliminar donde el ide es igual a 4 es decir al pasar el y de como parámetro de url yo lo que estoy haciendo es decirle quién exactamente quiero eliminar con lo cual ahora como te puedes imaginar voy a crear un nuevo archivo lo voy a guardar como tenazmente eliminar punto php voy a copiar este código y ahora con mucho cuidado con mucho cuidado voy a decir de lit from usuarios cuidado si yo ejecuto esto van a cargar toda la de usuarios web identificador es igual a wenger y por qué y de pues porque aquí le estoy pasando y de ahí pongo longaniza ahí tengo que ponerle organizados a lo que ponga en un sitio tiene que estar en el otro y al final no vendría mal pusiera otra redirección de esas que ya conocemos después de eliminar lo que quiero es que se me devuelva a panel de control php porque no puede ser un poco confuso porque si no el usuario se quedará atrapado en la página de eliminar es como voy a ayudar a cómo salgo de aquí al entonces si todo va bien vamos a verlo tengo que nervioso este momento muy especial tengo josé vicente sanchis vale que esto lo creamos el otro día y a continuación lo que voy a hacer es pulsar el botón de la papelera pincho en principio no pasa nada y dentro de cinco segundos se le va a devolver a panel de control pero si te fijas ese usuario ya no existe continuamos lo vuelvo a comprobar con josé vicente garcía lópez pincho papelera esperó 5 segundos podría acortar un poco el tiempo de espera y comprueba el volver que josé vicente garcía lópez ya no existe es decir tenemos ya un panel de control si te fijas es como una especie de wordpress pero programado por nosotros donde evidentemente mucho más sencillo ahora mismo todavía pero donde ya somos capaces de darle al usuario una tabla o sea una presentación donde el usuario ya puede empezar a eliminar algo que voy a hacer por cierto y ahora haremos una inserción es lo mismo que he hecho con él con él con el login que es antes de hacer la inserción vamos a utilizar esto un poquito buscando como te diría yo buscando la mejor relación entre esfuerzo y resultado te digo por qué pasa lo mismo y es que por mucho que yo te diga que lo importante es lo que acaba de suceder lo importante es tal a lo largo de los años cuando explico esto la gente veo que pone cara de simpre visualmente es una que yo siempre digo sí cual para tiempo de manter css siempre estamos verde igual no lo voy a hacer un pelín más bonito entonces para ello vamos a ver panel de control y fíjate y te aseguro y te adelanto que yo soy una persona desde el punto de vista de la programación bastante poco estética es decir soy una persona de oye funciona pues ya está está lo importante pero pero si me detengo de vez en cuando para hacer que estéticamente sea algo agradable es porque lo largo de los años he percibido esa frustración en los ojos de los estudiantes de decir funcionar funciona pero más feo que a la gente no es capaz de ver más allá sabes la gente no es capaz de decirse con el frío pero de igual pero funciona que sea bonito ya es cuestión de darle un poquito de cariño css pues no a la gente entonces por eso si ya te digo voy a hacer los mínimos para por lo menos para que se quede un poco más que hábito de hecho me la carga si estás viendo esto porque ya te digo sobre todo me interesa mucho más que acabar la clase porque vamos a alargar un poco porque hemos empresa tarde entonces me interesa alargar más para conseguir el que veas que se puede insertar que dejarlo bonito vale pero por lo menos que se quede mínimamente entonces le digo body coma html le digo background white voy a poner las líneas y es que encima cuanta más prisa tengo ahora venga background world sans serif vale y ahora esto dónde estás esto lo voy a meter en una etiqueta que ver por qué pues porque en el gba voy a decirle al sistema que quiero background black color world haring 10 píxeles ya esto por cierto le voy a decir padding 0px margin 0px eles guys 100% height 20 píxeles y con esto veras que tengo por ahí como una especie de cabecera digamos como la cabecera de wordpress para que te hagas la idea ahora digo genera color ingerir el regalo text decoration none para que no esté de color azul hito y quiero text align right porque los paneles de control la bienvenida suele estar ahí a la derecha en lugar de la izquierda y luego con la tabla como he hecho la tabla más fea imposible pues lo que voy a hacer es que voy a quitar este x del 1 es que fíjate que si no no lo pongo no se ve bien la tabla entonces yo lo que voy a hacer es table a ver table tr2 puntos en child y voy a poner todo creo que es el background rgb rgb 220 220 220 y esto lo que hace es que solo las filas impares las pintas de ese color un poco más saber [Música] celta de inglés igual a cero el espacio es igual a cero y ahora para cinco píxeles table prt de para 25 píxeles vengan y así pues tenemos un poquito más bonita bien ahora como te digo lo que me corre más aprisa más urgencia me da más importancia es que seamos capaces de meter nuevos registros vamos a por ello para ello para ello aquí abajo voy a meter manualmente una fila más esta fila va a tener un forma adrián un formulario y voy a meter una serie de campos los campos que voy a meter son input de tipo texto con el names nombre voy a usar pero no con el usuario place holder usuarios y fácilmente copio y pego pego pego y envío entonces esto es name password place holder password para hacerlo tipo texto esto es nombre place holder nombre esto es apellidos place holder apellidos y esto es un type submit nada value enviar si hacemos esto verás yo tengo aquí las filas con lo que tiene cada registro pero además tengo aquí algo para inserto un nuevo usuario inserta un nuevo password un nuevo nombre y apellidos ya sé que en la base de datos hay más campos tampoco muchos más bueno a nivel dirección y teléfono pero de momento vamos con estos de aquí entonces yo ahora esto lo voy a enviar a action insertar php mejor es igual a post pero si yo pongo aquí algo y le digo a enviar me dice que insertar punto php evidentemente todavía no existe así que yo me voy a crear un nuevo archivo le doy a guardar como lo llamo insertar php ahora me dirá que sí que existe pero está vacío y ahora voy a login me copió el código lo modificó y vamos allá esto fuera voy a simplificarlo de nuevo esto fuera todo esto fuera y digo insert tinto usuarios values y acuérdate de el truco y ahora cuántos campos hay hay 8 y 8 donde el primero es el identificador con lo cual esto es nulo dos tres cuatro cinco seis siete y ocho y ahora tiro esto para abajo más que nada por un tema de claridad visual y ahora esto es post usuario password nombre apellidos y si todo va bien también al final pongo esto para que me devuelva al panel de control pues vamos allá a verse de suerte recargo y quiero introducir al usuario juan con contraseña juan contra nombre juan y apellidos garcía me voy a enviar y si todo va bien y no ha habido ningún error ahora en 5 segundos vuelvo a panel de control y veo que ya tengo a juan metido dentro de la base de datos entonces ya tenemos las dos cosas más importantes luego evidentemente ver y actualizar también tienen familia pero ya tenemos los ojos es más importante y es que yo con esto lo que tengo es que ya tengo un panel de control que está protegido por usuario y contraseña o sea no cualquier persona puede entrar donde tengo una tabla pero evidentemente lo que vamos a hacer más adelante es repetir esta operación para tantas tablas como haga falta y yo ahora mismo no ya yo sino el usuario a quien ponga a disposición de esta aplicación va a poder eliminar registros y va a poder crear nuevos registros pero el usuario no va a tocarme directamente la base de datos por eso de ahí si te fijas el esquema este que estaba dibujando al principio el usuario accede al panel de control y a través de php el usuario interactúa con la base de datos pero siempre a través de php base de datos que evidentemente conforme vayamos avanzando más el ejercicio también actualizará el contenido de la página principal porque ahora mismo estamos trabajando en el panel de control de usuarios y en el panel de control digamos para el gestor de la aplicación pero luego todo esto que hagamos tiene que ir visto hacia la hacia el usuario final entonces vamos a ver antes de acabar sobre todo porque lo que quería era acabar la clase de hoy te quedarás con el eliminar y el crear como diciendo ostras esto ya funciona o sea esto no es sólo estético es un panel de control de verdad falta ver y falta actualizar pero si tenemos ya tenemos insertar y tenemos eliminar ya tenemos la mitad de las operaciones importantes te voy a contar una historieta para que entiendas a veces que la programación en sí misma la sintaxis es lo de menos tú has oído que en diciembre aparte de que lo han dicho ya un montón de veces han ido retrasándose pero ha sido que flash va a morir pero yo te pregunto por qué es que es que es malvado flash porque flash va a morir porque porque lo van a matar porque parece que que chrome le tiene tanta manía al flash no ninguna de las dos cosas te cuento si te cuento y cuando cuente esta historia verás que la historia es completamente lógica pero claro pero son movimientos empresariales que nada tienen que ver con el propio lenguaje de programación como te he contado anteriormente yo antes de meterme con html5 yo trabajaba con flash y era perfectamente feliz trabajando con flash porque insisto o sea no ya sólo a nivel de ausencia sino a nivel proyectos para clientes porque era una competencia informática que había aprendido en 2003 y la estaba amortizando durante una serie de años entonces entonces ocurrió una cosa flash es una tecnología propietaria de adobe flash vale de adobe lo cual quiere decir que es una tecnología de de una empresa no es libre no está abierto flash player market será ver si te puedo encontrar esta gráfica para que tengas la idea a ver a ver vale vamos a ver por ejemplo así mientras que en 2019 tiene una cuota de mercado está instalado en un 29 por ciento de aquí de ordenadores en 2017 estaba en un 76 por ciento pero pero sigamos más allá seamos más allá cojo gráficas estadísticas de hace 20 años histórica a los 3 19 no es que quiero pero una gráfica si es posible de los últimos 20 años para que veas la caída del imperio romano digamos bueno y esto 2011 pero vale y parece que no me dejan pero bueno vale sólo con 2011 ya ya me empieza a valer hasta 2016 verás flash a principios de los 2000 es era una tecnología que permitía que la web hiciera lo que ninguna otra tecnología podía hacer la primera persona que me enseñó flash precisamente fue esta chica que tenía nieves que es la que luego también el señor director ella sólo instaló en su casa hizo una animación de una pelota que da una vuelta y la animación ocupaba 5 kilobytes 5 casas pues me lo enseñó al día siguiente me lo dijo yo le dije imposible es imposible una animación ocupe cinco casas ya entonces me lo enseñó y me dijo el por qué ocupaba cinco casi con la tecnología que había detrás y porque era maravilloso bien entonces en él desde 2002 al 2005 flash acaparó toda la web porque podía hacer que la web hiciera cosas que no podía hacer con html de hecho los primeros años de youtube youtube iba con flash porque flash era la única tecnología que podía reproducir vídeo en la web pero el problema está en que en la segunda mitad de los 2000 es las grandes corporaciones se daban cuenta de lo peligroso que era que la mayor parte de la cuota del mercado y que en definitiva la web dependiera de una tecnología propietaria de una empresa porque esa empresa está aportando bien con la web pero y si esa empresa decidía empezar a sacar partido empezar a sacar tajada entonces lo que hicieron es sacar html5 y la nueva versión de javascript para reemplazar a flash y entonces fíjate que estás hablando de movimientos empresariales no sé si el lenguaje mola más o menos o sea es de intereses empresariales además ocurrió una cosa y es que yo una cosa que te voy a contar la leyenda urbana pero te puedo decir que hay una parte que es verdad y es que el flash chupaba un montón de recursos era muy ineficiente vale el flash por cuatro animaciones tontas te ponía el procesador al cien por cien ya estaba muy mal optimizado vale eso sí hay que reconocer que es cierto tened en cuenta que estamos dando de 2010 cuando empezaron a salir primeros móviles inteligentes los primeros iphone dos primeros android y tened en cuenta que de la misma forma que un ordenador tiene ventiladores un teléfono móvil no tiene ventiladores entonces los teléfonos móviles y la web consume demasiados recursos se calientan mucho más rápido que un ordenador que tiene ventiladores entonces cuenta la leyenda que que el tibet esté steve jobs iba a sacar el primer iphone y claro ejecutaban flash en el iphone el flash ponía el procesador al 100% el procesador se calentaba no tenía ventilador y el móvil se apagaba por sobrecalentamiento que luego al rato volvió a arrancar pero de momento se había apagado y cuenta la leyenda que la leyenda cuenta que esto yo llamo adobe y evidentemente no sabía si tenía que algún ingeniero de apple llamaría a algún ingeniero de adobe evidentemente pero la leyenda dice steve jobs ya sabes por qué entonces cuenta la leyenda dijo y si no optimiza el flash el flash no va a entrar el iphone en aquel momento flash dominaba la cuota de mercado la gran parte de la cuota del mercado y el iphone era una apuesta era un a ver cómo sale el experimento este pues cuenta la leyenda que adobe le dijo steve jobs pero como como no vas a meter flash en tu iphone por favor cómo te vas a quedar fuera de flash y cuenta la leyenda que escribió flynn echaron los huevos y dijo combina pulsar con mis que no va a entrar creo que te digo sabes como rey o como muy español o sabes entonces la cuestión está en que buscaron en aquel momento el año siguiente y el año siguiente del siguiente se vio que apple había dado en el clavo con sacar un teléfono inteligente que no le había aumentado a apple realmente alimento microsoft pero apple hizo como que lo habían inventado ellos luego androide aceleró sus planes para sacar a google acciones para sacar android y apple y adobe se dio cuenta de la que había metido porque ahí steve jobs fue inteligente es así que dicen que fue decisión directa de él porque dijo si yo meto flash en el iphone y el iphone se apaga por sobrecalentamiento la gente no le va a ir a reclamar a adobe me va a venir a reclamar a mí y por mucho que yo en la tienda en la applestore le diga a alguien no es problema mío es problema de adobe la gente dirá yo te pago mil euros a ti y menos los jonas tú entonces claro cuenta la leyenda que este dios vio venir ese problema porque otra cosa no pero ver venir las cosas en eso era bueno y dijo mira para ahorrarme marrones no voy a meter el flash que de hecho años después google hizo lo mismo con con android entonces claro el problema está en que al año siguiente del siguiente cuando adobe se dio cuenta de la que había metido intentaron llegar a acuerdos con google y con apple y google y apple ya estaba en otra onda ya estaban como no le has llegado tarde tu momento era otro pero ya no existe vale el descaro es a ese fue el momento en el que flash empezó a caer entonces quiero que sepas que flash cayó por una cuestión de pelea entre empresas por una cuestión de que de que apple y google dijeron mira pues ya me pasó llegamos a un acuerdo sobre el software libre y nos quitamos a esta empresa propietaria de encima y no tenemos el riesgo de que esta empresa nos la juegue el día de mañana sabes entonces qué ocurre pues que todo el mundo yo en aquel momento en 2010 me acuerdo que estaba grabando un curso y coincidir con uno con un tío gente puede ser otro podría decir quiero ser su página es contaminación que no contaminación sino con animación esto tiene su web en construcción pero este es el contacto de esta persona este tío era un crack del flash pero un crack pero megacrack sabes a de rollo hacer proyectos para empresas muy gordas entonces yo me acuerdo estaba hablando con él con él en 2010 él que era muy crack de flash estaba en movimiento con flash y claro el tendencia a esto esto de que flash va a morir todo es una leyenda urbana pero esto no va a ocurrir quiero decir que el tío estaba cerrado en flash pero por qué pues porque era un crack de flash y porque para él irse a html5 era como pero tío con todo lo que sé de flash y ahora lo voy a tener que tirar y sin embargo lo ha tenido que hacer entonces lo que te quiero decir con todo esto es lo que te decía antes de conocer y analizar el entorno para que veas que al final la razón por la que algunos lenguajes nacen o mueren no tiene nada que ver ni con que el lenguaje sea bueno ni con que los usuarios usen o no usen el lenguaje sino tiene que ver con decisiones empresariales que ni tú ni yo podemos controlar y por eso es por lo que siempre me interesa conocer ese contexto y ese entorno para asegurarme de que cuando aprendo algo nuevo que ese algo me dure en el tiempo porque si no ya te digo que ni de coña sabes nada y eso y con esto

bien pues vamos a ver cada seguimos por aquí vamos a abrir la aplicación y abierto el mam y el otro día estuvimos trabajando con el panel de control entonces localhost bueno me hablés el ph del medio admin que sin duda lo vamos a utilizar y voy a abrir la aplicación app y el otro día teníamos en admin que pues hicimos este panel de control que te voy a dar acceso a la aplicación y por tanto nos permitía entrar y nos permitía y nos permitirá realizar empezar a realizar una serie de operaciones entonces teníamos ya las operaciones de realizar un primer listado en la pantalla y realizar una eliminación entonces eliminamos por ejemplo juan vale vemos aquí juan ahora a continuación volvemos para atrás tenemos también la operación de insertar un nuevo usuario el objetivo para hoy consiste en por una parte realizar las operaciones de visualizar ver algún tipo de informe y luego la operación más compleja de actualizar y voy a intentar como diría yo entre comillas ventilar me eso lo más rápido posible porque también lo que quiero es que en la clase de hoy pues nos metamos ya a trabajar digamos con lo que sería pues la propia aplicación vale que veamos pues cómo transformamos este front estático en un front dinámico con base de datos vale pues vamos a ver vamos a ver momento insertar e insertar es lo que hicimos el otro día bien voy a poner nuestro aquí para que lo puedas ver correctamente y de acuerdo a ese otro día la estrategia que utilizamos para que los botones de eliminar funcionarán correctamente vale entonces para ello a ver que haga esto un poco más pequeño para ello lo que quiero que veas lo que quiero que sepas es que voy a utilizar la misma estrategia pero con otros botones tales como por ejemplo el de ver entonces me voy a panel de control y donde puse el eliminar donde y de es igual a fila identificador pues puedo copiar este cacho y puedo decirle que esto va a ser actualizar php donde fila es igual a identificador y ver php donde fila es igual a identificador y esto lo que va a hacer es que cuando yo pulse el botón si te estás fijando es que se le pequeñito en la esquina inferior izquierda de la pantalla pues y de uno y de dos y de tres o sea se ha funcionado para eliminar pues como te puedes imaginar va a funcionar exactamente igual para ver y para actualizar evidentemente si ahora pincho el botón de ver pues me dice que el archivo ver punto php no existe porque no lo he creado entonces lo que voy a hacer a continuación y cómo te puedes imaginar es crearlo creó un archivo nuevo lo guardo en quentin que he hecho realmente para que las cosas entonces aplicaciones e más app admin y ver php vale así que a continuación lo que voy a hacer es algo parecido a panel de control es decir voy a copiar este cacho de enlace hasta aquí y lo voy a pegar en ver php y voy a hacer lo siguiente la petición ya no es select el from usuarios sino select el from usuarios were identificador sea igual a huguet es decir variable get variable que estoy cogiendo a través de la url llamada y de porque id pues porque si nos fijamos en el panel de control la variable que he creado y me he sacado de la manga es y de o sea me da igual que me pusiera longaniza pero si hay pongo longaniza quiere decir que aquí tengo que poner longaniza o sã lo único importante es que coincida vale porque cuando escribo esto muchas veces hay gente hay alumnos que piensan que es que y de es una palabra reservada para tocar el líder del objeto y no es así simplemente es una palabra que he elegido pero pues evidentemente ha intentado que sea una palabra pues que sea clara digamos que represente el concepto que vamos a utilizar en este caso lo que voy a hacer es que voy a eliminar pues todo vestigio de tabla por nada en particular simplemente para que no veas que es una cosa diferente y eliminó los botones y voy a decir usuario dos puntos y v r y contraseña dos puntos nombre dos puntos apellido dos puntos y el br lo pongo aquí y por último a ser ref que lo puedo poner realmente aquí a h ref el panel de control phd volver a la página anterior entonces recargo y ahora fíjate que si cojo el i de número uno me dice jo cárcel a jugarse a josé vicente carratalá pero si cojo por ejemplo el 2 me dice pedro pedro password pedro pérez pero si cojo el 3 me dice jaime jaime password jaime garcía es decir estamos viendo como el botón nos lleva a obtener una especie en este caso de micro informe que nos permite no ver todos los registros de una tabla sino ver un registro concreto tened en cuenta también una cosa y es que yo estoy viendo ahora mismo una tabla que tiene tres registros pero evidentemente esta tabla podría tener 10.000 registros es un poco incómodo estar trabajando con 10.000 registros en la pantalla entonces hay veces que es más cómodo decir selecciona uno y quiero hacer algo que lo veas sólo ese registro en la pantalla bien pues vamos a continuar pues la idea está como te digo en que si hago el mantenimiento de ver parece que no pero automáticamente tengo el mantenimiento de actualizar porque yo ahora voy a crear el archivo lo guardo de en admin de actualizar php vale y lo que voy a hacer ahora va a ser copiar va a ser pegar y en usuario voy a hacer input type texto usuario value algo hago lo mismo copio y pego esto aquí y entonces lo que hago es que esta información la pego en el value la pego en el value claro ya ahí lo que voy a hacer como la verás te falta el botón de summit por cierto entonces imputa submit y esto ahora lo meteré dentro de un formulario evidentemente vale pero esto lo que va a hacer es que si yo le doy a actualizar pues fíjate que voy a darle antes a ver si le doy a ver lo que hago es que lo veo como texto pero si le doy a actualizar me mete la información dentro de un campo y evidentemente en un campo yo puedo hacer modificaciones que es la idea de actualizar es el formulario de actualizar y ahora mismo está súper desastrado vale pero recuerda lo que comento siempre entre algo que funciona y algo que y algo que es bonito vale decirte decirte que para hacer un pequeño inciso en desarrollo de software hay varias metodologías hay una que se llama top down y otra que se llama bottom up vale shut top down sería algo así como empezar desde el final desde la parte más alta y luego ir hacia abajo y la parte bottom up es empezar desde abajo e ir hacia arriba entonces cuando hablamos de bottom up y top down hablamos de lo siguiente te lo digo porque yo muchas veces cuando estoy desarrollando una aplicación automáticamente tengo en la mente estas filosofías de desarrollo y yo elijo la que más me conviene en cada momento pero no quiero que interpretes no quiero que entiendas como que estoy desarrollando lo que quiero cuando quiero ir porque quiero ir porque me da por ahí sino por lo siguiente verás dentro del esquema que te dibuje el otro día y un esquema que dibujo siempre de hecho yo creo que dibujando playboy dibujando hace décadas es el siguiente yo tengo por aquí digamos una pieza central es html5 vale pongo un escrito porque luego es eso escrito entonces html5 digamos está a un nivel a un cierto nivel con respecto al usuario está cercano al usuario porque el usuario al final descarga html por encima de html está pss eso qué quiere decir pues que el usuario de html pero sobre todo psss para el usuario ve lo bonito esto es lo que el usuario ve y esto es y esto es las profundidades del mar donde de hecho hay un tiburón que igual hasta de hasta te pincha y tal vale entonces esto stop evidentemente y esto es botón pero cuando digo botón es la fosa de las marianas es el fondo más profundo del mar por debajo de html tenemos javascript pareja o script no lo toca no lo ve realmente el usuario a su funcionamiento estaba muy por debajo del usuario todo esto es lo que ocurre en el cliente javascript en un momento dado en gran mayoría de ocasiones se comunica con php y abajo del todo el usuario nunca lo toca directamente jamás jamás tenemos la base de datos entonces teniendo en cuenta que esto está dentro de la digamos del esquema de desarrollo y esto es botón hay diferentes metodologías de desarrollar una de ellas que si te fijas es la que estamos cogiendo para la parte frontal de esta aplicación stop botón es decir primero haz que la aplicación se vea bonita para sobre todo esto cuando trabajas con cliente final viene bien porque es el cliente final aunque la aplicación no funcione pero por lo menos la ve estéticamente y luego haces que sea interactiva y luego haces qué es lo que vamos a hacer hoy que realmente tenga una parte del servidor y luego haces que se conecte a base de datos primero es una maqueta bonita pero es irreal y luego haces que sea real en cambio lo que estamos haciendo ahora es bottom up es de abajo hacia arriba esto digamos todo a veces up que es creo una base de datos y me aseguró que con php revisó la información y esto es lo que tenemos ahora mismo es una aplicación que es más fea que picio pero funciona vale que es lo contrario de lo que tenemos en la parte frontal que tenemos la aplicación bonita pero que no funciona de verdad y luego una vez que tenemos la aplicación que funciona es cuando eventualmente le ponemos interactividad con javascript nos aseguramos que el html esté bien estructurado y luego por último hacemos que sea bonita diego el gadget en esté bien estructurado porque si te fijas lo que he hecho es algo asegura pinchar un valor es decir o sea éste o que este elemento no tiene ni el gen y el body ni el doctor ni nada de nada de nada o sea es directamente al grano pero vale funciona entonces esto es lo que estoy realizando entonces lo que quiero que sepas es que yo en todo momento tengo este esquema en la mente vale y no es que las aplicaciones del lado del cliente se desarrollen botón y ni las aplicaciones de panel de control se desarrollen bottom up sino que son dos metodologías que en un momento dado a ver qué voy a decir elegir una u otra es muy sencillo si tú tienes un proyecto que te lo encarga un cliente probablemente vas a un salto botón si tienes un proyecto que lo haces tú probablemente vas a bottom-up más que nada porque si tienes un proyecto que te encarga un cliente irle a un cliente con esto el cliente te va a decir esto es una por mucho que tú digas no a ver esto funciona esto es guay esto está bien esto hace lo que debe pero el cliente no ve eso vale el cliente no ve formulario i-9 de alá que guay esto sale de la base de datos no el cliente únicamente ve que esto visualmente es una y aunque sea cierto que sea visualmente una pero tú y yo sabemos que es una cuestión de css y por tanto el css es lo de menos pero dice saber tú como programador dices me preocupa te primero de que da base a dos funciones que luego a tiempo de css siempre estamos pero es el cliente final no lo ve vale por eso cuando hablamos de una aplicación de cliente final generalmente hablamos de un botón a menos que el cliente final sea programador y entienda ese tipo de cosas pero cuando haces una aplicación para ti mismo generalmente a face bottom up porque dices mira primero que funcione y a tiempo de que la aplicación sea bonita siempre estoy e incluso también a tiempo de pasar la aplicación que funcione a alguien que esté especializado en css que te la bonita también siempre estás vale pero yo te explico las dos metodologías de desarrollo de hecho hay muchas más estos son estas dos son dos de muchas para que por eso tú mismo en cualquier momento puedas elegir y seas consciente de que esto existe ahora a continuación claro cuidado esto evidentemente está dentro de un forma el form tiene una acción que es profesa actualizar php y tiene un mejor que es igual apostó esta parte del forma debe ir aquí aquí esto es enviar en el caso que quieras o volver a la página anterior en el caso que quieras cancelar y ahora evidentemente tengo que crear un archivo como te puedes imaginar llamado lo voy a guardar llamado procesa actualizar procesa actualizar php y procesa actualizar lo que va a hacer es algo tan sencillo de hecho fíjate que copiado y pegado el archivo de eliminación y lo que va a hacer es lo siguiente lo que va a hacer es update usuarios así cuidado me hace falta otro campo se me había olvidado me hace falta otro campo input type giren oculto un campo oculto name identificador value y fila identificador y entonces mira y entonces mira yo algo así veo el código fuente de la página y fíjate que hay un campo cuidado value va entre comillas hay un campo identificador que tiene el valor 1 si yo cojo y cojo el número 2 me voy a ver el código fuente de la página identificador tiene el valor 2 pero no se ve en la pantalla no se ve en el formulario vale entonces es como te digo un campo oculto pero que ahora evidentemente en el proceso actualizar vas a ver que tiene una utilidad muy grande que es la siguiente set no me acuerdo entonces no me acuerdo voy a vienen aquí a ver en curso aplicaciones web en quita por aquí en usuarios y en usuario vale ser usuario es igual a algo coma password es igual a algo coma un hombre es igual a algo como apellidos es igual a algo email email e mail sólo tengo la pantalla anterior pero usuario password nombre a sky mail al final no lo estoy tocando en este ejercicio de dirección y teléfono web identificador sea igual a algo entonces voy a hacer lo siguiente recibo la variable post llamada usuario recibo la variable post llamada madre mía usuario password es lo que tiene que agregar nombre apellidos entonces usuario password nombre apellidos web identificador es igual a identificador y si todo va esto nos vamos a panel de control dentro de voy a poner dos segundos y si todo va bien y si todo va bien voy a volver a la página anterior voy a actualizar voy a quitar por ejemplo lo del guapo le doy a enviar espero dos segundos y fíjate como jose vicente ya no es el guapo si quiero cambiar la contraseña le doy a actualizar en la contraseña es mi password le doy a enviar y dos segundos después la contraseña es mi password entonces al hacer esto como podrás ver ahora si ya tenemos a ver no te digo un panel completo pero sí que te digo que lo que tenemos es pues es un principio de panel tenemos un problema que resolver todavía que es el problema de esto ha sido una tabla y fíjate que para una tabla hemos hecho eliminar insertar ver actualizar y procesa actualizar pero te sirve para una tabla y tú de las nuestras y cuando tengamos que hacer cinco tablas tendremos que repetir cinco veces todo esto pues ya verás que no hay estrategias para ahorrar esfuerzo y hablando de ahorrar esfuerzo hablando de ahorrar esfuerzo ayer me hiciste una pregunta una de las preguntas que me hiciste que tenía que ver con que de hecho cada script que arranco veo que tengo aquí el enlace la conexión a la base de datos entonces bueno puestos a copiar y pegar esto tampoco me ha costado mucho de copiar y pegar pero el problema no es copiar y pegar el problema es que yo por ejemplo en un momento dado podría esta aplicación y la podría migrar a un servidor y siguió la migra un servidor los datos de conexión ya no será el localhost y en ese caso tendría que ir a archivo por archivo modificando a uno de los bases de datos a la conexión a la base de datos y las probabilidades de error son grandes las probabilidades de que me deje algo sin conectar son grandes entonces para ello en php existen dos directivas una llamada incluye incluir y otra más restrictiva llamada rico ayer pero vamos con incluye de momento que hace lo siguiente yo voy a ir a crear un archivo nuevo voy a guardarlo como en admin lo voy a guardar como conexión debe el nombre es lo de menos como te puedes imaginar la llamada conexión debe php y en este archivo lo que voy a hacer es lo siguiente lo que voy a hacer es que me voy a eliminar o panel de control o lo que sea me da igual y lo que hago es que aquí donde pone enlace lo corto y me voy a conexión debe y lo peor y ahora en panel de control lo que hago es incluye y conexión debe punto php y de esta forma lo que estoy haciendo algo así como css es incluir a este archivo externo conexión debe evidentemente ahora voy a ir a eliminar y voy a hacer lo mismo voy a ir a insertar y voy a hacer lo mismo voy a ir a ver y voy a hacer lo mismo voy a actualizar y voy a hacer lo mismo y voy a procesa actualizar y voy a hacer lo mismo de hecho compruebo que la aplicación sigue funcionando exactamente igual vale puedo ver un archivo puedo actualizar un archivo puedo son cinco segundos creo puedo eliminar un archivo sea un activo una una entrada un registro vale funciona exactamente igual pero una vez que he hecho esto siguió el día de mañana o cuando sea micro de esta aplicación a otro servidor o incluso que yo dentro del servidor le cambiar el usuario pues yo sé que únicamente tengo que realizar la modificación en un archivo y automáticamente se aplica en todos los archivos esto que acabo de hacer este incluye está inclusión no sólo sirve para incluir la conexión a la base de datos sino que sirve de hecho para muchas cosas como ahora luego vamos a ver sirve incluso para trucar html y dar respuesta a algo que en su momento empezamos a ver que es lo siguiente como ahora en un momento va a saber vamos a verlo vamos a volver bastante atrás vamos a volver bastante atrás vamos a ir al curso de aplicaciones web y vamos a volver a proyecto web me voy a proyecto web lo voy a pegar dentro de ésta me voy a ir a aplicaciones me voy a ir [Música] me voy a ir a http lo voy a pegar aquí hay un proyecto web y lo que voy a hacer ahora es cambiar en un momento un segundo voy a cambiar las extensiones de los archivos a php esto antes no podía hacerlo primero porque no sabíamos php y segundo porque no tenía algo como el man cuando empezamos con php pues se apersonó cuando empezamos con html estamos trabajamos directamente en la carpeta del escritorio o algo así lo convierto todo a php porque voy a utilizar en clubbers me voy a localhost y cargo proyecto web vale y y atención y a continuación yo tenía por aquí una entrada y tengo un blog se ve que no tenía que tenía tenía él sobre mí no sé que tenía a no esperas pero espera esperan sucumbir mira por ejemplo vamos a ver claro ahora resulta que tengo index pero index llamaba a html ostras que ahora tengo que cambiarlo todo página a página porque es renombrado las páginas es el problema vale pues lo que voy a hacer es lo siguiente atención creó un nuevo archivo y lo guardo dentro de ese proyecto el proyecto web se llama esto y lo llamo como cabecera punto php y ahora creo otro archivo lo guardo claro te puedes ir más grande y lo guardo como pie de página php entonces por ejemplo cojo voy a index vamos a ver cojo index cojo todo lo que sería el principio de la página aquí voy a poner el contenido principal de mi web para todo esto lo corto y lo meto en cabecera a continuación cojo desde aquí hasta aquí y todo esto lo pegó en pie de página y ahora a continuación no pasa nada porque las etiquetas salgan rojas y ahora a continuación aquí arriba diego php incluye cabecera php y aquí abajo incluye pie de página php pero claro ahora yo cojo esto me voy a descargas esto es cabecera voy a hacerlo con todos y blog cuento bueno vamos a ver algo así cabecera pero y ahora el pie de página index pie de página en descargas no lo había hecho tú fíjate cómo se queda por ejemplo descargas se queda únicamente con lo que le importa pie de página blog con tacto cursos y servicios pero ahora ve si yo ahora vengo aquí veis que evidentemente funciona igual pero si yo ahora por ejemplo voy a blog va a fallar por cierto porque tengo que corregir pero fíjate ahora corrijo únicamente cabecera corrijo lo corrijo en un solo sitio que es lo mismo que te he dicho de la conexión a la base de datos sea la corrijo en un sitio pues aquí es igual corrijo la cabecera en un sitio y entonces a continuación ahora recargo y fíjate que voy al blog y voy a cursos y voy a sobre mí y voy a servicios y tal pero lo bueno que tiene esto es que yo ahora por lo que sea me quiero cargar descargas o quiero añadir un elemento nuevo al menú y lo que hago es que en el archivo cabecera php voy a comentarlo vale para desactivarlo por no eliminarlo y ahora a continuación simplemente recargo y fíjate que vaya a la página que vaya he actualizado de un solo golpe el menú está es la gracia vale por eso lo que quería decirte es que incluye se puede utilizar para fines funcionales como por ejemplo la conexión a la base de datos pero también se puede utilizar y se suele utilizar para fines estéticos como por ejemplo y para y para superar las limitaciones que tiene html como por ejemplo pues hacer algo así como css en cascada pero contenido en cascada es decir referenciar contenido a un archivo externo para asegurarte que lo edita es una vez y se edita en el resto de elementos a la vez de un solo golpe entonces a continuación ahora si lo que queremos es el proyecto que tenemos aquí el proyecto de la app y hacerlo dinámico vale hacerlo de verdad entonces para ello yo he dejado preparada en la base de datos el cerrado eso no quería pero da igual he dejado prepa prepare para flowers pero para flowers porque estoy viendo que no me lo deje en curso java cursos pues si el viaje en curso hub vale no pasa nada voy a mover esta tabla cursos que hay operaciones y mover a no movernos copiar bueno sabes que la copia de veces la puedo mover a curso aplicaciones web cursos la estructura de datos muy bien ok y ahora sí vale en curso aplicaciones web tenemos cursos entonces cursos es una tabla que tiene cursos como puedes ver aquí y nosotros lo que tenemos es una app donde lo que hicimos lo hicimos manualmente pues ahora evidentemente dentro de esta filosofía top-down lo que queremos es estos elementos y convertirlos a una web que es de mentirijillas es bonita pero de mentirijillas y hacer que sea real hacer que el contenido sea real voy a en primer lugar cerrar todo vale y ahora me vengo aquí me voy a up pero me voy al index evidentemente index como te puedes imaginar lo cambió de nombre a php y lo cargar entonces vamos a ver para empezar si te fijas en admin tenemos un conexión debe entonces yo la verdad es que ahora mismo me puede volver un poquito gorrón ct porque puedo venir aquí y digo mira sabes que incluye admin barra conexión debe punto php ya que lo he hecho vamos a utilizarlo entonces una vez que lo tengo ahora este archivo estaría preparado para escoger cosas de la base de datos te acuerdas que en su momento aquí en el ribbon donde estaba últimos estrenos yo cogí arctic el y empecé a copiar pegar copiar pegar o copiar pegar vale esto lo hicimos te acuerdas copiando y pegando porque en aquel momento estábamos trabajando con html yo te dije pero cuando lleguemos a php esto lo sacaremos una base de datos pues ahora es el momento ahora ha llegado ese momento entonces vengo por aquí y eliminó todos estos duplicados que eran estéticos pero ahora ya no me hacen falta me quedo con el módulo a repetir y entonces lo que voy a hacer a continuación es de up de box de admin por ejemplo panel de control más que nada donde tenga una muestra de código de select aquí cuidado porque está haciendo un club de conexión debe no hace falta porque ya está allá arriba o eliminó el de arriba me da igual vale pero uno de los dos sobra o sea no deben haber dos porque si hay dos la página ball sacará un aviso no es un error muy grande pero sí que te avisa te dice que no debes incluir algo dos veces entonces a partir de ahí lo que voy a hacer es que voy a el while y voy a pegar el arctic el vamos a para ello bien lo copió y lo pego vamos allá y lo que voy a hacer ahora cuántos elementos había no me acuerdo pero te lo veo aquí 1 2 3 4 5 6 7 7 qué número más raro nunca trabajo con el número 7 profit porque no me gusta nada pero es que yo soy maniático de los números pares y si son potencias de 2 pues mejor todavía por eso me extraña que fuera 7 porque nunca trabajo el número 7 de agua entonces yo ahora vivo selector from cursos de hecho que sepas que me está aplicando ahora mismo la piel por los al número 7 pero bueno no es que no nos cuadre por eso tengo que si funcionará con 7 vamos a ir con 7 y luego experimentamos a poner más y menos pero me está ahora mismo picante un poco la piel entonces select el from cursos limit 7 vale por eso quería saber cuánto sabía lo que voy a hacer ahora va a ser un poco extraño porque voy a recargar la página un fantástico no funciona nada qué guay este caso no mola nada vamos a ver selecto el front cursos voy a ver si tengo algún error porque se ha dejado de funcionar todo es que algún error que tener que haber código fuente de la página clark ribbon derecho class ribbon y ha sido hasta aquí la fíjate que este class ribbon o sea tengo algo aquí que al programa no le ha gustado nada que ha sido un error pero de la leche y no sé ahora mismo que puede ser porque tampoco veo que tengo nada raro pero algo malo tengo tengo que tener claro ya es y cuidado incluye incluye admin conexión php vale ahí estamos entonces recargo vale y ahora lo que verás es que tengo el mismo curso repetido x veces pero por qué pues porque he copiado y pegado este código a palo seko entonces lo que voy a hacer ahora evidentemente es aquí donde pone curso de fe voy a poner algo de código y va a ser fila fila que por fila no se fila nombre vale postura nombre y entonces verás que dice el curso de jungla blender 3ds max wordpress java para si te fijas joomla blender 3d max wordpress el curso de java si te fijas pues está cogiendo una serie de cursos vale cuando los siete primeros cursos concretamente pero la imagen no cambia vale entonces a ver la imagen no cambia el texto por cierto que ahora lo marque tenemos un poquito mejor pero el texto va a ser la frase descriptiva entonces vengo por aquí y donde pone descripción va a ser frase descriptiva y no sé si tenía una descripción más grande y descripción vale y descripción entonces quiero que veas ahora la descripción se va a ir porque tengo nada de genes muy grandes pero pero quiero que veas que pues aparece por ahí el texto la imagen es la misma siempre la imagen es la misma porque cada vez estoy repitiendo esto pero si ahora me vengo por aquí en alguna parte en algún curso creo que fue en el curso de payton de julio vamos a ver en el curso de payton punteros no carpeta con cosas no caras no payka sino a ver las carpetas en uno de estos y carpeta con cosas estos son fotos mías no el curso de java no me suena que hiciéramos esto pero si no me lo bajo imagen no pues igual me lo voy a bajar vamos a ver un momento una vez que las imágenes están copiadas realmente ahí dentro de esa carpeta foto es cuando puedo venir a esta foto donde pone curso de punto jpg y lo voy a reemplazar por el campo imagen entonces las imágenes están en una carpeta y en la base de datos está el nombre de la imagen y esto es imagen vengo por aquí recargo y ahora compruebo como en cada curso le aparece la imagen que le corresponde le falta evidentemente maquetar lo un poquito porque pues ya no tiene el mismo formato que tenía antes pero evidentemente esto es normal esto es previsible pero lo que importa pero lo bueno es que ahora realmente estoy sacando esto de la base de datos vale vamos a hacer lo siguiente ahora puedo utilizar múltiples criterios para hacer cosas por ejemplo tengo aquí últimos estrenos por cierto por cierto ahí donde pone últimos estrenos section ok lo voy a copiar y lo voy a pegar aquí sección y lo voy a pegar también aquí y lo voy a pegar también [Música] aquí y lo voy a pegar también aquí es lo que hace básicamente es que ahora lo he hecho también en la parte de abajo pero pero yo realizando diferentes peticiones a la base de datos y esto para mí realmente ahora es donde se anima la cosa ahora es donde la cosa prestación de gracia yo tengo por ejemplo yo tengo por ejemplo en la base de datos tengo un parámetro que es visualizaciones son los cursos más vistos porque cada vez que alguien hacía clic en un curso ahora normal esto no funciona exactamente igual pero esa es la base datos que tenía antigua cada vez que alguien hacía clic en un curso aumentaba este contador si yo podía ver la gente en qué curso se hacía más que cara lo veo con analytics ahora lo veo en otra parte vale pero antes lo veía y ves que puedo hacer pues aquí por ejemplo donde últimos estrenos aquí lo que puedo hacer es poner cursos más vistos y entonces en lugar de hacer un select el from cursos tal cual digo select el from cursos order by visualización es descendiente límite 7 lo que hace es que me da únicamente los 7 cursos más vistos y me los ordena donde primero esté el más visto luego el segundo menos vistos al segundo más visto y así recargo y veo como por ejemplo ahora la primera fila ha cambiado ahora por ejemplo voy a decir mantener últimos estrenos los últimos estrenos en principio son los cur los últimos cursos que hayan entrado en la base de datos entonces puedo venir aquí últimos estrenos ahora esto es cierto y digo select el from cursos limits 7 orber by identificador descendiente no sé si en esta tabla es identificado porque esta tabla es antigua y no mira como la tabla es antigua es id este la nomenclatura identificadora estoy usando desde hace dos años antes se usaba aquí de la ley pero bueno si ahora uso identificador sí pues mira te lo voy a decir sí sí no hay ningún problema porque de hecho fíjate que hemos estado usando hasta ahora identificador aquí voy a salir y no hay ningún problema lo que te voy a contar yo admito que va a ser muy random quiero decir que no te voy a dar una razón que te diga cualquier razón más guapa sino que sabes debe haber una razón que vas a decirlo después me da razón pero bueno pero va a ser una razón muy como yo suelo decir muy grata lista no si sabes lo que son los avalistas vale pues los que cogieron un diccionario una palabra y saludada pues entonces la última aplicación que he hecho ha sido una es una aplicación de hecho a nivel empresarial con la cual llevo dos años trabajando y es una aplicación que provenía de una base de datos desarrollada por otro desarrollador que no era yo entonces segunda en un segundo porque esa aplicación vamos a ver una aplicación empresarial que provenía de una base de datos desarrollada por otro desarrollador y la razón por la que te estoy contando esta historia con tanto detalle es porque en los casos en los que una persona empieza un proyecto y otra persona lo continúa y lo acaba son delicados o también los casos como te puedes imaginar en las que diferentes personas colaboran en tiempo real el mismo proyecto aparte en los casos en los que la primera parte del proyecto la hace una persona y la segunda parte del proyecto la hace otra persona son especialmente delicados porque las personas que trabajamos en informática tenemos la muy mala costumbre de que lo nuestro nos parece lo mejor y los de los demás nos parece una exacto como en todos lados entonces tenemos la mala costumbre de que cuando recibimos la información de una persona anterior tenemos esa mala predisposición a esto no vale esto vale hay que rehacerlo porque hay que rehacerlo como yo quiero hacerlo evidentemente entonces la primera parte de ese proyecto la había desarrollado una persona con la cual yo no había colaborado antes pero esa persona resultó que tenía metodologías más más compatibles con las miradas de las que yo pensaba porque siempre que trabajas con una persona pues es bueno a personas de otras metodologías con lo cual pues tenemos que llegar a acuerdos vale tenemos que llegar a un terreno común entonces la base de datos esa persona la había diseñado del libro del libro quiero decir que para las herramientas que había tenido había hecho lo mejor que había podido y entonces yo también pues en pro de muchas cosas en pro de respetar el trabajo de esa persona en pro de la empresa donde estaba ahí está esa base de datos tras tocarle lo menos posible el cómo habían estado funcionando lo que hice es intentar respetar al máximo posible el trabajo realizado y evidentemente empezar a construir a partir de ese trabajo vale entonces una de las cosas que cuando entré a esa base de datos me resultó curioso porque no es sólo que tú pongas y de que tú pones y de yo como veis aquí solía poner y de y prácticamente una gran cantidad de barbaridad de gente de envase de datos pone y de pero esta persona una cosa que es que ponía identificador ningún problema porque técnicamente y de es la contracción de identificador nos aparece a todos ponemos y de para no tener que escribir tanto entonces básicamente me tuve que hacer a la metodología de poner el identificador en lugar de i d y como es una base de datos y una aplicación con la que llevo trabajando dos años de forma ininterrumpida pues se me ha quedado la costumbre de poner identificador en lugar de poner y de y es la historia y por eso te digo que es un poco random porque porque ya ves quiero decir porque dices bueno podría ser utilizado identificador en esa aplicación y luego en cualquier otra aplicación que hubieras hecho pues sí por supuesto vale pero bueno también es cierto que no no es que en absoluto y de ser una mala palabra identificador sea mejor palabra que hay de que son al final las dos iguales de hecho y de probablemente es mejor alternativa porque escribe es menos vale y es una palabra que explica perfectamente cuál es su significado sano tiene pegas para para entendernos pero sin embargo pues yo también soy de la de la filosofía mediante la cual pues todas aquellas cosas que te van ocurriendo en la vida te enriquecen y todas aquellas cosas que te ocurren la vida que te enseñan y te afectan para mejor lo que haces a partir de ese momento entonces de alguna manera pues he cogido identificador como nueva forma estándar de poner el campo y la identificación y ya te digo es muy random vale no o sea no te voy a decir una razón de nuevo porque he descubierto que es mejor para no sé que no sé cuántos no no no es esa razón al menos no en este caso es simplemente por eso y de hecho si saco de alguna base de datos tablas antiguas verás que en todas partes ponía aire y ahora pues me da por poner identificador pero realmente puedes poner lo que quieras ahora a continuación lo que vamos a hacer es vamos a verlo por aquí esto que es a detalles ballet ok ok ok vale ahora tengo lo último es estrés pero esto que ha sido order by haití vale descendiente ahora por ejemplo pongo algunos cursos que te pueden interesar y lo que voy a hacer es select all from random no voy a hacer todavía una recomendación contextual sino que lo que voy a hacer en este caso es y de hecho no lo sé de memoria es mysql order by random es decir quiero que me saques unos cursos aleatorios entonces vamos a éste order by rand vamos a ver entonces pues voy a esto por ver by función round límite 7 es esto lo que quiere decir es que yo me voy a la voy a la tercera columna la tercera fila perdón y veo que tengo unos cursos la suscripción no es un curso pero a continuación recargo y tengo otros pero a continuación recargo y tengo otros y a continuación recargo y tengo otros vale con lo cual y luego una cosa que desgraciadamente no tengo en esta base de datos al menos no tengo es la categorización no tengo categorías no no no vamos a ver verás te cuento pero vamos a hablar de esa cuestión esa cuestión es mucho más interesante de lo que en un principio te puedas imaginar a ver para explotar un poquito la cabeza al enress te aviso por si quieres tomarte algo vale perfecto me alegro y te voy a contar una movida que tú vas a decir madre mía esta película me está contando pero ahora verás que toda la película que te voy a contar tiene una razón de ser tuvo evidentemente sabes qué cuando en una tienda online haces clic en un producto a partir de ahí en otros productos que te pueden interesar los productos que te pueden interesar dependen del producto que tú has visualizado esto es vox populi vale y aunque ahora mismo igual no sepas todavía internamente eso cómo funciona pero evidentemente te has fijado en que eso funciona también te habrás fijado en esto que te voy a decir a continuación es preocupante y es que bueno yo por ejemplo hace 10 años bueno se ha visto lo que hago yo en mis redes sociales calaveras que tengo intereses dentro del mundo de la robótica entonces hace pues cosas de diez años o 98 no recuerdo un amigo mío me dijo oye voy a encargar una serie de piezas y creo que era alí babá no no por donde al típico al circo portal chino me dijo son las típicas piezas que no encuentras aquí en españa entonces o al menos en aquel momento ahora sí y me dijo oye de paso que pido quieres que te haga pedido a ti también y le dije pues mira me harías un favor si me haces el pedido y cuando llegue te lo pago te lo pago ya y ya está y el tío me dijo mira te voy a pedir este producto vale y yo hice clic en el producto lo vi en la pantalla lo abrí en la pantalla además yo en aquel momento incluso me acuerdo de que no estaba aquí en españa estaba afuera y lo dije afuera para volver en un mes lo cual dije pídemelo y entre que entre que el pedido llega yo vuelvo a españa ya lo recojo entonces me acuerdo que yo lo abría en la pantalla para confirmarle para decirle si es correcto pide ms me acuerdo que el mes siguiente y esto te ha pasado a ti y nos ha pasado a todos el mes siguiente las recomendaciones de productos que bombardeaban con ese producto que yo decía que aprovechase que ya lo he comprado ya no me lo sigáis enseñando sé que ya lo he comprado estáis perdiendo el tiempo vale y te estoy hablando de hace 8 9 ó 10 años pero ahora si te fijas hace ya unos cuantos años que las recomendaciones de productos se han vuelto mucho más inteligentes y es vox populi también que todo el mundo tenemos la mosca detrás de la oreja que hay veces ya te imaginas lo que te voy a contar que hay veces que tú por ejemplo estás con un colega le dices le dices oye me tengo que comprar calcetines ya continuación a press al teléfono móvil y césar y publicidad de calcetines y tú te cagas en la madre que parió a android y apple porque dices cabrones me estáis escuchando y yo no quiero que me escucháis vale y no y no niego que te escuchen porque de hecho te escuchan pero te voy a contar cuál es la mecánica que se utiliza para recomendaciones de productos aparte de que efectivamente te escuchan quiero decir yo tengo siri en el teléfono y de hecho me lo he puesto en alemán precisamente para que no me salte de vez en cuando pero a mí me pasa que yo estoy de vez en cuando en clase estoy hablando y no mencionó a sir y ya no digo oye si no si no que o sea no mencionó está hablando de cualquier cosa y de repente me salta así y me dice hola qué quieres yo no quiero nada saber estoy dando clase pero pero eso es señal de que está escuchando constantemente y claro que está escuchando constantemente vete a saber para qué está escuchando todos sospechamos que los teléfonos nos escuchan para saber que queremos comprar pero aquí a ti te ha pasado porque a todos nos ha pasado que dices vale si estás con un colega ya tu colega le dices quiero comprar calcetines y automáticamente en el móvil que aparece publicidad de calcetines pues bueno pues vale pues montar poco tiene mucha ciencia es que el móvil te está escuchando y ya está pero cuántas veces no te ha pasado que tú estás pensando pensando me tengo que comprar unos calcetines porque lo que tengo ya están viejos y no se lo dices a nadie y automáticamente te aparecen anuncios de calcetines en el móvil y eso sí que acojona porque claro dice saber que el móvil me escuche pues bueno pues vale pues no es que no me preocupe pero era de esperar pero que el móvil me lea la puñetera mente es algo no me preocupa bastante más vale entonces te voy a contar cómo funciona te voy a contar cómo funciona y una vez que te cuento cómo funciona es cuando empezamos a aplicarlo aquí a esta base de datos vale [Risas] me voy a retrotraer y te vas a creer que me estoy montando una película de espías y de conflictos internacionales pero ahora verás que realmente no esto has visto la película de snow then te recomiendo verla es muy light es muy light está todo muy curado y las partes más duras están quitadas evidentemente por razones obvias pero aún así lo bonito y mágico que han dejado pues sigue siendo interesante de ver entonces en el año 2000 2001 perdona el día 11 de septiembre pues tuvimos los atentados a las torres gemelas eso para el gobierno estadounidense salvo teorías conspiracionistas de que el tratamiento organizaron ellos pero salvo ese tipo de teorías pues fue como una especie de patada en los porque fue como mirarse que han colado en tu propia casa porque no es que venían de fuera es que incluso aprendieron a pilotar en escuelas eeuu entonces cuenta la leyenda que a partir de ese momento la cia y la enee se atuvieron carta verde para para inspeccionar la navegación y los teléfonos móviles no sólo de todo eeuu sino de cualquier parte del mundo y cuenta la leyenda que desarrollaron un algoritmo para poder realizar un seguimiento automatizado a millones de personas de forma simultánea mediante el cual cuando ellos detenían a un terrorista lo que hacían era averiguar cuál era su historial de búsqueda y empezar a detectar patrones mediante cruzar los destructores de búsqueda de fermina hemos detectado que si el el terrorista ha comprado el producto ha comprado lo que se dinamita y luego ha comprado el producto b y luego habéis dado la página fe y luego ha visitado el portal de a continuación ha cometido un atentado con lo cual que hacían en el momento en el que visitas la página a b y c ya que tienen fichado y en el momento en el que entras en el portal vete tira en la puerta de abajo acaso te lleva detenido que que luego se equivocaron unos cuantos casos bien pero de vez en cuando pillan a alguien les vale la pena entonces qué ocurre pues que ese algoritmo que empezaron a implementar desde el 2001 hasta el 2005 aproximadamente en él desde el 2005 hasta el 2010 es el algoritmo se convirtió en vox populi ya empezaron a haber filtraciones que decían que hoy el ego que también se está haciendo esto y a partir del 2010 las grandes corporaciones tales como google y tales como apple y tales como microsoft se inspiraron en ese algoritmo para desarrollar para adaptarlo a un algoritmo de venta de productos de venta comercial de productos a usuarios entonces qué ocurre pues que cuando tú ves un anuncio de calcetines porque tú has pensado en tu cabeza en calcetines resulta que tú como ser humano individual eres impredecible o crees que eres impredecible pero como parte de una masa te comportas según ciertos patrones entonces qué ocurre pues que el sistema las bases de datos dicen vale varón de una edad de entre 20 tanto y tanto de clase media vive en tal zona según en su historial de búsqueda tiene tales costumbres entonces claro ellos detectan que dicen mirar este tipo de usuario en el momento en el que compra una camisa y un pantalón a continuación el mes siguiente es bueno casa tienes porque porque tras analizar centenares de millones de personas comprando hemos llegado a esa conclusión entonces claro tú no te has dado cuenta pero tú el mes pasado y el anterior te compras una camisa y unos pantalones con lo cual a continuación porque estadísticamente a muchos de nosotros nos pasa nos damos cuenta que dices como la más tengo la camisa nueva tengo el pantalón nuevo y qué de calcines tengo pero pero eso no piensas tú lo pensamos una gran mayoría de gente con lo cual tú crees que te han leído la mente enseñándote anuncios de calcetines pero lo que ha ocurrido es que simplemente te han aplicado el mismo patrón que han obtenido de millones y millones de muestras de compra entonces qué ocurre que evidentemente esto que te acabo de contar lo podemos aplicar a esta base de datos con la que estamos ahora te cuento cómo pero más allá de eso las consecuencias sociales de esto que te acabo de contar son importantísimas son brutales nosotros lo vamos a aplicar ahora mismo a una cuestión de desarrollo del software para recomendación de productos para decidir si te has si has visto este producto probablemente te interesa este otro vale para algo muy inocente digamos pero ahora te cuenta que si ellos analizan los patrones de búsqueda de millones y millones de personas con la misma y ellos lo saben todo es donde nosotros porque no solo saben lo que compramos sabemos lo que comemos saben lo que comemos saben lo que facturamos y problema saben las enfermedades que tenemos eso quiere decir que si ellos analizan lo que yo como y el estilo de vida que yo tengo y analizan todo eso ellos pueden saber antes que yo las enfermedades que corro el riesgo de desarrollar entonces estamos en un momento y esto la gente no se está dando cuenta estamos en un momento en las corporaciones ven nuestro futuro pero no nos lo dicen que solo quedan para utilizarlo ellas pero ven nuestro futuro de una forma que nunca antes en la historia de la humanidad ha ocurrido entonces yo aparte de que antes te he recomendado ver la película de este desnuden te recomiendo ver si no la has visto una película que se llama es los 90s maragata acá es la has visto por curiosidad vale pues realmente nos quedan nada para estar en gattaca en la película de gattaca en la película de gattaca lo que ocurría era que cuando un niño nacía mediante un análisis de adn se le predecía si tenía tendencia a desarrollar enfermedades o no tenía tendencia y entonces lo que ocurría es que con una persona concreta que era a ethan hawk digamos el sistema detectada que iba a tener enfermedades y por tanto el gobierno no le pagaba estudios o no lo promocionaba sino que lo condenaba a trabajos de baja cualificación cuando resulta que en la película pues la necesidad equivocado y no ocurría eso bueno o no porque no sabemos cómo acaba la película pero bueno lanzaremos lo que ocurrirá en el futuro claro ten en cuenta que las corporaciones ahora mismo como google por ejemplo tienen esa información de nosotros o sea pueden saber qué probabilidades tenemos de desarrollar unas enfermedades u otras para que lo están utilizando para anunciarnos unos productos u otros y si el día de mañana venden información a pequeñas empresas y si venden la información de forma que una empresa a la que tú pidas trabajo pueda obtener un informe de ti y pueda saber mediante tus hábitos y tus búsquedas y tu estilo de vida qué probabilidades tienen de desarrollar una enfermedad y eso existe ya la información por eso digo que las implicaciones son que nosotros lo vamos a utilizar para un fin muy inocente pero las implicaciones de lo que te acabo de contar son muy importantes y lo peor de todo lo que pasa es que ahora la pandemia ha parado un poquito las cosas pero lo peor de todo es que esto que te acabo de contar ya existe entonces si buscas lo que te voy a decir es si buscas sign and beach loader esto es que es el gran hermano chino y yo insisto mira por ejemplo te digo noticias de la bbc o noticias de the gardian 7 yo te doy la palabra clave para buscar y tú la buscas y tú buscas la información y tú tú mismo te documentas pero el gran hermano chino es un proyecto que lleva en marcha hace unos pocos años el gobierno chino evidentemente las reglas de privacidad del gobierno chino tiene nada que ver con las de europa a esto ahora mismo no es implantable aquí en europa pero por ejemplo el que han hecho es una ciudad llenarla con 2,6 millones de cámaras que se dice pronto y empezar a realizar un seguimiento a todas las personas de esa ciudad o de esa comarca o de ese país ya partir de ahí hacer lo siguiente insisto yo te lo resumo y tú te metes aquí y tú mismo buscas la información pero si tú mismo miras lo que te voy a contar pero lo que hacen es lo siguiente que ocurre porque resulta que en china hay mucha gente hay muchísima gente y en un momento dado imagínate que los servicios sanitarios se colapsan es decir tú vas a urgencias o pides cita al médico y hay mucha gente para verifica al médico entonces lo que ocurre a continuación es que gracias a toda esa información que han recabado de ti lo que hacen es que saben si tú han sido por ejemplo el supermercado y saben si tú y tu dieta ha estado equilibrada o tu dieta no está equilibrada o si has abusado de determinados tipos de productos entonces qué hacen pues lo que hacen es decir mira vamos a ver primero me dices que tienes cirrosis en el riñón vale entonces yo lo que hago es analizar qué trabajo quieres es decir según lo que ganes y por tanto según lo que aportes al sistema me valdrá más la pena curarte o no y luego a continuación lo cruzan con otros tipos de datos y dicen no vamos a ver tienes cirrosis entonces han detectado que tu estilo de vida ha sido saludable con lo cual el gobierno dijeron o tú te has cuidado mala suerte has desarrollado una enfermedad no pasa nada yo invierto recursos en curarte por qué pues porque sé que eres una persona que tiene buenos hábitos hacen de mala suerte pero tiene buenos hábitos ahora bien como yo tengo las cámaras de cada supermercado en el que ese estado tiene fibrosis pero espérate que estoy viendo que tú has abusado del alcohol y quieres que te cure no perdona o sea si tú no te has cuidado a ti mismo ahora no me exija es que te cura o que te cure o no es que no me exige es que te cure sino que te pongo a la cola o sea te pongo más allá en la cola y voy a curar primero a aquellos que según mi baremo de méritos pienso que se lo merecen más esto insisto es factible en china porque los derechos sociales social nada que ver con los de europa pero claro pero ya sabes lo que dicen de cuando veas las barbas de tu vecino cortar pon las tuyas a remojar vale otra cosa insisto todo esto que te estoy contando por favor lee mal el dt lo y tú mismo lo vas a ver educación y en educación e insisto por favor lelo en educación es donde estamos ya directamente en gattaca y no te esperando el futuro en china esto ya es una realidad y es yo he detectado que por ejemplo tú como persona joven tienes una serie de hábitos no solo he detectado cuáles son tus calificaciones sino detectado si tú vas a la biblioteca a estudiar o te gusta mucho la fiesta he detectado si consumes drogas o no las consumes he detectado si tú eres una persona responsable o no eres una persona responsable así que como gobierno chino yo tengo 500 mil plazas en universidades pero tengo 500 mil plantas en universidades pero tengo 10 millones de estudiantes que quieren estudiar en una universidad qué es lo que hago analizo no sólo tus notas como aquí sino analizó toda tu vida y lo que voy a hacer estilo gattaca es vamos a ver si tú tomas drogas yo creo que tu mente depende el tipo de drogas que tomes con qué afluencia con qué asiduidad pero yo detecto que tu mente puede estar perjudicada o tu salud puede estar perjudicada o tu rendimiento puede estar perjudicado en los próximos años no me vale la pena a pagarte una carrera universitaria como gobierno si estoy detectando que mi inversión la vas a malograr ahora bien yo he detectado que tú eres una persona que visita crece en guantánamo gesto al dimitido pero que vista de vez en cuando la biblioteca o por ejemplo o por ejemplo yo he detectado que tú has buscado en internet como suicidarse entonces yo como gobierno digo te voy a pagar yo tiene una carrera que me cuesta una pasta para que luego te me suicidé el año siguiente ni de coña prefiero pagarse la a alguien que sé que luego porque una pagar una carrera a alguien como gobierno es una inversión o sea tú pagas la carrera a alguien para que luego tenga un trabajo en el que gana mucho dinero para que para impuestos que cuando te están regalando la carrera es una inversión al fin y al cabo y esto insisto una vez más tú pon big brother chain y empieza a leer vale entonces lo que te quiero decir es que las implicaciones sociales morales éticas de toda esta recopilación de información y para qué se puede usar esta información van a ser mucho más duras mucho más fuertes de lo que nosotros vamos a hacer aquí ahora mismo que va a ser simplemente si te ha gustado este producto pues también te va a gustar este otro producto vale sigamos entonces te voy a contar una cosa yo ya sé que todos en un momento dado nos quedamos con esa coña de ojo ojo verás hay otra cuestión si vamos un pelín más allá de esa cuña resulta que la cuestión no es cómo detectar a los chinos facialmente si son todos iguales o aparentemente son todos iguales que evidentemente no lo son pero no hay una otra comida después que es si las camas están arriba si yo giro la cara como saben que soy yo la respuesta y te lo vuelvo a decir otra vez todo esto que te estoy contando tú por favor simplemente lee no tienes que hacer nada más que leer y documentar te el gobierno chino en previsión de esa incidencia lo que ha hecho es que las cámaras no sólo tienen software de reconocimiento facial sino que tienen software de reconocimiento corporal y como es el software de reconocimiento corporal no te reconocen por la ropa que llevas porque la ropa puede ser igual aquello a otras personas te reconocen porque analizan cuáles son tus movimientos digamos esqueletales cuáles son tus movimientos corporales y cada persona tiene una forma diferente de moverse o sea no te reconocen solo por la cara te reconocen por cómo te mueves y por cómo te mueves también pueden saber si estás bien si estás mal si estás triste o sea la cosa va mucho más allá en cuanto a las noticias te lo digo porque eso le ocurre a todo el mundo te voy a contar una cosa esto que te voy a contar no aparece en la película de snowden pero si tiras un poco de hemeroteca lo puedes encontrar fácilmente y más ahora que tenemos internet cuando edward louden pidió asilo en rusia hasta que se lo vieron estuvo unas cuantas semanas no sé si algún mes en el aeropuerto de moscú ni le dejaban volver ni le dejaban entrar sino que estaba asilado entonces el bern llamo a una serie de abogados y hizo una serie de reuniones en las salas del aeropuerto ciertas partes de esas reuniones trascendieron a la prensa y me acuerdo y me acuerdo en aquel momento que los periodistas yo lo siento mucho no sé si igual yo que sé tú no pero si tienes algún familiar que eres periodista que es periodista yo que se vale pero lo siento mucho pero les tengo mucha tierra y te digo por qué en aquel momento trascendió a la prensa la espera de la prensa informaba de si le van a dar asilo político o no y dijo y la defensa dijeron fíjate qué paranoico es edward snowden que a los abogados con los cuales se ha entrevistado en el aeropuerto y esto insisto si tira de hemeroteca lo puedes encontrar fácilmente les ha obligado a les ha cogido el móvil les ha desmontado el móvil en batería y móvil se les ha quitado la batería cada una de las piezas del móvil no las ha desmontado con destornillador de los haces montado en piezas cada una de las piezas las ha envuelto en papel de plata y esas piezas las ha metido dentro de un congelador más cara porque el congelador es aislante de ondas electromagnéticas es claro los los los periodistas decían fíjate esto te lo vuelvo a decir por tercera vez lo puedes comprobar en hemeroteca los periodistas decían fíjate qué paranoico que es edward snowden que hace esto yo claro cuando leí esta noticia decía para ver pedazo de el bears no ven no es paranoico el ver es nube es un espía y si una espía que desmonta el móvil lo envuelve en papel de plata y lo mete en un congelador tú porque crees que será porque ese tío es paranoico o porque trabaja de eso vale entonces fue algo como como surrealista decir periodistas o sea en lugar de estar riendo os deberían estar preguntando por qué esa persona hace eso porque ese tío no es un tío cualquiera ese tío es un tío que ha trabajado diez años de eso ocurre igual cuando es ver snowden empezó a hablar empezó a decir qué los países europeos colaboraban muy activamente con la enee sea en el sentido de que cuando la n sea quería algo sólo tenía que pedirlo y automáticamente cualquier gobierno europeo se lo daba sin más preguntas quiero decir sentencia decía quiero información de esta historia de notorio cualquier gobierno europeo no decía no no perdona perdona persona sorda no es mío y tiene derechos no los gobiernos decían toma ya ni te pregunto para qué lo quieres tú toma pero en aquel momento que me acuerdo en el momento gobernaba rajoy press que da igual quien gobernara porque hubiera sido lo mismo exactamente si rajoy que cualquier otro que izquierda a derecha da igual es lo mismo entonces yo me acuerdo que en aquel momento salió del sabio en señora merkel y dijo esto es una vergüenza esto no se puede consentir es total me acuerdo que salió creo que era hoy and creo que no era patrón todavía y dijo es una vergüenza esto hay que investigarlo cómo puede ser y rajoy estaba calladito entonces yo me preguntaba pero los periódicos no hacían más que sacar a los diferentes gobiernos europeos poniendo el grito en el cielo por esa filtración y claro yo decía nadie se pregunta por qué rajoy no dice nada de esto acá lo que ocurrió pues lo que ocurrió es que poco después salió que el gobierno español era de los que más activamente participaba en la flexión de datos ojo ojo mano pero cuidado porque parece que esté hablando mal de rajoy cuando realmente hablo mal de todos pero pero la cuestión está en que por lo menos rajoy lo que hizo fue callarse porque un poquito más después se supo y se filtró que los gobiernos todos empezando por el alemán y por el francés habían cedido datos de forma salvaje con conocimiento de los máximos dirigentes con lo cual habían sido unos pedazos de hipócritas de salir en los medios diciendo no esto no hay derecho esto como es posible cuando ellos mismos sabían que se estaba haciendo pero claro de cara a la galería’ tenían que hacer como que no sabían nada ya que que dentro de lo posible o sea dentro de las opciones por lo menos hay que alabar a rajoy que dijo mira va a salir y decir una mentira para eso no digo nada para eso me quedó calladito sabes y si nadie me pregunta yo tampoco responde antes que salir y hacer que el ofendido cuando realmente poco después lleva a salir que también estaba en el ajo vale entonces lo que te quiero con esto y todo esto que tengo que contar por favor buscarlo ya no tienes que hacer nada más que buscarlo y decir que no es una película que me haga inventar sino que lo puedes buscar y tú lo mismo lo puedes comprobar por esto digo que cuando en lo más comentado cuando las noticias parece que no arrancamos un poquito más allá de la coña de como el software los va a reconocer estos chinos son iguales y realmente hay mucho más allá que rascar pues en el agra media de noticias hay hay mucho más que rascar y nos quedamos muchas veces de la superficie cuando cuando son noticias que nos interesan dices no no no nos quedemos con la coña que esto tiene mucha más miga de lo que parece pero bueno por si esto que te había contado ya es como para que explote la cabeza a continuación te voy a contar otra cosa para que también veas para que también sepas cómo podemos aplicar este tipo de tecnología a la recomendación de pregunté productos dentro de las múltiples formas de cómo hacer para que el programa sepa si alguien ha visto si alguien ha visto este curso a continuación qué curso le va a interesar una de estas tecnologías es la inteligencia artificial entonces mediante inteligencia artificial hay múltiples niveles hay múltiples formas de programar inteligencia artificial vale pero hay una muy sencilla que es la siguiente y a continuación lo que hago es que realizó un proceso que se llama entrenamiento de la inteligencia artificial y yo lo que hago es analizar la persona que ha visto este curso a continuación que otros cursos ha visto y me apunto en una tabla cuando una persona ha visto este curso que porcentajes de probabilidad hay de que vea otro curso después pero la probabilidad es simplemente porque yo me leo ido apuntando es decir porque cuando he hecho clic y luego he hecho otro clic y luego he hecho otro clic lo que ha ido es apuntando a quien digamos quien ha hecho que después quien ha hecho clic en una cosa quien haya hecho clic en otra para ello incluso si nos metemos en analytics podemos utilizar diagramas ahora mismo se me acaba de ir el nombre del diagrama pero un nombre el diagrama este que te voy a enseñar ahora mismo en la pantalla pero si nos metemos por ejemplo en google analytics y nos metemos en comportamiento y nos metemos en flujo del comportamiento verás que por ejemplo google con google analytics ya hace años que está utilizando este tipo de información es decir lo que hace es esto que estás viendo aquí lo que hace es analizar cada persona después por ejemplo mira a alguien que ve el curso de payton a continuación que ve destacar el tráfico desde aquí pues lo que hace es ver verás me ha salido esto últimamente me lo hace desde aquí lo que hace es ver las viñetas hay cursos y a continuación tú fíjate que luego ve el curso de inteligencia artificial el curso de arduino y el curso de desarrollo de aplicaciones con fe con lo cual qué es lo que hago en este caso digamos que google ha recopilado esta aplicación esta información por mí pues por ejemplo si el defecto que alguien ha visto el curso de payton aquí en esta aplicación le voy a enseñar a continuación en primer lugar el curso de inteligencia artificial luego el curso de arduino y luego el curso de aplicaciones con ci de hecho hay diez páginas más y luego y luego el curso de java y luego el curso de aplicaciones web y luego el de estructuras de datos es decir lo que puedo hacer yo que en este caso me lo está haciendo google con google analytics es que puedo analizar una persona osea no una persona sino una gran cantidad de personas estadísticamente después de ver un producto que otros productos han visto vale y de esa forma es una forma sencilla y fíjate qué es lo que te estoy contando quiero decir que no invade la no invade digamos exacto la intimidad de mis usuarios quiero decir que podría utilizar técnicas bastante más sucias de averiguar cosas del usuario y sin embargo no lo voy a hacer te voy a contar una técnica sucia que podría utilizar y sobre todo te la voy a contar para que te des cuenta hasta que hasta qué punto es fácil averiguar cosas de personas sin que esas personas se den cuenta vale pero es algo que filosóficamente como te digo además muchas gracias verás atención voy a voy a programar una pequeñita aplicación la voy a programar aquí en app admin en brackets y algún archivo nuevo y para probarlo y proyecto de bad min y registrador punto php en este proyecto bueno realmente los php pero vale en este proyecto en este proyecto creo que tengo creo que tengo creo que tengo jquery lip vale entonces aquí en el jefe boya meter un script src 2 live jquery ahora voy a meter un script a los havas que es un poquito olvidado y de contenedor también sería una cosa que igual te lo vuelvo a repetir te explotado en un poquito la mente de lo sencillo de hecho al enseñarte esto y viendo por tu parte lo sencillo que es pero yo creo que vas a poder dar por hecho que te lo están haciendo entonces cuando sobre el documento punto palabras que sencillo que es mouse move cuando mueves el ratón function e y digo en noches en contenedor html y punto page x y punto page y y si ahora me voy a me voy a admin y no me acuerdo como llamado a este archivo el registrador php yo era muy buen ratón por pantalla y fíjate que con esa sencilla línea de código estoy registrando las coordenadas x e y del ratón en la pantalla si yo registro esas coordenadas que los estoy mostrando gran pantalla para que lo veas pero esto quiere decir que te las pueden estar registrando tú ni te enteras y no se me a revisión o me ha saltado ningún permiso aquí arriba no lo hace automáticamente si yo puedo averiguar eso yo puedo meterlo en la base de datos son muchos datos y pero bueno para eso está la vista está y yo puedo analizar esos datos y yo puedo sacar patrones y yo por ejemplo si tú mueves el ratón más rápido o lo mueves más lento o lo mueves en línea recta o lo mueves en círculos yo puedo saber cosas de ti puede saber si él es joven si eres dinámico si estás nervioso si tienes facilidad con la informática si no la tienes y en base a todas esas informaciones puedo sacarte unos cursos o puedo sacarte otros puedes ir a una persona veo que mueve el ratón a golpes y le tiembla un poco esta persona persona es mayor y yo sé que las personas mayores consumen me consumen más este tipo de producto que este otro puesto enseña el primero yo veo que eres una persona nerviosa como el ratón rápido guardias guardias aparece persona nerviosa joven suelen gustar más es tipo de cursos y claro ahí sí que igual estoy invadiendo un poco tu intimidad porque estoy obteniendo información de ti que igual tú no quieres que obtenga date cuenta de una cosa ahora mismo no te puedo enseñar una cosa porque estoy con un ordenador así que te la podría enseñar si hiciera un experimento con el móvil pero de la misma forma que puedo averiguar la por qué tiene que seguir llegada de la pantalla con javascript puedo averiguar los acelerómetros del teléfono móvil si quieres la persona clase de le enseño es fácil es decir puedo saber el móvil cuando está girado entonces qué ocurre pues que hace poco oí una cosa esto me lo dijeron unos alumnos imagino dgr me lo preguntaron hoy hemos oído esto esto es posible y viejo el nuestro posible que en los teléfonos móviles el propio fabricante del teléfono móvil como está mal visto que te espíen tu navegación móvil lo que hacían era analizar tus acelerómetros y entonces habiendo tratado que cuando la gente ve porno el móvil está inclinado en una cierta inclinación concreta y no hace falta que te diga el porqué pero está sujeto a una serie de vibraciones concretas entonces claro de esa forma sin necesidad de averiguar el historial de búsqueda son capaces de estimar cuándo estás viendo porno o no y por tanto cuántas veces al día a la semana o al mes consume ese tipo de contenido y por tanto en base a eso te pueden publicar una serie de contenidos u otros o pueden darles una idea de sus necesidades tu perfil tú lo que sea vale claro es que eso me lo dijeron los alumnos y dije ostras es que es tan básico es tan es tan evidente que de hecho incluso me dijeron y me parece una muy buena idea de averiguar qué estás haciendo en base a cómo tienes girado el teléfono entonces lo que te quiero decir es que lo que te acabo de explicar con respecto a la base de datos que es algo parecido a esto de analytics es según lo que han visitado las personas pues supongo que vas a utilizar el tipo de curso es algo muy inocente con respecto a otras muchas cosas que con poco esfuerzo podríamos implementar hay que fastidiarse como ya te digo es una clase bastante conspiranoica la de hoy pero otro digo también vale pero en definitiva es una clase para que te des cuenta de que en otros grupos por ejemplo yo por las mañanas imparto clases en ciclos formativos de marketing ya los de marketing muchas veces cuando sale ese tema se lo cuento porque están interesados en ello desde el punto de vista de la venta de productos pero claro pero les digo bueno pero esto es cursos un informático pero claro a título estoy contando porque has visto lo que nos ha costado programar el mouse move ya porque tú realmente si quieres sí que puedes programar este tipo de cosas y además sin demasiado esfuerzo ya te digo que cuando veas esto de otra hora de intrusión en la siguiente clase cómo se hace lo del acelerómetro de la exprés es que es sencillísimo o sea cuesta más el que se te ocurra la idea de oye con el acelerómetro puedo averiguar esto de mis clientes que programarlo para programarlo es una chorrada realmente pero bueno bueno pues seguimos con esto y ahora lo que queremos ahora lo que queremos es comprobar por cierto que cuando yo hago clic unos segundos después te acuerdas aparece el curso de photoshop de hecho si te acuerdas lo programamos en javascript para que automáticamente cogiera pues curso de photoshop aprende photoshop es un programa y más información y esto lo que hacía era ampliar digamos la información y con esto pues ocurre lo mismo con cualquier curso yo lo que voy a hacer es algo que no hice a parte que esto lo podemos maquillar mejor pero es algo que no hice en su momento que es que por ejemplo puedo ocultar estas estos textos porque ya aparecerán aquí esto que voy a hacer y esto va a ser meramente cosmético entonces cierro por aquí y cierro por aquí esto sí que lo quiero vale y ahora me vengo aquí y a un artículo h 34 y p me voy a así me voy a estilo me voy a estilo vamos a ver vale pues estilo detalle estilo destacado el estilo del pasa fotos pues estilo del artículo vale yo no digo arctic el h3 arctic el h 4 arctic el p y digo display no esto lo que quiere decir es que oculta menos oculta menor no quiere decir que no están quiere decir que no se ven vale interesante interesante porque los están mostrando y no sé si es que igual me hace falta una recarga dura h3 si voy a recargar duro vale sin recargar duros lo siguiente verás cuando yo recargo los navegadores con ellos recargo de forma normal o bien con este botón o bien pulsando el controller o comeré los navegadores muchas veces para intentar ayudarme en la gestión de los recursos no me recargan el css y no me recargan el javascript sino que asumen que lo aprovechan de la caché pero claro cuando yo estoy desarrollando sí que le quiero decir oye recarga me forzadamente el css porque he hecho cambios entonces la recarga dura se hace de varias formas o bien pulsando el botón derecho de recargar y viendo que hay volver a ganar nuevamente o volver a cargar de forma forzada que es mayúsculas command ere o bien pulsando directamente mayúsculas como cr vale entonces mayúsculas como ere o control mayúsculas erre lo que hace es recargar la página pero vaciar la caché y volver a recargar todos los elementos entonces a partir de aquí a partir de aquí pero lo que hago es que hago clic en un elemento y compruebo como que los textos no aparezcan ahí no quiere decir que aparezcan o no aparezcan aquí vale aparecen solo donde me interesa aparecen solo donde yo quiero entonces con esto ahora podemos continuar estilizando tampoco nos va a dar para hacer tiempo es utilizar mucho más pero por lo menos sí que quería cumplir un objetivo de hoy que era específicamente pues eso es esta aplicación y vieras cómo podemos convertirla de una cosa a otra ahora aquí donde pone curso completo yo por ejemplo si yo quiero estilizar un poquito si que quiere utilizar un poquito vamos a ver que tengo en la base de datos duración vale objetivos vale conocimientos previos vale bien no sé esto por ejemplo bien que ocurre pues que yo esta información esta información realmente no la tengo aquí precargada son los cursos de photoshop aprende y lo que sea lo que voy a hacer en este caso es lo siguiente atención lo que voy a hacer es aquí en el artículo de hecho lo voy a pegar en varios lo que voy a hacer es class identificador y en el identificador voy a poner atributo no perdona identificador es igual y ahora sí voy a poner y recuerdas que en este proyecto decide si yo hago esto ahora copio no puedo pegar aire igual porque va a estar oculto puedo pegar lo puedo pegar y ahora si te fijas se inspeccionó verás que en cada elemento hay un identificador que tiene un numerito de hecho si has visto el ejercicio antes del panel de control yo lo que hacía era pasar un identificador para luego poder hacer ciertas cosas te puedes imaginar para qué voy a hacer esto y ahora vengo por aquí me voy al javascript yo lo que he hecho estamos en html efectivamente entonces dentro de que estamos en html yo lo que he utilizado y además lo he puesto en castellano para que sepas que este parámetro me lo he inventado yo porque si uso y de el parámetro y de es un parámetro estándar de html pero si uso identificador y lo pongo en castellano lo que quiero que veas es que es un parámetro que me acabo de sacar yo de la manga me acabo de inventar yo porque quiero que cumpla un uso concreto y no quiero que se confunda con otra para con otro parámetro estándar llamado y de de html vale entonces por eso lo que ha hecho es poner identificador siempre creas que puesto identificadores que puedo ponerlo en galiza es decir puedo poner lo que yo quiera pero claro evidentemente ahora en la programación si yo pongo un parámetro luego en la programación tengo que ese mismo parámetro es lo que vamos a hacer ahora presiona vengo por aquí me voy a js me voy a código y lo que hago es este de aquí vale y digo lo siguiente vamos a ver este parent este paren paren paren find faith no me acuerdo en fine clase identificador bar y de es igual a atributos identificador y ahora un alert que sepas bueno un control y punto el agua que sea menos traumático que sepas que el ide es más si hago esto esto es solo para que lo veas solo para que se vea en la pantalla si hago esto y me voy a la consola vengo por aquí voy a recargar forzadamente vengo por aquí aquí que sepas que el ibex and i find un momento paren h no no no eso de igual es como que pongo si es como que pongo longaniza lo que ponga en un sitio es lo que pongo en otro pero me está diciendo me está diciendo a ver este h 2 h 2 un momento esperas teatro no no no aquí no es aquí no es título de un mes a título aquí aquí esto fuera bar descripción pues bar this punto find identificador y ver es igual a bis punto atributo identificador y ahora con sole punto log para probar lo que sepas que el identificador es más recargamos todo pincho aquí que sepas que identificadores 54 pincho aquí que sepas que identificadores 9 es decir con esto yo lo que estoy haciendo es que me estoy llevando la información del curso y si me llevo la información del curso es que a continuación puedo hacer lo siguiente puedo irme a index puedo irme a las zonas de detalles y aquí en descripción voy a poner dir class en su curso esto lo copió y lo pego lo copió y lo pego lo copió y lo pego ahora de momento no hace nada y ahora lo que voy a hacer en javascript es decirle info curso text aquí voy a poner la info del curso si esto ha ido bien selecciona un curso no no no parece de momento momento h2 h3 las info que está abajo bueno pues no sé dónde ha ido pero fíjate que de hecho pone aquí voy a poner la info del curso o sea en la inspección se ve aunque en el código no porque no sé dónde se ha ido ese y d no sé y dotan a todas por saco pero lo que voy a hacer es que dentro d el estilo de los detalles en detalles en detalles no me acuerdo detalles info curso a 120 recargo pongo [Música] y sigue estando clásico curso por qué por qué por qué pues con esto con esto por la posición absoluta vale aquí voy a poner la info del curso ok no se sabe si allí en el medio del texto vale sí sí de una absoluta arreglado de esa forma entonces ahora [Música]

hace unos días me hiciste un par de preguntas y una de ellas la respondí en la clase anterior que era la pregunta de siempre hp existe algún mecanismo para no tener que repetir por ejemplo la conexión a la base de datos x veces vale pero me hiciste otra pregunta que en la clase anterior no respondí con lo cual hoy llega el momento de responderla entonces es una pregunta de un calado más amplio del que parece de hecho quiero que sepas que esta mañana me acuerdo de ti porque estaba revisando me querían hacer una modificación en una web entonces la modificación se veía bien en pc pero no se veía bien en teléfono móvil entonces he dicho nombre claro entonces antes de antes de flipar no si antes de perder la cabeza por el teléfono móvil que representa el teléfono móvil en esta web entonces hemos ido a google analytics y hemos visto que las visitas móviles a esa web representaban el 74 de las visitas y entonces he dicho vale pues sí que vale la pena queda confirmado que vale la pena romperse hay un poco la cabeza buscando una solución entonces entonces el otro día te preguntaste una cosa que es acerca de la adaptación del contenido a los teléfonos móviles de hecho no sé si no me acuerdo te voy a decir la verdad si me dijiste tú la palabra clave o te la dije yo es decir yo sé que en un momento dado uno de los dos dijo responsive vale vale es que de hecho la palabra no tiene traducción directa al castellano porque la traducción teóricamente buena es responsable responsable pero claro las web no son responsables son responsivas pero responsivas es una palabra que creo recordar que no existe realmente en castellano sino que es una traducción a lo bestia entonces no se traduce literalmente a responsable sino se traduce a adaptativa pero a su vez lo que quiero que entiendas es que este es un término que ya va quedando desfasado y de hecho este término en los últimos años va siendo reemplazado por un término que se llama mobile first y en los próximos años yo creo que todavía tardaremos unos pocos años esto es como el cassette vale que murió en favor del cb pero tardó unos cuantos años en morir y esto es como el cb que está muriendo en favor de los formatos digitales pero todavía hay revés vale no va a morir el día a la noche entonces antes de hablarte de esto antes del arte de cómo se hace el mobile first que el responsive que es la base tecnológica es más sencilla de lo que parece te voy a decir lo siguiente en primer lugar haciendo un poco una retrospectiva y haciendo un poco un análisis de lo que teníamos hasta hace unos pocos años hay que tener en cuenta que el acceso a internet con teléfonos móviles se empieza a popularizar a partir de digamos por defecto una fecha 2010 por redondear mucho refiere es algo que así como internet así como perdona así como la web tiene casi 30 años de existencia pero acceder a la web a través de un teléfono móvil es algo que se hace en los últimos 10 años bien evidentemente cómo han cambiado las cosas en los últimos 10 años no es lo mismo las webs que habían en aquel momento al principio que eran unas webs de tipo web vale no sé por qué me ha saltado el chrome store porque yo no le pedido pero bueno es que son básicamente esto lo que pone aquí no un protocolo para poder mostrar muy webs en un formato que pesará poco y que se vieran los teléfonos móviles de ahí o sea en definitiva de lo que te quiero decir es que en un momento dado pasamos desde que era por ejemplo un 99 por ciento a un 1 por ciento en 2010 por tanto las webs en 2010 se veían horriblemente en un teléfono móvil y existía esta tecnología wap pero que básicamente era para el 1% de la población era como se hacía más protegería que otra cosa claro si vamos viendo ir esto seguro que puedo obtener una gráfica de hecho creo que sé dónde la voy a sacar para ahora te lo digo pero en torno a 2012 es cuando ya empezamos a hablar de un 95 por ciento a un 5 por ciento en torno a 2013 2014 es cuando aparece el término el término responsive que es uno de los que ahora a continuación vamos a hablar entonces la idea de responsive es que la web se adapte o sea responda digamos a los cambios del dispositivo que una misma web porque antes lo que se hacía era en 2012 me vale la pena diseñar una web para el 95 por ciento y otra web para el 5% pero claro eso es mantener dos webs entonces mantener dos webs pues evidentemente es doble de esfuerzo la idea del responsive es que con una sola web se pueda mantener varias webs a la vez varía varios diseños de la web ten en cuenta que en torno a 2010 es cuando aparece la versión 3d css osea css3 css3 incluye una novedad que ahora vas a ver que en las mediáticas media muy importante para hacer responsive pero que fs s3 aparezca por 2010 no quiere decir que automáticamente todo el mundo se tiene en plancha quiere decir que las novedades han ido implementando se popularizándose a lo largo de los siguientes años entonces a continuación te voy a hacer una demostración de responsivo ya crear por aquí una pequeña carpeta y responsive vale voy a crear aquí con brackets un nuevo archivo y dejarlo todo aquí dentro el archivo lo voy a guardar vamos al escritorio vamos a ir al curso aplicaciones web vamos a ir a response y voy a guardar como index 1.7 ml de momento de momento está ahora mismo no llevarle hb entonces hago una html a un head a un body vale aquí en el body se hace rápidamente un main voy a decir esta es la parte principal de la web entonces ahora me voy aquí al head en el head creó un style y yo por ejemplo ahora podría venir y decir body como html y digo background gray y ya nada más y en el mail vengo por aquí y digo background white wifi 500 píxeles de momento y margin auto y lo que voy a hacer también ahora sí es decirle que height es cien por cien y por tanto esto es height cien por cien así que ahora ejecuto esto en un navegador y lo que tengo es esto vale lo que tengo es una web que está centrada en la página y tal pero el problema el problema viene cuando si yo por ejemplo le digo que esto es de 800 píxeles la web se ve así vale fíjate que yo la amplio y crece bien se va adaptando pero qué es lo que ocurre cuando yo hago que esta web sea más pequeña de los 800 píxeles pues que no se logra aquí abajo pero pues no cabe evidentemente esto es lo que sería algo así como digamos muy entre comillas un formato de móvil por cierto quiero que sepas que es una de las pequeñas joyas escondidas que lleva el chrome que si yo pulso aquí inspeccionar eso has visto que hay por ahí aquí arriba o pequeño botoncito que es el device y eso me permite simular cómo sería esto en un teléfono móvil como pues en este caso iphone vale esto pues es una chorrada villa que hace años mucha gente recurría a otro tipo de emuladores pero ahora no hace falta bueno pues el caso es que lo que está claro es que esto pues se adapta en cierta forma pero más allá de ciertas anchuras no se adaptan entonces a continuación se puede poner una super etiqueta que éste es eso tres media sí pero aquí está a una plantilla vamos a esta vez aquí puedo esta plantilla fíjate que esto y comporta usar css como hasta ahora nunca lo habíamos usado porque la meta etiqueta media incluye al resto de etiquetas siempre nuestra vida en css si ha sido así etiqueta contenido pero ahora la etiqueta contiene a otras etiquetas entonces digo media screen lo cual quiere decir que hay otro media por ejemplo que sprint que es que ocurre cuando en lugar de ver una página web en pantalla la voy a imprimir es algo que no era muy especialmente famoso y ahora lo es menos porque claro una situación actual pues cada vez se pide imprimir menos para que la gente toque menos papel vale no sólo por el medio ambiente sea por el tema de los virus ideal pero existe para el caso que existe entonces yo digo si media screen y min guys y la anchura mínima es 800 píxeles por qué pues porque aquí puesto 800 vale en este caso me aplica esto de aquí pero pero si media screen y max with 800 píxeles ya max width anchura máxima luego anchura máxima quiere decir que va desde 0 a 800 en ese caso quiero que no me lo hagas a 800 píxeles sino que me pongas la anchura del 100% vale entonces yo vengo por aquí recargo y mientras que la web tenga 800 píxeles o más de cerrar esto lo que ocurre es que esa anchura es de 800 pero si yo contraigo la web si yo contraigo la web no sé si ves que no hay scroll no hay scroll ahí abajo vale no hay escuela y bajo y por tanto ahora la web realmente se está adaptando de hecho este que acabo de hacer salvo que hay justo cuando cambio hay un durante un mini segundo ahí hay un pequeño scroll vale que delata un poco pues que igual en lugar de poner a 800 podía por haberlo puesto la estación del 80 lo que se usa como 10 o 20 píxeles de margen pero más allá de eso pues parece que es una buena solución responsible vale evidentemente el repulsivo es mucho más complejo que esto que te estoy diciendo ahora mismo pero esto está haciendo es un principio de responsible aunque hay una parte del responsivo que trata de las anchuras pero quiero decirte que no la cosa no sano para ai es decir yo vengo por aquí a h1 voy a hacer una absurdez o aparentemente un absurdez pero para demostrarte hasta dónde llega el responsivo este es el título de la página guardo recargo pues yo vengo por aquí y yo por ejemplo digo h1 color palabras que va a ser absurdo pero tiene una razón de ser y ahora yo digo h1 color blue entonces recargo y compruebo como en la versión ancha al tubo rojo pero hago así y el título es azul vale rojo y azul eso quiere decir que yo puedo cambiarlo y puedo cambiar la propiedad que me dé la gana por ejemplo algo que sí que sería más aplicable es que igual en la web en formato de pc me gusta que el título esté arriba a la izquierda pero en formato móvil me gusta que el título text align entonces me gusta que cuando la web este rollo móvil pues el título pase al centro están en el centro porque igual en versión móvil pues no se me parece que queda mejor y luego pues aquí quiero que la web esté el título esté ahí arriba pero continuamos para continuamos viendo más posibilidades de responsive por ejemplo yo ahora vengo por aquí y vivo p y d y de un formato formato ps que se implementó y digo mira lipson puntocom que es la típica página donde se puede sacar este texto de pinchar y rellenar pero yo incluso en un momento dado pero no quiero traducir porque además es falso latín con lo cual tampoco entonces yo vengo por aquí y digo mira es que a mí por lo que por lo que sea por las razones que yo tenga este texto me queda bien empecé pero es que en móvil mira el móvil no móvil no quiero ese texto no quiero este bloque no quiero este lo que sea vale pues yo incluso puedo venir aquí y decirle que solo en la versión móvil quiero formato pc quiero display entonces yo vengo por aquí y veo como en el formato pc el texto aparece pero en el formato móvil el texto desaparece porque rosas tienen su razón de ser no digo que lo tengas que hacer siempre pero lo que digo es que en el móvil evidentemente la pantalla es más pequeña que en el pp con lo cual muchas veces lo que se hace es que hay que priorizar vale hay que para el formato móvil quitar aquel contenido qué sobra que molesta y poner únicamente el contenido imprescindible porque sabes que en el móvil pues todo se ve más pequeñito vale entonces todo esto y ahora a continuación te voy a llevar al santo grial del responsivo que es hacer un menú responsivo pues fíjate que se puede hacer con css y de hecho si te fijas lo estoy haciendo con una única etiqueta lo que estoy haciendo digamos también es cierto que al final lo que estoy haciendo es hacer como varios css es técnicamente vale lo que esto no es un bloque de todo el css por aquí un común fuera evidentemente y otro bloque efe ss por aquí vale y de esa forma se duplica se duplica en gran medida el trabajo entonces te cuento una de las cosas que vamos a hacer ahora un ejercicio que vamos a hacer ahora es que para que veas yo lo tengo yo lo tengo y no lo programa yo es la plantilla de wordpress evidentemente pero hay una gran gran cantidad de plantillas de página web que por ejemplo yo en mi web tengo esto tengo el menú de navegación típico pero cuando lo colapso a formato móvil pues se convierte en el bocadillo este de aquí vale entonces ahora a continuación vamos a ver como de hecho eso que es como guau es como dos diseños diferentes de hecho lo son de hecho es cierto que son distintos diseños diferentes pues ahora verás cómo se puede hacer con el css responsible ahora antes de explicarte eso es bueno va a tener un poquito de trabajo pero tampoco de que va a ser nada imposible o sea es algo que te va a dar cuenta de que realmente ya sabías hacerlo vale pero a continuación te quería llamar la atención sobre por ejemplo lo que te he contado esta mañana de que en esta página web que estábamos revisando el 75 por ciento de las visitas a día de hoy son teléfono móvil entonces eso que hace pues eso nos lleva a esto que te decía antes de que en el momento en el que rebasamos la barrera de 2017 se empieza a hablar de el concepto de mobile first mobile first no no hay todavía en el horizonte un mobile only vale pero en algún momento dado igual existe ese concepto pero los ordenadores a día de hoy siguen teniendo su cuota de mercado y la van a seguir teniendo durante durante una serie de tiempo pero mobile first quiere decir que si yo creo una página web hoy desde cero y yo por ejemplo esta mañana he visto una web que no te quedes grabando nada del otro mundo en cuanto a en cuanto a target de cliente y era setenta y pico por ciento de vistas móviles digo a ver yo no lo voy a hacer para que se vea bien en el pc y en el móvil yo voy a hacer una web que se vea bien en el móvil y luego ya veremos si la dato para el pc o sea no va el first vale primero en primer lugar el tank hay otra cosa que te quiero decir y es que se ha anunciado y cuando digo que se han anunciado quiere decir que probablemente otras marcas sigan el mismo camino en los próximos meses si buscas noticias verás que ahora en navidades expone que lo presentan en un par de semanas ar en navidades se podrán empezar a comprar los nuevos mac con rm es decir los nuevos macbook los nuevos portátiles de mac con un procesador no te digo exactamente igual pero con un procesador muy parecido al que llevan los iphone de hecho microsoft ya intentó esto hace cosa de cuatro años no le salió bien igual era demasiado pronto quizás ahora que apple lo va a hacer pues microsoft o yo vamos a intentarlo otra vez vale de la misma forma de la misma forma ipad pro de la misma forma estando aquí board de la misma forma que el magic keyboard pero este este de aquí a este mal de la misma forma hace poco han sacado los nuevos los nuevos ipad pro con el magic keyboard y claro si tú ves el ipad pro con el magic keyboard 16 que parece el stand de un imac visto de lado parece un imac es decir el macbook empieza a llevarlo sobre los procesadores de los ipads los ipads empiezan a tener la potencia y casi el diseño de un imac parece que hay una conversión a un acercamiento práctica y como una especie de unificación e insisto te digo el caso de apple porque en ciertos casos pues lo que hace apple luego unos pocos años después unos pocos meses después pues lo hace también el mundo windows y el mundo linux el mundo pc en definitiva vale entonces con esto lo que te quiero decir es que yo a día de hoy te digo que en principio como te veía yo el pc el portátil al menos sigue teniendo su cuota de mercado pero yo no sé lo que va a ocurrir dentro de un tiempo igual digamos el concepto de móvil tableta mira de vista mañana ha visto una noticia se me ha puesto en mente urticaria pero si es lo que hay pues es lo que hay y espera que ahora no lo encontraré televisión vertical es que no son de la he visto no era no era esta era de 0 esa es esa es la que ha visto sí sí sí mira pero aquí había una imagen sólo fíjate principalmente los consumidores millennials y generación z vale entonces es esto es un televisor que o sea que tiene formato horizontal pero si estás viendo contenido de móvil en la pantalla espera que 90 sabes se vuelve a formato ahí lo tienes a formato vertical de hecho han sacado en el vídeo he visto que había una demostración de una chica que estaba haciendo una especie de ejercicios de yoga y tenía como el instagram puesto en la televisión y claro instagram es en formato vertical entonces lo que quiero decirte con todo esto es que aumenta un poco de urticaria porque estoy harto de decirle mis alumnos que cuando grabé en vídeos lo grabé en horizontal pero claro digo es que encima al final se van a salir con la suya sabes al final por serlo como cada generación tiene el poder de cambiar las cosas pues esta generación va a cambiar el ganar el que el formato de pantalla sea vertical entonces lo que quiero decir con todo esto es que evidentemente lo que nosotros trabajamos como responsivo pues tendrá que ir en sintonía de los tiempos si yo te digo mobile first y yo no sé qué es lo que va a pasar el próximo tiempo es igual en 2022 hablamos de the mobile only es como miran y te igual es este 1% contra pero al revés no lo sé vale lo que te quiero decir que estoy haciendo un poco un timeline para ilustrar t el concepto de que esto ha ido cambiando con el tiempo y de que tenemos que estar vigilantes a cuáles son los próximos cambios vale bueno dicho esto vamos a hacer el ejercicio del menú responsivo vas a ver que es un ejercicio largo pero tampoco tiene mucho misterio o sea no es imposible de hacer empezamos con un menú de lo más normalito del mundo menú que ya sabes que es un nada y dentro del nada tengo un hule y tengo unos cuantos list vale entonces inicio y vamos a ver mira sabes que lo voy a dejar así porque igual hay una cosa diferente nos acordamos que el menú es así de horrible es una lista no ordenada pero a continuación voy a hacer lo siguiente vengo por aquí voy a hacerlo de momento fuera del responsive y digo nada nada cool y digo lista el type es igual a no vale parking 0 píxeles margin 0px él es ok bien ahora el link la cloud lift y además background black color white y es píxeles martín 2 píxeles y yo que soy de momento ya vale ahí está y está un píxel de margen igual tampoco tanto vale una cosita así y prou y ahora pues al nada uno lee punto first child le digo que bordes radios de 5 píxeles 0 píxeles 0 píxeles 5 píxeles igual 15 vamos a darle un poquito más y al last child pues al revés pero píxeles 15 mil 315 píxeles 0 píxeles ok vale pues esto yo ahora lo que voy a hacer es que lo voy a y lo voy a meter aquí dentro esto es el responsible para la versión pc entonces compruebo que ahí se ha desactivado compruebo que cuando pasó a la versión pc pues se formatea en ese plan por cierto recordemos que aquí hay que poner un div style player volve para que deje de flotar para que dejar de frotar y el texto se vaya abajo y ahora lo que voy a hacer es formatear este menú para responsivo o sea para móvil yo vengo por aquí y digo voy a copiar el nada si el azul pero maqbool y 4 recargo vale perder un link le digo guys 100% para crear un black color white padding mayor cuando le he puesto antes 10 peaks y quiero un border bottom un píxel sólido o mira dust se llamaba por ahí y además quiero text align center y además quiero texto transform trans form applegate y entonces tengo ahí un menú en formato pc y tengo ahí un menú en formato móvil vale pero además ahora yo lo que quiero hacer es que él el menú en formato móvil tenga el modo hamburguesa es decir por defecto ocupa lo que ocupa sólo la parte inicial vale ocupa aquí clic y cuando haga un clic pues salen todos los demás y cuando hago de es clic x se volverá a esconder ahí probablemente nos va a hacer falta nos va a ayudar un poquito de javascript un poquito de jquery vengo por aquí pero no más del que ya sabemos quiero decir ahora verás que no va a tener ningún misterio jquery fdn voy a enlazarlo desde de esto desde la nube ahora te cuento por cierto lo del cdn y vemos ventajas y desventajas eso es un poco el modo vago pero si ahora ahora te cuento pero tengo ya esto por aquí y entonces yo ahora puedo hacer lo siguiente vamos a ver le digo height 20 píxeles no sé y le voy a decir overflow hidden vale entonces algo así vale un poquito más a ver 40 vale perfecto hay fenomenal entonces ahora voy a poner un poquito de script voy a decir que cuando el documento esté ready function y por ejemplo voy a hacer lo siguiente bar abierto es igual a falso ya no está abierto entonces cuando haga clic por ejemplo no sé en el cnar pues cuando haga clic en este caso voy a ejecutar una función en el cual voy a decir que abierto quiere decir que height es igual a ios 400 porque lo acabo de inventar entonces digo entonces dijo aquí bis punto class le añado una clase f s s por eso he creado una clase css llamada abierto y ahora voy a hacer lo siguiente vamos a ver sí abierto es igual a falls en ese caso añádele la clase abierto abierto es igual a true en caso contrario la vuelta a la rueda hago lo contrario haz class tiene un contrario que rey muscular y abierto es igual a fox es esto lo que hace es que se gana recargo cuando hago clic lo que hace es que se abre y cuando hago clic otra vez lo que hace es que se cierra vale de hecho le puedo decir al cnar para que sea todo un poquito más agradable transición o dos segundos no se va a probar le pongo una transición de dos segundos para que cuando hago clic lo que haga es que se abre poco a poco y cuando hago clic lo que haga es que se cierra poco a poco vale que tenga un poquito allí su animación de hecho de hecho yo lo que puedo hacer también es que en el menú en el menú inicio digamos en lugar de poner inicio pues ponga el icono de la hamburguesa o del sándwich o de lo que sea y cuando hago clic pues cambie el icono vale eso ya es javascript pero lo que te quiero decir es que todo ese tipo de soluciones pues están ahí se pueden utilizar y si te fijas no hemos utilizado lo que ya sabíamos de otra forma ya no es realmente aprender nada nuevo ahora dicho esto hay dos cosas de las cuales te quiero hablar vamos a ver la primera de ellas es esto que yo suelo hacer muchas veces por rapidez por comodidad y te lo voy a decir también por mayoría que es utilizar el jquery cbn el cdn son servidores de código donde yo lo que estoy haciendo es el lugar de bajarme jquery a mi máquina y enlazarlo desde mi máquina lo que hago es vincularlo directamente a una dirección en la web entonces yo quiero que sepas que esto lo hago por batería es decir porque ahora lo que quiero ahora hay aquí en clase es mira pim pam pum quiero copiar y pegar algo y decirte oye ya tengo jota cuando íbamos a hablar con hot al cuello vale pero cuando estamos hablando de un proyecto propio de un proyecto grande de un proyecto bueno mi recomendación no es usar jquery el cdn perdón sino descargar jquery meterlo en una carpeta nuestra y llamarlo desde ahí porque yo no tengo ningún compromiso por parte de jquery de cuando jquery dirá oye mira que me ha cansado de tener este servidor que lo cierro yo las apaña de vuestros compuesto de jquery pues claro yo puedo tener un cliente a la cual le aplicó la le pongo una aplicación y yo esa aplicación la dejo funcionando yo no quiero que aún así pasa pero yo no quiero que el cliente me llame en el año que viene me diga viaje tu aplicación ha dejado de funcionar y yo le diga mira es que yo no tengo nada desde hace un año evidentemente no ha sido algo que yo he hecho pero claro pero vete a saber japón te vuelve a abrir el código vuelve a entrar en el servidor del cliente y mira a ver qué ha sido vale de hecho hay veces cuando cuando esas cosas ocurren que lo que ha hecho el cliente es actualizar el servidor o bien porque sí o bien por razones de seguridad y claro la aplicación que les programado que funcionaba en una versión del servidor pues no funciona en otra versión del servidor entonces pues es un poco es inevitable pero hay que intentar evitarlo vale hay que por lo menos intentar minimizarlo siempre que se pueda y luego y luego lo segundo que te quiero decir es que dentro de el ejercicio que estamos haciendo hoy el ejercicio que estamos haciendo hoy responde a la duda acerca de esta tecnología pero quiero decirte hace mucho ejercicio yo te demuestro lo de la anchura el color el cómo cambiar el menú el texto que aparece desaparece según el tal pero quiero decirte una cosa muy importante que es la siguiente y esto del menú que hace así de hecho ya a día de hoy empieza a estar desfasado y cuando digo que está desfasado es que hay autores sobre todo personas relacionadas con usabilidad que dicen a ver en el momento mira te voy a preguntar una cosa para que entiendas lo que te voy a decir lo entiendas bien hace unos cuantos años sería por 2015 o por ahí un centro de formación me propuso impartir formaciones de dps adobe dps y dije mira me niego porque adobe dps es una entrada o sea adobe tiene aplicaciones que evidentemente son muy buenas pero a mí adobe dps filosóficamente de persona curada me parece una nada entonces adobe dps venía a cubrir un hueco y es que en la conversión digital aquellos aquellas imprentas que a lo largo del tiempo y fíjate osea pps llegará a su fin de vida el 31 de agosto 2019 un año para que veas por qué me negaba yo en 2015 a dar formaciones de tps entonces lo que hacían era decir vamos a ver toda esta gente en imprentas que maneja el programa adobe indesign adobe in design que es un programa para maquetar para hacer maquetación es en papel por claro toda esa gente que se encontraba que en las empresas se está dejando de trabajar en papel porque todo es digital pues lo que querían era una forma de seguir utilizando in design pero para los medios digitales es como me quiero renovar pero no me quiero renovar sabes me quiero renovar pero no quiero aprender muchas cosas nuevas entonces adobe dps en una suite que tenga instalada base enganchada con in design y lo que hacía era lo que se acabase en lugar de enviarlo a imprenta en papel te sacaba como una especie de app de teléfono móvil y de una página web pero que era lo mismo que in design pero en formato digital yo dije me hicieron una guarrada quiero decir escogen una revista que tenéis en in design y estáis publicando ese mismo formato para impresión pero en formato de página web cuando si tú te metes en cualquier periódico de la izquierda del centro de la derecha o de lo que se ve cualquiera no es el mismo periódico en papel pero convertido en digital es otra cosa tiene otro lenguaje y tiene otras herramientas tiene otra forma de navegar la información entonces si ves de generar esto de bps es una guarrada o sea es un quiero y no puedo es un me quiero resistir a los cambios porque no te puede resistir a los cambios vale entonces esto de esto de hacer el menú responsivo que insisto te lo digo una vez más porque tú además acabas de ver que tú lo acaba de demostrar que yo no tengo en la web que yo lo tengo en mi web también te digo que lo tengo en mi web porque venía por defecto porque tenía en la plantilla que instale de garaje me mata voy a programar pero realmente cuando yo tengo una web empecé y empecé yo puedo hacer clic y poder navegando y tengo una web en móvil y puedo ser así no estoy hablando del mismo lenguaje que mis usuarios porque lo que empecé se prohíbe que es hacer scroll scroll para arriba y para abajo en el teléfono móvil se anima porque el teléfono móvil la forma cómoda deben información es scroll entonces mira yo llego por ejemplo y yo visito pues no te digo una vez al día pero varias veces a la semana nine ya sabes para un poco como te diría yo para un rato vale viéndome mes en red mira mira en ven el scroll vale mira aquí el scroll en red yo hago así yo hago así y en el momento ves en el que voy bajando el scroll va aumentando va cargando efectivamente es claro lo que quiero decirte con todo esto es que no te enamores demasiado del tipo d de lo que es el responso porque se está quedando anticuado porque realmente lo que trata es de llevar al teléfono móvil un modelo adaptar al teléfono móvil un modelo que realmente es de pc cuando el teléfono móvil habla otro lenguaje diferente entonces qué ocurre pues lo que ocurre es que últimamente google está premiando este tipo de webs que van cargando contenido dinámico a medida que tú vas haciendo scroll porque en un teléfono móvil a hacer pim pam y arrastrar de arriba a abajo es mucho más fácil que empezar a interactuar con los menús de aquí arriba vale entonces en definitiva no quiero ni que pierdas mucho tiempo en este tipo de cosas de responsive porque yo ya lo considero dinosaurio yo considero que es algo o sea que es la tecnología que a día de hoy lo haces y dices madre mía es el rey del mambo por hacer un menú responsivo y dentro de cinco años dirás a 2020 gr esto esto eres como del pleistoceno sabes te lo digo porque esto que te estoy diciendo quieras que no aunque evidentemente por supuesto te lo digo en claro de coña pero pero hay una parte muy seria en la que te lo estoy diciendo que es el la amortización del esfuerzo es la amortización del esfuerzo quiere decir como de hecho hemos hablado en alguna clase anterior que el tiempo que inviertas haciendo algo que te sirva que lo a mortiz es que te valga sabes que no sea tiempo tirado que no te tires la vida haciendo un menú responsivo y el año que viene lo menos responsivo se hayan quedado desfasados en el tiempo vale esto que te digo es difícil realmente porque muchas veces no sabes lo que va a venir yo siempre digo que tengo una amiga que además que además actualmente tiene un puesto muy importante en una empresa de diseño muy importante quiero decir que que la vida profesionalmente le ha recompensado lo cual también te alegra porque dices mira sabes te gusta ver que la gente guay acaba en sitios guays porque si no diría nuestra vida es injusta pero esta tía tenía una particularidad una película de muy especiales que no sé cómo lo hacía pero siempre averiguaba las tendencias que iban ir el año que viene si la tía decía porque sabía la consigue la carrera pero ya en aquellos años ya lo hacía o sea estudiante ya lo hacía pero es la tía te decía usa esta letra que se va a poner de moda yo no sé cómo lo hacía pero a los seis meses todo el mundo usaba esa letra n increíble y yo no había visto o sea es horrible y yo no había visto ninguna parte esa letra y de repente poco a poco poco a poco poco para empezar a empezar a ver y se veía en todas partes y si tres años después me decía oye la letra en secreto y olvídate ahora toca esto y seis meses después paga para un día vino ella en el año un cuarto era el 99 el 2000 los leds iluminación de led y yo le dije le dije tú estás loca para todo para todo y yo le dije tú estás loca como vas a oír iluminar con leds o sea el led es lo que en el ordenador citó para saber que está encendido pero tú quieras iluminado con leds ya me dijo haz me caso que esto lo que viene ahora y es que cosas que te decía cosa que se cumplía ya quiero decir que que ver el futuro es difícil en tecnología hay gente que tiene más facilidad y gente que tiene menos facilidad pero no te enamores tanto de las soluciones que hay en un momento dado y intenta aplicar tu esfuerzo esta es la parte difícil en hacer cosas de esas que duran en el tiempo vale ya te digo y te lo he hecho en clases anteriores que hay un factor lúdico en el cual dices mira hace es el menú responsivo te sientes como dios de bien porque juega que guay te lo he hecho y aunque el año pasado y el año pasado el año que viene quede desfasado puesto dices mira pero por ahora me divertí a gustito de hacerlo y si luego en cambio las cosas pues oye pues no pasa nada sabes pero pero sabes que lo puedes hacer definir bueno vamos a continuar haciendo cosas preguntas por cierto a ver no hay que confundir dos conceptos dentro de que como te digo insisto haremos la sesión de bus trap más adelante la siguiente hora aproximada o la que sea pero no hay que confundir responsive con muchos trato es decir whatsapp es responsive pero responsive no es books trato vale entonces woods trap es un framework que lo que hace es estandarizar cosas lo que hace es decir mira te propongo una serie de metodologías y una serie de estructuras y una serie de etiquetas para que tú las usas y automáticamente todo cuadra a ver dentro de lo que cabe yo debería ser también te lo digo el principal defensor de boots trap porque una de las cosas que hace al llevar el sistema de rejillas ya llevar el sistema de patrones es que si te fijas yo cada página que hago queda súper gárrula y súper hortera pero cuando usas boots trap como lleva una serie de plantillas y de estilos por defecto esos estilos por defecto que dentro están bastante bien actualizados a las tendencias estadísticas del mercado lo que hacen es que haces nada y automáticamente queda como mínimamente bonito sabes como que dices hoy en los márgenes las distancias las equidistancias quedan guays entonces woods rap lleva incorporada la capacidad de ser responsive pero responsive es otra cosa diferente ha mostrado el responso es un concepto ebooks trap que lleva a la filosofía responsive es un framework tú ya sabes que yo le tengo bastante respeto a los frameworks porque yo busco por aquí boots kraft y vengo por aquí y voy a ver mundo entero españa me da igual en los últimos equis años 5 años 2004 yo que sé y este es mi problema con boots trap entonces claro es un framework que en un momento dado se puso de moda y por eso para hacer aplicaciones y hacerlas rápido y hacerlas bien además de momento no se puede decir que sea una mala alternativa pero yo creo que si miramos la gráfica pues evidentemente está en declive esto es en el mundo entero voy a ver en españa’ vamos a verlo más o menos lo mismo en consonancia a lo que es el mundo entero entonces esto es lo que me preocupa y traigo una vez más a haber hay que vivir el presente y hay que pensar en el futuro entonces si yo voy a hacer una web y yo sé que esa web como te diría yo es un proyecto para este año y es el plan de pimpampum usar y tirar pues bueno pues se pueden hacer con boots trap pero si yo voy a hacer una web y quiero que esa web viva por ejemplo cinco años pues oye cinco años yo no estoy viendo esta gráfica yo no doy un duro a cinco años por whatsapp entonces para que tengas la idea ahora que estoy empezando con ciclos formativos yo ahora de lector en este curso voy a empezar una serie de webs que yo sé que van a ser webs de alumno que van a durar este curso braza de máster webs de prueba digamos de coña para crear una prenda entonces yo sé que cuando tome decisiones no voy a tomar decisiones sobre esas webs a cinco años vista porque sé que en julio de las tiró todas trabajo valiosa quiero decirte que hay muchos casos te puedo decir muchos casos en los que no todos los proyectos hace unos cinco o diez años vista pero sí por eso el tema de hoy ha sido uno de los frameworks me causa ya te digo mucho respeto por él mira ahora está todo el mundo que no caga con angular angular framework para que voy a poner si eso también lo habrás oído supongo y de todo realmente eso es un framework de cliente y servidor pero lo que te quiero decir en este caso es que el digamos el angular es lo que se llama en inglés llaman el new kids on the block ya sé que había un grupo hace muchos años de adolescentes que es así the new kids on the block pero la expresión new kids on the block o nick green town es como mira el chico nuevo sabes el chico nuevo todo el mundo de presta atención pero claro fíjate que de la misma forma que tenemos boots rap que en un momento decae pues tenemos angular pero que si te fijas angular que en un momento le ha tomado el relevo a woods trap si te fijas en la gráfica ahora mismo también está que empieza a caer y ahora pues no se tendría que ver por ahí cuál es el nuevo framework que estaba reemplazando a angular o sea te puedo hacer esta comparativa mira te puede hacer esta comparativa entre por ejemplo jungla y wordpress mira sabes que weeks vamos a ponerlo ahí encima la mesa todo el mundo 2004 hasta hoy entonces tú fijate que lo azul es jungla empezó fuerte en un momento dado acá yo y wordpress lo reemplazo pero wordpress poco a poco está empezando a caer y quien está subiendo poco a poco los weeks aplicaciones como weeks y la misma forma te puedo decir que por ejemplo los commerce prestashop y sophie fai son son web son programas de comercio electrónico para montar tiendas online entonces ahora vamos a ver todo el mundo 2004 hasta hoy vale entonces mira lo que ocurre ahí tienes la muestra perfecta tenemos los commerce que en torno a 2004 era el rey o sea era quitar los demás que aquí estoy yo soy la única forma de hacer casi comercio online a partir de ahí magento y prestashop en los últimos de 2010 barrieron a los commerce y se quedaron con el mercado de tal y sophie fai últimamente y fíjate ahí lo tienes vale como machaca a los demás de hecho de hecho centro en españa para ver qué es lo que hay en españa porque todavía no tiene ese tirón pero ya lo tendrá pero fíjate vale está ahí peleando con prestació para quedarse la la cuota del mercado entonces lo que quiero decir con todo esto es que eso es la diferencia entre las tecnologías de base que no pasan de moda y los frameworks o los marcos los entornos o los programas que están de moda en un momento dado y pasan de moda la configuración vale a ver no pasa nada quiero decir si tú tienes un balance y dentro de ese balance efe es bueno aprender a programar y además de usar este framework tú dices bueno pues ya está cuando ese framework pase de moda pues tus conocimientos de programación se mantienen tu conocimiento del framework inglés de los renueva sólo cambias por el siguiente framework y ya está pero claro hay gente que dice no no yo me vuelvo un especialista de mira por ejemplo hace cosa de cuatro años tenía un alumno yo enseñaba un software en aquel momento que se llama igual lo conoces porque en arquitectura se usa para representaciones el un real engine no vale perfecto fenomenal pues mira entonces tengo un alumno en ese curso de enseñen era un curso específico para para arquitectos correcto vale pues en otro centro de formación enseñaba programación en temas más para videojuegos para un real ending entonces claro un alumno que también te digo que como te diría yo a nivel de objetivos vitales yo decía no tienes muy clara la cosa porque decía mira quiero empollar me un real engine aprenderme toda la parte de programación de temas más y quiero ser un mega especialista de la de eso de tal forma que cuando alguien busque un especialista o sea yo aparezca de los primeros como que entonces claro le dije mira a ver si tú tuvieras algún tipo de garantía por parte de un real entero de epic games que es quien fabrica esto que eso que tú vas a estudiar no va a cambiar en digamos los próximos 10 años pues yo te lo podría recomendar yo te podría decir venga tela empollada que luego tienes 10 años para amortizar la inversión de esfuerzo pero claro en un realito digo porque me ha pasado tú nunca sabes cuando cambian de versión y te lo cambian todo con respecto a lo que era anteriormente y entre ese esfuerzo no vale la pena o sea no le ha valido para nada al entonces por eso por eso lo que te quiero decir es que hay que como te diría yo hay que analizar y hay que sopesar muy bien donde pones el esfuerzo te digo por qué las personas digamos que en un momento dado como te diría yo entre comillas pues aterrizajes ahora en esta tecnología veis os hablan de los frameworks y es como va lo que aprenderemos porque me han dicho que es lo guay pero la gente que llevamos años y que hemos visto estas gráficas y que al final nos hacemos la idea de que todos son ciclos de que todo va y viene nos damos cuenta de que el lenguaje de programación o no cambia o cambia muy poco a poco pero los frameworks mara ciclos o los programas o los entornos van a ciclos y ya hemos hecho lo de aprender los commerce y de repente decir esto ya no vale y aprender prestashop y decir usted ya no tengo que aprender por semifallo vale por esto digo que soy muy conservador en este sentido en el sentido de que lo que quiero es que se aplique ese esfuerzo en algo ese algo luego lo puedas amortizar durante una serie de años digamos le puedas sacar rendimiento humano o económico o lo que quieras durante una serie de años vale si yo me voy a mostrar y me lo descargo y de hecho y de hecho fíjate que es de los menos invasivos que existen e a un euro el sector yo no no no no no a ver persona 19 donde es comprimido muy bien pss y js con lo cual yo a continuación aquí lo que puedo hacer es incluir este elemento que es el mayor de ellos y este elemento de ellos con lo cual vamos a ver [Música] muy bien esto es 2 y vamos a ver algún mismo yo vengo aquí lo abro con brackets para empezar y ahora abro esto a ver yo vengo por aquí y si te fijas y si te fijas pero si vas viendo como se hace responsables a golpes tengo por aquí arriba un menú a un menú desplegable y aquí y aquí siempre que veas con s&m punto un número esto huele a woods tap que te cagas vale o con s&m 8 vale qué quiere decir esto esto quiere decir lo de las columnas a 4 con las columnas a 8 que bush trap implementa en el 12 columna model grid implementa este modelo este modelo de 12 columnas lo que quiere decir es que tú lo puedes usar para crear espera metro diga para crear un elemento o lo puedes crear para crear cuatro elementos con márgenes o para crear tres elementos con márgenes o para crear doce elementos con márgenes es decir sabes cómo cuando vamos al colegio y decían mira como no sabes escribir recto usa una falsilla vale y una vez gracias a la falsa ya tu te costó nada es recto y luego te decían balear aquí está la falsía porque ya sabes escribir recto la idea es que woods está implementa este modelo de la rejilla de dos elementos vale con lo cual aquí en con ese m 8 a ver morentín pero vamos al elemento este yo vengo por aquí yo vengo por aquí espera que todavía inspeccionó me voy a colt m4 y con m de 4to fíjate que en el grid framework o sea en el frame de de rejilla tú tienes automáticamente la definición de todas las anchuras de columna y ahora en el colt m4 mirada automáticamente todos los estilos ya declarados o haber car 94 momento que estoy buscando él aquí vale mira es el colt m4 tiene una anchura máxima del 33% o sea tú le metes esta clase y el framework ya sabe automáticamente qué estilo es meterle para que todo quede guay de hecho no sé si estás viendo en la pantalla la diferencia entre el azul y el verde citó que coincide con los márgenes estos que te estaban mostrando allí básicamente boost trap que hace insisto o sea con esto no te estoy hablando mal de busquets sino presionar al contrario y para que te quede claro que estoy hablando bien de bush trap te voy a hacer lo siguiente tú no sabes de diseño yo tampoco o sea somos fatales en diseño pero tú dices ostia le pongo aquí con m de 4 y este framework ya tiene calculadas todos calculados todos los márgenes y mira cuando hacemos un botón lo has visto que encima un fondo azul no sé qué de no sé cuántos y mis botones quedan que parecen una pero claro yo vengo aquí digo a qué votos más que votos más chulos y si te fijas es que tampoco tiene tanto porque fíjate lo compara uno al otro y cesc con ya no tiene tanto pero este botón mola y el mío es muy cutre pero yo vengo por aquí vamos a ver cómo está estilizado este botón yo vengo por aquí e inspeccionó aquí class button button primaria entonces yo me vengo aquí y button primary ya tiene automáticamente el estilita y button ya tiene todo el escrito para que quede bien o sea que es woods tampoco es magia quiero decir al final como has visto cómo has visto aquí es incluye un css incluye un js y ya lo tienes ahí todo preparado es guay ahora bien ahora bien ahora bien tú haces una web vamos a la parte que no es tan guay pero tampoco es tan traumática tu haces una web y para que esto funcione tú tienes que acostumbrarte a poner con ese m 8 tú tienes que acostumbrarte a que cuando haces un botón el botón para que no lo vea ahora el botón es clase vtn de button en descaro que ocurre el día que woods lap se ha quedado ya desfasado dentro del hubiese cinco años y tú dices oh yo ahora me quiero quitar butra pues que tienes en todo tu código las etiquetas de whatsapp que tampoco para morirse salsa que puedes la web y bueno igual renombrar esto a lo que tú quieras pero hoy igual estas reglas de insisto es que usó la expresión que usan mis alumnos pero porque es graciosa pero esto ahora mismo nos queda guay igual este mismo diseño que hoy vemos super guay tú lo ves dentro de equis años y dentro de cinco años y esto es súper 2020 este es lo peor porque insisto eso siempre ocurre que el diseño que en un momento nos parece guay equis años después es como madre mía mira por ejemplo algo que yo intenté poner de moda hace diez años que eran las sombrillas css estas sombrillas de aquí desgraciadamente en los últimos años los últimos diez años se ha puesto de moda el flat design que es una tendencia de diseño gráfico que elimina las sombras y los redondeos las pegadizas y hace que todo sea plano pues ahora están volviendo las sombras como una forma como de hacer cierta tridimensionalidad digamos como que el objeto sobresale pp pero igual esto lo veis dentro de diez años o dentro de cinco años es como madre mía que 2020 es esto sabes entonces por eso digo que si no es que te esté diciendo que la única forma que yo te recomiendo para hacer un proyecto propio a largo plazo es hacer código es hacer código propio y no es que te estoy diciendo que usar bus través es garantía de fracaso porque no lo es quiero decir al final si entramos en la carpeta y dices vamos a ver es esta por aquí es html y css no te va a morder sabes frank o no te pueden morder pues no tienes ninguna magia que de repente quita estos archivos y tu web se va a la pero sí que en un momento dado si es así haces la web con woods trap porque vas a usar los estilos de bus trap y si los quitas pues tendrás que rehacer el estudio de la web y ya está tampoco pasa mucho más sabes también te digo también te digo otra cosa y es que woods trap mola si te unes a su estilo pero claro otra cosa es que tú haces una maqueta y luego le llegas al cliente y el intento de dice sí pero este botón más ancho más estrecho de arriba la letra un poquito más grande y el redondeo un poquito menor para que esto la gracia de usar boots rap es precisamente el hecho de decir mira no sé nada de diseño pero hago pim pam pum’ y aquí sale algo chávez luego otra cosa que te digo es que a ver hay frameworks usa framework de frameworks que lo que hacen es hacer maquetas y luego las sacaremos trap o incluso mira yo vengo por aquí a pulso tape ejemplos hemos visto por ejemplo un álbum hemos visto mira por ejemplo un blog no mira un carrusel de imágenes vamos a ver google y tengo un blog entonces y de hecho mira sabes que te digo vamos a hacer un ejercicio porque para que veas lo sencillo que es de hacer pero tú que dirías que o sea que podrías pensar tú o yo si vemos de repente esto que tienes la pantalla pues lo primero que tengo el diseño hecho sólo es falta conectarlo con base de datos y ya tengo una web sabes y es así quiero decir parece que te vaya para en un pero pero no te voy a poner ningún pero ya es lo que hay mira pasión un carrusel un carrusel lo que pasa que sé que no viene con imágenes pero un carrusel si esto lo hemos hecho nosotros a mano y aquí viene ya preparado pero es que además está guay porque cuando yo lo he hecho pues claro por no ponerme a cuidar los los anchos y tal pues ha quedado cutre a falta de afinar mejor el diseño pero que el diseño ya está hecho con lo cual yo puedo venir y con toda la facilidad del mundo cambiar esto a base de datos pero insisto yo vengo por aquí y todos son calls con m de 7 con m de 53 claro yo no sé sabe igual llámame paranoico qué quieres que te diga pero yo veo col mt 7 a mí me da el canguelo porque no lo controlo que evidentemente tienes los archivos tssa ya tu mano y seguir los control hasta que no es que sea magia negra que tú no puedes controlar al final si lo puedes tocar pero vamos a dar ese ejercicio vamos a intentar tocar algo vamos a ver que de hecho podemos tocar fácilmente el diseño pero y luego otra cosa que te digo y es que me he descargado un pack de example de de esto a miradas board un bar de example este de la web de cultura pero ojo tú temas aquí y buscas github boots trap templates queramos ya tienes una lista curada como quien cura al jamón de herramientas y temas de woods trap o sea ponte a buscar por ahí por internet y le gusta vas a encontrar plantillas para dar y tomar luego también hay que decir una cosa y esto de esto que te voy a decir de hecho yo lo estaba diciendo esta mañana en una clase y es que a ver o sea vamos a ser prácticos yo vengo por aquí y va a ver tengo un cliente que me está pidiendo un proyecto que usa que sea rápido barato y bonito y no va a ser un proyecto para 510 años o si digo oye o sea yo cojo esta plantilla y se la plancha al cliente yo contento el cliente contento el cliente me paga y yo lo cobro no le estoy engañando o sea pequeña una una web yo le monté una web y además la conectó con su base de datos y todo eso es la personalizó por supuesto sé que no estás engañando a nadie porque no usar una herramienta que te permite trabajar rápido o sea porque estar peleando te conoce ss cuando ya alguien se ha peleado por ti ya que pero insisto que no no tengo ninguna oposición a usar frameworks pero tengo ese respeto el decir ustedes que no quiero para un proyecto grande hacer algo que realmente no he hecho yo y si el día de mañana desaparece vale mira por ejemplo un dashboard para hacer intranets pues ahí lo tienes vale entonces de hecho incluso viene hasta con el framework para resolver para las gráficas entonces mira vamos a ver sabes qué voy a persona ok ok cuál te gustaría que personalizar amos que conectaremos con base de datos desarrollo web rollo carrusel rollo panel de control no sé para el control sí claro pues mira vamos a ello vale entonces yo vengo por aquí y cojo la carpeta de export que fíjate que la archivos html entonces me la voy a pegar en la carpeta mamá además es que esto que voy a hacer va a saber que lo puedes hacer con mira por ejemplo cuando en nuestro panel de control las tablas que hacíamos eran horribles vale pues vamos a hacer panel de control para un ejemplo que queda guay y luego evidentemente conectarlo con base de datos me llaman me voy a htc docs voy a pegar pego dashboard evidentemente a continuación lo que voy a hacer es convertirlo a php porque evidentemente voy a introducir código php bien arrancó el man arranco servidores pongo localhost barra barrabás word no pasa nada porque no ha cogido las inclusiones que están mira vamos a verlo vale sabes que fenomenal esta es la web sin dinero sin books trap está para que lo veas vale y entonces ahora yo lo que hago es que me voy a aplicaciones me voy a desborde cargo index.php vale y vamos a ver si canonical vale aquí a sex leaf css ya está buscando este en assets eso quiere decir que no pasa nada o sea depende de la carpeta de assets me voy a escritorio me voy a mostrar example me voy assets copio assets pegó assets le doy a recargar y ya está ya tiene los ases que necesita para empezar a trabajar vale ahora estoy editando el código vamos a ponerle un poco pantalla con pantalla ahora estoy editando el código por aquí de lo que aparecía entonces yo vengo por aquí y donde pone casto merz busco por aquí de momento veo código pero todo me suena doc type html meta etiquetas el link woods trap el link al archivo css en assets un estilo interno o sea todo me va cuadrando ay miran por cierto este boots trap esta mini picado eso quiere decir que si me voy a la carpeta de assets si me voy a la carpeta de assets distribution en css tú verás que tengo un books traficado y un books trap normal entonces si yo entro en el mini picado abro el mini picado aparece esto ahora verás un momento que no lo ha cogido pero ay mira ya había cargado este es el css mini ficcad o qué te parece para tocarlo vale verás que es es prácticamente imposible pero no pasa nada no pasa nada porque eso se hace porque el mini picado ocupa a 160 casas y sin magnificar ocupa 198 casas que en este caso tampoco te queda que la ganancia es tanta pero bueno lo digo porque dirás claro cuidado porque no puedo tocar este modificado prácticamente es un suicidio pero si cargo el boots trap sin significar verás que lo cargo aquí y esto ya es mucho más tocable es decir esto ya es mucho más modificable vale y yo en un momento dado puedo cargar el archivo css y puedo decirle que no quiero cargar el mini ficcad o quiero que haga el normal de hecho mira lo voy a hacer quito el minicar le doy a recargar y fíjate que es exactamente lo mismo ha cargado 30 casas más pero exactamente lo mismo bueno sigo viendo por aquí y me voy al nada creo que nada evidentemente es una etiqueta de navegación nada en este caso lo están usando para esto de aquí arriba veo que este input es este input de aquí arriba valença reconozco que aunque veo que utilizan una serie de etiquetas como insisto los externos calls vale pero tampoco chino o sea lo reconozco bien y ahora yo empiezo a ver por aquí dashboard dashboard veo orders orders leo products products y de o castro merz pues en casto mertz que vemos por aquí y digo usuarios y recargo creo que ahí pone usuarios vale que ocurre que claro yo vengo por aquí y digo a ver ahí donde pone usuarios aquí donde por usuarios pone spam data feder y users y veo que data father you search tiene el icono este de aquí ya para empezar de una forma de poner un icono que no acabo de reconocer aunque de hecho es relativamente similar a lo que vimos el otro día de fondo son vale pero pero yo vengo aquí de repente digo ostras y estos iconos si un día desaparece boots trap es que los voy a dejar de tener vale entonces pero bueno vale pero eso no me preocupa mucho porque digo vale el día desaparezca pues me tome si conos de fondos o cometido otros iconos y ya está ya aquí no ha pasado nada bien ahora me voy a ir aquí donde pone el sexo en title y aquí en sexo en title veo que tengo un header unos datos ahí los tenemos y yo lo que voy a hacer a continuación es convertir esto a php entonces me voy al local host me voy a la base de datos vamos a verlo a continuación a continuación me voy a curso aplicaciones web me voy a vamos a ver los usuarios a ver cuántos usuarios tenemos no tenemos de los pocos recursos por ejemplo al que hallaría más chicha y por ejemplo tengo nombre no voy a todos los campos porque para que tengo frase descriptiva tengo imagen un poco más igual precio los objetivos tampoco lo tipo de curso vengo por aquí por aquí recargo nombre francia descriptiva prefi tipo de cosas por cierto ahora iremos a la gráfica y verás como la entonces ahora yo lo que hago es que eliminó todo este bloque me quedo este bloque como plantilla de derecha incluso ahora puedo arrancar php y digo puedo decir form y es igual a 0 es menor que 10 y más más eco taca taca dentro del eco metro esto de aquí un poco de zacarías recargo esta página no funciona vale porque no sé por qué soria 0 no sé que he hecho pero otro humano le gustaba mucho así claro no es cerrado la etiqueta de php vale entonces ahora fíjate que me hace 10 repeticiones de esa línea pero yo puedo venir por aquí y puedo poner 100 repeticiones y me hace 100 repeticiones de esa línea vale pues ya tengo por aquí esto pero ahora evidentemente no quiero hacer un bucle for que me repita algo 100 veces lo que quiero hacer es conectarme a la base de datos y hacer que ese dato realmente sea real así que a continuación lo que voy a hacer es por ejemplo la conexión de la base de datos para que la atendió por ahí en otro día la conexión o qué y abierto últimamente diferentes archivos index.php si este debe ser entonces me voy a la conexión cojo y copio esto index.php incluye conexión debe eso qué quiere decir pues que voy a copiar el proyecto de un proyecto a otro esto fuera fuera aplicaciones [Música] me voy a llegarme cojo conexión debe lo paso al proyecto dashboard y entonces le digo que en el proyecto de word arranco conexión debe mirar me sirve esta misma petición digo eco esto lo quito y la fila un hombre recuerdo vamos a verlo y la nombre fila frase descriptiva precio y tipo de curso fuera pensará vengo por aquí recargo y fíjate que sale de la base de datos de hecho le he dicho el limite 7 como se le digo el límite 27 creas más datos hay representados es claro esto es lo que hemos hecho en días anteriores pero honestamente por cierto tipo de tipo de curso sí sí sí porque claro le he puesto una columna más no tipo de curso af sí sí sí sí vale pues vengo por aquí y será identificado pero creíble vale ya está ya está ya está correctamente alineado pero date cuenta que osea yo hago así lo del menú citó este que yo voy haciendo scroll y no se mueve está súper guay yo no lo he hecho venía ya he hecho el lazio radilla que igual no te das cuenta pero esto es una de las cosas que cuando las aplicaciones todas cuentan lazio rodilla de diseño de que la tabla va rodando y esta línea está alineada con ese campo search que su personaje proyector no lo es pues eso ya viene hecho no sé si te das cuenta pero mi tabla el otro día quedaba súper hortera y me cuesta verdaderos esfuerzos cambiar la tipografía y cogerla el margen justo y el color justo y la línea justa aquí ya está hecho vale aquí me han dejado ya como te diría yo no sé decirte un css para niños un ceses y para tontos o las dos cosas a la vez o sea me han dado un framework que que yo digo mira meto ni contenido y quedó como dios o sea medio y contenido y esto mola un huevo la mola mucho más y hablemos de productividad o sea la productividad nada que ver con respecto al otro día pero insisto pero dentro de que no puedo negar los como te diría yo los innegables beneficios en cuanto a productividad de buscar pero yo ahora mismo estoy en tranquilo estoy intranquilo porque digo yo no estoy controlando esto o así pero cuando yo no quiera modificar qué va a pasar aquí de hecho ahora lo modificaremos verás que tampoco sea traumático vale pero por qué unos cuantos proyectos anteriormente y ya te digo yo que se puede modificar ningún problema pero estoy intranquilo vamos a hablar de la gráfica vamos a ver a continuación cojo la gráfica y digo esto que es me voy a inspeccionar vamos a ver es un canvas quien maneja este canvas vamos a ver es un canvas es un pero alguien manejará el que cuando hago así aparecen los tips para que mola mogollón pero fíjate que pone canvas pone my heart’ pero de hecho si quieres moscú el canvas muere más abajo muy bien vale pero quién está tocando este campo bueno pues yo sé que el canvas es una etiqueta de html que se maneja con javascript entonces yo vengo por aquí y digo a ver en alguna parte en alguna parte chart punto min js y dashboard punto js veo que están usando una librería que se llama chart mono chart punto j s veo que hay un archivo llamado dashboard punto js está aquí lo toco lo meto será muy fácil seguro y mira vale sanz damon the news the weinstein ballet y esto es aparece datos y yo lo que quiero hacer ahora no pasa nada porque sea porque hay a veces ese error porque ese error no es real ese error no es cierto y yo lo que quiero ahora es cambiar esto vale entonces digo mira tenemos por ahí un hecho a ver porque el label expone estos datos pone estos déjame hacer lo siguiente en primer lugar lo voy a y en el index php voy a matar esta etiqueta script voy a poner una etiqueta script y lo voy a meter todo ahí dentro va a funcionar igual vale tú fíjate que funciona exactamente igual pero si lo tengo en el archivo php es que puedo hacer que estos datos vengan de ph me vale si lo tengo en la archivo js no lo puedo hacer claro claro eso es un truco una trampa digamos entonces yo vengo ahora por aquí y digo vamos a verlo todavía teníamos una librería llamada nombres vale entonces tienes que está yendo a ver qué podemos hacer que haber gestión que tenía al gas tenía los productos no tiene muchos nombres niños nombres niños 5 peticiones a la base de datos vamos a ver sql mira mira mira la hora de las horas ya está el selector from niños fuera no por verbal total ni no descendiente límite claro aquí hay 7 os voy a poner 10 para que veas que no es que me tenga que amoldar al ejemplo de de 7 le voy a continuar vale y tú fíjate ya que aparecen nombres y aquí aparecen datos vale entonces yo me voy a la ventana de consultas me voy al código que he hecho antes copio y pego el código que he hecho antes cuidado con esto esto me va a fastidiar a ver si le pongo una coma más que me dice a ver si no falla por favor que no falle mira no ha fallado fantástico bien entonces yo como te decía cojo ese código lo pego y digo echo eco saturday esto de entrada lo que va a hacer es que ahora mismo tengo aquí no sé cuánto saturdays vale no sé por qué pone tantos no había así vale claro porque la petición la tengo que volcar para perdonar 1010 saturdays pero yo ahora aquí lo que hago es que fila y aquí donde pone fila voy a poner nombre niño nombren y no recargo la fia sofía martín a martín este no se les que ha pasado ahí a ver lucia o sofía lucas hágales perdón igual tengo que y hacerlo un poco más grande para que aparezcan todos vale y ahora lo hago hago lo mismo con el data pero voy a el campo total ni no total ni no recargo y claro como están ordenados de mayor a menor pues a cuidado con la leyenda porque fíjate que parece que mateo esté abajo pero no es que empieza en 4000 y acaba en 3.100 vale hay que saber interpretar los datos y también te digo que aquí vale enel y access donde pone bellina ciro aparecer falls si yo digo ven indignad ciro es igual a true pues en ese caso fíjate que empieza en cero y por tanto la escala nos queda otra fuera incorrecta pero me gusta más verlo en esta escala entonces qué ocurre pues lo que ocurre es que al hacer esto tú fíjate cómo he podido personalizar y de hecho vamos a ver ahora el tema de los iconos pero he podido personalizar que allí ponga usuario puede personalizar lo que me dé la gana he podido personalizar la tabla he podido personalizar con javascript el contenido de la gráfica esto me está como te diría yo llamando para decir madre mía usa esto eso se usa esto no te compliques no lo hagas desde cero es que así como sabes como esa imagen cita de el diablillo en un hombro y el angelito en el otro vale pues yo yo tengo ahora mismo el diablillo en un hombre diciéndome pero pero pero para olic usa esto mola mogollón pero no tengo un angelito diciéndole cuidado cuidado que cuando quieres modificar esto te estás sabes después estás entrampando con woods trap y como el año que viene bus trap deje de estar de moda te lo vas a comer con patatas o sea quiero un poco darte una visión lo más global posible para que veas ventajas y que vean desventajas y que ya te digo yo que sin duda si tú me dices oye voy a hacer un proyecto que es para un cliente y probablemente el proyecto dure un año yo insisto creo que el otro día o anteriormente he puesto ejemplos de este tipo pero porque en gran medida es parece que no parece una tontería pero tengo muchos alumnos de ese tipo de mucha gente que trabaja en la noche vale que te dice mira es que quiero hacer una micro web para promocionar un evento que va a ser este fin de semana entonces si el evento es para este fin de semana y esa micro web lo que hacen es que la montan de empresa y corriendo para luego promocionar las redes sociales para que la gente entre y se apunte y tienen al descuento para entre la discoteca y de esas y esa web el lunes que viene y no vale para nada porque el evento ya ha ocurrido ya está ya está todo el pescado vendido la semana que viene harán otra micro web para el siguiente evento del siguiente fin de semana quiero ponerte en ese caso extremo a la par que completamente real para decirte que si yo tengo un alumno que me dice eso yo me cago en decirle que lo programa antes de cero desde una plantilla reemplaza y acaba rápido pim pam pum ya lo tienes sabes por qué por qué no le voy a decir al alumno ante un proyecto que te dure para cinco años era un número de ceros y es que este elemento es este fin de semana y luego ya la web es como mucho para archivar sino directamente para borrar sabes entonces lo que te quiero decir es que hay muchos escenarios donde realmente pues este tipo de frameworks como como los de angular vale o sea que pueden llegar a servir ahora ahora con la misma yo te cuento lo siguiente en ese mismo centro de formación yo hace un mes o dos que rechacé creo que les supo mal pero es que me da igual que les queda mal me estaban ofreciendo una formación para angular entonces yo tengo una mala experiencia de hace muchos años