Curso Desarrollo Aplicaciones Web 2

lo primero que vamos a hacer para empezar a crear páginas web es aprender el lenguaje html en este caso vamos a estar aprendiendo html en la versión 5 que de hoy es la última y para crear sitios web para crear páginas web y para empezar a escribir algo de código nos hacen falta dos cosas nosotros para dos piezas dos pilares en primer lugar un navegador web o varios navegadores web y en segundo lugar un programa con el que podamos escribir código lo primero es lo más sencillo en este caso estoy en windows y windows tiene por defecto instalado un navegador web llamado internet sport no es que le tenga este cariño pero es un navegador web que tiene ya pre instalado con el sistema operativo y que en definitiva hay un porcentaje significativo de la población que todavía usa y porque todo es importante que en un momento dado pruebe de sitios web en internet esperar para saber cómo lo van a ver esas personas que usen este navegador además de este navegador tengo instalado un navegador dado yo tengo instalado un navegador de google llamado google chrome no solo os voy a recomendar instalar este agregador os voy a dar instalar todos los navegadores que por seis dentro de los mayoritarios dentro de aquellos navegadores que vayan a usar las personas que vayan a ver en nuestros sitios web cuáles son los cinco navegadores más usados a día de hoy la respuesta es más sencilla en primer lugar no por orden pero en primer lugar internet explorer en segundo lugar tenemos chrome en tercer lugar tenemos firefox mozilla firefox insisto que no lo estoy diciendo por orden de cual se usa más y cuesta menos por tanto a continuación me voy a ir a firefox me voy a ir a la página de mozilla punto o hereje y me voy a descargar el navegador llamado mozilla firefox otro modificador otro navegador bastante usado es ópera y lo encontramos en ópera puntocom es más te voy a dar a descarte y me lo voy a descargar lo estoy descargando en este caso en el escritorio quizás según como tengáis configurado el el navegador que estés usando quizás lo descargue en escrito quizás lo descargue en la carpeta de descargas cada uno tiene que buscar la instalación donde se haya bajado tengo ya por tanto fijaos pegar ismo estoy en windows microsoft windows tengo ya por tanto 4 de proveedores cuatro de los cinco más usados cual es el quinto el contrato es un poco explicado el quinto es un navegador que se llama safari que es navegador por defecto del sistema operativo de mac el marcos de entonces safari hasta hace unos años tenía para versionar windows desde hace dos años aproximadamente safari ya no está para windows sólo está para mac eso quiere decir que se quiere purgar como se debe y para comenzar y tengo que instalar me un actualizado si pongamos que esa nube es una opción factible para vosotros aunque ojalá sea también existe la posibilidad de buscar en internet safari for windows de esta manera encontraré todavía para descargar la versión 5.1 punto 7 de safari para windows en la versión 51 punto 1.7 estamos hablando del 9 de mayo de 2012 por tanto nos decía aproximadamente hace dos hijas un poco más una vez y estar pegado estén descargados en el sistema operativo lo que voy a hacer es instalarlos es decir en cualquier momento pero que tengáis todos los navegadores por lo menos los cinco más importantes instalados en vuestro ordenador para que cada vez que hagáis un proyecto web lo probéis contra los cinco navegadores para comprobar entre quienes entre web va a haber tu página correctamente la segunda pieza que nos hace falta para empezar a desarrollar aplicaciones web es un editor de código os voy a decir en primer lugar qué no vamos a estar atados a un programa concreto quiero decir con esto que para nosotros lo importante es el lenguaje no el programa con el que se escribe en ese lenguaje digamos que los lenguajes son independientes los programas es un poco como el castellano si yo os pregunto qué programa para hablar castellano y eso es independiente del programa y si acaso luego uso para escribir cartas en castel permite hablar en castellano si no es sólo una herramienta con los lenguajes de producción ocurre exactamente lo mismo nuestro objetivo es aprender los lenguajes de programación y luego el editor de código es simplemente una herramienta mediante la cual escribimos hollywood hay tareas que son recomendables os voy a decir que el mismo bloc de notas de windows se podría usar para editar código sin embargo quiere usar un editor que nos dé un poco de citas que nos diga o que nos marque visualmente cuando de todos los errores que podamos cometer pero al menos si unos cuantos quiero un editor de código un editor que está especializado en editar código uno que a mí me gusta mucho este uso siempre es rector llamado here es un editor que nativamente está para looks pero que sin embargo cumple lo que son mis premisas iniciales que es que en primer lugar sea de software libre en segundo lugar se pintó aquí a down load esté disponible tanto para linux suele venir preinstalado en muchas distribuciones y tengo también un binario para windows y tiene también un tag para mac en definitiva que sea algún día de 6 cambiar la plataforma no digáis ahí puedo cambiar porque el software que estoy usando no está para la plataforma sino que el software que nos está enseñando siempre esté en cualquiera de las tres no sea un impedimento para moveros de una a otra dado que ahora mismo estoy trabajando en windows lo que hacer es pinchar con windows binner y me voy a bajar la última versión tampoco tanta diferencia entre ellas debajo este archivo exe que está instalado lo que voy a hacer es ejecutarlo a continuación tanto una vez esté descargado voy a empezar a llegar todos los programas que necesito tanto los jugadores como el código y el caso lo que decir que en gran mayoría son programas que me he descargado desde de confianza que os quiero decir con esto pues que si yo por ejemplo ahora piso en head y para arrancar la instalación aunque en este caso vamos a aunque en este caso no tengo escalado puede darle con seguridad al siguiente siguiente siguiente por tanto de una ubicación de confianza que nos va a introducir virus ni cosas raras en nuestro equipo ahora sí siempre digo con otros programas tener cuidado cuando estáis a siguiente siguiente siguiente porque las que no es pantalla pues pueden meter software no deseado con el head it o simplemente no pasa si pagar no os lo recomendaría tenemos que instalar por tanto en nuestros equipos tanto edith como cada uno de los navegadores que hemos descargado para de saber estar preparados tanto para editar código como para ver el resultado de cuál es el código que hemos editado una vez que tenemos los navegadores instalados lo que quiere hacer son sacar dos piezas para empezar voy a sacar un navegador web en este caso por ejemplo voy a empezar con la web chrome pero me da igual el navegador web tengáis sacado porque lo que vamos a hacer se hace igual con cualquier navegador web a continuación voy a sacar el editor de código en este caso sacó el editor de código llamado hellip que previamente me instalo tengo por tanto por aquí dos ganas con cromo y otra con el editor edit por tanto todo dentro de estas ventanas dentro de la primera aquí editaré el código y aquí visualizar el código que voy a editar voy a empezar creando un proyecto voy a empezar creando una página personal por tanto para ello en el escritorio voy a pulsar con botón derecho y voy a crear una nueva carpeta a esta carpeta para reconocerla correctamente y fácilmente en futuro poner mi nombre así que en mi caso jose vicente en nuestro caso nuestro nombre es una carpeta que por supuesto está vacía así que doble clic y entramos dentro de la carpeta para comprobar como ahora mismo esa carpeta de esta función dentro de esta carpeta voy a crear un documento nuevo pero aquí tengo un problema el problema está que windows 7 windows vista incluso windows 8 por defecto al arrancar y creó récord de windows xp también te ocultan las estrellas de archivo esto quiere decir que cuando yo estoy trabajando en un archivo no puedo ver la extensión lo primero que tengo que hacer es configurar el operativo esto se hace sólo una vez para que me muestren para que me revele cuáles son las extensiones reales cómo se hace me voy al menú de vista o me voy al menú de ver dentro de windows 7 dentro del menú de vista me voy a opciones y dentro de opciones me voy a cambiar opciones de carpeta y búsqueda dentro de esta ventana es una carpeta llamada ver y dentro de las opciones de ver si miramos por aquí abajo hay una opción que pone ocultar las extensiones de archivo para tipos de archivos conocidos yo no sé cómo la tenéis vosotros pero yo lo tengo desactivado si la tenéis aquí es que de explicar la marca de validación para desactivar esa opción a continuación le dais a aplicar y aceptar para aplicarla a todo el sistema operativo eso quiere decir que cuando cree un nuevo archivo voy a ver su extensión y para esta formación es muy importante que podáis controlar las existencias de los archivos que vais a crear así que si quieren demostración preparada simplemente lo que voy a hacer sobre la ventana en blanco de la carpeta nueva es pinchar con botón derecho para crear y noia una nueva carpeta sino en este caso un nuevo documento de texto vamos a crear un centro de texto vacío y lo convertiremos en una página web así que pincho nuevo documento de texto fijaos que pone nuevo documento de punto x te lo voy a borrar todo tanto el nombre del archivo como su extensión y voy a cambiarlo por index.hu tm l por supuesto el pulsar enter inoperativo me dice si estoy seguro de que deseo cambiar la extensión pero como algo de esto entiendo y sé lo que estoy no esté así que estoy seguro así que sí os voy a decir llegados a este punto que el nombre del archivo puede dentro reglas el nombre que queráis no se pueden poner años no se pueden poner acentos no se pueden poner espacios y más estas reglas podéis elegir el nombre que queráis aquí en el primer archivo de un proyecto web la primera página por la cual se empieza por una convención de los servicios no de los navegadores ni de la rama tiene marsé index.html así que asumiendo que ésta sea la primera página de nuestro primer sitio web se tiene que llamar index html ahora tenemos que hacer dos cosas son dos cosas muy sencillas en primer lugar vamos a lanzar este archivo index.html desde el explorador hasta el editor de código fijaos que simplemente lo que he hecho es pinchar y arrastrar desde el explorador al interior de helitt y de hecho ahí veréis que se está cargando index.hu lo segundo que voy a hacer es usar también además el archivo index.hr ml el interior de la web y veréis que se carga también es perfectamente normal que al cargar ambos los dos porque ese es un archivo nuevo en blanco que todavía no tienen nada de código es un poco incómodo trabajar así es un poco incómodo estar todo cambiando de una ventana a otra y que las ventanas pelees por el espacio por tanto os voy a decir que desde windows vista hay un truco muy sencillo que es siguiente si yo selecciono una ventana y la arrastró y la lanzó contra el borde izquierdo de la pantalla como podéis comprobar automáticamente pasa a ocupar la mitad o izquierda del escritorio si yo hago lo mismo con el navegador y lo lanzó contra la mitad derecha de la pantalla automáticamente pasa a ocupar la derecha del escritorio lo que quiero hacer por tanto es intentar un poco aprovechar el máximo espacio y quiero que el golpe me ocupe en la mitad de izquierda me ocupe la mitad derecha y prácticamente en toda toda toda la formación que vamos a hacer la distribución en pantalla va a ser la misma siempre voy a hacer algo de código a la izquierda y voy a ver cómo se ve ese cono a la derecha qué representación tiene ese código hagamos una primera y sencilla página web para ello en primer lugar voy a hacer hola mundo siempre que empiezas en un lenguaje de programación un lenguaje de marcado en este caso se suele poner el mundo para un mensaje de bienvenida estamos viendo en el editor pero no estamos viendo en el navegador que tenemos que hacer paso número 1 le doy al botón del disco para asegurarme que guardado los cambios o bien le doy al ratón del disquete o bien pulso guardar o bien también puede usar el ataque claro control s para guardar a continuación me voy al navegador que sea al navegador que esté usando y busco un botón que suelen tener todos los navegadores para refrescar la página para recargar veo que es un botón que tiene una flecha que da la vuelta en firefox o safari ese botón está más o menos por donde por dónde está la estrella en chrome otra tecla rápida que suele funcionar para recargar es la tecla f5 del teclado y otra comida entre de teclas que suelen funcionar es control r control rector así que de cualquiera de las maneras lo que quiero es que por una parte guardáis en el editor y por otra parte reid en el navegador hasta que tanto en un sitio como en otro veáis hola mundo a la izquierda porque es el código que está desarrollando a la derecha porque es el resultado es como la gente lo va a ver en su navegador no hay ninguna razón particular por la que el editor único tenga que estar a la izquierda y el navegador a la derecha yo simplemente no sólo poner a la izquierda ya la derecha que en principio tú lees de izquierda a derecha y así el código que haces aquí luego se ve a la vez pero sin ningún problema en un momento dado y de hecho a lo largo de los días pero cambiando podemos tener el código a la derecha y la página web a la izquierda siempre teniendo muy claro que esto es edith y aquí se edita el código y esto es el navegador web x el que sea y aquí se visualiza el código hola mundo mono es html hola mundo es un texto por tanto a continuación vamos a empezar a escribir una página web usando el propio lenguaje pml y el lenguaje de marcado html se basa en etiquetas las etiquetas tienes siguiente forma para crear una etiqueta escribimos en primer lugar menor y mayor que dentro del menor que y mayor que ir a lo que sea por ejemplo longaniza lo que está sería condicionalmente una etiqueta de html no lo es porque no está reconocida como estándar pero tiene el formato de etiqueta de hecho comprobaréis edit en cuanto he puesto lo organiza me lo ha apropiado de color verde pues propone de color verde sino usáis el mismo torque edit el color puede cambiar el que el color sea verde lo que importa es que ha puesto de un color determinado como reconociendo que eso no es texto plano sino que es una etiqueta de html pero lo organiza como ya os digo es una etiqueta que técnica que no existe es una etiqueta que me acabo de inventar o si es un lenguaje muy permisivo e incluso nos permite inventarnos nuestras propias etiquetas pero nos lo permita no quiere decir que sea recomendable usar siempre que podamos etiquetas estándares voy a empezar la primera etiqueta tiene que poner siempre es una etiqueta un poco especial que tiene un símbolo de admiración atención porque se pone de color morado como diciendo esta etiqueta es especial y ponemos a continuación docta html da igual que lo escriba en mayúsculas o minúsculas pero el costo es escrito dos minúsculas mejor la admiración indica que esa etiqueta es un poco especial a todas las demás es una etiqueta que marca todo el documento quiere decir tipo de documento y html quiere escribir aunque parezca html5 por tanto lo que estoy diciendo es que este documento de tipo html 5 todo el código que voy a tener ahora está declarado como html 5 vamos a ver la estructura mínima de cualquier página web empiezo escribiendo una etiqueta llamada html y con el 95% de las etiquetas en html ocurre que siempre que tengo una etiqueta de apertura tengo una del cierre en este caso tengo una etiqueta de apertura html y una etiqueta de cierre html esto qué quiere decir pues que desde la etiqueta de apertura hasta la etiqueta r todo lo que va a ver ahí está descrito en html no es una extracción que ya os digo que html es un lenguaje muy permisivo pero es una indicación antes de continuar vamos a asegurarnos que tenemos edith bien concentrado ya que por defecto no viene con una configuración que a mí me parece óptima vamos a perfeccionar la un poco vamos a editar preferencias si alguna vez abrirse en mac simplemente tenemos que ir a el menú que pone edit arriba y preferencia está parecido vamos a preferencias vamos a activar las siguientes opciones primera opción mostrar números de línea a lo largo de nuestro desarrollo cometemos errores cuando cometemos un error el depurador nos dice tienes el error en la línea tal necesitamos saber cuáles son los objetos de línea en segundo lugar me voy a la pestaña editor el ancho del tabulador por defecto en el xerez está a 8 a programar me parece excesivo 8 así que lo voy a bajar a 3 y por último para activar sangría automática lo único que probablemente presenciará ahora vuestro xerez de la o es que nuestro hey la letra se verá más pec y en la mía se ve más grande dejémoslo así documento porque de momento me interesa que podéis leer bien el código que voy escribiendo más adelante tratas de retar era más pequeña a medida que había escribir o más código en pantalla por tanto voy a cerrar para aceptar los cambios y voy a continuar es muy importante no ya en este lenguaje sino en cualquier otro trabajar con sangrías cuando digo sangrías digo espaciados tabulaciones que van a tener una componente funcional sino que van a tener una componente puramente estética pero aunque digo que es estética no es banal sino que la compuesta estética nos va a servir para saber mejor dónde está de quién depende cada una de las líneas para meter una sangría simplemente voy a darle una pulsación al tabulador el tractor recordad que es el botón que está arriba de bloqueo mayúsculas y por tanto se va a intentar se me va a salvar tres caracteres porque tres porque yo eso lo he dicho antes que día tres y ahora aquí dentro voy a escribir dos parejas de rectas porque una web les va a parecer una broma pero no lo es tiene cabeza y tiene cuerpo así que voy a escribir una cabeza casa que abre cabeza que se cierra y un cuerpo que se compre y que se cierra como estaréis viendo cómo os estaréis dando cuenta las etiquetas cierre se diferencian de las etiquetas de apertura simplemente en que tienen una barra por tanto si la etiqueta html es la etiqueta de apertura la etiqueta html es la que está del cierre el 95% de etiquetas de html funcionan así esto que hemos hecho así es la sangría y nos ayuda visualmente a saber que esas etiquetas están dentro forman partes son hijas de esta etiqueta html las sangrías dentro de html como en muchos lenguajes que estaremos viendo no tienen una componente funcional es decir la página web no va a funcionar mejor porque tenga más sangría o porque tenga menos sangría pero aún así siempre siempre siempre os voy a recomendar trabajar con sangrías especialmente cuando esté empezando con html porque aunque no harán que el programa funcione mejor si quedan que nosotros veamos mejor el código y sepamos qué parte depende porque el pasto una etiqueta llamada head y otra etiqueta llamada body el head va a contener toda aquella información que vaya para buscador por ejemplo para google aunque no sólo google mientras que el body va a contener toda la información que vaya para el ser humano la información que realmente se va en pantalla vamos a poner un ejemplo de cada una de las cosas dentro de head voy a escribir una etiqueta title title como os podéis imaginar contendrá el título de la página y dentro de title voy a poner a atención que title está dentro de head y como gaitero está dentro de él he vuelto a pulsar tabulador para que este sangrado para que esté más hacia dentro demostrando que title depende en cuanto a etiquetas del head y dentro de body voy a poner a dios dentro del jefe de puesto hola dentro del body he puesto a dios y cuál será la diferencia cuando valide este código en el navegador la diferencia mirad será muy sencilla señora recargo comprométase que mientras que en el título de la página pone hola en el contenido de la página adiós esto qué quiere decir que lo que en el head no se va a ver en la página se verá por ejemplo en la pestaña y en otras zonas ni tan visibles como la pestaña sin embargo todo lo que pongáis a cody realmente se verá en el cuerpo de la página web esa es la principal diferencia entre y el body el title por tanto ya que estamos con él es uno de los elementos más importantes de la web aunque no se ve pero lo tiene mucho en cuenta el title es reflejar cuál es el sitio tablero de tu página web por tanto os invito a que cada uno os hagáis vuestra página personal si no sabéis qué hacer haceros la página personal siempre fuente para empezar o si tenéis alguna página de algún amigo o de algún conocido que hacer pues la hacéis en mi caso voy a hacer mi pasta personal así que voy a escribir no sé de qué se trata guardo en el navegador recargo comprobaréis que aquí arriba pone josé vicente carta para poner lo que sea que haya dispuesto en el title tenemos prácticamente lo que necesitamos para crear una página web voy a poner a dejar nuestro ácido simplemente esto sería una plantilla a partir de aquí podríamos empezar a escribir pero antes de seguir escribiendo lo que quiero averiguar es si he cometido algún error al crear esta plantilla os voy a decir que yo tengo un error vamos a hacerlo antes de ver qué error tengo un error en la cabeza como un error en el gel vamos a hablar de quién pone las reglas quién dice que es un error y quién dice que no lo es quién dice que se puede hacer en html y quién dice que no se puede hacer no soy yo el que lo dice hay una organización que se llama la world wide web consortium el consorcio de la world wide web el corrector de la web formado por prácticamente cualquier empresa grande que conozcáis que se dedica a establecer se dedica a participar en la evolución y en el mantenimiento del lenguaje html principalmente y otros lenguajes secundarios alrededor la página web la puede encontrar fácilmente en word wide web consortium w3c punto pg os recomiendo esta página porque son los que mantienen el estándar no son los que lo han creado pero son los que lo mantienen a hablar hemos llegado al momento que el creador de lenguaje html es un científico llamado tim berners-lee pero ya hablaremos en su momento de ello fruto más que presentamos esta página me interesa una página llamada w3c valley dator el w3c valley de aitor es una página por supuesto twitter de la del consorcio este nos dicen tu sube tu página web y te decimos si está bien escrita o no está bien escrita y sobre todo te decimos si tiene algún fallo donde está e incluso muchas veces como corregirlo así que se pueden subir unas nueve de tres maneras diferentes la primera variedad por url pero claro nosotros no hemos publicado todavía nuestra página en un servidor así que no tenemos una url todavía también podemos validar mediante de archivo esto es lo que voy a hacer tengo un archivo en el escritorio lo voy a subir también se puede validar escribiendo directamente el código país o la copia de pegar vale por tanto lo que voy a hacer es validar mediante subida de archivos de cerio selección archivos me vaya escritorio me voy a jose vicente me voy a subir index.html y le doy al botón de check y como veréis un error creo que sólo unos vamos a verlo y me dice que he decidido un error y tres advertencias los errores son cosas más o menos urgente vamos corregir las advertencias a veces no se pueden corregir porque no son errores como tales vamos a leer ahora mismo tengo esto de aquí rojo porque tenerlo verde por tanto bajo bajo bajo bajo bajo vamos a advertencias advertencia estás usando algo que este momento experimental 5 vale advertencia no carácter encoding no estás codificando los caracteres y eso que es arroz y pico no carácter encoding esta advertencia técnicamente es la misma y si ahora bajo un poco más va a parar y el error lo urgente de no ser declarado ninguna codificación de caracteres procedo usando windows 1252 ahora ya no que eso que nos quiere decir este error bien lo que quiere decir es esto imagínate que pongo soy un diseñador cuarto recargo y que le pasa a la ñ a la n le pasa algo porque no sé correctamente correctamente porque la web por defecto sino decidida para usar el sistema de caracteres anglosajón es decir todo aquello que se llama inglés evidentemente nada de ellas para de acentos de este villas en el despido no es ya sólo que en todos los países de habla hispana tenemos estos caracteres concretos que pasa por ejemplo tienen su veta para algunas cosas que pasa por ejemplo en francia de acentos tienen este complejo españa no tenemos por ejemplo en rusia tienen todo el set cirílico es tan curioso nos parece que pasa en los países orientales las gráficas japonesas las tres que hay el chino y el chino simplificado coreano todo eso se agrupan aunque se llama codificaciones y tú al codificar lo que haces es especificar con qué set de caracteres vas a estar trabajando lo que me dice por tanto este mensaje es que no he introducido ninguna etiqueta de validación para la localización así que dentro del body voy a poner lo siguiente voy a poner una etiqueta muy especial llamada meta y voy a poner meta charles & start set es igual a efe guión 8 que es el que no toca en la zona de europa occidental que nos encontramos en ute efe 8 es un juego de caracteres que en bastantes países entre ellos españa si ahora hago dos cosas en primer lugar recargo comprobar es como la ñ ahora se interpreta correctamente y sobre todo si ahora vuelvo a subir el archivo le digo al validador hoy es de normalidad que he hecho una corrección revalidó y fijaos ahora como donde antes no tenía rojo ahora lo tengo verde cómo de importante es esto bueno html oslo de una vez más es un lenguaje muy permisivo cuando es muy permisivo quiere decir que puedes cometer errores e incluso errores graves pero la web se sigue viendo en la pantalla muchas veces veremos que es inevitable cometer algún error evitable a veces incluso de hecho agrede cometer errores debemos dentro de lo posible e intentar cometer los menos errores posibles por una parte por limpieza y por otra parte porque google nos premia si no cometemos errores bush considera mejor por nuestras páginas si tienen errores por tanto como nos conviene parecer lo más arriba posible intentaremos siempre explicó a cada paso pero de vez en cuando ir subiendo esta página el validador para comprobar que vamos en el buen camino una vez que tenemos esta estructura ahora sí una especie de plantilla que podemos copiar y pegar en el resto de nuestras páginas web porque todas tienen que tener esta estructura mínima vamos a para desarrollar esta plantilla para convertirla en la página principal en la primera página de nuestro sitio web para ello haré lo siguiente voy a crear unas estructuras voy a crear unas etiquetas estructurales para crear un esqueleto para sitio web así que empiezo con una etiqueta genérica llamada diva la etiqueta genérica se abre y se cierra y por supuesto la sangrando dentro de body para que esté claro que está dentro de body la etiqueta debe no es nueva de html5 existía desde hace un par de acciones en html 4 ha llegado un momento en el que se ha abusado de la etiqueta se usaba para todo precisamente a las novedades de 75 es descargar de responsabilidades a la etiqueta viva y dividir repartir esas responsabilidades en otras etiquetas veréis la web no tiene por qué hacerse así pero a día de hoy la gran mayoría de las webs y es que digo lo podéis comprobar fácilmente tienen una cabecera en la parte de arriba un contenido en la parte del medio y un pie de página es parte de abajo por eso la w3c los proponentes etiquetas que son en primer lugar header que se abre y se cierra no confundir header con help porque era algo diferente atención etiqueta quien sacaba del horno en html 5.1 la etiqueta game la etiqueta principal para poner contenido principal de una página ésta es muy nueva y es la etiqueta footer para pie de página el header contendrá la tercera de la web cabecera no cabecera la etiqueta main contendrá el contenido de la página web el router contendrá el pie de página vamos a ver una cosa que os puede parecer un poco frustrante al principio y es que si yo ahora recargo en el navegador todo lo que script se traduce en tres días restantes yo digo bien heather me has dicho que es la cabeza de la página pero dónde está la cabecera no la estoy viendo las etiquetas son un poco mudas las etiquetas crean la estructura pero hasta que no vengan más y ahí vas a tener que tener un poco de paciencia con css no vamos a ver realmente nada en la página yo os aseguro que la estructura es correcta aunque es normal que tardemos todavía unas pocas ramas en ver la representación gráfica de este gp una cosa que os quiero decir es que fijaos lo que pasa si yo cojo un navegador por ejemplo chrome botón derecho en el navegador a ser posible en una zona vacía y uso la opción llamada del código fuente de la página cuando uso el código fuente de la página puedes comprobar como realmente todo el código que escrito aquí se ha acabado trasvasando al navegador todo el código ha llegado pero aunque todo el código ha llegado visualmente de momento sólo se trate en estas tres líneas así que os visto tener un poco de pase ya metido en todo no pasa nada porque todo lo que vamos haciendo se reduzca en tres sencillas líneas más adelante veréis que necesitamos las etiquetas que hemos escrito para visualmente maquetar nuestra página web vamos a continuar con unas etiquetas un poco particulares no son ya etiquetas estructurales sino son edad de tratamiento de texto una de ellas es una etiqueta que se llama h1 sabré h1 se cierra h1 y aquí voy a poner el josé vicente carratalá con acento sin acento cada uno si ahora guardo y recargo comprobaréis que ese texto no aparece igual que el otro ese texto como un especial además aparece con más margen aparece con negrita hace uno quiere decir henning uno titular de uno en html hay seis nivel estructural el 1 es el más importante el 6 es el menos importante así que aquí voy a usar el demasiado a continuación voy a poner un h 2 titular de menor importancia el que justo me a continuación josé vicente y carratalá este quién es este que hace no sabemos qué tan conocido por tanto con h voy a poner el profesor como programador como diseñador si ahora recargamos puedes comprobar qué aparece josé vicente a tratarla como título número 1 profesor programador y diseñador como título número 2 podréis comprobar que el h2 tiene el tipo de letra un poco más pequeño que el título h 1 y yo soy lo que está pasando por vuestras cabezas por vuestras cabezas está pan está pasando él no me gusta que sea tensión román no me gusta que sea negrita no me gusta ese pero no me gusta ese color y mi respuesta es igual que no os guste porque esto es html vamos a aprender primero html y luego css css es el lenguaje con el que se estiliza visualmente una página web por tanto ahora mismo no me preocupa el estilo de una página web a la que preocupa el contenido más adelante cuando aprendamos css podremos cambiar el aspecto visual que queráis quien he decidido que el h1 se ponen negrita y así de grande el navegador esto que tenéis en la pantalla se llama tilos por defecto son los estilos que un navegador cuando tú no has definido qué estilo tienes poner así que de momento pasar de ellos de momento no os preocupéis por el estilo porque no estarás trabajar todavía con el estilo estamos trabajando con el pml y ya llegará el momento de trabajar a continuación vamos a trabajar con el contenido vamos a quitar esa palabra contenido pero vamos a vamos a completar un poquito más el g ver antes de contenido en el género solemos encontrar tres cosas principalmente el título esto título quizás el logotipo que haremos de yo en imágenes y género de navegación el menú suele estar en la cabecera para poner el menú de navegación se suele poner una etiqueta nueva en html shopko ya nada nada nada navigation navegación y ahora para hacer un menú de relación vais a tener que competir porque os voy a enseñar a trabajar con listas no ordenadas y con listas ordenadas ya sé que tenéis pero si quiero hacer un menú para que me enseñas una lista la respuesta es porque los menús se hacen con listas os lo voy a enseñar no me vais a creer pero confiad en mí y más adelante os demostraré como un menú se convierte en una super chula aún habiéndolo hecho con listas cómo se hace una lista ordenada en html se hace no con una etiqueta sino con combinación de dos etiquetas la primera etiqueta que se abre y se cierra es así que tras el la etiqueta él tiene un orden en la lista no ordenada como esto las listas se basan en el uso de etiquetas lápiz es huele la segunda slim elemento entrevista lo que quiero es que penséis y no hace falta que los toquéis ahora adelante los podéis cambiar pero que penséis que secciones va a tener agua porque lo mi web va a tener la página de inicio muchas veces cuando llegó a este punto la gente me pregunta oye por qué estás escribiendo todo el robot díaz y de repente ahora el link no escribes sin sangrías son dos maneras de escribir no pasa nada podría haber escrito el y otra vez con sangría en 6 de esta forma el problema es que estaría un poco desperdiciando aire blanco en la pantalla vale por tanto en este caso optó por un formato algo más comprimido se puede escribir así también nuevas pasa nada no causa ningún error vamos a usar copiar pegar muchas veces a lo largo de esta formación así que voy a copiar y pegar varias veces voy a poner varios segmentos por ejemplo sobre mí en el que vemos una sección con texto e imágenes por ejemplo portafolio donde market haremos una galería de imágenes por ejemplo blog sección en la que necesitaremos un reloj por ejemplo una sección llamada contacto donde donde pondremos un formulario en el que la gente podrá escribir sus nombres o emails un pasaje y enviarme lo por correo y una última sección que nos da la oportunidad de hacer un favorito extendido llamado el curso y así veremos y ahí podremos crear un formulario con controles extendidos guardo recargo para ver qué pinta tiene esto y comprado como en lugar de un espectacular menú de navegación aparece una lista en orden la noche pero una vez más confiando en mí no os digo que esta lista se transformará en el menú con botones que todos tenéis en la mente como os decía hay dos tipos de listas está esa lista no ordenada un order list hay una lista ordenada la lista ordenada es igual que la que está en pantalla la única diferencia es que se cambia l por l o l es ordered list lista ordenada y si guardo y recargo podréis comprobar como en lugar de aparecer bullets en lugar de aparecer puntos aparecen los ordenados simplemente quería demostrar oslo para este ejemplo y para grandes teorías de navegación que vamos a usar para trabajar con listas no ordenadas no por ningún particular sino simplemente uno lo hace parece que es una costumbre vamos a ver ahora una de las etiquetas que a mí más importantes me parece al crear página es la etiqueta que me permite hacer hipervínculos me permite que cuando en un botón me vaya a otra parte me vaya a otra página web la etiqueta a se abre y se cierra voy a abrir un poco el código para que me veáis bien y voy a escribir lo siguiente a h ref y aquí cierro la etiqueta y veis que es una etiqueta que se abre aquí y que se cierra aquí y que tiene algo que prácticamente no habíamos visto hasta ahora salvo en la etiqueta meta es un parámetro la etiqueta tiene un parámetro un atributo h ref h ref es el nombre del atributo lo que haya entre comillas será el valor del atributo en este caso a la etiqueta a viene de al mayor de ancla es una etiqueta que me dice que si pincha en el texto y de a otro parte a que parte iré pues iré al método en las comidas y dé a un archivo llamado index.hr ml por tanto el propio de acb inició a ir a esta página que estamos diseñando llamada index e.html quiero poner hiperenlaces en todos los elementos de la lista con los que hemos trabajado hasta por tanto a hr atención sobre mí me va con acento no sé soy muy malo con los acentos pero en definitiva aunque lleve acento me voy a cargar los acentos las mayúsculas y los espacios y las señas será subiera para crear los números de página web sobre mí se convierte en sobre mí y todo seguido sin espacio y con minúsculas punto html cuidado si abre la etiqueta a que no se os olvide cerrarla h ref portafolio esta página portafolio punto y cierro blog blog punto 7 ml contacto contacto punto html y cierro y pide tu curso mira a pide su curso todos sin espacio y sin dushku las punto html la pregunta es estas páginas existe no todavía no tanto primero las estamos llamando no debemos extrañarnos si de repente vemos que recargo la página daos cuenta como los puntos de menú se han convertido en hipervínculos y cuando por ejemplo el sobre mi el programa me dice no se ha encontrado esta página web por qué pues porque estoy vinculando a una página aunque no existe todavía pero ahora a continuación por supuesto la crea lo tengo que hacer ahora por tanto es simplemente crear todas estas páginas que he prometido así que me abro la carpeta del proyecto donde ahora mismo sólo tengo index.htm y empiezo a crear todos esos destinos que especificado y por ejemplo sobre mí un pacto html estoy seguro de que quiero cambiar la tensión sí estoy seguro por ejemplo portafolio.co estoy seguro sí por ejemplo o blog punto act ml cuidado tengo que quitar la extensión un punto de x también voy a crear contacto punto html y por último voy a crear y de tu curso punto html por tanto como veis estoy creando tantas páginas web comprometido en el menú de navegación no tenéis por qué decidir ahora mismo todas las páginas del menú de navegación esto más adelante se puede cambiar quizás mañana penséis ostras y si meto esta página concreta pues la puedes meter más adelante simplemente con que amplíes el menú y crees la página correspondiente puedes ampliar lo todo lo que te haga falta cuidado en este caso porque si ahora recargo comprobaréis que si voy a sobre mí ahora la página existe pero que se ve cuando entro lo que se ve es una blanca porque acabó de crear pero no he creado con ella todavía de momento debe ser así el momento lo voy a dejar así simplemente que seamos conscientes de que aunque intente de las páginas existen ya te dice que no existen pero evidentes pero está en blanco

vamos a empezar ahora con css css viene de cascading stylesheets u hojas de estilo en cascada más adelante veremos el porqué en cascada la palabra en cascada es muy importante pero en primer lugar nos interesa el concepto de hoja de estilo la hoja de estilo es algo que nos permite estilizar nos permite darle apariencia visual al contenido html que hemos creado lo primero que os voy a decir es que hay tres tipos de inclusión de css está el css en línea es el primero que os voy a enseñar es el mas desaconsejable luego está el css interno es con el que continuaremos es muy didáctico aunque finalmente no es el que se utiliza y luego está el css externo que es el que se utiliza pero es el más duro de los tres voy a hacer una demostración con css en línea me voy a la etiqueta h1 donde recordamos que la etiqueta h1 es el título principal y voy a poner lo siguiente voy a poner una etiqueta un atributo llamado estilo y voy a poner dos puntos green así que guardo y recargo y comprobaremos que en este caso como he dicho color gris el h1 el título aparece de color verde ahora observaremos que se tiene una sintaxis diferente a la de html ha aparecido dos puntos nunca había visto dos puntos por aquí en html ha aparecido el punto y coma nunca hasta ahora había visto punto y coma ahora veremos qué css tiene sus reglas particulares para escribir voy a borrar antes de continuar este estilo llamado estilo en línea que siempre que podamos debemos evitar el estilo de css que os voy a recomendar es el estilo por lo menos al principio luego más adelante pasaremos al externo llamado estilo interno para ello me voy a ir dentro de la etiqueta head es decir antes de salirme de la etiqueta head antes del cierre de la etiqueta head y voy a poner una etiqueta de apertura style y una etiqueta de cierre style todo lo que yo escriba entre la etiqueta de apertura y la etiqueta del cierre será css y sobre todo deberá respetar las reglas de css eso qué quiere decir la sintaxis de css es diferente y más fácil y más difícil que la de html esto al principio puede parecer una mala noticia porque diréis ahora que me estaba acostumbrando a cómo iba a html ahora me cambian las reglas pues si es así sin embargo os voy a poner una plantilla de cómo funciona cualquier bloque de código css la plantilla es muy sencilla lo que voy a escribir ahora se llamaba pseudo código eso quiere decir que es una plantilla pero no es código de verdad en primer lugar escribiré el nombre de un selector el selector es una etiqueta html que voy a seleccionar a continuación llave que se abre y llave que se cierra y dentro de la llave usando sangrías pero sangrías con efecto visual no con efecto práctico no con efecto real voy a escribir parejas de atributo valor atributo dos puntos valor atributo dos puntos valor atributo dos puntos valor y así tantas veces como haga falta dentro de un selector cómo se aplica esta plantilla en la realidad bueno dejadme que comente esta plantilla y en este caso lo que estoy haciendo es escribir un comentario en css los comentarios en css se escriben diferentes que en html la buena noticia que os voy a dar es que los comentarios en css se escriben como prácticamente en cualquier lenguaje derivado de ce por tanto tanto en php como en javascript como en cualquier otro lenguaje os vais a encontrar comentarios en este formato ahora yo digo h1 y digo color green lo que es lo mismo de antes pero desde el punto de vista del css interno lo que es selector h1 eso qué quiere decir pues que estoy seleccionando la etiqueta h1 a continuación una vez que he seleccionado la etiqueta a h1 le aplico un estilo un estilo que va a ser el color va a ser verde y confirmo como si ahora guardo y recargo podréis ver como el texto sigue siendo verde no porque sólo haya puesto con un estilo en línea sino porque se lo he puesto como un estilo interno vamos a hablar en primer lugar de colores cómo asignar colores al frente cómo asignar colores al fondo lo primero que he hecho y lo he hecho ya inevitablemente es poner un nombre de color en este caso color red o color gris voy a poner a la red y el texto se pone de color rojo voy a poner podría poner black white voy a poner e incluso pink rosa y también me reconoce este color la pregunta sería qué cantidad de colores reconoce en html 4 que conocía 16 o 15 creo que eran en html 5 reconoce 127 o 147 no me acuerdo del nombre pero os lo digo ahora así que css css3 color names y tengo por aquí alguna tabla en internet que me dice que el número final es de 140 entonces aquí tengo una tabla donde me aparecen todos los nombres permisibles y evidentemente el color al que corresponde pero no es una manera convendrán conmigo demasiado práctica de aprenderse colores porque tienes que aprender los 140 nombres de color sin embargo si no me en la válida si alguna veces queréis imprimir la tabla y tenerla por ahí cerca otra manera tradicional en html 4 es usar el código hexadecimal del color el código hexadecimal consiste en poner una almohadilla y a continuación mirad poner seis caracteres dos para el rojo 2 para el verde 2 para el azul si por ejemplo pongo 000000 ese color equivale a negro si pongo efe efe 0000 ese color equivale a rojo si pongo 0 0 efe efe 0 0 ese color equivale a verde con lo cual de alguna manera estamos viendo que el color se mide como combinación de rojo verde a azul pero qué sff eso que es mucho es poco es una letra no es un número eso es porque estamos contando en hexadecimal así que voy a arrancar un pequeño programita de edición de imágenes solo para seleccionar un poco de color para explicaros brevemente cómo funciona el código hexadecimal nosotros estamos muy acostumbrados a trabajar con el código decimal cuando un número llega a 10 cambia cuando llega la siguiente decena cambia sin embargo hay otros sistemas numéricos en uso por ejemplo en informática a un nivel teórico se utiliza mucho el sistema binario nosotros en color en html vamos a usar un sistema hexadecimal con el sistema hexadecimal pasa lo siguiente yo voy a contar números del 0 al perdón del 1 al 8 y cuando llego al 9 en lugar de poner un 9 con una cuando voy pasando de la abc de efe cuando llego a la s y tocaría la g no pasó a la g pasó otra vez al número 1 10 11 12 13 14 15 16 17 18 1 y así voy subiendo de número por tanto en este caso el 1 a él a equivaldría al 17 o al 1 a equivalencia al 17 ahora lo precisó el 0 a es obrera compleja de calcular estoy intentando arrancar este programita para demostrarnos lo alguna vez algún alumno me ha contado algún truco memo técnico para contar en hexadecimal nunca me quedado con el truco realmente me da igual el truco ahora parece que está empezando a rodar me da igual el truco simplemente porque a partir de html5 como la veréis existe un método de fusión de color que es rgb directamente y por eso desde que está el rgb ya no me hace falta encontrar el hexadecimal pero sin embargo se puede un momento que acabo de arrancar para demostraros el truco estoy arrancando esto que voy a hacer también se puede hacer perfectamente con photoshop porque en definitiva los dos tienen un cuadro de selector de colores donde mirad tengo aquí notación html fijaos que si no veía negro es 000 000 voy a subir por los grises 0 8 y en lugar de pasar a 0 9 pasada 0 a 0 a es9 subo sube 0 ahí cuando voy por la 0 efe paso a 1 111 es 17 vale y así voy subiendo hasta que al final hasta que al final hasta que al final paso va a ser efe efe que es el máximo que es blanco veremos por tanto a continuación que esto realmente existe sigue siendo válido es retrocompatible pero ya no es necesario en aquellos navegadores que soporten html5 os voy a decir todas formas que debéis saber que existen en el código hexadecimal pero a partir de html5 por suerte para vosotros si todo va bien no vais a necesitar usarlo porque existe un nuevo método de fusión de color que es rgb con rgb yo lo que hago es poner tres componentes la primera componente numérica para el rojo la segunda para verde la segunda para azul tres componentes que van de 0 a 255 y por tanto eso quiere decir que si mezclo por pura combinatoria 256 niveles de rojo 256 de verde y 256 de azul eso quiere decir que el html puedo tener un total de 16,7 y un pico que me acuerdo lo mismo millones de colores lo cual pues bueno es una cantidad de colores digo yo suficientemente buena como para poder trabajar con alegría digamos así que mezclar colores con rgb es mucho más sencillo que mezclar colores con hexadecimal porque por ejemplo si quiero poner rojo es 255 00 pero si quiere poner rojo clarito es 150 como a 150 en rojo y en verde azul y 255 en rojo simplemente porque no sabías porque al trabajar un cierto tiempo con photoshop o con kim y sacando colores llega un momento que más buenos te acuerdas cuáles son las combinaciones de color lo bueno es que si te acuerdas simplemente las puedes poner qué pasa si no te acuerdas si no te acuerdas no pasa nada dejadme que arranque otra vez el game porque en definitiva simplemente te puedes ir a un programa de diseño gráfico o de retoque de imágenes y simplemente eliges un color el que tú quieras te quedas con las componentes rojo verde y azul las pones ahí tal cual y heredades el color así de sencillo es poner un color dentro de html os voy a decir una cosa existe otro método de color que es el hs l hs l qué es saturation y light next les pongo por ejemplo 0,100 en la saturación 50% de la iluminación y esto me da rojo porque me da rojo si pongo color wheel me da rojo porque en la rueda de color en la rueda de color el rojo está a 0 grados si pongo 90 me quiere aparecer aunque se va un poco me quiere aparecer el verde se me va un poquito por ahí vale si pongo 180 lo que estoy haciendo simplemente es darle la vuelta a la rueda de color por tanto este método de color yo prácticamente nunca lo he usado sólo lo conozco a nivel docente pero bueno que sepáis que está y voy a cerrar este vídeo voy a cerrar esta presentación de colores simplemente diciendo que hay muchos alumnos a lo largo del tiempo me dice el mundo está rgb está hs l donde está a cm y acá mi respuesta es no está en html5 no se les ha ocurrido poner el sistema de color zen y acá el sistema de color cm y acá cian magenta amarillo y negro es un sistema de color schuster activo que se usa sobre todo para impresión a diferencia del sistema de color aditivo rgb rojo verde azul que se usa para medios lumínicos como por ejemplo proyectores pantallas o televisores a un nivel purista es incorrecto que en la web esté el se niegue acá porque la web siempre va a estar en una pantalla rara vez la web se imprime aunque técnicamente es posible pero rara vez la web se imprime sin embargo también es cierto que con sencillas fórmulas matemáticas podrían haber metido soporte para cm y k aunque luego matemáticamente se convertirá rgb en mi opinión esto debería estar y sobre todo tengo esta opinión porque tengo muchos alumnos que son o siguen siendo han sido siguen siendo diseñadores gráficos y así como yo tengo soltura para trabajar con rgb tengo muchos alumnos diseñadores gráficos que les dice es un color y automáticamente saben cuál es su componente cian magenta amarillo y negro por qué porque llevan años trabajando en ello y tengo alumnos que les dice es un color e incluso te dicen el código pantone porque llevan años trabajando en ello y lo peor aciertan que yo nunca aceptaría por tanto creo mi opinión que hubiera sido un buen punto a favor de css3 que hubieran puesto sistemas de pantone y sistemas de mí y acá para facilitar la entrada a toda la gente que viene de diseño gráfico pero no están vale al menos no directamente con uso de librerías por supuesto que sí pero directamente no por tanto generalmente tendréis que el método de color el que más cómodo encontrareis pienso que es el rgb de la misma manera que he puesto un color para el frente también se pueden poner colores para el fondo la manera de hacerlo es muy sencilla simplemente pongo background en lugar de color y una vez más por ejemplo puedo poner pink simplemente color hace referencia al color del frente de un texto background hace referencia al color del fondo de una página si guardo y recargo os daréis cuenta como en este caso en el texto h1 el color del frente es rojo el color de fondo es de color rosa una vez más con el fondo se pueden poner tanto nombres de color como colores hexadecimal es como colores rgb como colores hs l probablemente encontrareis muy interesante no voy a poner colores de fondo sólidos sino poner texturas os recomiendo hacer lo siguiente voy a maquetar el body donde el body evidentemente es el cuerpo de la página web es toda la página web y dentro del body me voy a internet voy a buscar simples web background si no tenéis ninguna textura a mano podéis usar cualquiera de las que están en la carpeta multimedia quiero decir con esto que me voy a la carpeta multimedia y por ejemplo quiero que el logotipo de html esté de fondo de la página mirad digo body background y ahora en lugar de poner un color pongo r perdón pongo url y la ruta completa multimedia barra y esa ruta veréis que es muy importante que cada atributo esté separado del valor por dos puntos y cada pareja de atributo valor estén separados entre sí por punto y coma así que guardo recargo y si os fijáis ahora el logotipo de html está repetido en el fondo de la web ahora esa imagen en lugar de ser una imagen es una textura de fondo qué pasa si no quiero que la textura se repita a veces pasa pues puedo decir una instrucción llamada background guión repeat es igual a no guión repeat para que no se repita ni en horizontal y en vertical también puedo poner horizontal guión repeat para que solo se repita creo que era repeat jon h bueno css background repito hay una opción para repetición vertical y otra para horizontal repite x ayestas repeat x para horizon al sol o en horizontal repeat y para vertical sólo para vertical voy a poner de momento no repita y lo voy a hacer para enseñaros la siguiente instrucción de css que es background guión position dónde está el fondo porque la imagen de fondo fijaos que se ha alineado arriba a la izquierda pero en si la quiero en el centro y se la quiero bajo background position requiere dos parámetros el primer parámetro es la posición en horizontal el segundo parámetro es la posición en vertical en horizontal admite left center of light por ejemplo centre fijaos como poniendo centre top se me centra arriba en vertical admite top middle en lugar de centre y botón por tanto centre medel equivale a que te vamos a poner botón por ejemplo ahí está en el botón a ver que me ha fallado background position vamos a ver qué es esa opción a center center pues sólo están las dudas que son medel centre centre ahora fijados como la imagen está centrada en vertical centrada en horizontal lo que vamos a hacer probablemente no es poner el logotipo de html5 de fondo sino que lo que queremos es mirar ir a internet en el momento de que tengamos internet y buscar lo siguiente simples apuntaros la web background simples web background esa búsqueda de un resultado de texturas repetibles por ejemplo esta mirada y si cojo esa textura y me abajo esto lo guardo en escritorio en la cartera de proyectos en multimedia y voy a guardar el archivo como fondo como si esa imagen le digo fondo punto jpg fijaos como ahora tengo esa textura que me rellena toda la página es decir veis que pues no queda tan mal como repetir el logotipo de html5 si buscáis con este tipo de búsquedas simples web background encontrareis texturas específicamente diseñadas para que cuando las pongas en la web no se note la repetición y hagan un fondo continuo os voy a enseñar a continuación una cosa que se puede hacer pero que no recomiendo hacer es una de las novedades de html5 en este caso perteneciente al grupo de novedades de css3 no solo se puede cargar una imagen sino que se puede cargar una secuencia de imágenes como si fueran capas de photoshop por ejemplo en este caso en la carpeta de multimedia tengo un logotipo de html5 que no es cualquier tipo de logotipo tiene el formato png y además vamos a poder comprobar cómo la he traído con el fondo transparente el fondo no es blanco sino que el fondo como podéis ver es transparente hay un formato de imagen llegaremos de ello que es el formato png que admite transparencia así que lo que voy a hacer es lo siguiente en lugar de poner un fondo voy a poner dos fondos separados con una coma y voy a poner como segundo fondo por supuestísimo el logotipo de html5 así que pongo por una parte el logotipo de html5 y a continuación el fondo de textura que me he bajado cuál es el resultado el resultado es que fijaos que aparece la imagen y por debajo como si fuera una composición de capas en photoshop o en el game aparece la textura que me había bajado es decir es perfectamente posible en css3 montar multifondos como si fueran capas si vais a hacer una página para un pc para la pantalla de un ordenador no hay ningún problema en utilizar esto porque los ordenadores a día de hoy podríamos decir que para manejar páginas web tienen potencia sobrada pero cuidado con los teléfonos móviles porque los teléfonos móviles no van tan sobrados de recursos y esto de poner fondos múltiples a un móvil no suele colgar bastante vale por tanto os digo que existe pero por lo menos con los móviles de hoy e intentar no usar este tipo de técnicas yo de hecho ahora para trabajar lo que voy a hacer es prescindir de ella bien la cosa se pone interesante pero también tenemos que profundizar nuestros conocimientos sobre html y css cuando quiero maquetar este dive que es el contenedor pero cuando escribía anteriormente este debe escribir sin ningún tipo de parámetro y esto es peligroso porque en una página web pueden haber múltiples ocurrencias de una etiqueta en este caso de un dip para evitar las colisiones con múltiples coincidencias voy a usar dos parámetros diferentes que son el ibi y son la clase estos dos parámetros me servirán para localizar a esa etiqueta en css como viva y de voy a poner contenedor y como clase de momento no voy a poner nada más adelante ya haremos etiquetas con clases como diferenciar a una de la otra una etiqueta id es una etiqueta que no se va a repetir más el id yo suelo decir que es algo así como el dni de una persona no se debería repetir un dni porque identifica única inequívocamente a una persona la clase es una etiqueta hecha para ser repetida por ejemplo si el aire es como el dni yo diría la clase es como valenciano la propiedad de ser valenciano no es de una sola persona puede ser compartida por una colectividad pues con las etiquetas pasa igual si un atributo puede ser compartido es una clase y si es único de una etiqueta es una idea en este caso lo he puesto con ive y ahora como lo voy a localizar dentro de css es muy sencillo siempre que quiera localizar un id pondré una almohadilla y siempre que quiera localizar una clase pondré un punto a reglas un poco abstracta pero veréis que es fácil de recordar y de almohadilla clase punto así que y de contenedor es almohadilla contenedor y ahora vamos a aprovechar contenedor para darle algunas propiedades css por ejemplo la primera de ellas ya la conocemos que es background white quiero que el fondo del contenedor sea blanco fijaos como hay un contenedor blanco que está por encima del fondo ahora una propiedad muy interesante muy sencilla que es week with anchura por ejemplo 500 píxeles quiero que mi web sea de 500 píxeles de ancho se me sale la imagen no pasa nada ahora luego lo arreglo hemos visto por tanto que el background ya lo sabíamos es para poner el color de fondo el wef y más adelante veremos el height son para poner la anchura y la altura no me gusta esta página por dos razones una el texto está muy pegado al margen muy pegado al borde y segundo parece que el contenido está alineado a la izquierda en lugar de estar centrado que es lo que se lleva así que os diré por tanto que hay dos tipos de márgenes hay un margen llamado padding que es el margen interior y un margen llamado margin que es el margen exterior veréis que pongo padding por ejemplo 20 píxeles damos cuenta que el contenedor no se mueve de la izquierda de la pantalla pero en cambio ahora hay un pequeño margen entre el filo del contenedor y el contenido interior el padding es margen interior si yo pongo por ejemplo ahora martín 40 píxeles daos cuenta como ahora el contenedor blanco se separará del margen exterior así que lo que ocurre desde el margen hasta el interior se llama parís lo que ocurre desde el margen hasta el exterior se llama margin os voy a contar un pequeño truco y es que si ponéis margin auto automático es decir ya ya el mismo margen a la izquierda de cada derecha lo que ocurre es que la página se centra el contenedor se centra vamos a trabajar con algunas propiedades de texto lo primero que os voy a decir es que no sé si habéis notado que el texto h1 y el texto h2 tienen mucho más margen que cualquier otro tipo de texto pero para eso precisamente para eso precisamente os acabo de enseñar lo de el margin y el párking para poder quitar esos estilos por defecto que muchas veces nos pone el navegador así que voy a poner martín 0 píxeles y padín 0 píxeles en el h1 y comprobaréis como de esta manera le estoy quitando los márgenes tanto a la 1 como la h 2 que es lo que acabo de hacer lo que acabo de hacer es seleccionar dos etiquetas a la vez seleccionando una etiqueta coma otra etiqueta y si hace falta como otra etiqueta coma otra etiqueta y así tantas veces como queramos pudo aplicar propiedades a varias etiquetas a la vez a continuación antes de empezar a hablar de propiedades de texto voy a empezar a hablar de propiedades diferentes pata izquierda derecha arriba y abajo cuando yo pongo por ejemplo un marketing de 0 píxeles estoy diciendo por ejemplo que en h1 quiero que el mismo margen se me aplique arriba abajo izquierda y derecha pero qué pasaría si quiero aplicar un margen solo a la izquierda porque puedo poner algo como margin guión left por ejemplo 20 píxeles así que guardo recargo y dados cuenta como ahora tengo un margen de 0 arriba un margen de 0 abajo un margen de 0 a derecha pero un margen de 20 a la izquierda vamos a ver por tanto cómo podemos realizar una maquetación con cada uno de los elementos por ejemplo el martín jeff se lo puedo cambiar también a h2 digamos con 40 píxeles lo que estoy haciendo es crear como una especie de sangría en cada uno de los dos elementos otra manera de expresar los márgenes es con un solo margen y poniendo cuatro parámetros por ejemplo cero píxeles 10 píxeles 20 píxeles 30 píxeles en lugar de tener que escribir cuatro líneas margin top martín left martín right martín bottom lo que hacemos es poner directamente los diferentes valores dentro de este margen de esa forma se escribimos un valor se asume que es el mismo valor para los cuatro lados escribimos cuatro valores estamos indicando manualmente cada uno de los valores de esa forma fijaos que a la arriba perdón le pondría a cero píxeles derecha 10 píxeles bajo 20 píxeles izquierda 30 píxeles son varias maneras como veis por tanto de escribir los márgenes y los padding de de un código css veréis muchas veces que esto que os acabo de explicar de los cuatro parámetros o el guión left your right y todo lo demás se aplica a margin se aplica a padding y también se aplica a otros a otras operaciones a otras propiedades css que todavía no hemos aprendido antes de pasar a hablar del menú vamos a hablar un poco de propiedades de texto de qué propiedades tenemos dentro de css para ello por tanto nos vamos a ir al archivo de index html vamos a ir index.html donde hemos estado trabajando el css ahora luego exportaremos el css a un archivo externo pero de momento vamos a continuar por aquí bien me voy a poner dentro del título h1 y dentro del título h1 voy a especificar las siguientes propiedades en primer lugar la tipografía por defecto en h1 está en times new roman así que yo lo que quiero es cambiar de familia de fuentes si lo que quiero es cambiar de familia de fuentes pongo font guión family en familia y voy a poner por ejemplo sans es decir sans-serif sin ser y fas sin remates sin decoraciones si ahora guardo y recargo comprobaréis como el h1 y solo el h1 porque esa propiedad de la escrito sobre el h1 aparece con letra de palo aparece con letra sin decoraciones sin los remates que veis por ejemplo el estilo h2 senado beige claro una cosa que se puede hacer es poner sans-serif en google y en google imágenes y suelen aparecer gráficos muy claros de la diferencia entre sheriff y sanserif mirad esto es letra con share y fas con pequeños remates con decoraciones y fijaos por ejemplo la vez hola no tiene esas decoraciones vale por tanto dos grandes familias son bueno hay varias familias esta script para letra como hecha a mano sheriff para letra decorada y sans-serif para letra de palo para letra no decorada la cuestión es que da igual que pongamos sheriff o sanserif yo puedo incluso permitirme el lujo de poner verdad y el programa cambiará la fuente tipográfica para que esté con la familia verdad pero esto es peligroso porque yo estoy invocando a una familia tipográfica concreta qué pasará si en el ordenador en el que se va a ver mi página no está instalada la tipografía verdad pues lo que pasará en ese caso es que el programa el navegador que esté de ordenador cambiará la fuente tipográfica por la que crea más conveniente y puede acertar y puede no acertar por tanto una propiedad nueva de css3 que no estaba en css 2 y se ha esperado durante mucho tiempo es la posibilidad de cargar fuentes tipográficas personalizadas y eso se hace de una manera más sencilla de lo que pueda parecer en primer lugar lo que tengo que hacer es descargar una fuente tipográfica cómo hago eso por ejemplo podemos ir a una de las de los portales a una de las páginas web que albergan millones de millones de familias de fuentes una página muy famosa no es la única pero una muy famosa es la font creo que he puesto fa font entro en esta página tengo un montón de de familiares de fuentes voy a una voy a esta misma para no liarnos con estilos y con grupos y con jerarquías me voy a descargar la fuente me descargo la fuente miren qué bien me la voy a descargar directamente en multimedia es donde quería tenerla si os la descargas en descargas pues luego moverla manualmente hasta la carpeta multimedia cuidado es un archivo zip así que yo con el archivo zip no puedo hacer nada por eso lo que voy a hacer es seleccionar el archivo zip y descomprimirlo por ejemplo lo voy a descomprimir aquí por supuesto cada archivo de tipografía mirad tiene un archivo txt que constituye que contiene los términos de uso y el acuerdo de licencia evidentemente tenéis que leeros esos términos de uso para comprobar que el uso que vais a hacer de la fuente no viera los términos de uso y luego tenemos aquí un archivo de atención llamado ttf hay varias extensiones para familiares de fuentes pero en la extensión ttf es de las más comunes así que yo voy a hacer lo siguiente mirarme a buscar momento y css3 fons a copiar me un trozo de código es donde estás aquí este código es vale y ahora voy a escribir lo siguiente atención arriba de h1 pero fuera de uno no estoy dentro de h1 estoy fuera escribo lo siguiente font face con una arroba adelante es importante y ahora en font family yo pongo lo que queramos voy a poner por ejemplo mi fuente el nombre es el que queráis ahora establezco donde está la url por tanto la url está en multimedia y por supuesto al igual que he hecho con las imágenes o con el vídeo con el audio tengo que seleccionar perfectamente no me puedo equivocar el nombre de la fuente tipográfica lo que suele hacer como acabáis de ver es simplemente copiar y pegar y así me aseguró que todo va perfecto y ahora por último simplemente aquí en h1 si aquí he declarado esta familia como mi fuente cuando la llamó aquí la llamo mi fuente quiero decir que si ahí pongo longaniza aquí bajo pongo longaniza da igual cómo se llame la fuente el nombre lo elegimos vosotros pechos fijados lo que siempre os digo si está en castellano es porque lo podéis elegir vosotros pero lo que pongáis allá arriba tiene que ser exactamente lo que pongáis aquí abajo y si ahora acuerdo y recargo podéis comprobar como ahora el texto aparece con la misma familia tipográfica que me he descargado de internet así que simplemente con esto lo que acabo de hacer es personalizar la familia de fuente que en este caso he utilizado para h1 lo puedo hacer para h2 h3 para el texto de párrafo para todo el cuerpo o en definitiva para aquella parte de la página que yo quiera una consideración si yo he cargado font face aquí abajo cuidado porque no puedo llamar font face aquí arriba sería peligroso entonces lo que se suele hacer una buena costumbre una buena práctica es cortar esa etiqueta font face y ponerla al principio de todo el css para que lo primero que se cargue son las fuentes personalizadas y luego ya veremos en qué parte del css se van a utilizar en css en html y en prácticamente cualquier lenguaje de programación hay que tener cuidado con las mayúsculas y las minúsculas no me estoy refiriendo solo a esta f mayúsculas sino que me estoy refiriendo a los nombres de archivo me estoy refiriendo a cuando lleguemos a javascript los nombres de variable me estoy refiriendo prácticamente a cualquier cosa y te voy a decir que hay una cosa que tiene mucho peligro generalmente por una cuestión estadística no por voluntad mía pero por una cosa en estadística la gente desarrolla en su gran mayoría usando windows y luego lo subes a un servidor que generalmente está en linux quiero decir con esto que desarrolláis en una gran mayoría por ejemplo como estoy haciendo ahora es decir en un sistema operativo windows pero qué pasará cuando vosotros cojáis esta web y la queráis publicar en internet de ese que ahora mismo me diréis no lo sé para qué estoy aquí bien pues lo que pasará es que lo subiré jce a un servidor que estará muy probablemente en una empresa que vais a contratar y ese servidor que el sistema operativo tiene vosotros me diréis no lo sé es otra de las cosas por las que usted de aquí pues yo os digo el servidor con una con un gran nivel de probabilidad de un sistema operativo linux y diréis vale y eso qué tiene que ver con la pregunta de las mayúsculas y las minúsculas lo que tiene que ver es lo siguiente en el sistema operativo windows no se distinguen mayúsculas y minúsculas eso quiere decir que puedes poner por ejemplo ahí mayúsculas en mi fuente y luego cuando la declaras lo pones con minúsculas y en windows funciona pero sin embargo todos los sistemas operativos basados en unix y linux están basados en unix distinguen entre minúsculas y mayúsculas por eso te puede pasar una cosa muy curiosa y es que una web que te funciona en tu ordenador la subas a internet y de repente no funcione y te rompas los cuernos pensando porque no funciona que has hecho mal pues entonces incluso dices si funcionaba en mi ordenador y no funciona al subirlo el problema estará al subirlo y empiezas a buscar soluciones por ahí cuando no está el problema por ahí en el problema están las las minúsculas entonces explicando el problema cuál es la solución la solución evidentemente es que seáis cuidadosos la solución es que si usáis mayúsculas os acordáis de usar mayúsculas siempre en el mismo sitio hay gente como yo que no es particularmente cuidadosa entonces lo que hacemos es para asegurarnos que no nos equivocamos es escribir todo en minúsculas o bien usar esta nomenclatura que se llama camel que es lo que os contaba el otro día como el camello dentro de la maleta que cuando tienes varias palabras la primera letra de lo que sería la segunda palabra o las siguientes palabras la pones en mayúsculas es una regla no os digo que uséis esta lo que os digo es que selecciones una regla siempre minúsculas siempre mayúsculas kamel case la vuestra propia para que en definitiva cuando venga aquí y diga ostras como escribía bajo mi fuente sepáis cómo lo escribiste es porque siempre uséis la misma manera de nombrar cosas en programación y ya os digo que estamos todavía en html estamos empezando css y estos lenguajes son muy permisivos muy permisivos quiere decir que cometer errores suele tener pocos efectos hay otros lenguajes de programación como por ejemplo javascript y php que cometer un solo error puede ser muy traumático e insisto cometer errores no hay que aspirar a no cometer errores hay que aspirar a cuando cometes un error localizarlo fácilmente y arreglarlo rápidamente vamos a ver más propiedades de texto un par de propiedades más que quiero ver que son importantes y desde luego muy frecuentes son las siguientes primero font-size font-size tamaño de fuente veo que al haber usado una fuente de tipo hand lighting de tipo escritura manual parece que el texto se ha quedado pequeño esto se puede arreglar fácilmente por ejemplo poniendo font-size dos puntos 64 píxeles lo que tenemos de esta manera por tanto es que fijaos que he conseguido ampliar podría en otras partes haber querido disminuir el texto para el elemento presente que es el h1 otra cosa siempre dentro de h1 por defecto porque el navegador me pone este estilo por defecto el texto h1 es negrita y el que sea negrita en este caso me molesta bastante porque esta letra que he elegido en negrita prácticamente no se lee así que por eso hay otro modificador llamado fondo waits font weight que es peso de la fuente normal sin negrita fijaos como la letra ha perdido grosor o el tipo de letra ha perdido grosor o bold que es con negrita normal sin negrita bolt con negrita otro tipo de modificación sobre la fuente que probablemente no se va a notar en esta tipografía porque ese tipo grafía ya es cursiva pero que voy a aplicar sobre h2 es precisamente la cursiva la itálica así que en h2 voy a poner font guión style es igual a ita liq ita liq en inglés guardo recargo y ahora podréis comprobar como la letra h 2 se ha vuelto de tipo italika se ha vuelto de tipo cursiva si en algún caso tenéis una letra itálica y la queréis quitar simplemente tenéis que poner normal y con normal vuelve a la normalidad una tercera propiedad de texto va a ser transforma text transforma tienen los siguientes valores tiene varios más de hecho os voy a decir los más importantes primero lower keys lowell keys es que fijaos que tengo mayúsculas y minúsculas me lo pasa todo a minúsculas otros modificadores upper keys me lo pasa todo a mayúsculas y había uno por ahí que se llamaba capital eyes o versalitas no me lo está haciendo ahora no os preocupéis que lo que hace es poner todas las mayúsculas pero las primeras letras más grandes que las segundas lo que se llama versalitas en castellano o en word por ejemplo en word sea a ver salitas así que lower keys tenemos por tanto algunas propiedades del texto que podemos modificar pero sobre todo lo más importante la innovación que yo pienso que es más importante en css3 es la capacidad de modificar la fuente tipográfica ya que eso abre muchísimo nuestro campo de estilo posible a continuación viene una parte muy interesante de css ya que con ella voy a maquetar el menú y voy a cumplir la promesa de que este horrible menú en lista se va a convertir en un precioso menú en botones cómo lo voy a hacer recordamos en primer lugar que el menú de navegación está incluido dentro de una etiqueta nada está incluido dentro de una etiqueta y está incluido dentro de una etiqueta league por eso voy a hacer lo siguiente atención es decir la lista que está dentro de la va a tener la siguiente propiedad list style type es igual a non a ninguna con esto lo que estoy haciendo es quitar los bullets con esto lo que estoy haciendo es quitar los puntitos a continuación digo para ben es igual a cero martín es igual a 0 para quitar el margen por defecto el empuje por defecto que tiene la lista no ordenada y la lista ordenada también ahora voy a quitar el estilo este que tiene por defecto el hiper enlace y para eso digo nada el lic es decir el a que está dentro del link que está dentro de él y que está dentro del lab quiero decirle text decoration es igual a none lo que equivale a decirle que quiero quitar los subrayados y le voy a decir por otra parte color es igual a black lo que equivale a decir que quiero que el color no sea el azul cuando no he visitado el enlace y el morado cuando el visto del enlace sino que sea el color que yo diga por eso como estáis viendo lo primero que he hecho realmente antes de empezar a darle estilo al menú es quitarle el estilo que tenía por defecto y ahora una vez que se lo he quitado que lo he dejado plano vamos a empezar a trabajar para darle el estilo que queremos por ejemplo seguimos con él y le decimos lo siguiente le decimos background el fondo es igual a negro cuidado si el fondo es igual a negro en ese caso el color será blanco el fondo negro está muy pegado sobre la letra por eso ya sabéis que voy a poner un poquito de padding de unos 4 píxeles y quizás un poquito de margen de unos 2 píxeles quiero que todos los botones tengan la misma anchura por eso digo wifi no sé 100 píxeles iguales demasiado with 100 píxeles bueno no me lo coge aquí lo que voy a hacer es ponerlo aquí nada un link y tampoco me lo va a alguien wef 100 píxeles con gemelo no me lo coge ahí pero me lo cogerá aquí y flow left flota a la izquierda ahora sí con flow the left lo que está haciendo simplemente es que los botones en lugar de estar anidados arriba y abajo están a la izquierda de la derecha el problema en este caso es que tengo tantos botones que se me bajan a la línea de bajo quizás lo que haría en ese caso mirad esto ya lo hemos visto antes justo antes font-size es igual a 10 píxeles bajo el tamaño de letra para que me quepan más botones por fila ahí vale cuidado no la bajo tanto voy jugando un poquito con la letra 60 píxeles casi un margen de un píxel vamos jugando y por último 11 píxeles el problema está en que como hecho de letra tan pequeña se ve muy mal pero yo puedo poner otras cosas que hemos aprendido hoy como por ejemplo font family sans-serif sí no sí tex transform a pair keys fijaos que de esa manera probablemente las letras se leerán un poquito mejor esa es la única que no le bajó un poquito la familia de la fuente un poquito más 9 píxeles y así al final me lo consigo maquetar bueno esta se me queda todavía un poco más grande bueno es que puedo poner 8 pero ya sería quizás no lo sé demasiado pequeño o quitar texto es otra solución una cosa que quería mostraros es que el texto por defecto está en la izquierda del botón pues para centrarlo voy a usar text align centre alineación centrada para que el texto se quede centrado dentro del botón y ahora ya os voy jugando un poquito will 62 hasta conseguir will 61 que el menú se me quede lo mejor distribuido posible en la pantalla vamos a aprender a continuación a trabajar con [Música] transiciones y animaciones como las transiciones y animaciones son un poco difíciles lo que voy a hacer es crear un archivo nuevo en ese archivo vamos a aprender transiciones y animaciones y luego aplicamos lo que hayamos aprendido sobre nuestro proyecto para ello por tanto dentro de la carpeta de proyecto voy a crear un archivo nuevo html llamado transiciones animaciones punto html luego si queréis o lo archivo o labor y por supuestísimo lo cargo tanto dentro del editor como dentro del navegador web voy a hacer ahora una estructura web lo más sencilla posible por tanto probablemente me voy a saltar algunas etiquetas y body era aquí dentro del body voy a hacer un día con y de cuadrado y aquí dentro del libro voy a poner hola yo soy un cuadrado así que si ahora dentro del hair pongo style y digo todo aquello que tenga el aire cuadrado va a tener las siguientes propiedades primero with de 100 píxeles de 100 píxeles y background red que me hace esto bueno pues esto me dibuja un cuadrado de 100 píxeles de ancho por 100 píxeles de alto con el fondo de color rojo y aquí pone simplemente hola yo soy un cuadrado hasta ahora ninguna transición ni tampoco ninguna animación las transiciones empiezan un poco con un pseudo selector de css que se llama h huber por tanto yo voy a poner cuadrado 2 puntos h v el pseudo selector está en h over y cuando pongo a ver lo que hago es decir lo que ocurre cuando yo pongo el ratón encima de ese elemento por ejemplo el background en lugar de ser rojo va a ser verde qué ocurre por tanto entonces recargo y fijaos que cuando el ratón pasa por encima del cuadro se vuelve verde y cuando el ratón sale del cuadro vuelve a ser rojo esto no es una novedad de css3 esto ya existía desde antes pero la novedad en este caso consiste en poner aquí una palabra mágica llamada transition todo un segundo con el lo que estamos haciendo es especificar qué elementos van a transicional y cuáles no van a transición ar en este caso digo que todo lo que haya que transición ar y le digo cuánto va a tardar esa transición así que lo divertido es que sea ahora guardo y recargo fijaos lo que pasa cuando paso el ratón por encima lo que pasa cuando paso el ratón por encima es que cambia a verde pero en lugar de cambiar a lo bestia en lugar de cambiar en un momento cambia poco a poco como de poco a poco pues tarda un segundo exacto en cambiar no sólo se puede animar el color de fondo sino que también se puede animar cualquier parámetro os podéis imaginar siempre que sea un parámetro css y los que no sean css pues se pueden animar con javascript así que por ejemplo en este caso voy a animar el color verde y la anchura de 400 píxeles y ahora fijaos que cuando meto el ratón encima del objeto por una parte cambia a verde y por otra parte se hace más grande exactamente hasta 400 píxeles qué aplicación tiene esto a nuestro proyecto las aplicaciones son muchas no no es esta que os voy a enseñar la única posible pero esta que os voy a enseñar es una muy clásica fijaos yo tengo en este caso un archivo index html y tengo un menú pero yo no sé en este caso sobre qué elemento estoy pinchando dir es como que lo sabes si tienes ahí el ratón bueno supongamos que no lo sé entonces si tengo aquí un nap un link y en este nada le he dado una serie de propiedades voy a poner nada un link a dos puntos hv y ahora con dos puntos h ver lo que voy a hacer va a ser tan sencillo como background por ejemplo blue o gray por ejemplo quiero que al poner el ratón por encima los botones se pongan de color gris atención se ponen de color gris pero se pueden de color gris inmediatamente sin ningún tipo de transición sin ningún tipo de animación por eso voy a ir a nadar y voy a decir transition all un segundo y esto lo que hará con esto lo que conseguiré es que cuando pongo el ratón por encima de los botón de los botones en lugar de hacer una transición tan fuerte como lo hacía antes me hace una transición como veis mucho más suave dentro de transiciones animaciones me voy a volver al archivo de transiciones animaciones ahora voy a escribir el siguiente código cuadrado va a tener una animación que se va a llamar 99 y que va a durar por ejemplo 5 segundos como os podéis imaginar el nombre de 99 es un nombre que elegido yo ahora realizaré la siguiente acción si especificado que voy a llamar a la animación 99 a continuación tengo que definir la animación en el 99 por tanto voy a crear arroba y frames 99 es decir los fotogramas de 99 los frames van a ser los siguientes cuidado con esta etiqueta que es un poco especial porque dentro de las llaves se escriben otras llaves lo que ocurre por ejemplo al 0% de la animación y lo que ocurre por ejemplo al 100% de la animación y ahora voy a decir algo tan sencillo como por ejemplo es igual no le es igual a 0 píxeles voy a decir aquí posición relativa lo siento es la tv es te voy a mover te voy a poder mover y 100 es igual al leaf 100 píxeles vamos a verlo si todo funcionará como debe eso querría decir que ahora le doy a recargar y la animación debería empezar pero todo no funciona como debe ya que la animación todavía a día de hoy se considera que es bastante nueva en css3 y requiere una cosa que se llaman prefijos de compatibilidad los prefijos de compatibilidad que aseguran la compatibilidad de ese elemento css en los navegadores en este caso estudian en webkit estoy en chrome que es un navegador que funciona bajo el motor webkit y por tanto tengo que hacer lo siguiente no ya animation sino webkit guión animation y noia y frames sino webkit guión key frames sólo cuando hago esto atención recargo y vemos como el objeto se mueve no es no se mueve porque yo le haya pinchado encima simplemente le he dado a recargar y él solito se mueve la diferencia entre una transición y una animación la transición requiere que nosotros hagamos algo mientras que la animación no voy a completar esta animación de la siguiente manera por ejemplo left 0 top 0 yo no voy a decir en el 25% lee 100 píxeles y top 0 píxeles en el 50% 100 píxeles top 100 píxeles en el 75% left 0 píxeles 100 píxeles y por último en 100% left 0 píxeles y top 0 píxeles y diréis eso exactamente qué es lo que hace pues eso lo que hace es que la animación haga un cuadrado vamos a verlo recargo mirad y hace esto animación hace hoy un cuadrado cuidado ahí tengo algo mal y tengo algo mal no sé por qué está mal algún error he cometido vamos a verlo en algún error cometido y el error está 75 ahí fijaos que se me ha olvidado el porcentaje bueno no pasa nada ahora sí fijaos cómo hace el cuadrado y vuelve al sitio independientemente de la transición una cosa es transición y otra cosa es animación así que cuál es la buena y la mala noticia la buena noticia es que puedo animar cualquier cosa usando css sin recurrir a programas externos de animación la mala noticia es que hay que animar paramétrica mente hay que animar con parámetros lo cual equivale a tenerse que aprender parámetros que al principio os costará cuando os acostumbréis cuando os acostumbréis no os costará tanto antes de volver al proyecto original lo que quiero hacer es explicar las transformaciones en css 3 pero antes tengo que explicar tengo que acabar de explicar lo de los prefijos de compatibilidad hemos visto qué si estoy en chrome tengo que poner webkit con qué navegador tengo que poner que prefijos la solución es muy sencilla webkit es para todos aquellos navegadores que estén basados en el motor webkit de apple creo que es de apple son varios pero los más famosos son chrome y safari tengo otra etiqueta de compatibilidad qué es moss más de mozilla es para todos aquellos navegadores que se basen en el motor gecko principalmente el más conocido es firefox es para todos aquellos motores para todos aquellos navegadores que se basen en el motor de ópera ms es para todos aquellos navegadores que se basen en el motor propio de microsoft que es internet explorer fundamentalmente y por supuesto debería poner otra línea sin prefijo de compatibilidad en esta línea preparada para el futuro preparada para que cuando ya no haga falta poner prefijos de compatibilidad no tengas que venir a editar tu código pero esto a que me obliga esto me obliga a quintuplicar el código ojo que no es sólo para esta línea ahora lo que tendría que hacer es este bloque y multiplicarlo por 5 e ir cambiando los prefijos de compatibilidad esto es algo que es bastante rollo dentro de la programación web pero es así pero es lo que hay por tanto siempre que trabajéis con elementos avanzados tales como por ejemplo animaciones tendréis que si queréis que la gente lo vea desde cualquier navegador añadir los prefijos de compatibilidad correspondientes ahora sí otra cosa que os quiero enseñar unas transformaciones que existen dentro de html mirad la primera que os quiero enseñar transform 2 puntos translate y por ejemplo voy a poner 300 píxeles 300 pixeles transporte las late en la pantalla lo que hace vamos a verlo como 300 píxeles lo que hace es que desplaza el objeto en este caso 300 píxeles en horizontal 300 píxeles en vertical principalmente hay tres transformaciones hay varias más pero las tres principales son translate para mover ‘rotateq’ para rotar ‘rotateq’ se pone en 45 y el sufijo de the dead’ y de grado sexagesimal así que guardo y fijaos como el objeto me sale a 45 grados 45 de iu pero que he pasado ahí lo que ha pasado es que parece que el giro me ha eliminado la transformación ya no está a 300 a la derecha 300 abajo esto es porque en las transformaciones no se deben poner en líneas separadas porque si se ponen líneas separadas la última machaca las de arriba lo que se tiene que hacer es simplemente poner una coma la otra guardo recargo y fijaos como ahora y hay calma no es una coma sino que es un espacio ahora sí ahora tengo una transformación de 300 300 y tengo una rotación de 45 grados por último la tercera transformación que quiero ver se llama es que el skate 11 el primer número es la escala en x el segundo número es la escala en y 11 es la escala original se pongo 0.5 0.5 veréis que el objeto es la mitad de pequeño se ha hecho más pequeño tanto el dif como la letra todo el pac si yo pongo por ejemplo 22 el dip se hace más grande tanto el elemento como la letra por tanto estas tres son las transformaciones principales que son mover rotar y escalar las transformaciones que hemos aprendido pueden ir sueltas si no queremos ni que se animen y que se transiciones o pueden ir dentro de la ubr si queremos que transición en con un toque de ratón fijaos cómo me espera la animación y ahora hago así era os cuenta como hace exactamente la transición que comentábamos o bien las puedo poner dentro de la animación por ejemplo voy a poner aquí un translate en los dos y voy a decir aquí cero grados aquí 45 aquí 90 aquí voy a poner 270 y aquí 180 aquí la escala va a volver a ser de 1 aquí va a volver a ser de 2 aquí 0.5 0.5 y aquí de 2 ahora guardo y recargo fíjate como ahora lo que hago es animar la escala animar la escala animar la rotación por eso prácticamente cualquier propiedad css se puede poner dentro de transición y dentro de animación y en este caso la transformación de css3 no es una excepción como demostración de esto que acabamos de aprender una demostración bastante mundana en términos de que voy a hacer algo que todo el mundo acaba haciendo alguna vez u otra voy a hacer un banner voy a hacer un baile animado de tal forma que haya en varias imágenes que van pasando poco a poco para hacer un banner permitirme empezar con un archivo nuevo voy a hacerlo en un archivo completamente nuevo y luego más adelante lo que haré es incorporarlo al proyecto mezclarlo con el código del proyecto me hago por tanto un archivo llamado banner html lo cargo tanto en el editor como en el navegador y empiezo a escribir docta y html la etiqueta html etiquetaje este que tampoco y aquí voy a escribir lo siguiente dentro del body voy a crear un día con y de banner dentro del gel voy a poner styles para maquetar el banner las imágenes que tengo dejadme que lo compruebe son imágenes que creo que son de 800 x 600 no 800 x 400 obteniendo por 400 así que mirado voy a decir el banner el banner tiene guys 800 píxeles height 400 píxeles y si lo queréis ver bien bueno voy a bajar esto a la línea de bajo yo digo background por ejemplo red simplemente mirad para ver esto para ver qué donde aparece el banner aparece un rectángulo de momento rojo ahora en este banner voy a poner las imágenes que van a participar las imágenes que van a participar son está multimedia barra esa imagen y le voy a dar una idea y de banner 1 voy a hacer cuatro imágenes banner 234 y en cada una de estas imágenes evidentemente voy a poner los archivos correspondientes ahora guardo recargo y lo que observamos es que he puesto cuatro imágenes una al lado de la otra voy a decir que cada una de estas imágenes es de clase imagen banner cada una de ellas por tanto hay propiedades que comparten y propiedades que son comunes y propiedades individuales las que comparten son imei spanair es emails banner las individuales son manera 1 banner 2 banner 3/4 ahora con css empiezo a escribir lo siguiente banner imagen banner esto es aquí dentro de posición relativa y esto es posición absoluta qué quiere decir esto que ahora las cuatro imágenes están pegadas adentro poniendo aquí arriba en el contenedor en el padre posición relativa y aquí abajo poniendo posición absoluta fijaos que lo que tenemos es que las cuatro imágenes están pegadas una encima de otra lo podéis notar porque la última imagen que veis justo es la de las cerezas bien ahora voy a hacer lo siguiente voy a hacer una animación para cada uno de los banners por otro producto boya matar estos banners un segundo los voy a desactivar me quiero quedar solo con el primero y voy a trabajar con el primero ahora digo banner banner 1 tiene una animación dejadme que vaya directamente con webkit webkit animation banner 1 d 10 segundos la animación y webkit y frames banner 1 dirá lo siguiente webkit transforma bueno transforma directamente 0% web que no transforma translate 0 píxeles 0 píxeles 25% 0 píxeles 0 píxeles 30% 800 píxeles 0 píxeles 100 800 píxeles 0 píxeles vosotros tenéis que hacer eso lo que hago es decirle desde 0 hasta 25 te quedas quieto en 0 0 de 25 a 30 te animás hasta 800 de 0 800 y de 30 a 100 te quedas quieto en 800 0 será guardo y recargo quieto no guardo ahí guardo aquí y recargo veréis que hace y se va lo habéis visto voy a continuar ya tengo un banner vamos a por los demás voy a desatar el banner número 2 es un ejercicio como ya os digo difícil hecho a la vez que se escribe bastante código ahora digo banner 2 banner 2 y digo vamos a ver en el banner 2 señaló la animación banner 2 y le digo pero transforma voy a decir 50 y 55 y 100 y un pequeño detalle este tiene que estar por debajo el valor uno tiene que estar por debajo vamos a verlo este desaparece revela el otro y el otro desaparece habéis visto otra vez el banner uno está primero desaparece y luego el otro simplemente es una cuestión de seguir claro cuidado así que banner 3 banner 3 parar 3 esto va a hacer claro cuidado porque esto va a ser entonces 20 y 25 esto va a hacer 40 y 45 esto va a ser 60 y 65 vamos a verlo ahora desato el tercer banner y probamos uno se va dos se va y tres el momento se va únicamente me queda el cuarto este ejercicio es difícil de entender por la cantidad de código que lleva por eso he querido aislarlo en un ejercicio aparte ya no funcionamos banner 44 banner 4 y este va a ser en 80 y 85 así que por último desbloqueo la imagen vamos a verlo guarda y recargo y se va una se va otra la otra y se va a otra una cosa que puedo hacer incluso es que mirar la primera imagen sea la que se queda al final entonces lo que hago es duplicarla banner nada para hacer lo siguiente ese era esa cuidado cuidado claro se tiene que ir al fondo del todo tiene que ir la primera se va a la primera se va a la segunda se va a la tercera se va a la cuarta al irse la cuarta se me queda la misma imagen que al principio con lo cual cuando repitiera la animación parecería un ciclo infinito el problema no se repite la animación no se repite la animación porque me hace falta un modificador css fijaos la tendría la de líneas que me ha ocupado y me hace falta una modificación llamada webkit animation y televisión count parece una palabra de ademán de estas que son largas y compuestas y digo infinito esto evidentemente lo voy a copiar a cada uno de los elementos a cada uno de los elementos se hará guardo y recargo mirad cómo se da una se va a otra se va a otra se va a otra se queda esa y vuelve a empezar y por tanto ahora se vuelve a ir y se vuelve a ir bien como última parte para este ejercicio simplemente os diré que se van pero es mentira porque se quedan ahí al lado bueno hay un truque t que es simplemente decir en banner overflow hidden overflow hidden quiere decir que siempre que algo se salga del dip no se ve fijaos ahí que cuando salen cuando desaparecen no se ve no se no aparecen por esta parte de la pantalla quizás la animación ocurre demasiado rápida pues simplemente tendría que cambiar las duraciones de cada una de las animaciones al tiempo que yo quisiera guardo recargo y ahí lo tengo y ahora veis que tarda el doble tanto en quedarse como en irse las imágenes las he cambiado de lugar simplemente porque cuando yo pongo varias imágenes superpuestas la primera es la que se queda más abajo la última es la que se queda más arriba fijaos que yo he puesto banner uno porque banner uno es la primera que se anima por tanto si yo dejara valer uno por aquí detrás lo que ocurriría es que se animaría pero no se vería porque tendría otras imágenes encima así que lo he puesto así intencionalmente importa el orden de aplicación de paso también responde a otra pregunta que es que no sólo se puede animar la el parámetro de transformación sino que se pueden animar varios parámetros a la vez por ejemplo hay un parámetro una propiedad css que nos explicado hasta ahora que es opacidad la opacidad va desde 0 hasta 1 con decimales entonces por ejemplo lo que voy a hacer es que cuando el banner está presente que tenga una capacidad de 1 y cuando se vaya que tenga una opacidad de 0 es decir a la vez que se desplaza a la vez que pierda transparencia o que gane transparencia mejor dicho recargo compruebo y fijaos no sé si se verá como a medida que se va hacia la derecha también se difumina un poco bien no sólo hay que hacer esto no sólo hay que hacer esto sino que además tendríamos que quintuplicar el código para hacerlo compatible con todos los navegadores antes de hacer eso voy a hacer lo de los puntitos que suelen aparecer por aquí abajo en los banners de momento hoy vamos a hacer los puntitos con html y css y más adelante de javascript tendríamos que darles programación para que verdad fueran interactivos bien para eso haré lo siguiente en primer lugar como os podéis imaginar me hacen falta tres puntitos y por eso aquí abajo sí bueno uno puede hacer lo mismo voy a hacer vive y d puntitos banner y ahora voy a hacer bieber class puntito y cierro el link y como tengo cuatro imágenes pues voy a hacer cuatro puntitos no se ve nada de hecho si quieres voy a hacer así creo que tampoco se verá nada no estarán por allí dentro de ocultos y ahora hago lo siguiente puntitos banner va a tener la siguiente propiedad primero posición absoluta déjame moverlo con libertad segundo left 300 píxeles tercero top voy a poner 300 píxeles no sé dónde lo voy a poner voy a poner donde sea y ahora veremos cómo maquetar lo y ahora z index 1000 cuando pongo z index es que quiero alterar lo que está adelante y lo que está detrás en este caso z index 1000 imaginaos capas de photoshop lo que hago es decirle quiero que saltes mil capas por encima o sea que te coloques por delante de todo y ahora todo aquel elemento que tenga de clase puntito os explico una propiedad extra de efe ss voy a decir wyss 50 píxeles demasiado 20 píxeles height 20 píxeles background lo voy a poner red para que se vean de momento y bordes radios es la propiedad que podría hemos explicado voy a decir que 20 píxeles vamos a verlo ahora y veréis que ahí están los puntitos profe y eliminó los puntitos porque ya se ven y ahí los tenemos ahora digo cada puntito cloud left quiero que flote a la izquierda con respecto al resto de puntitos y quiero que tengan un margen de 3 píxeles para que se separen un poquito entre sí como veis estaba quedando a ciegas ahora ya puedo decir bueno pues lo quiero a 400 igual es demasiado 300 píxeles y lo quiero a 380 píxeles vale tampoco tanto 350 píxeles y además no sólo eso sino que puedo maquetar los puntitos para que por ejemplo les digo que el fondo sea grave y cuándo hago puntito dos puntos a ver quiero que el background se vuelva green como diciendo puedes pinchar este puntito fíjate que es que son grises pero cuando pongo el ratón por encima se vuelven de color verde por supuesto me faltaría una transición all de un segundo así que guardo recargo y date cuenta ahora como los puntitos cambian poco a poco simplemente quizás me quedaría ponerles un border de un pixel solid write para que tuvieran un pequeño cortecito blanco y se separaran sobre el fondo una vez más insisto que lo que estoy haciendo aquí es preparar la parte visual de los botoncitos no puedo programar un comportamiento del botoncito hasta que no aprenda javascript por último para lo que sería este banner aislado lo que tendríamos que hacer es asegurar compatibilidad con cualquier navegador porque ahora mismo este banner sólo sería compatible con chrome y con safari pero no con firefox y con ópera y con todo esto y esto porque es importante pues es importante antes de explicar os lo voy a hacer porque me voy por ejemplo a statcounter qué es una página de estadísticas globales y mirar me voy a estar counter le dijo que quiero ver global stats de estadísticas globales pienso que a partir de ahora os vais a enganchar bastante a esta página ya hay otra que os diré más adelante que es google trends entonces esta página me dice por ejemplo los navegadores web que se usan ahora mismo en todo el mundo entonces qué pasa pues que chrome supone el 48% por eso lo he hecho en primer lugar para para webkit safari me supone el 10 por ciento luego estamos en un 58 por ciento pero cuidado internet explorer es un 20 por ciento y firefox es un 16 por ciento eso quiere decir que puedo perder a un 36 por ciento de la población y luego más ópera lo que pasa es que ópera desgraciadamente pese a que es un navegador muy bueno pues tiene muy poca cuota de mercado esto si queréis es lo que pasa a nivel worldwide pero qué pasa en españa por ejemplo pues me voy a spain recargo la gráfica y fijaos que en españa bueno pasa algo parecido el único cambio es que firefox pesa más que internet explorer pero chrome es el 51% firefox es el 20 por ciento están intercambiados internet es perder es el 13 por ciento safari 11 por ciento y android en este caso opera en españa triunfa muy poco android en este caso el 2,41 por ciento moraleja cuando yo hago una animación quieras que no la tengo que hacer compatible con todos los navegadores y eso cómo se hace pues mirad lo que voy a hacer lo que os voy a contar no os va a gustar pero es lo que hay me cojo banner 1 y ahora digo atención voy a hacer una plantilla y ahora digo 1 2 3 4 y 5 y empiezo mos ms y nada quintuplicar código en este caso ha consistido en pasar de uno a otro pero es que espera pero es que tengo que este código y luego 1 2 3 4 y 5 y eso es solo con una de las imágenes de los banners como fila ms lopera y nada y ahora no lo hago para no perder tiempo en esto pero imaginaos todo el resto de código lo que me puede ocupar vale por eso para mí y bueno para mucha otra gente los prefijos de compatibilidad es una lacra porque te obligan a ti como programador a programar extra a perder tiempo extra en algo que el cliente no te va a valorar sino que además va a dar por hecho cuando haces un valor el cliente evidentemente que no entiende estas cosas da por hecho que tiene que funcionar con todos los navegadores pues la vida sería más fácil si ya todos los navegadores hubieran adoptado las etiquetas y no hiciera falta prefijos pero de momento a día de hoy no es así y no os ayudaros una estimación de cuándo será de otra manera he querido como habéis visto segregar esta parte del proyecto en un archivo aparte precisamente para que no perdiéramos el control y para que nos centramos únicamente en este ejercicio y no en separar el código que teníamos antes del código nuevo y el ejercicio funciona pero llega un momento que como os podéis imaginar tenemos que fusionar esto que hemos hecho con nuestro propio proyecto lo que voy a hacer ahora que va a ser fusionar esto con el proyecto principal no es difícil simplemente tenemos que tener cuidado entonces para ello simplemente me voy a dar cuenta de que el banner tiene dos componentes que es una por una parte el css largo pero es un bloque al final y luego por otra parte el html así que voy a hacer lo que voy a hacer es simplemente trasvasar cada parte donde le corresponde empiezo si queréis mirar para verlo mejor permitirme segregar me esta pestaña en otro help it y así tengo aquí banner html aquí index.html y ahora luego borró manera html me voy a banner html me cojo todo el estilo css atención todo el bloque de estilo css lo copio y lo pego y lo peor ahora en ese archivo index.html tengo tanto el css que tenía antes como el del banner porque lo acabo de copiar y lo acabo de pegar ahora a continuación simplemente lo que tengo que hacer es donde iba a poner el banner que iba a ser aquí en esta sección copio el banner y lo pegó dentro de esa sección y si todo ha ido correctamente y yo pienso que ha ido correctamente me voy ahora a la página principal que recordamos que era index html y comprobamos como efectivamente he pegado correctamente el banner simplemente ahora tengo que actualizar la anchura de la página para que abrace al banner pero veis que ya está hecho ya está hecho pero nuestro código ha cambiado bastante antes teníamos un archivo index.hu tml bastante clarito pero ahora tenemos un archivo index.hr ml más bien largo y lo que vamos a hacer antes de continuar haciendo cosas es limpiar un poco este archivo anteriormente cuando empezamos a explicar css empezamos a contar que está el método en línea que desaconsejó el método interno que es el que en este caso estamos usando y un método llamado externo el método externo nos permite todo el css y de llevarlo a un archivo cuya única función va a ser contener el css cómo se hace esto es muy sencillo en el proyecto me voy a nuevo me voy a crear un documento de texto y me voy a hacer un archivo llamado estilo por ejemplo que no va a tener la extensión de html sino que va a tener la extensión css estoy seguro de que deseo cambiarlo por supuesto que sí a continuación voy a cargar este archivo estilo css en el editor y por último voy no ya a copiar sino a mover todo el código css que está dentro de la etiqueta style y lo voy a pegar dentro de estilo lo que hago es quitarlo de un sitio y pegarlo en el otro claro que evidentemente si hago esto dejadme que arregle la sangría evidentemente si hago esto la página web no es tan lista y le doy aquí a recargar y se ha ido todo el css porque lo que tengo que hacer ahora es re vincularlo de vincularlo me voy a quedar la etiqueta style por si más adelante hago algo pero de momento se ha quedado vacía re vincularlo con una etiqueta llamada link link wray es igual a esta el sit h ref es igual a estilo css que le estoy diciendo con esta etiqueta tu estilo ya no está dentro sino que ahora está afuera en un archivo y ese archivo se llama estilo css se habrá guardado y recargó podréis comprobar como el estilo ha vuelto a mi página pero ahora ya no tengo el problema de que tengo una página demasiado grande ahora tengo una página solo con html y tengo otra página solo y únicamente con css hay una cosa muy curiosa que también veremos qué ocurre con javascript y es que en la etiqueta link le tengo que decir que es de tipo hoja de estilos incluso la recomendación dice que tengo que poner de que es de tipo texto css no es obligatorio pero la norma dice que se recomienda poner tipo texto cs es una cosa muy divertida y es que llega un momento que dices bueno si este tipo texto css quiere decir que hay otros tipos de estilo pues lo más gracioso es que no pero la naturaleza abierta de html hace que no haya otros tipos de estilo pero que pudiera en un futuro haber otros tipos de estilo y para así en un futuro hubiera otros tipos de estilo no haría falta modificar la norma sino que simplemente se pondría texto barra otro tipo de estilo no se usa pero está ahí no sólo esto sino que si me meto en el estilo css atención os daréis cuenta que el banner empieza en la línea 64 y acaba en la línea de 164 es que 100 líneas y 164 son el banner eso hace que esto me moleste porque yo lo que quiero es editar el código solo que voy a usar no quiero que el banner me esté molestando para eso incluso os diré que no solo se puede enlazar un estilo de css sino que se pueden enlazar tantas hojas de estilo como queráis por tanto voy a hacer un archivo específico para estilo banner qué estilo css y dentro de estilo banner css voy a cortar todo ese código del manera lo corto y lo pego dentro de estilo banner y de esa manera estilo css me queda más limpio se me queda solo con los estilos que quiero evidentemente como os podéis imaginar si quiero que esto funcione lo que tengo que hacer es de la misma manera que he creado un link para estilo también tengo que crear otro link para estilo banner para que el programa sepa en cuántos archivos diferentes está separado el css y por tanto cuántos archivos diferentes tienen que cargar para que el programa para que la web funcione correctamente a continuación habiendo superado esta parte de dificultad del banner voy a acabar de maquetar la web en este caso digamos que el banner me manda un poco voy a hacer que la web en lugar de tener un contenedor de 500 píxeles voy a querer tener uno de 800 píxeles y hacer que la web sea más grande por tanto estoy están todo el rato zoom sobre la página porque la pantalla en humedad y por tanto lo que hago es recurrir al zoom para poder ver cómo se vería en un monitor y poder también editar el código en tiempo real y que en todo momento podáis estar viendo a la izquierda el código que estoy editando continuó por tanto por ejemplo volviendo al menú de navegación diciéndole que quiero que sea de 100 píxeles vamos a decir 9 demasiado no es demasiado beige ahí como tengo el menú puesto más cosas vamos a ver de un par de propiedades más una de ellas que quizás antes os habéis quedado un poco extrañados cuando veis cuando he creado el menú cuando he hecho los redondeles redondos es la propiedad bordes radios la propiedad por de radio la voy a poner sobre el menú de navegación voy a poner border guión radios y por ejemplo 10 píxeles lo que hace por de radios simplemente es redondear los elementos sobre los que se ponga por ejemplo en este caso el botón del menú a continuación en el siguiente vídeo voy a hablaros de sombras que es otra de las novedades de css3 otra de las novedades de css3 es la capacidad de poner sombras y sombras en dos vertientes por una parte las sombras de caja por otra parte las sombras de texto voy a empezar con las sombras de texto porque son las más divertidas atención mírame h1n1 voy a poner lo siguiente texto shadow y voy a poner 0 píxeles voy a poner lo siguiente 5 píxeles 5 píxeles 0 píxeles black qué es eso fijaos qué decir de cargo que aparece una sombra de color negro sobre el título y digo lo siguiente el primer número es cuando se desplaza a la sombra en x positivos en la derecha negativo hacia la izquierda el segundo número es cuánto se desplaza a la sombra en vertical positivo hacia abajo negativo hacia arriba el tercer número es el difuminado de la sombra cero píxeles es nada difuminado muy duro 5 píxeles es más difuminado 15 píxeles es más difuminado todavía y por último el color evidentemente lo que voy a hacer en este caso es en lugar de poner black poner atención miradme rgb a rgb a es un tipo especial de color que tiene tres canales uno de rojo otro de verde y otro de azul y un cuarto canal llamado alfa que no va desde 0 hasta 255 sino que va desde 0 hasta 1 donde por ejemplo si le pongo 0.3 estoy haciendo una sombra al 30% de transparencia si lo doy 0.1 al 10% de transparencia si le digo 0.9 al 90% de transparencia por tanto a la sombra me permite poner este color transparente y que el efecto se note que el efecto esté ahí pero que no sea tampoco demasiado molesto de la misma forma que tengo sombra de texto tengo también sombra de caja voy a poner en el contenedor un modificador llamado box guión usado sombra de caja la buena noticia en este caso es que tiene exactamente los mismos parámetros que he pensado se comporta igual sabes uno ya sabes el otro cero píxeles en horizontal 10 píxeles en vertical 15 píxeles de difuminado rgb a 0.00 0.3 por ejemplo y esto si os fijáis voy a hacerlo grande lo que hace es que tenga una ligera sombra algo que está bastante de moda para que parezca como que la página es un folio por encima del fondo da un ligero efecto de tridimensionalidad digo efecto no es tridimensional real de la cual ya hablaremos mucho más adelante otra cosa completamente diferente a esto que acabo de hacer y ahora me voy al resto de páginas del sitio web comprobaré qué error esto es antes de ver css y esto es después de ver css estresantes y esto es después así que antes de empezar a crear contenido en cada una de las páginas lo que quiero hacer es trabajar un poco sobre el css de las otras páginas como muy sencillo simplemente las novedades que he creado estas etiquetas link y style ya sé que está el estado hacía pero oye me la voy a copiar por si acaso más adelante la quiero para algo copio y lo pego en el resto de páginas claro primero tengo que abrir el resto de páginas así que abro blog abro contacto abro cursos abro pide tu curso portafolio y sobre mí y en cada una de estas páginas voy a ir copiando y pegando al menos las etiquetas más importantes al menos las de estilo tendría que copiar y pegar también las etiquetas que hicimos anteriormente las metas etiquetas el título el autor las keywords pero el caso es que ahora por lo menos para el estilo lo que más me importa es simplemente las etiquetas link y style y vais a ver cómo os prometí anteriormente atención que por esto se llama css se llama cs es porque yo lo aplico sobre una página y se me aplica sobre todas las demás pero que he pasado aquí lo que ha pasado aquí es que cuando aplicó el estilo sobre el resto de páginas hay algunas cosas que sí que parece que se quieren aplicar y otras que no qué cosas son esas bueno es muy sencillo si yo me voy por ejemplo a blog veo que este vídeo no tenía el iii de contenedor por eso no está heredando la clase contenedor ni el contenedor así que simplemente voy extendiendo voy a extendiendo voy extendiendo a cada una de las páginas normalmente cuando me veis hacer esto soléis hacer la pregunta de no hay una manera más automatizada de hacer esto porque ahora con 67 páginas pues bueno lo haces y no pasa nada pero cuando tengas 200 que va a pasar la respuesta así a palo seko es no no hay una manera automática de hacer esto en html porque html no es un lenguaje automático es un lenguaje únicamente de marcado la respuesta a algo más ampliada es que complementando html con otros lenguajes como por ejemplo php sí que se puede automatizar ese tipo de cosas el que cuando hagas un cambio en la estructura lo hagas en una especie de plantilla y que esa plantilla se aplique sobre el resto de páginas pero ahora por defecto vamos a decir que no así que mira fijaos como tengo la página y puedo ir saltando de portafolio a cursos hablo a contacto la ley por tanto fijaos como tengo el estilo aplicado sobre todas las páginas que conforman este sitio web una página sobre la que quiero profundizar antes que nada es portafolio porque en portafolio tengo una colección de mis trabajos así que siempre me gusta es un efecto que suele hacer muchas veces el efecto polaroid las polaroid las fotografías recordáis que salían de las cámaras estas voy a hacer de la siguiente manera me voy a portafolio en portafolio recordamos como puse una serie de imágenes y me hace falta me hace falta algo como por ejemplo en primer lugar un día y de portafolio encapsula todas las imágenes dentro de un día llamado portafolio y ahora me voy al estilo y al final del todo digo portafolio img esto quiere decir la imagen que esté dentro del portafolio va a tener las siguientes características 1 ruiz del 25% las imágenes van a ser pequeñas atención 2 border de 5 pixeles solid white no lo vais a ver porque como el fondo es blanco no lo vais a ver si queréis voy a poner grave yo como gris como gray beige ahora el borde un borde de 5 píxeles puedo hacer algo que es rgb 220 220 220 un fondo gris una cosa que puede hacer al igual que vimos anteriormente con el margen y el párking es border botón 15 píxeles solid rgb ese color esto que hace pues esto lo que hace es que le pone un borde más grande sólo a la parte de abajo solo al borde del botón las imágenes ahora están flotando hacia abajo pero yo quiero que floten hacia la izquierda por tanto voy a usar una propiedad de css muy controvertida que es cloud left flota hacia la izquierda así que ahora guardo y recargo y fijaos como las imágenes flotan ahora hacia la izquierda se me montan unas encima de otras y encima además encima de más parece que sobresalen de la página la flotación en css siempre ha tenido ese problema entonces una manera de solucionarlo es que cuando acaban los elementos que están flotando pongo un día mágico este apuntaros el código porque lo vais a copiar y pegar yo diría varias veces en cualquier proyecto que hagáis en toda nuestra vida que es clear voice clear voz en castellano equivaldría querría decir deja de flotar ya no flote es más que me está explotando la vagina está destrozando así que ahora guardo y recargo y fijaos como ahora las imágenes flotan pero no machaca en el pie de página no se van por bajo bueno lo único que me quedaría en este caso sería darle un poquito de margin mira un poquito de margin para que las fotos se separen un poquito las unas de las otras no veis ahí y además le pondría otra de las cosas que hemos aprendido hoy que es boxeador 0 píxeles 10 píxeles 15 píxeles rgb a 0.00 0.4 para que parezca como que las imágenes lanzan un poquito de sombra sobre el fondo para que parezca que están como un poquito levantadas en la página verdad voy a poner ahí 2 42 42 40 cuando recargo y me queda una cosa así así que fijaos como una insípida dejadme ver una cosa portafolio ahí está el problema porque estas tres me bajan en escalera es porque había puesto de heres manualmente voy a quitar los verdes dejadme quitar los verdes y eliminar el efecto escalera acuerdo recargo y ahora sí ahora todas las imágenes están alineadas en una matriz a partir de aquí podría aplicar por ejemplo lo que hemos visto anteriormente de las transiciones es decir portafolio img 2 puntos es decir cuando ponga el ratón encima de la imagen de portafolio atención mirar me voy a poner transforma 22 skate 22 y es más y voy a decir roto 15 grados y ocurre lo siguiente cuando pasó el ratón por encima daos cuenta lo veis como las imágenes sobresalen queda chulo pero queda más chulo todavía antes de la h pongo transition all un segundo lo que tengo es que ahora el efecto no se hace de repente sino que se hace poco a poco damos cuenta fijaos qué chulo que es que cuando hace el efecto de transición la imagen se hace grande y bueno ya hace un poco efecto de foto polaroid muchas veces al llegar a este punto de la gente me pregunta cómo puedo hacer que cuando en una foto la foto se haga grande y el fondo se oscurezca ahí todo esto yo siempre digo lo siguiente siempre que decís la frase cuando en un elemento que pase lo que sea eso ya no es css esos javascript siempre que hay algo que tiene un evento cuando es un evento y a partir de ahí ocurre una acción eso no es con css eso es con javascript continuamos utilizando el resto de elementos por ejemplo algo mucho más sencillo el blog fijaos que tengo aquí un pequeño blog pues voy a hacer lo mismo mirad me voy a blog punto html y en maine voy a poner lo siguiente mein y d es igual a blog para ahora con estilo poder localizar mejor y digo blog arctic él y empiezo a estilizar atención blog arctic el ing la imagen que está dentro del artículo que está dentro del blog quiero que tenga un wifi de 100 píxeles esto ya se echaba de menos porque así las imágenes se hacen más pequeñas ahora además digo atención qué cloud left quiero que cuando pongo una imagen el texto se quede a la derecha de la imagen y por último lo que haría ahora es en el blog arctic el pues simplemente voy a poner déjame pensar voy a poner border botón de un píxel dust the dust es un tipo de línea que en lugar de ser continua es discontinua le doy un poquito de padding padding de 10 pixeles y ya está ahora lo que voy a hacer es maquetar un poquito el estilo por tanto blog arctic el h3 creo que era no me acuerdo hace 4 h 4 le digo padding 0px eles martín 0 píxeles y sabes que te digo font family mi fuente la fuente que he creado antes fijaos como tengo ahí curso de html5 lo que sea font weight normal le quito negrita font-size 48 píxeles y le doy un poquito más y tamaño tendría ya por ahí un blog damos cuenta que es he dicho que siempre que algo flote y la imagen está flotando podría tener problemas por tanto me voy a ir al blog y al final de cada arte que le damos cuenta que me había dejado ahí un poco de espacio preparado precisamente para este caso voy a poner ese día que os digo que por mí como si no actuase en el brazo porque lo vais a para siempre de posibilidades así que copio y pego y pego y así me aseguraré visualmente igual no hay ninguna diferencia pero me aseguraré de que no hay problemas en la flotación continúo maquetando bueno otra fácil sobre mí en este caso me voy a sobre mí y voy a hacer lo siguiente en maine es y de igual a sobre mí y ahora y ahora voy a hacer algo tan sencillo como simplemente en el estilo decidir sobre mí img o sea la imagen que está en sobre mí no cualquier otra imagen sino sólo esa flor left flota a la izquierda cuidado la imagen se me sale pero ya sabemos que siempre que invoca una flotación tengo ese problema así que me vuelva sobre mí y al final del todo le pongo un div style clear road y problema arreglado que ya está arreglado el texto está demasiado pegado a está demasiado pegado a la imagen así que le voy a poner un margin pues right un margen sólo a la derecha de por ejemplo 20 píxeles cuidado porque estoy en puntito a ver claro qué hago yo aquí pues porque estoy en estilo banner es uno de más vale es que me miró el css le doy aquí y ahora fijaos como el texto se pega un poco otra cosa que nos ha enseñado y probablemente no será de mucha utilidad es que el texto lo puedo alinear sobre mi p es decir el texto de párrafo parágrafo que está en sobre mí voy a decirle text align y puedo poner left no vais a ver ningún cambio porque es como esta como está por defecto quería decir pixar line right que es a la derecha text align center al centro y evidentemente la opción que más me va a interesar que es text align justify justify justificado hace que el texto sea line para que quede mucho más presentable y mucho más amigable a continuación voy a ir a contacto una zona muy interesante porque en contacto vais a ver lo útil que puede resultar css para dejar un formulario mucho más bonito mira una cosa que también os digo es que al maquetar el estilo lo estoy mezclando todo en una misma página y por tanto sólo recurrir al uso de una cosa que se llaman separadores no es realmente una parte de css es un truco visual es como un separador de papel en un libro así que digo carga de fuentes y es un comentario css ahora digo estilos generales menú de navegación un poco lo quiero dividir por zonas para que cuando leamos el css sepamos que es cada cosa primero para que cuando leáis código mío podéis saber perfectamente qué es cada cosa y muy importante para cuando yo le a código vuestro que pueda corregir y pueda evaluar fácilmente bien portafolio img atención esto ya no es los recibos principales esto es el portafolio el blog esto es el blog lo que hago es agrupar visualmente porque está css da igual pero visualmente tú como ser humano divide es un poco por zonas y así en cualquier momento cualquier persona que ve tu código sabe que hay en cada porción bien sigamos estaba por tanto hablando del formulario de contacto así que pongo aquí una nueva sección llamada contacto y empiezo a maquetar en el contacto voy a escribir lo siguiente maine y b con tacto y digo contacto formó va a tener las siguientes propiedades width 50% martín auto es decir ocupa me el 50 por ciento y céntrate en la pantalla siguiente con tacto input toma contacto text área maqueta esas dos a la vez le voy a decir with 100% margin 5 pixeles having 5 píxeles mirad ahora el formulario queda mucho más ordenado queda mucho más organizado el text área se me ha descuadrado un poco pero no pasa nada ahora lo cuadro border un píxel sólido grave border reviews 5 píxeles y un truque te que me gusta mucho box shadow 0 píxeles 5 píxeles 10 píxeles rgb a transparente atención in set la palabra in set lo que hace es que la sombra en lugar de estar estar por fuera está por dentro parece como que el objeto en lugar de salir se mete hacia dentro de la página cuando pongo el ratón en un elemento de formulario aparece un cierto reporte de color azul ese reporte yo no sé a vosotros pero a mí me molesta mucho por tanto eso se quita con out line no elementos de línea ninguno fuera perfecto vale bueno el texto área cuidado cuidado el texto área con almohadilla ahí tenía un error pero ya no lo tengo y ahora simplemente aquí abajo estos dos botones en lugar de meterse quiero que sobresalgan lo que voy a hacer es primero en contacto darles un estilo particular ni de particular y de botón perdona y de no porque se va a repetir class botón cuando algo se repite no debería tener una si lo ponéis la página error tampoco dará pero no debería ser así y ahora todo aquello que sea de clase botón va a tener un box shadow de 0 píxeles 5 píxeles 15 píxeles rgb a 0.00 0.5 parece lo mismo pero no lo es porque lo de arriba tiene link set y esto no lo tiene por tanto guardo y recargo el botón así ostras la precedencia muy importante en este caso la clase intenta machacar a live pero uno tiene más preferencia que una clase y un mandamás de una clase que puedo hacer en este caso hay un truco en css cuando me quiero saltar el orden de importancia que es poner una cosa al final que es admiración importante admiración importante es si esto colisiona esto es lo que vale a ver si me deja trabajar así y así si así fijaos cómo me lo hace correctamente luego además de los botones fijaos que parece que se quedan un poquito más pequeños pues no pasa nada guys 105 por ciento importante importante deberíamos usarlo cuantas menos veces mejor pero cuando haya que usarlo se usa así que guardo recargo vaya 105 es demasiado pues 103 y así hasta que consigamos cuadrar el formulario y nos quede un formulario mucho más bonito de lo que viene por defecto en html la siguiente página que voy a maquetar es la de cursos en este caso en la página de cursos recordamos como hicimos un css horroroso simplemente porque le pusimos no conocíamos css le ponemos border sc01 bueno pues a continuación voy a poner border 0 y me voy al estilo y ahora copio la sección cursos y vivo también otra cosa que voy a hacer es poner en el mail y de es igual a cursos y haré lo siguiente cursos table th por ejemplo cada uno que ponga lo que quiera pero te voy a poner background black color white es decir solo la cabecera quiero que sea negra con el texto blanco y ahora por ejemplo puedo decir no quiero que los titulares de columna se alineen al centro así que text align elect y en los titulares cómo vais a ver se van a la izquierda ahora quiero una tabla voy a poner un par de trucos jaime ponerlos el padre es igual a 0 el sporting es igual a 0 es el borde es el límite entre las tablas y eso me permitiría por ejemplo en el estilo poner algo como lo siguiente cursos table tv las celdas de las tablas voy a poner border un píxel solid black es decir que las celdas de las tablas tengan un margen negro a las tablas dejan respirar muy poco al texto esto me gusta por eso pongo padding de 10 píxeles y ahora veréis como las celdas respiran bastante mejor por eso siempre insisto al principio en html tener paciencia porque cuando llegamos a css todo esto se puede hacer hay una cosa que no me gusta hay una cosa que no me gusta y es que por ejemplo me voy a la página principal y de la página principal es larga y está muy bien porque puede hacer scroll me voy a sobre mí y sobre mí ya no es una página tan larga pero es que me voy a cursos curso es una página muy corta que hago cuando tengo una página demasiado corta y creo y quiero que por lo menos me rellene un poco de página en blanco lo que no haría nunca mirar y ahora vais a ver porque lo que no haría nunca es venir a con tenedor y decirle por ejemplo le dije wifi 800 píxeles height 800 píxeles porque no haría eso pues porque a esta página le viene muy bien en esta página le vienen fatal porque ésta necesita más así que hay un modificador que no mucha gente usa y es muy interesante que es que en lugar de poner height es min height altura mínima yo te digo que ponga las 800 yo te digo que como mínimo por 800 esto que hace la de cursos no necesita más pues pone 800 pero la de iniesta necesita de más pues no pasa nada pone 800 como mínimo y a partir de ahí empieza a empujar hacia abajo todo lo que le haga falta continúo trabajando con esta página y en este caso cifrados que en todas las pies de página – en la página principal había puesto 2014 dejó su visión de carretera así que por una parte voy a propagar fijaos cojo sh 6 y me aseguro que esté en todas las páginas en lugar de pie de página muchas veces os acordáis de copiar y pegar pero no os acordáis de guardar la página web correspondiente yo siempre digo miradme yo siempre digo que acordaos de guardar una cosa que muchas veces no le prestamos atención es que os acostumbréis a ver cuando los archivos tienen un pequeño asterisco un archivo con este disco es que no está guardado pulso control s desaparece el archivo desaparece el asterisco porque eso quiere decir que el archivo que estás viendo es la última versión guardada y ahora voy página por página veréis como ahora aparece página por página el pie de página ahí está demasiado pequeño pero ahí está bien que te ve decir yo qué hacemos ahora con este pie de página pues nos vamos a estilo me creo un bloque nuevo y digo pie de página y pongo por ejemplo footer por qué recordáis que el futuro es el pie de página text align centre así que text align centre lo que hace es centrar el pie de página que siempre evidentemente queda muy bien permitidme hacer una cosa también me suele quedar muy bien el poner background black color white y así fijados como bueno así remarca dt además le voy a decir que hay 10 píxeles quedan un poco como un tope de página quizás demasiado grande pero bueno una cosa así pilares la idea y también un margin top de 20 píxeles para que esté separado de la parte de arriba una separación de 20 píxeles a partir de aquí detallitos detallitos como que por ejemplo en toda la página está por defecto del formato de fuente times new roman pues me voy a estilos generales y le digo en el body que font guión family sans-serif sanserif es básicamente la fuente que quieras del sistema operativo pero que sea sin remates otra cosa que podemos hacer como ya habéis visto antes para repetirlo atención me voy de font puntocom cojo una fuente de tipo sans serif y una cosa muy importante esto realmente es más usabilidad que otra cosa ahí está me encanta que es cuando cojáis letra no cojáis una letra muy artística para párrafo porque acá gareis entonces voy a hacer una cosa me voy a bajar lemon milk para títulos permitiendo el capricho y me voy a bajar a una fuente a la robot o está muy guay venga robot o para texto no sé si por google android design pero no lo sé no sé quién es entonces con estas fuentes me voy a aquí me voy a multimedia y digo lo siguiente robot o me la descomprimimos aquí lemon milk no pasa nada una cartera de fuentes en la extraigo también aquí lo siguiente está en formato efe en lugar de ttf pero que a día de hoy hay mucha compatibilidad con eso me voy a fuentes y me cargó tantas familias como sea necesario digo títulos y digo texto y mira para el texto me cargo un robot o regular a ver qué pasa me cargo una robot o regular y para títulos me cargó la lemon milk fijaos unas cuantas cosas que voy a hacer ahora digo aquí evidentemente aquí todo esto y digo h1 h2 h3 4 5 6 o sea todos los títulos van a tener font guión family títulos expuesto títulos o título títulos y ahora el texto de parágrafo va a ser font mira el texto de parágrafo no el body directamente font-family texto creo que he puesto quito está de aquí mira todo el texto como sans sheriff es un truco de css que tú cuando le pones varias veces primero intenta la primera eres un navegador no compatible con html5 vete a la segunda de esa manera un poco te aseguras cierta compatibilidad así que guardo y recargo y no sé si veréis cómo era todos los títulos está en formato este acuerdo no se llama lemon milk y no sé si veréis como todos los rótulos todas las tipografías están en formato robot o si no lo va ese no lo veis no pasa nada porque no vengo aquí a multimedia cojo la robot o zinc y la cambio robot o fin no es que la recomiende pero es para que me dice el cambio guardo y veis como ahora bueno me ha pasado ahora devuelvo la que estaba una cosita seamos un poco ordenados si yo estoy viendo que esta carpeta de multimedia se me está llenando de cosas y es fácil que se me llene de cosas voy a crear una sub carpeta llamada fuentes pero cuidado vamos a ver los tips para empezar los voy a eliminar porque una vez descomprimido ya no me sirve para nada los notice o no me los voy a quedar porque técnicamente hay que leerlos lo que quiero que veáis es que ser ordenado es fácil no hay ningún problema pero pero esto también fuera y esto va aquí dentro pero no pretendáis que el programa escoja la intención directamente porque lo que hace es fallar en la carga de fuentes porque cuando cambio una ruta tengo que actualizar la ruta dentro de las llamadas así que sigue cambiado la carpeta como os podéis imaginar verdad ahora hago unos pequeños cambios h1 dónde estás h 164 pues te voy a cambiar por 44 porque evidentemente como descargado la letra más grande pues a cuidado con las letras porque algunas de ellas pueden no soportar caracteres como en eso a centros o cosas así pero bueno que se va a hacer vale veis como pues poco a poco la web va quedando cada vez más maquetada y cuidado que ha pasado ahí en cursos así me ha cogido la altura mínima perfecto como maquetar el pie de página para que siempre se quede abajo porque está claro que cuando ya inicio no hay ningún problema se me queda abajo por una simple por una simple cuestión de empuje pero qué pasa cuando me voy por ejemplo al cursos pues en este caso lo que voy a hacer es editar el estilo del fut en el estilo del pie de página me busco ahí pie de página y le digo al footer que va a ser lo siguiente cuidado posición absoluta eso es te voy a mover y ahora botón 0 píxeles es peligroso porque si hago así date cuenta como en principio ha pasado bastante de mí es entonces cuando eso ocurre cuando eso ocurre tengo que ver quién es el padre de el footer y tengo que hacer lo siguiente el padre del futuro es el body creo recordar sí y al body le voy a poner posición relativa es decir el fútbol se empieza a comportar bien cuando el padre en el relativo le digo padding perdón para digno le digo botón por ejemplo 10 píxeles para que no esté pegado al suelo verdad o bueno o porque no o porque no le digo pegado al suelo y ahora with 800 píxeles – 10 píxeles y eso lo que hace y eso lo que hace es que me ajusta o cuidado no era así si si mira porque el left no me lo has cogido bien pues no lo sé pero te das cuenta como se ha ido al principio de la página en lugar de cogerse donde debe bueno voy a quitar left que no sé ahora mismo porque me ha hecho eso y me lo quedaría ahí con lo cual no tengo esa y tampoco me hace mucha ilusión mira a subir ahí y ya está y ahora parece que como que haya un poquito no sé parece como que hay un poquito de margen por aquí me lo voy a quedar así de momento y voy a aprovechar que tengo una cosa que no sé por qué me está saliendo así para decir cómo tenéis que proceder vosotros cuando os pase algo similar a lo que me está pasando a mí qué hacer cuando tú crees que cs se debe hacer una cosa y css hace lo hace da documentalmente diferente para este caso concreto os voy a recomendar chrome si estáis en pc safari si estáis en mac en este caso estoy en pc con lo cual voy a usar chrome y es una cosa que se llama herramientas de desarrolladores así que lo que hago es tengo un problema con este footer pulso botón derecho en el futuro y le doy inspeccionar elemento inspeccionar elemento me saca esta barra de herramientas de desarrolladores también se puede sacar desde si la cierro se puede sacar desde las herramientas herramientas para desarrolladores pero prefiero que le deis el botón derecho en el elemento porque si lo saco directamente me deja en body pero si pincho botón derecho no me deja en body me hace zoom enfoca sobre la etiqueta sobre la cual quiero averiguar bien y cuando pincho en la etiqueta simplemente aquí abajo aparecen los estilos que realmente están computando que en principio tendrían que ser iguales que los vuestros pero podrían no ser iguales una cosa muy divertida es que puedo jugar a quitar estilos puedo jugar a quitar para de el padrino es y veis como así voy intentando de alguna manera encontrar dónde está el error parece que no está en ninguno de estos vale que pasa se ponga una propiedad nueva que es left menos 10 píxeles que se me va que pasa si pongo 10 píxeles que se me va también qué pasa si pongo martín auto si no funciona bueno pues no pasa nada porque en este caso se podría arreglar con un transformo translate – 10,0 10 píxeles 0 lo veis ahí como no son 10 son 56 ahí como la centrado el inspector de código por tanto las herramientas de desarrolladores no sólo éstas sino muchas más que veremos por aquí especialmente para javascript o serán muy útiles nos ayudan a saber qué estamos haciendo bien que estamos es normal lo que hemos escrito como la interpreta el navegador y muchas veces cómo corregir así que mirad cómo me voy a copiar esta línea porque esa línea lo malo es que no vuelve a heavy desgraciadamente me voy a estilo me voy a footer y le digo transformar translate lo que sea y será recargo cierro herramientas para desarrolladores y será recargo veis como al recargar es decir al aplicar los cambios se aplican vale bueno más pequeños detallitos próximo esto está muy pegado entonces en estilos generales el main le digo qué martín todo es igual a 20 píxeles decir separarme un poquito el mein no me lo separa nos separa por qué killer siervos es no me des a problemas de la flotación me da problemas de la flotación veis que en margin top no funciona cuando un margen no funciona lo primero que tenéis que hacer es ir a mirar las situaciones suele estar ahí el problema así que me voy a index me voy al menú de navegación y al finalizar el menú de navegación pongo div style en mi caso esta etiqueta la vais a usar muchas veces a lo largo de vuestro trabajo la voy pegando en todas y cada una de las páginas evidentemente la voy pegando la voy pegando la voy pegando la voy pegando la voy pegando y por tanto ahora cuando guardo fijaos como ahora si la etiqueta main o bien la etiqueta main empuja hacia arriba o bien el gdr empuja hacia abajo como lo queráis ver pero de cualquier manera damos cuenta como ya tengo porque una página estática en pleno funcionamiento en este caso queda bastante más limpio porque ahora cuando aparezca el banner hay un espacio en blanco entre el menú y el banner

vamos a hablar en esta ocasión de que hace falta para publicar tu página web en internet porque ahora mismo quizás tienes tu página web en tu disco duro en tu escritorio en tu ordenador en definitiva pero tú lo que quieres es que cuando alguien ponga www.novell.com aparezca la página web de internet socia además publicar tu página web así que lo primero que hacen falta para publicar una página web voy a abrir un poco heavy como editor de texto lo primero que hace falta es tener dos cosas primero un elemento llamado dominio y segundo otro elemento llamado alojamiento o en inglés jose así que primero el dominio y segundo el alojamiento el dominio es tu nombre puntocom donde realmente un dominio tiene dos partes una el nombre del dominio y dos separados por un punto la extensión del dominio donde el dominio más común que podéis encontrar es el dominio puntocom fue el primer dominio en existir y realmente lo de com quiere decir comercial porque la idea inicial del dominio era usarlo en 1986 cuando nació para fines comerciales porque en el 86 no se preveía que la gente pudiera a nivel particular a nivel personal publicar sitios web de la misma manera que en los 80 no se preveía que hoy en día prácticamente cualquier persona de cualquier edad tuviera un teléfono móvil por ahí por la calle hay cosas que a día de hoy nos pueden parecer muy comunes lo que hace 20 o 30 años no lo eran lo primero que debemos conocer es que existen otras extensiones de dominio la más común por tanto es la puntocom y curiosamente no hay un organismo que se encarga de controlar sin regular pero no controlar el dominio puntocom se use realmente para fines comerciales esto quiere decir que yo puedo tener un dominio puntocom y no necesariamente usarlo para fines comerciales y nadie me va a perseguir ni para decir nada hay dominios donde nadie te va a perseguir hay otros donde tienes que comprometerte a realizar esa actividad porque si no no te van a dar ese dominio en cuanto a los dominios genéricos podemos considerar que los primeros dominios en existir fueron el punto com el punto net en principio pensado para empresas instaladoras de redes luego más tarde para redes de usuarios hoy en día para cualquier tipo de red tenemos el dominio punto o hereje que es un cajón de sastre todo aquello que no quepa en cualquier otro tipo de dominio se mete en el dominio punto o hereje tenemos también dominios que salieron más adelante para meter por ejemplo negocios como el dominio punto biz punto business en inglés con tracción y otros dominios desgraciadamente al final la gente sigue usando más el dominio puntocom porque es más fácil de recordar o porque socialmente se recuerda mejor ese dominio todos estos dominios son genéricos a continuación tenemos los dominios territoriales cada país cada territorio tiene su propio dominio por ejemplo el dominio para españa es punto es el dominio para francia es punto de fr el dominio para alemania es punto de el dominio para austria es punto ante el dominio para el reino unido es punto com punto cauca como por la commonwealth y acá por united kingdom por el reino unido hay también dominios menos conocidos punto ese punto united states no se ve prácticamente ninguno punto asia el que sí que se empieza a ver un poquito evidentemente es el dominio cn cada dominio ahora que hablamos del cn tiene unas restricciones que impone el país correspondiente por ejemplo en españa al principio sólo podía registrar un dominio la persona que fuera ciudadana española y que el dominio consistiera en el mismo nombre de la sociedad que tenga registrada no hay aparte del dominio valía unos 60 euros al principio al año cuando a un punto com vale sobre 15 claro tú decías bonita manera de promocionar los bienes punto es luego igual salía el político de turno en televisión diciendo no nos explicamos por qué la gente no usa dominios punto es la violencia no pasa nada sin todos los ticas y otro explicó muy fácil con el tiempo quitaron la restricción de la necesidad de tener una empresa registrada con el mismo nombre abarataron el precio y creo que hace poco hasta quitaron la restricción de tener que ser ciudadano español para registrar dominio los últimos dominios punto es que registrado nadie me ha preguntado que especificará que demostrara que soy ciudadano español cada país por tanto pone o quita las reglas que quiere para sus dominios hay un par de dominios muy interesantes que son por ejemplo el dominio tv y son por ejemplo el dominio a g el dominio tv en contra de lo que podáis pensar todo el mundo cree que es el dominio televisión verdad todo es el dominio televisión estoy entrando a google maps y quiero ir a ver dónde está el atolón de tuvalú ya que tuvalú que es ese atolón de ahí ha tenido la suerte por el nombre que tiene de que le haya asignado el dominio punto tv y curiosa media televisión saliese prácticamente igual en todo el mundo donde está tuvalú bueno pues tuvalú está lejos no está lejos más allá de lejos pero no es que te lo diga yo es que estoy haciendo un zumo hacia afuera y vemos mar mar mar y más mart y sólo para aquí empiezan a aparecer algunas islas y resulta que se encuentra era del pacífico pero cuando digo en mitad quiere decir que en cuanto a ser un poco de zoom desaparece del mapa es que ni siquiera lo ves no es ni siquiera una gran superficie de tierra es un simple atolón hace ya unos cuantos años que de hecho tuvalú no registra sus propios dominios sino que tiene delegado ese poder en estados unidos eeuu el que le gestiona ese tipo de registro de dominios luego tenemos antigua y barbuda son los que tienen los que poseen el dominio ag el dominio ag para los países germánicos es algo así como la sl en españa por tanto a nosotros el dominio al genio nos dice nada pero hay otros países donde ag tiene bastante gracia así que fijaos esta islita de aquí es antigua si me separo un poco más encuentro la isla de barbuda momento que está por aquí aquí está barbuda y estas dos islas están dentro del cinturón de islas y países del caribe ahí lo tenéis antigua y barbuda está ahí dentro por eso hay algunos países que o algunas áreas geográficas que tienen la suerte de que les hayan tocado dominios que por lo que sea le resultan bastante convenientes un tv puede costar perfectamente 60 euros un punto como puede costar 15 pero claro si eres una televisión y quieres tu dominio punto tv pues te tienes que rascar un poco el bolsillo y que eras quemado por la televisión probablemente no es tan caro pagar 60 euros al año que ahora hablaremos de eso de cuánto se paga y de cada cuando se paga por último voy a decir que tenemos saliendo ahora las nuevas extensiones de dominio punto blog punto tienda punto online incluso hay punto barcelona punto valencia punto abogado porque existen tantos tantas extensiones de dominio por una cosa que se llama la saturación de los dominios la saturación es que hay tanta gente comprando dominios que llega un momento que empiezan a no quedar dominios son libres en ese momento ya a principios de mediados de los 90 es cuando empiezan a aparecer primero estas alternativas y luego dominios por países luego estás luego estas y muchas más por el problema es de qué sirve tener diferentes extensiones de dominio si la gente de la que más se sigue acordando es de estar aquí arriba bien cuando salieron estos dominios yo fui el primero que pensé bueno para qué quiero yo pero si es que la gente no recuerda a estos cómo va a recordar estos de aquí parece la atención con esto que os acabo decir parece habrá que ver en el futuro qué pasa que google va a tratar mejor a los dominios con este tipo de extensión ya los dominios genéricos con este tipo de extensión porque con ese tipo de extensión google puede saber mejor qué tipo de negocio tienes y con estos no este rumor a día de hoy todavía no se ha visto materializado pero esperamos que en un futuro sea así hasta qué punto puedes cambiar de dominio o de extensión o de lo que quieras una vez que la has comprado a un nivel teórico te puedo decir que puedes cambiar de dominio tantas veces como te haga falta a un nivel práctico evidentemente sólo te voy a recomendar a hacerlo solo aquellas veces que sea necesario y te voy a poner un ejemplo te voy a poner mi propio ejemplo hace años que me compré un dominio llamado jo cars a punto convenio que sigo teniendo porque por una razón muy sencilla y es que jota o es jose carlos escarrá tala y esa es sanchis es decir no es un dominio para esconderme de nada es un dominio que condensa mi nombre y si cierto porque no podríamos considerar que es algo así como un como un mote pero a principios de los 2000 es tener ese tipo de dominio no representaba ningún problema llegó un buen día en el que google dijo bueno no sólo a mí evidentemente a todo el mundo y dijo si tú tienes un seudónimo yo no sé quién es realmente igual te estás escondiendo de mí yo le puedo decir a google google tengo que saber que es un seudónimo pero es mi nombre y apellido que tampoco es que sea muy elaborado pero google de momento eso puede no verlo pueden oír diseccionando caso por caso sino que puedo meterme en el saco de los de los que se esconden y evidentemente llega un momento en el que premia a aquella gente que tenga un dominio que se llame por ejemplo en mi caso josé vicente carratalá puntocom claro agua un dominio donde dices mira si para hacer negocio con este dominio te estoy poniendo mi nombre mi apellido y si encima es en tres años web es también foto quiero decir que te puedes fiar de mí vale con lo cual me compré el dominio josé vicente carratalá puntocom es el que estoy usando tengo también el dominio carratalá punto es que es más breve pero no es puntocom a la hora de mos de eso entonces el dominio con su vicente catalá puntocom me lo compré y lo tuve un par de años inactivo porque seguía usando el dominio carsa puntocom porque porque me daba miedo me da miedo cambiarme de un dominio de otro y a ver qué pasaba con la gente porque hay dos cosas que deben preocupar la primera es que la persona el ser humano que antes te encontraba por jugar sea puntocom ahora te encuentre por jose vicente catalá puntocom y la segunda que no sé yo si decirte que es más preocupante todavía es que google se dé cuenta que aunque has cambiado de dominio sigue siendo el mismo bien así que llegó un día que dije mira ahora que es verano me arriesgo y total si pierdo posicionamiento como desde la nota un poco pasa mucho por suerte cambie durante un día 24 horas estuve desaparecido de google porque google dijo este tío ha quitado la página que ha pasado con él ya las 24 horas volvía a aparecer e igual de arriba que posicionaba a mi dominio primer ojo carsa puntocom de repente posiciona bajo suficiente carta la puntocom ahora estuve 24 horas fuera de línea y tuve suerte que solo fueron 24 horas cambiarse el dominio es posible pero yo creo que pasa igual que como cuando te cambias el nombre de tu empresa que tus clientes pueden pensar porque te es cambiar de empresa tienes problemas con el nombre anterior es raro y todo aquello que sea raro va en contra de la confianza por eso no hay ningún problema en un momento dado en comprar otro dominio y si quieres mantener los dos y si no quieres cerrar uno yo recomiendo que si coges un segundo dominio durante un tiempo sigas permitiendo a la gente que entre desde por ejemplo este dominio para que aquellos rezagados que nos han dado cuenta de que has cambiado pues todavía te encuentren y ya ha pasado un tiempo si el dominio te interesa por motivos personales mantenlo quince euros al año tampoco es mucho dinero y si no te interesa pues evidentemente deja de renovarlo y suéltalo pero cuidado porque otro te lo podrá y además os debo decir que tengo también el dominio carratalá punto es técnicamente es más fácilmente recordable que el dominio jose vicente catalá puntocom porque un dominio cuanto más largo sea peor porque la gente peor lo recordara lo que me mata un poco es que el dominio punto es es de españa’ y yo os lo digo de momento creedme cuando lleguemos la parte de analytics os lo demostraré con datos pero en mi analítica las visitas desde españa son sólo un tercio de las visitas globales dos tercios de las visitas a mi página web provienen de países hispanoamericanos porque porque hago formación online y mi información online se vende mucho en países hispanoamericanos así que estoy comunicando yo con un dominio punto es hay algunos países panamericanos que pueden decir español vale de otros países que por costumbre social pueden decir no españa entonces claro qué quiere decir españa es como si entrase una web que de que es punto pr punto brasil tú dices a brasil no va conmigo entonces ahora mismo estoy prefiriendo pese a que tengo ese dominio y redirige a la misma página pero estoy prefiriendo mantener el punto com porque es comercial porque es común porque si en algún momento tengo que salir de españa a trabajar en cualquier parte no para siempre sino ir trabajar y volver no tengo ningún problema y no quiero usar un dominio que geográficamente me geolocaliza y me límite otra cosa es que tú me dijeras yo es que tengo un negocio y por lo que sea porque cada uno hace negocios como mejor cree que debe hacer negocios nunca voy a salir de españa yo sólo voy a dar negocio en españa pues te puedes un punto es perfectamente hace unos cuantos cursos un alumno me dijo que cualquier página web que haga negocio dentro del territorio español según la ley de comercio electrónico debe usar el dominio punto es y yo le dije por qué es así porque no puede usar dominio.com y exalumno me dio una explicación tan sencilla como creíble en una explicación sencilla y hacerte sencilla que es suena creíble y es que el dominio punto es lo controla el ministerio de interior mientras que el dominio puntocom lo gestiona un organismo que se llama la icann que está en eeuu esto qué quiere decir por esto quiere decir que supongamos que yo tengo un dominio puntocom y supongamos que yo estuviera realizando actividades ilegales el gobierno español que es el responsable mío como ciudadano español no me podría cerrar o dominio.com porque no depende de ellos dependen de un organismo de un país tercero un país con el que españa si quieres tener buenas relaciones no te digo que no pero una cosa es tener buenas relaciones y te vamos a llamar por teléfono y decir oye cerrada esta página y ali khan diría espera pero pero tú de qué país dices que llamas qué página dices quieres que cerrar y según qué ley que no es la nuestra quieres que cerremos una página web en cambio como el dominio punto es todo queda en casa el dominio punto es el ministerio de interior tiene todo el poder en un momento de decir esta página está cometiendo un delito un tejerazo y cortada me lo explico así el alumno y dije ay por suena bastante creíble no se aplica la gran mayoría de páginas españolas para hacer comercio usan el dominio puntocom pero sin embargo también es importante en un momento dado conocer la ley aunque esa ley no sea de aplicación actual nunca sabes cuándo puede ponerse el gobierno x duro a aplicar esa ley cuanto cuesta un dominio se compra o se alquila y un dominio me lo pueden quitar o no me lo pueden quitar la primera pregunta es cuánto cuesta un dominio realmente yo os voy a responder a cuánto cuesta un dominio vacío un dominio nuevo el precio puede oscilar entre 15 y cinco euros hay empresas que te lo pueden ofrecer por menos alguien presente el poder ofrecer por algo más pero más o menos la horquilla de precios está por ahí el dominio y esto es muy importante no se compra el dominio se alquila el dominio no es una propiedad y por tanto dado que no es una propiedad que lo está alquilando el gobierno correspondiente un dominio punto es pero está alquilando el gobierno español un dominio puntocom que lo está alquilando el gobierno estadounidense me parece muy importante esta consideración y con esto que te voy a decir fíjate que yo estoy usando un dominio puntocom ahora mismo pero es importante saber que hasta qué punto estamos montando un negocio y la dirección de ese negocio que al final es la puerta de entrada al negocio depende de un gobierno que ni siquiera es de un país en el que vivo y es de un gobierno de un país dentro del cual yo no tengo ningún derecho no os digo no cojáis dominio.com porque yo estoy usando un dominio puntocom pero una vez más los digo ser conscientes de esto y sopesarlo como un criterio de elección más cuando es cojáis un dominio a continuación los dominios no se compran se alquilan se alquilan por cuánto se alquilan por años entonces lo más normal es alquilar un dominio por un año renovable por supuesto también desde hace pocos años existe la opción de renovar dominios durante varios años cuando un dominio va a caducar el mes de antes depende un poco del proveedor enviará un correo para recordarte que debe renovar ese dominio por supuesto tú siempre vas a tener opción de renovación preferente eso quiere decir que cuando se acaba la fecha no puede venir a alguien y quitarte el dominio títulos de nuevas antes lo ha renovado tú nadie te lo puede quitar qué pasa si se te olvida y lo intenta renovar un día después de que caduque hace años un día después de que caducara el dominio las empresas registradoras soltaban el dominio si llegamos un día tarde llegaba a estar de té lo podrían haber quitado a día de hoy se hace una moratoria las empresas de registro que reservan el dominio un par de meses si luego lo quiere recuperar pagas extra porque te van reservado pero de alguna manera previenen esos tipos de olvido después de dos meses ya lo liberan y cualquier persona puede venir o puede comprar y si tú dices que se ha olvidado que se te olvidó durante dos meses que no es que se te olvide durante un día además generalmente durante esos dos meses las empresas de hosting te van enviando correos para recordarte que tienes un dominio allí en reserva medio caducado por tanto hay que tener hay que tener cuidado y hay que acordarse de renovar los dominios periódicamente o incluso hay que contar con servicios de auto renovación de dominios en la empresa en la que haya es contratado y por supuesto la tarjeta de crédito la cuenta bancaria que esté detrás de ese pago pues tiene que estar actualizada tiene que tener efectivo para que cuando te carguen la tarjeta realmente se cargue ese dominio teniendo en cuenta que un dominio es un alquiler yo te preguntaría qué pasa si alquila un local comercial y no lo usas tu respuesta sería mientras sigas pagando el alquiler no hay ningún problema es tu problema pagar un alquiler y no usarlo comercialmente con los dominios ocurre lo mismo tú puedes tener un dominio tu puedes alquilar un dominio y no usarlo y no pasa nada siempre que lo pagues y lo vayas renovando simplemente no pasa nada de hecho hay un tipo especial de dominio que se llama parking el dominio de parking lo que hace es que tú registras un dominio sabes que no lo vas a usar y simplemente cada vez que alguien pregunta por ese dominio aparece como que está en parking aparece como que está pre reservado hay de hecho gente que se dedica a reservar dominios sin usarlos con el simple fin de revenderlos más adelante ya podríamos entrar a valorar si es una actividad lícita o no pero el caso es que se hace teniendo claro todo esto como contratas un dominio como registras un dominio técnicamente para cada tipo de entidad por ejemplo un punto com tendrías que ir al aliqan al organismo este estadounidense si quieres registrar dominio punto es tendrías que ir al ministerio pero no puedes hacerlo directamente hay unas empresas intermediarias que se llaman registradores los hay muchos los hay de muchos tipos hay muchas empresas una de ellas es one on one realmente podéis entrar más o menos a la que queráis el tipo de servicio es el mismo en ambos casos dentro de cualquier empresa de registro encontrareis por una parte algo llamado dominios así que lo que voy a hacer es poner nombre del dominio que estoy buscando a continuación pulsó el botón buscar y en este caso la web en este caso este portal me dirá qué dominios están libres y cuáles no lo están en este caso el dominio josé vicente carro de la puntocom no está libre porque evidentemente no tengo yo pero el dominio josé vicente carro del apuntó es está libre el dominio fue suficiente carretera apuntó colombia está libre punto net está libre punto info está libre punto europa está libre punto hereje está libre y punto club está libre lo primero que haría por tanto pero no lo hagáis todavía si habéis encontrado el dominio que os guste deberíais comprar a continuación vamos a hablar de hosting el hosting es algo diferente el hosting es lo que encontramos con la palabra alojamiento dominio no es más que un nombre pero el nombre no te da cuántos megas tienes de espacio cuántas bases de datos tienes para usar no es un nombre y ya está el alojamiento es el segundo elemento que os hace falta para publicar una web y va atado a un dominio el alojamiento para hablar claro es un trozo de espacio del disco duro de un servidor web y que es un servidor web un servidor web es un ordenador que está encendido 24 horas al día y conectado a la red sirviendo páginas web no viendo páginas web sino sirviendo páginas web hay dos maneras de tener un alojamiento la primera es subcontratar lo y la segunda es tener uno propio subcontratarlo es a todas luces la opción más conveniente al principio conveniente desde el punto de vista del esfuerzo y del dinero un servidor propio hay que comprarlo hay que montarlo hay que instalarlo y configurarlo y cuidarlo cuidar que no te entren que no te lo jaque en que no se queme que no se apague cuando se apaga enciéndelo cuando se quema cambiar las piezas y es re copia de seguridad evidentemente pero te lo hackean mira a ver por tener entrada y tapa el agujero que le cae un rayo ves a la empresa en el servidor cuando vuelva la luz por supuesto y evidentemente todo eso es coste material y por supuesto también coste humano alguien tiene que hacer eso y quien hace ese trabajo probablemente tendrá la costumbre de cobrar a final de mes en cambio cuando subcontratas el servicio no está subcontratando a una empresa que se dedica a ello que tiene unos cuantos técnicos que se reparten entre muchos servidores y por tanto el coste es mucho menor así que qué tienes cuando subcontratas un servidor conveniencia comodidad y precio que tiene es contiene un servidor propio control como el servidor es tuyo tú decides lo que ocurre o lo que no ocurre con el servidor cuando el servidor lo subcontratas hay muchas cosas que no puedes controlar hay muchas cosas que no puedes elegir mi recomendación estáis creando una web sencilla estáis creando una aplicación web sencilla en ese caso subcontrata un servidor web ahora tu tienda online va bien estás facturando miles de euros al día quizás llega el momento de reinvertir algo de dinero y tener un servidor propio quizás en ese momento cuando estás ganando mucho dinero la conveniencia siempre es importante no te digo que no pero el control desde luego también lo es así que no nos preocupemos en un principio por los servidores propios y de momento vamos a suponer que nuestro target va a ser subcontratar un servidor como se subcontrata un servidor básicamente vas a una empresa como ésta entras dentro de la parte donde pone hosting alojamiento como queráis llamarlo y vemos que siempre hay unos planes hay unos planes vamos a verlo hay unos planes donde por tres euros al mes te ofrecen unas cosas por cinco euros al mes el segundo año te ofrecen otras cosas por siete euros otras cosas y por trece euros otras cosas evidentemente cuanto más pagas más te van a dar por ejemplo en el plan de tres euros serán 10 gb de espacio web la pregunta que probablemente a día de hoy no me sepáis responder es 10 gigas es mucho o es poco a día de hoy puede que no lo sepáis responder 10 gigas en principio está bastante bien no creo que tu web tenga más de 100 gigas en material pero podría tenerlo y si no tengo una web y si quiero alojar 20 webs diferentes ahí no te digo que te vaya a llegar a 10 gigas pero puede llegar cuando ese momento ocurre probablemente le interesa llegar a un plan superior le interesa ir a 100 gigas de espacio o directamente a espacio ilimitado además esto puede que ahora mismo no os importe porque no lo entendáis pero con los planes más básicos o te dan pocas bases de datos o no te las dan tienes que ir a planes más avanzados para que te den más números de base de datos o para directamente que te den un número ilimitado de base de datos a lo cual vosotros diréis bueno y esto de la base de datos que quiere decir que es en que me beneficia cada aplicación web que vamos a desarrollar y cuando digo una aplicación web no digo una página web estática digo una aplicación web que tire y ver de base de datos un blog o una tienda una red social cualquier cosa así o una wikipedia todo eso tira de bases de datos tienes una sola base de datos tú sabes que puedes instalar un blog pero no una tienda online una tienda online en un blog una red social pero en un blog en cambio si la base de datos sabes que puedes instalar varias aplicaciones a la vez cada una con su base de datos estoy emitiendo un dato lo estoy emitiendo a dv y es que hay un truco con el cual tú tienes una base de datos pero metes varias aplicaciones dentro de esa base de datos sé que existe ese truco pero no me gusta ni nombrarlo porque es una guarrada hace años cuando contratar bases de datos era muy caro pues no había más remedio que hacer ese truco pero a día de hoy que la diferencia de tener una a tener 20 es pasar de tres a cinco euros al mes pues pienso que no vale la pena hacer este tipo de trucos sino que vale la pena pienso que el coste es asumible contratar a un servidor donde tengas una base de datos para cada aplicación que puedas hacer si os tenéis que equivocar equivocados por bajo y si compro un plan pequeño y luego lo necesitaba más grande no pasa nada siempre te puedes ampliar de plan cualquier empresa no te pone ningún problema para pasar de un plan pequeño de pasar un plan grande ahora normalmente las empresas ponen problemas para pasar de un plan grande a un plan pequeño así que a tiempo de subir siempre estás una trampa donde suele caer mucha gente que cojo un plan basado en linux o un plan basado en windows fijaos que por defecto viene pre marcado linux hay mucha gente que dice como yo en mi casa tengo windows voy a windows que es lo mismo que tengo en casa respuesta errónea no tiene nada que ver el sistema operativo que tenga el servidor al sistema operativo que tengáis en casa por decirlo muy llanamente os voy a decir que cuando trabajáis con linux estáis trabajando con php por aquí pero lo digo yo con php y con mysql es decir programación en php bases de datos mysql cuando te pasas a un plan windows aunque técnicamente pone que soporta php vamos a verlo windows he cambiado me voy a gestión y observamos que pone php es cierto que lo pone pero sobre todo es porque vas a programar en a ese punto net y como bases de datos aunque pone que soporta mysql 5 es porque vas a trabajar en bases de datos en formato microsoft sql server la versión que sea en este caso 2012 así que lo que tienes que hacer es plantearte en que vas a aprender a programar vas a programar en el s&p con microsoft sql server cógete un plan windows pero vas a programar en php con mysql en ese caso en ese caso coge un blanco en linux qué pasa si me equivoco qué pasa si cojo un plan windows y lo que quería era un plan linux me ha pasado muchas veces con alumnos esto entonces los del proveedor lo que sea en este caso one on one están tan acostumbrados a que les pase eso que la gente coge windows por error y luego se da cuenta que quería linux que te lo hacen en el momento o sea para no discutir tú llamas y dices mira me he equivocado quería el plan linux recogido el windows y te dicen te borró todo lo que tenías de paso de plan en una hora vuelve a entrar que ya lo tienes disponible por eso digo equivocarse en ese punto no es tan malo pero evidentemente si podéis no equivocarnos mejor qué hacemos por tanto para contratar un pack de dominio de hosting eso ya depende un poco de en qué empresa estéis contratando cada una evidentemente tiene un proceso de tienda online hay algunas que te dicen primero compra el dominio luego a sociales un hosting está por ejemplo funciona al revés dice mira si te compras por ejemplo el plan básico te doy un dominio con lo cual dices vale no compres el dominio y luego el hosting compra primero el hosting y luego en el dominio gratuito que te van a dar ahí comprar el dominio así que en este caso lo que haría es continuar estaría comprobando el dominio me dice que me ofrece su visión de carro está a punto es acepto y le digo continuar a partir de aquí evidentemente y esto no es por meterme porque soy un usuario bastante frecuente pero esto es como la página de telepizza que tú pides tú pizza le das a comprar y te dicen pero tiene salitas si hubiera pedido no no quiero en la siguiente página y quieres coca-cola vamos a ver que si quisiera lo había pedido esto es igual quieres el plan one on one tienda online no se quiere una tienda ya me la montar ello así que nada continuar sin tienda online y quieres optimización y quieres editor web móvil y quieres bloqueo y quieres cdn y quieres antivirus es que es igual que el telepizza en lugar de alitas de pollo de antivirus con lo cual no marques nada en principio le damos a continuar con el pedido y a partir de aquí ya entramos en la oferta especial vale o bien con precio estándar en este caso pues cogemos en cada momento la oferta especial que haya igual que el telepizza exactamente así que pulsamos continuar en este caso me dicen que van a cargar 297 ojo el primer año por la oferta de primer año a partir de ahí el precio estándar sería para que se actualice bueno 499 un mes sólo quería escogerlo durante 12 meses pero en fin vale 297 como calcular pues cinco euros por doce meses a partir de aquí ya no os puedo decir más por qué tenemos el típico formulario de registro donde en esta página se te va a pedir los datos de contacto podrás especificar si eres particular autónomo o empresa para luego ver si te puedes desgravar la factura correspondiente a este servicio o no si eres particular y una vez que hayas rellenado este formulario en la siguiente pantalla si pienso continuar no me va a dejar hasta que rellene los datos evidentemente aparecerán los datos de pago donde tenéis que introducir vuestro número de tarjeta el número de seguridad y todo lo que hace falta cuando pagas algo por internet una vez que hayáis hecho eso en la gran mayoría de proveedores aparecerá una información que os dirá en tu cuenta ha sido pagada correctamente en un máximo de 24 ó 48 horas te enviaremos la cuenta te enviaremos un correo con tu número de cuenta generalmente no suelen ser 48 horas pero 2 3 4 o 5 horas son un poco inevitables por tanto a partir de ahí una vez que tengáis ese compra hecha tendréis que esperar a recibir el correo en el cual aparece vuestro número de usuario de quién es un dominio eso es algo que a priori no podemos saber pero que sí que podemos averiguar mediante una herramienta que se llama guys entonces puede ser que una persona perfectamente compre un dominio lo tenga un año o dos o tres o cuatro en posesión pero no haga nada con ese dominio incluso puede ser que cuando ponga ese dominio en una url de internet no aparezca nada en esa página web como saberlo por tanto yo suelo recurrir a un servicio que se llama direct nick es un registrador en norteamericano que está en nueva orleans y pongo direct guys direct y que es el registrador antes tenía unos cuantos dominios en este registrador juice es el servicio y voy a entrar dentro de directo como hobbies no es el único registrador que tiene este servicio hay varios así que si entro fíjate que me dice introduce el dominio por ejemplo voy a poner josé vicente carrot a la puntocom introduzco el texto cuidado también os digo una cosa este dominio este registrador norteamericano puede ver algunos algunas extensiones de dominio concretas por ejemplo un registrador norteamericano no te puede dar información de un dominio punto es para el dominio punto es es que la página que se llama red.es y en red.es hay por ahí ahora veréis ahora parecerá una herramienta de dominios dejadme que se cargue así es dominios y ahí tendré una herramienta guys para dominios punto es pero vamos a suponer que es un dominio puntocom pongo la extensión pongo la web pongo el captcha le digo search y como veréis a continuación atención me dice quién ha registrado el dominio el registrador me dice la fecha en la que se actualizó y sobre todo me dice el expirase dónde está la fecha de expiración me dice quién lo ha registrado me dice quién es el registrador me dice cuál es la dirección la ciudad la provincia el código postal hasta el teléfono si lo hemos puesto en los datos de registro y una serie de informaciones más bien ahora qué hacer con estos datos los mismos datos que ponéis cuando registre un dominio son los datos que aparecen aquí en el juez cualquiera los puede saber se puede y conviene ocultar estos datos la respuesta es mayormente no se puede porque de hecho cuando antes he intentado registrar el hosting me han ofrecido el servicio llamado el bueno one privacy o algo así es decir un servicio de privacidad un servicio de ocultar los datos erróneos preguntó google en un momento dado me va a hacer un juris al dominio si yo oculto los datos del registrador del dominio que dice eso en cuenta la confianza de la página web google puede decir ostras y oculta los datos porque es porque va a delinquir o porque se quiere proteger su privacidad como no lo sabe por si acaso te coge con pinzas y te baja el posicionamiento por eso digo que no conviene ocultar la extensión del dominio únicamente si queréis ocultarlo detrás de una figura jurídica pues se puede arrancar una sl una sociedad limitada por ejemplo y comprar el dominio a nombre de la sociedad evidentemente no adrede para el dominio porque una sociedad limitada son tres mil euros de capital no vas a hacer eso solo por la privacidad de los datos evidentemente estoy hablando de una persona que además tenga una empresa no quieres dar tus datos registra el dominio nombre de la empresa

en el siguiente ejercicio tenemos un objetivo doble en primer lugar vamos a empezar a aprender a maquetar webs de una sola página y como siguiente objetivo vamos a maquetar webs especial y especializadas especialmente pensadas para dispositivos móviles digamos teléfonos digamos tabletas lo que estoy mostrando en la pantalla es una página que se llama statcounter que tiene una sección de estadísticas donde estoy viendo sistemas operativos con los cuales la gente accede a internet lo estoy viendo desde el último año incluso si podemos a ver ese gráfico funciona rápido podemos ver los datos desde 2008 simplemente para ilustrar y simplemente para ver una tendencia y es que la navegación en dispositivos móviles cada vez es mayor y cada vez va a ser mayor fijaos esto que tenemos donde por ejemplo yo ese en gris es una gráfica que sigue y sigue y sigue otros en una gráfica punteada que básicamente equivale a android veis como sigue también una gráfica punteada cuanto más tiempo pase más aumentará la negación de dispositivos móviles y más disminuirá la navegación desde peces porque el tiempo que estás navegando en el móvil es el tiempo que no estás ya navegando en el pc y os digo esto porque antiguamente yo enseñara a maquetar sobre todo páginas para peces y bueno y como un extra enseñará a maquetar páginas para móviles pero los tiempos cambian llega un momento en el que para algunos tipos de webs la navegación móvil con respecto a la navegación de pc es el 50% y cuanto más tiempo pase llegará un momento en que la navegación desde móviles será el 100% o mayoría así que por eso vamos a hacer este siguiente ejercicio en este siguiente ejercicio por tanto voy a hacer una nueva carpeta en el escritorio le he puesto el nombre móvil y a continuación voy a hacer un nuevo documento de texto llamado index.hr ml dentro de este proyecto llamado móvil voy a copiar también la carpeta multimedia que he usado en un proyecto anterior en este caso la carpeta multimedia contiene una selección de imágenes de vídeo y de audio que vamos a poder insertar dentro de este proyecto así que una vez que tengo esto configurado una vez que tengo este proyecto en pantalla tengo una carpeta en el escritorio llamada móvil dentro tengo un archivo index.html y tengo una carpeta multimedia ahora que tengo esto vamos a empezar a trabajar a continuación en primer lugar vamos a abrir un editor de texto vamos a abrir un here it index.html y en segundo lugar lo que vamos a hacer es abrir un archivo index.hr ml de esta forma por tanto realizamos la misma comprobación de siempre se lleva aquí pongo hola y guardo comprobaremos cómo aparece hola en la pantalla comprobamos por tanto que estamos trabajando sobre exactamente el mismo archivo además como en este caso estamos simulando la pantalla de un móvil lo que voy a hacer simplemente es hacer esta ventana un poco más pequeña para simular en este caso con el mismo navegador la pantalla del móvil y por tanto también el espacio que le sobra al escritorio se lo voy a dar también al editor de código para que vayamos más sueltos dicho esto ya podemos empezar a escribir la estructura característica de cualquier proyecto web en primer lugar las etiquetas de apertura de html y las de cierre a continuación las etiquetas de body y las etiquetas de here dentro de la etiqueta de head voy a poner algún título web móvil porque recordamos que esto era obligatorio para cualquier proyecto web realmente para cualquier proyecto de página web a continuación recordamos que otra etiqueta obligatoria era meta charset es igual a efe 8 así que guardo recargo y ya tenemos ahí que estamos trabajando con la web móvil una etiqueta importante si queréis no solo para móviles sino para cualquier tipo de proyecto es la etiqueta meta newport la etiqueta meta view port me asegura que el dispositivo móvil en el que esté trabajando nueva a re escalar la pantalla la etiqueta de view por la voy a sacar en mi caso de una versión anterior de mi genio web donde ahí la tengo preparada para copiar y pegar por tanto voy a usar esta etiqueta de aquí dónde estás vivo por está aquí estás tenéis que copiar y pegar exactamente esa etiqueta es una etiqueta meta con name es igual a view port content es igual a todo esto que tenéis aquí y todo eso que tenéis aquí equivale a decir navegador no me re scales la web meta name es igual también a description y voy a poner en este caso content que es igual a esta es una web que estamos haciendo para dispositivos móviles meta name o short el contenido es jose vicente carratalá meta keywords es igual a web como móvil como html5 como php como css3 y con esto ya tenemos unas cuantas etiquetas para la cabeza sobre todo etiquetas para especificar el título y la codificación de caracteres y etiquetas para cosas como el re escalado en la web o mejor dicho el no reescalado la descripción el autor y las palabras clave una web para dispositivo móvil puede tener realmente la misma estructura que una web normal salvo que vamos a poner el todo el contenido dentro de la misma página por tanto voy a poner un día y de igual a contenedor a continuación voy a poner un gel voy a poner un cuerpo principal y voy a poner un footer podríamos pensar que el deep contenedor en principio parece que no nos haría falta porque una web móvil se diferencia de una web fija en que la web móvil no está dentro de un contenedor sino que ocupa el 100% del móvil pero sin embargo para este ejercicio lo que quiero hacer es una web que sirva tanto para móviles como para pantallas de ordenador por tanto por si acaso me voy a dejar ahí el contenedor y ahora dentro del header voy a empezar escribiendo h1 dentro de la cabecera josé vicente carratalá h 2 lo mismo profesor programador y diseñador y voy a poner porque no un menú de navegación así que nada voy a poner una lista no ordenada hasta aquí es prácticamente igual que una web normal y dentro de la lista no ordenada voy a poner una serie de hipervínculos pero aquí está la cuestión y es que nosotros no vamos a ir a otra página web cuando yo pincha el número de navegación no quiere oír a una web diferente quiero ir a una sección concreta de esta web super larga que voy a hacer así que en el inicio voy a poner simplemente inicio me voy por tanto dentro de la zona llamada hr y pongo almohadilla inicio es una almohadilla pero no tiene que ver con la almohadilla de css es otro tipo de almohadilla por tanto en este menú voy a crear una serie de pequeñas entradas así que digo inicio digo por ejemplo portafolio portafolio digo por ejemplo [Música] destacado y digo por ejemplo sobre mí hago como una página web pero no tiene la extensión html y en su lugar en la parte de delante tiene una almohadilla ahora a continuación voy a dotar de contenido a la sección principal así que dentro de la sección principal voy a poner sección y voy a poner atención aparte de que ponga y de que no te digo yo que no pero voy a hacer algo como section y d inicio name es igual a inicio el name es aquí la novedad le digo esta es la información que voy a poner en la sección de inicio ahora hago otra sección si queréis copiar es la anterior donde voy a decir y de es igual a portafolio name es igual a portafolio en este caso evidentemente estoy poniendo el vídeo para maquetar lo en css y el name para llamarlo desde los hipervínculos ya quería esta es la información que pondré en la sección de portafolio y voy a copiar y pegar copie pelo continúo copiando y pegando evidentemente y digo aparte de que pone inicio voy a poner destacado y sobre mí aquí voy a poner destacado y aquí voy a poner sobre mí si queréis para saber dónde empieza y dónde acaba cada sección puedo poner un h 3 un h 3 un pequeño título dentro de cada sección que diga sección de inicio sección de portafolio sección de destacado y sección de sobre mí guardo recargo y ahí lo tenemos la cuestión lo que quiero que veáis es que una vez que hemos hecho esto ocurre lo siguiente si yo me voy a inicio atención miradme hago clic y sección de inicio se pone de arriba si yo pincho en portafolio me voy a la sección de portafolio no se ve porque la página ya está abajo del todo si pincho en destacado me voy a destacado no aparece ahí arriba del todo porque no puede si queréis voy a hacer un poco de trampa y voy a poner un montón de veces recordáis que los verdes son retornos de carro simplemente lo hago para que haya un montón de espacio en la parte de abajo de la pantalla y podáis comprobar la efectividad de este menú destacado me voy a la sección de destacado y sobre mí me voy a la sección de sobre mí es decir hacer esto lo que nos permite es maquetar varias secciones dentro de una sola página web sin tener que ir saltando de página web a la página web esto es bueno si es malo es malo porque recargamos más el index pero es bueno porque en el móvil dado que las webs cargan más lento que los peces una vez que te has cargado toda la información ya lo tienes todo ahí aparte cada día están más de moda este tipo de páginas empezando por ejemplo por las páginas de apple fijaos que si entro dentro de al punto es y voy a ver por ejemplo los hay max por lo menos a día de hoy yo no sé cómo será el futuro pero por lo menos a día de hoy fijaos que se está poniendo de moda las webs que tienen contenido grande ancho a pantalla completa y todo en vertical esto es un poco la tendencia ahora porque estas páginas están poniendo de moda porque si la ves en el ordenador o la ves en la tableta es muy fácil por ejemplo en dispositivos móviles de rodar simplemente con el dedo y no tienes que ir buscando pequeños botones que en el móvil se ven fatal así que la idea es esta es así con html y curiosamente aunque estoy hablando de una tendencia actual y que en principio tiene bastante tirada pero este este concepto es muy antiguo esto es de las primeras cosas que se podía hacer en la web también me diréis que habréis visto webs que cuando pinchas aquí por ejemplo portafolio en lugar de ir de golpe hace una pequeña animación y poco a poco eso evidentemente es javascript vale por tanto con html lo que hacemos es vincular un botón a otra sección de la misma web con javascript haremos el efecto de animación de que vaya poco a poco para la gente de que la gente pueda entender que cuando ha pinchado ese botón lo que realmente se le ha hecho es dirigirle a una cierta parte de la página por último porque no nos dejemos abandonado tampoco tenemos el footer el pie de página donde vamos a poner lo siguiente vamos a poner pues por ejemplo h 6 copyright 2014 josé vicente carratalá no es que tenga mucha importancia el footer pero así por lo menos no nos lo dejamos desangelado así por lo menos ponemos algo y lo podemos estilizar en css en este ejercicio no hemos acabado con html en este ejercicio nos queda trabajar la inclusión de imágenes el vídeo el audio y todo lo demás pero vamos a hacer un inciso llegado a este momento y empezamos directamente a trabajar con estilos css a continuación por tanto me voy a ir a la cabeza y voy a poner una etiqueta de estilo qué va a hacer lo siguiente y fijaos lo que voy a hacer porque voy a un poco el toro por los cuernos trabajando con una técnica que se llama responsive la técnica llamada responsive consiste en que la web se adapte automáticamente a múltiples dispositivos como teléfonos tabletas u ordenadores para ello voy a usar una etiqueta llamada media y la etiqueta llamada media tiene el siguiente aspecto voy a volver a mi página web antigua y voy a copiar y pegar una etiqueta como esta que a continuación pegaré en el estilo digo a media screen en max with es igual a voy a poner por ejemplo 400 es decir que nos está diciendo esta etiqueta nos está diciendo siempre que el medio sea una pantalla y que la anchura máxima sean 400 píxeles ojo máxima inferiores hasta 400 en este caso voy a poner una serie de propiedades por ejemplo va a quedar muy cutre y muy hortera pero para que lo veáis background es igual a red fijaos voy a recargar el fondo en este caso no es todavía va a romper no es todavía rojo vamos a verlo a ver un segundo background red de quien claro si no digo de quien evidentemente no me va a hacer ningún caso no estaba diciendo que era del body vale guardo recargo ya era el fondo es de color rojo pero atención damos cuenta que la etiqueta media es como un súper contenedor de contenedores la condición de que el background sea rojo se va a cumplir siempre que la anchura sea desde 0 hasta 400 pero si yo cojo esta anchura mirad y la hago más grande veréis cómo llega un momento en que deja de ser rojo y pasa a ser nada pasa a ser blanco porque blanco es lo que ocurre cuando no pones nada ahora voy a copiar esta etiqueta la voy a copiar bajo y voy a poner media screen and with y la anchura mínima sea de 401 píxeles no me pongo a las 400 porque el programa dirá entonces que le pongo rojo u otro color ponemos 401 y así el programa sabe perfectamente dónde empieza y dónde acaba así que background voy a poner blue así que guardo recargo y quiero que veáis lo siguiente si ahora yo hago esto más grande veréis cómo se vuelve de color azul pero si lo hago más pequeño de color rojo eso qué quiere decir pues que puedo aplicar unas reglas css cuando la pantalla es pequeña y otras reglas css cuando la pantalla de grande es decir le puedo dar un estilo para móvil y si quiero otro para tableta y si quiero otro para pc por ejemplo digo media screen and men with es igual a esos pixeles atención and max wef es igual a 800 esto qué quiere decir pues que esta regla se aplica desde 401 píxeles hasta 800 y que pasa más allá de 800 pues que yo puedo poner tantas reglas como quiera desde 801 hasta mil 800 píxeles va a pasar que el bajón va a ser green vamos a verlo ahora guardo recargo y tengo que cuando la pantalla es pequeña el fondo es rojo cuando la pantalla crece un poco el fondo es azul cuando la pantalla crece más el fondo es verde luego ya no puedo tener solo ya no puedo tener sólo dos estilos sino que puedo tener tres si queréis llamarlo teléfono tableta y ordenador dejadme que lo ponga un poco con comentarios y voy a poner lo siguiente estilos generales compartidos todos los estilos que se pongan fuera de las etiquetas medias serán estilos compartidos a todas las etiquetas media todo aquello que se ponga dentro de esta etiqueta media estilos para teléfono móvil todo aquello que se ponga adentro de esta etiqueta media será estilos para tableta y todo lo que se ponga dentro de esta etiqueta será estilos para pantalla de pc esto que acabo de escribir por supuesto son comentarios y por tanto al ser comentarios nunca van a aparecer en el código nunca van a aparecer en la pantalla aparecerán cuidado eso sí como comentamos anteriormente si veo el código fuente de la página sí que aparece en el código fuente así que tener cuidado con lo que escribís dentro de sus comentarios esto quiere decir por tanto que a partir de este momento podemos poner unos estilos generales compartidos como por ejemplo voy a marcar un separador para que veáis bien dónde empieza y dónde acaba y ahora aquí hago lo siguiente por ejemplo voy y le digo font guión family sans serif es decir fuente sin remate fuente sin decoración yo no quiero aplicar ese estilo solo un tipo de pantalla yo quiero aplicar ese estilo independientemente a qué pantalla estemos hablando por eso lo pongo fuera en estilos generales compartidos ahora dejadme que borre los colores de fondo verdad porque quedan fatal ya hemos visto cuál es su función y ahora en body voy a trabajar con el concepto de contenedor pero el móvil no mira ahora digo dentro de pantalla quiero decir desde 800 hasta mil 800 píxeles yo digo con tenedor es with the 800 píxeles margin auto background white fondo blanco y un padding de 20 píxeles y si queréis también un box shadow una sombra de caja de 0 píxeles 10 píxeles 20 píxeles y negro semi transparente cuando yo recargo yo no veo ese estilo porque ese estilo se está aplicando únicamente al rango de pantalla que va desde 800 píxeles hasta 1800 pero si yo abro la página mirad mirad mirad llega ahí de repente y la página se coloca en un contenedor pero cuando la página se hace más pequeña daos cuenta como no es que el contenedor no se ve es que no existe ese contenedor lo podéis ver claramente en cuanto a que en el body voy a ponerle que el background sea rey el fondo sea gris así que fijamos como no hay fondo gris no hay ningún tipo de fondo gris pero cuando hago la pantalla de más grande fijaos cómo de repente aparece un fondo gris beige ahí no está la atención veis el salto ahí no está y ahí sí está estoy haciendo un salto también para que se vea claramente la idea cuando hacemos una web o responsiva es que se vea el menor salto posible pero voy a continuar explicando cosas voy a continuar haciendo estilos que pueden ser diferentes en una web móvil y pueden ser diferentes en una web de ordenador hablemos por ejemplo del título con el título pasan dos cosas primero en móvil queda bien que el título esté centrado no que esté la izquierda y además el título es muy es muy grande se me sale casi en cambio en web pasa justo al contrario queda bien así queda bien alineado a la izquierda así que voy a hacer lo siguiente como estilos generales para todos voy a decirle que h1 h2 h3 h 4 h 5 h 6 es decir todos los títulos quiero que tengan padding de 0 píxeles margin de 0 píxeles y ahora solo para el teléfono móvil voy a hacer lo siguiente h1 font-size es igual a 20 píxeles por ejemplo no lo sé cómo va a quedar h 2 es igual a font-size de 14 píxeles guardo y recargo fijaos que la queda más pequeño y ahora voy a decir que todo lo que esté en el header tendrá un text align center estará centrado en la página todo lo que está en el header incluso el menú me da igual ahora mismo entonces fijaos como cuando estoy viendo este elemento en el móvil el texto sobre pequeño porque la pantalla es más pequeña y se ve centrado pero en cuanto a paso a tableta la cosa cambia porque internet hay acabe y cuando pasó a pantalla tiene otro estilo diferente pero estos digo más por ejemplo en tableta digo bueno en tableta no quiero hacer el texto más pequeño porque con ese tamaño cabe bien pero lo quiero centrado así que me vengo al estilo de tableta y digo header text align center yo puedo elegir qué estilos quiero compartidos en todos los estilos y qué estilos quiero poner única y exclusivamente en cada dispositivo por ejemplo móvil texto centrado letra pequeña tableta texto centrado letra grande pc texto a la izquierda letra grande es un consejo general para cualquier web y ahora hablamos de particularidades que los estilos css no estén en línea si puede que no los pongas internos como los estamos haciendo ahora y si puedes los pongas externos es un consejo general en la web móvil también serviría pero supongamos que tengo una web que está hecha de una sola página para qué me sirve tener el estilo en una página aparte es decir cuando tenemos una página web que está hecha a partir de un sitio web quiero decir que está hecho a partir de varias páginas web es normal no solo normal sino conveniente y entendible que tengamos el estilo separado en una sola página css porque así todas las páginas html chupan de esa misma página css y el estilo que pongas en esa misma página pss se va a derivar se va a heredar a la vez a todas las páginas de html eso es fácilmente entendible pero qué pasa en este caso en este caso para qué quiero externalizar algo que no va a ser compartido con ninguna otra página sólo con que tuvieras en tu sitio web dos páginas tu sitio web tuviera dos páginas móviles tendría ya te vale la pena sacarlo fuera pero si sólo tiene una página en ese caso tenerlo en un archivo externo va a aumentar el tiempo de carga porque es una petición más que el agua que tiene que hacer que empecé ni te enteras pero el móvil por lo menos a día de hoy cada petición cuenta lo que te acabo de dar es un argumento en contra de externalizar lo pero ahora te podría dar un argumento a favor de externalizar lo el argumento sería que en determinadas empresas en determinados entornos una persona es la que trabaja el html otra persona es la que trabaja el css de hecho hay un puesto de trabajo que es el front-end designers que es una persona que trabaja solo html css y hay otro puesto que es el backend developer que es el que trabaja javascript hp y mysql la idea de separar por archivos la idea de separar por lenguajes es que si te viene un tío que solo toca el css le puedes decir mira solo toca ese archivo no me habrás el otro porque es que igual incluso estoy yo trabajando en el otro si está separada en dos archivos dos o más dos personas pueden trabajar a la vez en un mismo archivo si no lo está por tanto ante cualquier cosa que me preguntéis yo os voy a decir siempre pros y contras ventajas y desventajas tiene un momento dado incluso os voy a decir mi propia opinión pero nunca hay una verdad absoluta sino ante cada caso siempre hay ventajas y desventajas otra razón para externalizar los archivos es el hecho de modular izar que es una costumbre bastante extendida de programación es una costumbre que tiene sus claras ventajas y es que yo no sólo me puedo exportar un archivo css sino que me lo puedo separar en tres archivos css o 41 para general es otro para móvil otro para tableta y otro para pc de esa forma ahora no pero cuando este archivo se complique nos ahorraremos el problema de que tendremos una página web no ya de contenido no esté hablando de contenido sino de código larguísima y cuando una página web se hace larguísima empieza a ser incómoda de manejar hay un principio de una técnica que se llama refactorización de la cual ya hablaremos que dice que visualmente cuando un archivo tiene mucho código es que ha llegado el momento de refactorización es que hay que partir lo y hay que dividirlo en varios por tanto en este caso efectivamente podríamos partir en cuatro archivos css pero eso quiere decir teniendo en cuenta que en este caso concreto estamos hablando de páginas web para móvil que la página de html no tendría que cargar un archivo css tiene que cargar cuatro archivos css y eso es más tiempo de latencia y eso es más tiempo que tarda la web en llegar hasta el navegador de la gente de hecho a veces suele pasar no siempre pero a veces suele pasar que lo más eficiente en cuanto al código cuando el código es más legible menos eficiente se encuentra la carga y cuando el código es más apropiado más rápido se carga así que en este caso concreto tendríamos que decidir entre una cosa y otra en este caso concreto estamos haciendo una web que primero todavía a día de hoy es sencilla con lo cual ahora mismo podéis preguntar bueno pero cuál es esa diferencia de tiempo de carga y yo os diría 5 milisegundos mire es no vale la pena y efectivamente tendríais razón pero no pensemos en esto para este ejercicio sino para cuando tengamos una tienda online que para un ejercicio de clase igual quedan igual 5 milisegundos pero a una tienda online que venda por ejemplo tres mil euros al día no da ni cinco milisegundos y ahí podemos tener un peso diferente en los criterios de decisión para maquetar el menú vamos a hacer algo parecido a lo que hicimos anteriormente con el menú de la web normal lo que está claro es que sea como sea sea para pc o sea para móvil lo que quiero es que desaparezcan los bullets de lista así que voy a decir que nada type es igual a no no quiero bullets no quiero puntitos además voy a decir que padding es igual a 0 píxeles margin es igual a 0 píxeles no tengo no quiero que el menú tenga ningún tipo de margen o ya se lo cree haré yo en definitiva ahora digo nada el lic es decir la etiqueta que está dentro de él y que está dentro de él que está dentro de la app es un poco lioso al principio pero ya veréis acostumbréis voy a decirle que text decoration es igual a none y voy a decirle qué color es igual a black y por tanto lo que ocurre es esto ahora bien ahora es cuando vamos a maquetar diferente dependiendo del dispositivo si yo tengo una botonera en móvil la quiero vertical y grande para que sea fácil pinchar con ella sobre el dedo si yo la tengo en pc la quiero diferente por tanto mirada me voy ahora a móvil y en móvil digo lo siguiente nada no pasa nada porque ya haya definido ese estilo aquí arriba se complementan se completan siempre que no haya colisiones y si las hay manda el último que aparezca entonces voy a decir wef es igual a 100 por ciento para bing es igual a 5 píxeles margin es igual a 2 pixeles background es negro y color es blanco no me hecho mucho caso con el tema de con el tema del 100 probablemente es porque él no tiene el cien así que voy a poner por ejemplo 500 píxeles o creo que eran 400 así que guardo recargo a ver algo estoy escribiendo mal with es igual a 400 píxeles cuando algo estoy escribiendo mal lo que hago es sacar el explorador de estilos y vamos a explorarlo así que el lab nada text decoration none color es igual hablar claro cuidado aquí wef es igual a 400 píxeles pero no me está haciendo caso así que puedo hacer lo siguiente pongo perdón pongo otro estilo y digo nada un link en lugar de maquetar la etiqueta a voy a maquetar el elemento li el elemento de lista background black y wef 100% así reparto las propiedades entre unos y otros y ahora sí el margin también lo quiero [Música] de 2 píxeles y el padre lo quiero de 5 píxeles para que cuando navegamos ahora sí 100% quizás es demasiado voy a pasarlo al 95% y ahí lo tenemos es un menú grande con botones lo que luego si queréis podemos hacer desplegable eso ya lo de menos pero de móvil pero quiero que veáis que se hago así en tableta al menú desaparece y ahí tengo otro tipo de menú pues ahora lo que hago es en la pantalla nada lee y le digo que flote a la izquierda voy a ponerlo como si fuera una pantalla ahí se ve pequeño no sé vamos a darle ahí flota a la izquierda y quiero que por ejemplo tenga un color white y mira voy a hacer una cosa nada un link solo el elemento de lista quiero que tenga un background black you know it de 200 píxeles por ejemplo vamos a ver qué aspecto tiene esto donde ha sido vale nada y le digo height es igual a 50 píxeles y ahora va a aparecer ahí lo tenemos y ahora éste le digo que cloud leds ahí está el problema y ahora por último puedo empezar un poquito a jugar altura es igual a 25 píxeles text align es igual a centre anchura de 200 igual es demasiado y tengo ahí esto cuidado ya sabéis que cuando pasa eso no es un problema realmente del css es un problema de html y es que llega el momento de poner esta etiqueta que yo intuyo ya me lo confirman es con el tiempo pero intuyo que vais a acabar poniendo en cualquier proyecto que hagáis y es para reflotar y baja hacia abajo así que nada un link martín de 2 píxeles y ahí lo tenemos que ha pasado el text align no me lo ha cogido la centre vamos a ponerlo aquí text align centre bien habría que ver si escrito mal algo por ahí o tengan una propiedad en colisión pero en definitiva fijaos como tengo un estilo quieto para móviles vamos a ver así que estoy con zoom un estilo para móviles un estilo para tabletas que curiosamente todavía no tiene ningún estilo y un estilo para pc e incluso pues luego en el estilo de tableta puedo elegir qué quiero hacer por ejemplo al estilo de tableta le voy a copiar y pegar porque no es independiente el estilo de pc así tengo un estilo por aquí otro estilo por aquí y otro estilo diferente por aquí en definitiva lo que quiero que veáis es que gracias a estas etiquetas media no sin esfuerzo porque técnicamente al final tenemos que trabajar unos tres estilos diferentes sobre una misma estructura html y eso a veces no es fácil pero sin embargo nos da la posibilidad de que si yo por ejemplo más adelante cambio la sección de inicio me cambia automáticamente para todos los dispositivos os digo eso porque el responsive la técnica responsive no es la única técnica que existe si no hay otro tipo de técnica que es el multi página el multi página es tienes una página para móvil otra página diferente para tableta otra página diferente para pc con lo cual ahí puedes jugar con la estructura como te dé la gana porque cada dispositivo tiene su propia estructura pero claro eso quiere decir que tienes que mantener tres páginas a la vez lo cual aumenta los costes de mantenimiento estamos viendo por tanto la técnica llamada responsive que no es la única pero a día de hoy es la que más se lleva para completar este proyecto los que nos quedaría por hacer sería trabajar un poco con el texto y con su legibilidad así que por ejemplo el texto quizás a ese tamaño esté correcto para pc pero si nos vamos a tableta y si nos vamos a móviles probablemente habría que hacer el texto más pequeño o más grande depende a quién le preguntes por qué en un dispositivo móvil un teléfono móvil hay menos espacio en la pantalla de suele ser más pequeña encima ahora las están haciendo con pantallas de alta densidad que en un móvil así te cabe un monitor igual de grande que esta pantalla y por tanto al hacer eso la letra se ve pequeña bueno siempre está la posibilidad de ampliar pero desde luego hay que tenerlo un poco en cuenta hay que tenerlo un poco en consideración si hablo de esto y mientras tanto voy a escribir algunos estilos por ejemplo generales voy a decir que por ejemplo el texto de párrafo va a tener un text align dos puntos justified y guardo y recargo y simplemente lo que quiero es que todo el texto que esté entre párrafo esté alineado problema a ese texto no lo he hecho alineado por tanto no lo he hecho como pretexto de párrafo así que tendré que decirle probablemente que sea la sección la que esté con el texto alineado y ahora lo que podría hacer sería algo como por ejemplo lo siguiente para malla que estamos aquí pues vamos a meter las etiquetas de párrafo porque para localizarlas correctamente mediante css es conveniente que ponga correctamente estas etiquetas así que recordáis pongo tanto la de inicio como la de cierre porque si no puedo tener en primer lugar problemas de funcionamiento en segundo lugar problemas de validación y ahora dentro de los css es voy a decir algo como por ejemplo para teléfono móvil section p os digo font-size es por ejemplo 10 píxeles section p para tabletas con 6 es igual a 11 píxeles y por ejemplo para pc font-size es igual a 12 píxeles de manera que podremos comprobar ahora que en el teléfono móvil el texto se vería más pequeño habría que comprobar los durante el foro móvil real para ver si la legibilidad es suficiente o no lo es pero en todo caso lo que quiero demostrar es como el texto se ha hecho un poco más grande de teléfono a tableta y si lo paso a pc se hace un poco más grande todavía en definitiva la idea de este ejercicio es ver qué podemos mediante las etiquetas de css visualizar en diferentes estilos para una misma página web en dispositivos móviles incluso otra cosa un truco que podemos hacer vamos a ver si nos funciona porque antes funcionaba y últimamente cuando lo he probado no en el sexo le voy a decir content edit a bolt pinchó el sección y ahora el texto sería por ejemplo editable eso es lo que hace contenta editable pues una cosa que voy a hacer es escribir un estilo que diga lo siguiente en estilos generales por ejemplo voy a decir sección 20 píxeles por ejemplo overflow hidden lo que hace esto es que acabo de plegar los contenidos y una vez tengo esto voy a escribir sec son dos puntos focus focus es cuando he hecho clic sobre el objeto diría en este caso por ejemplo es igual a 100 por ciento así que guardo recargo parece que ahora si fijamos nuevos que lo que estoy haciendo es que al entrar al hacer clic dentro de focus evidentemente podría poner un transition de un segundo lo que haría vamos a verlo transición de un segundo voy a poner height de 400 píxeles para hacer que cuando despliegue un texto aparezca su contenido un poco lo que en html se conoce como el efecto acordeón así que el truco como veis consiste en poner por ejemplo la palabra content edita bolt ya que al poner contenta y table una sección es susceptible o una etiqueta en definitiva porque esto no solo funciona con las secciones pero es susceptible de recibir el contenido de focus y ahí como veréis combinamos por una parte lo que es la navegación con botones con anchos como en lo que es la navegación con acordeones hay una cosa a mí me molesta un poco particularmente y es que me aparece una línea azul no es ya porque aparezca azul sino es porque aparece una línea y no me gusta entonces para eso hay un estilo css específico que es el siguiente out line none es un estilo que se suele poner tanto en los formularios como en los outlets fijaos que el poner out line none tengo el estilo en cascada de el acordeón y no tengo ningún tipo de dibujo digamos también puedo poner algo esto ya lo dejó un poco más a vuestra elección si es más a una cuestión de estilo como por ejemplo que el background sea 200 255 200 es decir verde clarito en definitiva de un cierto color cuidado porque esto no lo quiero en el comportamiento por defecto sino lo quiero en el focus es decir quiero que el fondo se ponga de color verde solo cuando haga clic en un cierto elemento algo así vamos a ver background lo escrito mal guardo recargo bueno para ground rgb muy bien y por alguna razón que desconozco lo he puesto fuera de las llaves de estilo hoy no estoy muy acertado así que guardo recargo y ahora si solo aquella sección que despliegue en acordeón puedo decirle qué el texto se haga más grande el fondo se haga más verde de repente el texto proyecto de sombra o cualquier cualquier el estilo que queráis darle por ejemplo le digo ahora sexo de 10 píxeles un poco para que el texto esté un poco más ordenado y como veis esté un poco como sangrado es decir que no llegue hasta el borde del margen porque puede quedar un poco feo en cuanto a estilo esto que acabamos de hacer probablemente es un poco extraño porque en definitiva nos permite ejecutar una acción cuando ocurre un evento es decir en este caso el evento es el clic del ratón la acción que se realiza es la apertura de algunos estilos css técnicamente lo que acabo de hacer con esta sección es un truco qué es hacer algo con css que le tocaría javascript en principio javascript va a ser el lenguaje de programación indicado para capturar eventos y realizar acciones pero ocurre que probablemente a estas alturas no sabemos todavía javascript por tanto lo que he hecho a la larga no es la mejor manera de hacer un acordeón pero es una manera que nos permite hacerlo sin tener que meter en un tercer lenguaje en juego como sería javascript en este caso lo he hecho con una especie de truco con una pequeña chapuza que es meter esta propiedad llamada content edita bold contenta y table por tanto como veis nos permite no sólo hacer clic sino en un momento dado nos permite meter más información a esa caja de texto también os digo que nos permite meter más información pero nos permite guardar esa información en el servidor así que nadie nadie podría alterar nos realmente la página la propiedad content editable puede que la veamos más adelante para crear aplicaciones web en combinación con javascript y con php ya que el hecho de tener una caja de texto y poder escribir en esa caja de texto nos puede servir a la hora de hacer blogs para hacer correos electrónicos oa la hora de hacer cualquier cosa en la que queramos o por ejemplo un word online tomamos esto como que podría ser el párrafo de un pequeño word así que yo querría en ese caso tener un párrafo en html que cualquiera pudiera editar y evidentemente con un botón pudiera guardar y evidentemente php atrapar a ese código y lo guardara realmente en un archivo una vez más hay una pieza la tendríamos en html otra pieza sin embargo en php

en este bloque de contenido vamos a aprender php donde php es un lenguaje de programación dinámica para páginas web en el lado del servidor esto quiere decir que php no se ejecuta en el cliente como html como css o como javascript sino que se ejecuta en el servidor y cuando llega al cliente llega ha transformado llega convertido en html lo primero que os voy a decir por tanto es que si vamos a aprender un lenguaje que funciona en el servidor necesitamos tener un servidor necesitamos ejecutar nuestros scripts contra un servidor porque a diferencia de html mientras que html se puede ejecutar perfectamente en el cliente para trabajar con html no hemos necesitado extraer ningún software en particular simplemente un navegador web y podemos trabajar con html css y podríamos trabajar con javascript pero con php no con php en cualquier sistema operativo prácticamente ni windows y mac y linux reconocen automáticamente ejecutan automáticamente archivos php puedo editarlos porque al final son archivos de texto pero no puedo ejecutarlos por eso a partir de aquí tengo que tomar dos caminos al final tomaremos los dos o bien convierto mi ordenador en un servidor web o bien trabajo directamente sobre un servidor web al final probablemente acabaremos trabajando directamente sobre un servidor web pero esta opción al principio especialmente cuando estamos aprendiendo puede resultar bastante incómoda por eso lo primero es convertir nuestro ordenador en un servidor web pero un servidor web no es cualquier cosa un servidor web bien montado bien configurado nos puede costar pues días o semanas y es la primera vez que lo hacemos en configurarlo y no es nuestro es este nuestro objetivo nuestro objetivo al menos ahora no es convertirnos en administradores de sistemas nuestro objetivo es empezar a aprender php y hacerlo de la manera más sencilla posible por eso una herramienta estándar que usamos yo diría a todos los que enseñamos php es una herramienta llamada amp el samp es un paquete diría es un súper paquete que contiene todo lo que necesitas para que con prácticamente nada de esfuerzo por tu parte conviertas tu ordenador en un servidor web de desarrollo en un servidor web local para ti para programar no en un servidor web abierto al público lo primero que tenemos que hacer por tanto es y no irnos a internet poner en los criterios de búsqueda y acceder a una página llamada apache friends punto o hereje barra es para descargar rostro el español así que pincho dentro de esta página veremos qué buena noticia el software está tanto para windows como para linux como para mac los programas que suelo elegir para las formaciones intento siempre que cumplan estas condiciones primero que sean libres que sean de software libre y segundo que estén para cualquier plataforma dado que en este caso ahora mismo estoy en windows pues evidentemente voy a hacer clic en el samp para windows en principio la descarga debería comenzar automáticamente si no empieza puedo forzar la descarga pulsando aquí y sea como sea en unos pocos segundos veo cómo empiezo a descargar el sham en mi equipo el samp es un programa que ocupa bastante es un programa que en las últimas versiones he estado ocupando unos 140 y pico megas por tanto tendremos que esperar el tiempo que haga falta dependiendo de la conexión con la que estemos ahora mismo hasta que el programa que dé correctamente descargado nuestro equipo antes de poder empezar a instalarlo una vez que tenemos el programa descargado lo que haremos es doble clic para empezar a instalarlo aparece que tengo que dar permisos de administración para poder instalar el software y a partir de aquí vamos a ir a través de una serie de pantallas en las cuales se nos irá informando de cómo va la instalación bueno en este caso se nos dice que al menos en mi caso tengo un antivirus ejecutándose probablemente será el propio defender de windows 8.1 y se nos dice que en algunos casos esto puede ralentizar o puede ser feliz la instalación del sunp voy a decirle que por supuesto quiero opinar me voy a acordar de este mensaje no quiere decir que automáticamente se lleve mal con el antivirus porque cada antivirus funciona de una manera pero también quiere decir que yo finalmente lo que voy a hacer es instalar un software que abre puertos y se empieza a comunicar a través de sus puertos y lo voy a hacer con un fin con un fin completamente lícito y legal pero algún antivirus puede interpretar que no lo hago así vale por tanto voy a decirles de momento que yes este mensaje es incluso más importante me dice que esto está desde windows vista tengo el ac el ‘user access’ control activado en el sistema él ‘user access’ control en windows este mensaje evidentemente no aparecen en linux mac es el sistema que cada vez que intenta instalar un programa que dice pero está seguro pero es administrador pero porque tu contraseña esto ese lo hace el guaje está en windows para nuestra protección para nuestra seguridad pero una vez más esa protección puede malinterpretar que apache que en este caso es el programa principal del sunp está en nuestra contra y puede bloquearlo así que una vez más vamos a decirle ok a este mensaje y si más adelante tenemos problemas para arrancar el samp simplemente nos acordaremos de que teníamos que desactivar el samp el ac quería decir bueno ahora sí esta es la primera pantalla de bienvenida del sunp pincho next específico que quiero todos los componentes instalados le digo next y en este caso mucha atención a la pantalla porque me está ofreciendo la carpeta de dos puntos contra barras amp como carpeta de instalación es decir una carpeta de nueva creación que se va a crear en el raíz del disco duro mi recomendación por los múltiples componentes que llevas antes que aceptemos esta recomendación si lo quisiéramos dentro de archivos del programa podríamos cambiarlo de carpeta simplemente pinchando este icono pero mi recomendación es que no lo hagamos y pulsemos siguiente en este caso las nuevas versiones de el samp vienen con una utilidad que se llama vietnam y que nos permite instalar programas tales como wordpress tales como trupal o tales como joomla de manera automatizada así que de momento no quiero saber nada más de esto si me interesa más adelante ya iré a por información pinchó next y por último con todos los datos que he introducido hasta ahora estoy preparado para empezar la instalación así que pincho next y ahora mucha atención lo que tengo que hacer es esperar con esperar quiere decir que el samp al final es un paquete que ocupa ciento y pico megas es un paquete que contiene una gran cantidad de software contiene por una parte de los programas principales para montar un servidor web y además un montón de módulos adicionales lo que está haciendo este instalador en este momento es en primer lugar copiar los archivos a continuación los configura y luego arranca los servicios o los programas que quieran necesarios que probablemente será apache con el módulo de php y el servidor de bases de datos mysql que os quiero decir con esto pues que debido a la gran cantidad de elementos que están instalando tendremos que esperar 123 minutos dependiendo de ordenador puede ser que en algún ordenador incluso algo más hasta que todos los elementos estén correctamente instalados está finalizando el proceso de instalación en este caso está creando un des instalador y lo que haremos ahora una vez que está una vez que esté finalizada la instalación será arrancar el panel de control sí por lo que fuera saliéramos sin arrancar el panel de control siempre podemos llamar al panel de control poniendo el samp y aparecerá una utilidad llamada sham control panel si arrancamos el sham control panel veremos cómo aparecen disponibles para arrancar todos aquellos elementos que forman parte del sunp arrancarlo y el panel de control del sunp tiene aproximadamente esta apariencia puede cambiar ligeramente de versión en versión lo primero que tengo es un listado de los módulos principales que tiene el samp a continuación les voy a presentar apache que es un servidor de páginas web es de eso el servidor de páginas más usadas del mundo apache lleva ya integrado en champ el módulo de php por tanto por eso no aparece php por aquí por ninguna parte mysql es un servidor de bases de datos curiosamente es el servidor que primariamente usaremos en combinación con apache y con php filezilla es un servidor de ftp no ya el cliente el cliente para conectarse a un servidor ftp se puede descargar directamente desde la propia web de files y la lo que se nos ofrece en este caso es la posibilidad de montar un servidor web un servidor de ftp mercury mercury email transport es un servidor de correo electrónico para montar un servidor no un cliente no un receptor de correo electrónico sino un distribuidor de correo electrónico en un servidor y por ultimo tomcat es un motor de serv let’s en jsp y en para java enterprise vale en el caso de que en lugar de programar con php programar amos con java en la versión enterprise lo que a nosotros nos interesa es empezar programando con php y necesitamos hacerlo a través de apache así que lo primero que vamos a hacer es pulsar el botón start permitir acceso en el cortafuegos [Música] alguna contraseña de administración en caso de que en él se nos requiera y comprobar que apache se nos pone de color verde se pone de color amarillo cuando está arrancando se pone de color verde cuando está completamente arrancado y nos dice y nos en forma que va a usar los puertos 84 43 de nuestro sistema operativo hay veces en las que puede ocurrir que apache no arranque correctamente cuando apache no arranca correctamente en el 90% de los casos es porque hay algún otro programa algún otro software que está usando el puerto 80 y por tanto apache no arranca si no tiene a su completa disposición este puerto el 80 los dos programas que más he visto que se interfieren con apache son en primer lugar skype el programa de mensajería y en segundo lugar internet information services que es un sistema de gestión de servidores web de microsoft entonces sí vamos a arrancar apache debemos asegurarnos de que tanto skype como information services como cualquier otro programa que usa el puerto 80 están correctamente apagados y el puerto 80 liberado una vez que el samp está instalado es importante que comprendamos una cosa y es que hemos convertido nuestro ordenador en un pequeño servidor web y podemos empezar a escribir scripts en php pero no podemos hacerlo en cualquier carpeta del disco duro sólo lo podemos hacer en una carpeta concreta dentro de la carpeta de instalación de sham y esa carpeta es la siguiente voy a abrir el explorador de windows voy a ir al disco duro ce que es donde he instalado este servidor voy a entrar dentro de la carpeta jump y dentro de la carpeta es que hay una sub carpeta llamada ht docs solo puedo escribir scripts en php y que funcionen dentro de esta carpeta a continuación vamos a comprobarlo en primer lugar me haré una carpeta llamada aprendiendo php pero no la voy a hacer todavía vamos a ver por qué voy a abrir un navegador y otra cosa que voy a explicar es que para acceder a esta carpeta ht docs no tenemos que poner hace dos puntos sant h docs incorrecto lo que tienes que hacer es poner la palabra mágica localhost poner localhost equivale a decir que quiero entrar en champ h ht docs pero no como carpeta sino como un servidor web por tanto para trabajar con html y css no importaría pero trabaja para trabajar con php importa que cada vez que queramos entrar dentro de esa carpeta lo hagamos poniendo localhost en este caso localhost tiene una redirección hacia la carpeta sham que tenemos aquí la carpeta sam tiene un archivo llamado splash punto php de dónde ha salido todo esto todo esto son archivos de ejemplo archivos demuestra que tienen nada más instalarse vamos a acceder a la pantalla principal de la anp evidentemente vamos a hacerlo en español simplemente deberíamos estar viendo esta pantalla pero no voy a hacer nada de momento con esta pantalla esta pantalla simplemente si la estoy viendo me informa me confirma que el santo está correctamente no solo instalado sino también arrancado lo que voy a hacer ahora es poniendo poner lo siguiente voy a poner localhost barra aprendiendo php si habrá pulso enter lo más normal es que el sistema me diga objeto no localizado porque el llamado a una carpeta localhost aprendiendo php y que valera decir jump ht docs aprendiendo php pero esa carpeta no existe así que lo que voy a hacer a continuación va a ser crear una nueva carpeta llamada aprendiendo php si ahora recargo el servidor me sacará un mensaje parecido pero no igual será recargo esa carpeta existe ya no me dice que no he encontrado el objeto pero sin embargo me dice que está vacía evidentemente está vacía desde el primer momento en el que acabo de crear la carpeta pero todavía no he puesto contenido dentro de ella crear un archivo php que al final es un archivo de texto plano es realmente sencillo si estoy en windows simplemente tengo que pulsar botón derecho archivo nuevo documento de texto y tengo que hacer un archivo que atención se llamará como queráis que voy a empezar creando un archivo llamado uno php o index php le quiero cambiar la extensión y ahora lo que debo hacer es editar este archivo con un editor de texto en mi caso voy a usar edit como editor de texto polivalente en este caso quería decir para editar cualquier tipo de documento así que si ahora recargo la página veré que no pone nada porque cuando entro dentro de una carpeta el programa lo que hace es ejecutar el archivo que se llama index php y dentro de este archivo index php vamos a empezar a empezar a escribir nuestro código yo puedo poner hola perfectamente y si guarde recargo veré que pone hola en la pantalla y esto ocurre porque dentro de un archivo php no todo lo que escriba va a ser php sólo por tener la extensión php no quiere decir que lo que haya dentro sea php si yo no digo nada el programa entiende que esto que acabo de escribir es html y en html podríamos decir que se vale poner hola y no causa ningún error por tanto no sólo vale no sólo basta con crear un archivo con extensión php sino que además tengo que poner las siguientes llaves de apertura y de cierre en primer lugar voy a hacer en la tipografía un poco más grande porque hoy probablemente no voy a estar escribiendo demasiado código al principio y voy a poner menor que interrogante php y para acabar pongo interrogante cerrada y mayor que la cuestión es que entendáis que todo lo que esté entre esa etiqueta de apertura y la etiqueta del cierre va a ser php demostración pongo esto aquí y no pasa nada guardo recargo pongo esto aquí y no pasa nada si selecciona ese texto y lo pongo después pongo esto aquí y no pasa nada pero qué pasa si pongo esto dentro de las etiquetas php cuidado aquí las reglas son diferentes y de hecho son más estrictas que en html y lo que tendría es un error y me diría no entiendo qué quieres decir con esto dentro de esta línea comete un error por lo menos tiene un poco detalle es decirnos de qué va el error y en qué línea se encuentra pero es un error en definitiva así que mucho cuidado porque todo lo que escribamos dentro de estas líneas tiene que estar en formato php vamos a empezar con la línea más sencilla que podemos encontrar en php vamos a empezar con la instrucción más sencilla no por ello es la menos usada más bien al contrario se usa muchísimo que es la instrucción eco eco básicamente quiere decir dime algo en la pantalla así que echo comillas punto y coma muy importante el punto y coma para finalizar cada una de las líneas en php y digo esto es texto dentro de php también muy importante las comillas para diferenciar una cosa que es el tipo de cadena con la que estamos trabajando ahora hablaremos de esto así que guardó recargo y dice esto es texto dentro de php si cometo algún error tendré problemas por ejemplo os escribo mira no sé qué sé que si por ejemplo no pongo comillas el programa dirá no entiendo lo que sé es que estás escribiendo si no pongo punto y coma el programa puede generar error curiosamente en este caso concreto ahora mismo no generaría error porque es la última instrucción antes de la etiqueta de cierre pero en cualquier otra parte del programa sí que generaría error por eso es importante que nos acostumbremos sea como sea siempre a poner punto y coma al final de cualquier instrucción dentro de php para que el resultado en pantalla sea el correcto y por último dentro de este vídeo voy a recordaros algo que os he dicho antes y es que la información viaja hasta el navegador y se convierte en html esto quiere decir que si ahora vengo al navegador pulso botón derecho y le digo que quiero ver el código fuente de la página no voy a ver ningún php de apertura no voy a ver ningún php de cierre ni voy a ver un eco simplemente voy a ver esto es texto dentro de php es decir lo que hace php en el servidor es tomar el script convertirlo en html y lanzarlo hacia el cliente en formato html esto está muy bien porque digamos que el servidor está escondiendo todo el código php y eso hace que php e sea el lenguaje preferido y por excelencia para programar la parte segura de una aplicación web para programar la conexión a la base de datos la gestión de la información y saber que esa información siempre se va a quedar en el servidor y nunca va a viajar al cliente a menos que alguien la jaque por supuesto pero en principio pensemos que es no pasaría un elemento imprescindible dentro de php son las variables por eso me voy a crear un nuevo archivo dentro de esa carpeta voy a crear un nuevo documento de texto llamado variables php y por supuesto atención todos a la pantalla muy importante lo voy a mover al editor pero no lo voy a mover al navegador porque de esa manera no lo estaría abriendo a través del local host no estaría abriendo directamente como archivo es lo que no quiero así que lo que haré si ese archivo está dentro de aprendiendo php voy a cargar variables punto php voy a comprobar que estoy trabajando con el mismo archivo yo soy el archivo correcto cuando recargo yo soy el archivo correcto así que si ya lo hemos visto correctamente ya sabemos que abrimos y cerramos la etiqueta php las variables son contenedores de información y además en este caso os voy a decir que php es un lenguaje débilmente tipificado eso quiere decir que hay otros lenguajes de programación que son todavía más complejos o más difíciles de usar o más propensos a errores que php en los cuales cuando declaras una variable además tienes que declarar el tipo de variable que es como por ejemplo en ce o como por ejemplo en java php no es así php es algo menos estricto en este sentido lo cual nos va a hacer más fácil escribir código aunque la no tipificación de datos va a ser que php pueda no ser tan eficiente en el uso de la memoria como otros lenguajes de programación bueno en primer lugar cómo se declara una variable primero pongo dólar con dólar específico que lo que a declarar a continuación es una variable a continuación pongo el nombre de la variable por ejemplo mi bar mi variable puedo poner mi mar 1 pero no puedo poner uno mi bar hay una condición y es que las variables no pueden empezar por número no deben empezar tampoco por bajo pero puedo poner mi bar 1 o puedo poner mi bar 1 de momento voy a poner mi bar a continuación espacio el espacio es simplemente por motivo estético podría ponerla a continuación pongo un igual y después del igual tengo que poner el valor de la variable en este caso os voy a decir que dentro de php distinguimos fundamentalmente de los tipos de datos hay muchos más pero estos dos son los principales uno los tipos de datos numéricos y dos los tipos de datos de cadena un tipo de dato numérico es este es 5 y cuando pongo 5 cuando pongo un dato que quiero que sea un número lo pongo sin comillas cuando quiero poner un tipo de datos que sea una cadena una cadena es una cadena de caracteres alfanuméricos es decir un conjunto de letras y números lo pongo entre comillas puedo poner un número entre comillas pero no puedo poner una cadena sin unas comillas ahora lo divertido sería ver qué es lo que ocurre cuando recargo en la pantalla bien lo que ocurre es nada que yo haya creado una variable que yo haya guardado datos en la variable no quiere decir que tenga que ocurrir algo necesariamente por pantalla simplemente quiere decir que la memoria del servidor se ha guardado la asignación de que mi bar vale 5 ya está mirar vale cinco primeros a que es por pantalla si queréis sacarlo por pantalla simplemente podéis hacer eco viva ya sabéis que convivan eco sirve para lanzar algo por pantalla mi bar es una variable que he creado antes así que qué va a hacer el programa cuando yo lancé con mi bar por pantalla pues va a decir hola si mi bar es igual a hola mi bar aquí pone hola pero mi bar es igual a hola o mi bar es igual a 5 en este caso lo que he hecho lógicamente y cuando digo lógicamente quiero decir según la lógica el programa es que en primer lugar le ha asignado mi bar es igual a 5 pero a continuación lo que he hecho es reasignar la variable cambiar el valor de la variable y ponerle hola si antes mi bar valía 5 y ahora de repente vale hola lo que vale es lo último que le diga fijémonos todos que dentro de la palabra variable variable quiere decir que su valor puede variar y de hecho suele variar hay otro elemento en php que son las constantes que son declaraciones que no van a cambiar de valor no se usan mucho en php aunque tengo que decir que su utilidad está muy clara porque gastan menos memoria que las variables se reservan más memoria en el servidor por gastar una variable que una constante nuestra pregunta podría ser bueno pero de cuánta memoria estamos hablando mi respuesta podría ser que a este nivel no mucho al nivel de usar una variable y cambiar el su valor a mitad de ejecución de un programa la memoria que usamos en el servidor podría ser despreciable de algunos bytes quizás algún k si llega pero claro debemos empezar a ir pensando qué pasará cuando creemos programas complejos que no tendrán una variable sino que podemos tener decenas de miles de variables malgastar un poco de memoria en una variable no pasa nada malgastar un poco de memoria en diez mil elementos diferentes a ella la cosa puede ser diferente trabajamos ahora con un elemento llamado operadores los operadores nos permiten realizar operaciones con cadenas en primer lugar voy a quitar esta segunda asignación me voy a quedar con mi bar porque curiosamente lo que me interesa es trabajar en primer lugar con operadores matemáticos voy a quitar de hecho mi bar ya que se puede trabajar con operadores matemáticos y a la vez con variables pero quiero separar los dos conceptos así que voy a empezar trabajando únicamente con un eco lo que voy a hacer es poner un comentario y al poner un comentario lo que he hecho es desactivar simplemente esta línea los operadores más sencillos dentro de php son los operadores matemáticos así que dentro de los operadores matemáticos el primero que tenemos es el operador aritmético de suma representado con el signo más así que echo 5 + 5 lo que nos dice en la pantalla es 10 esto una vez más y yo siempre lo digo llegado a este punto para mi marca la diferencia entre un lenguaje de marcado y un lenguaje de programación qué pasa si dentro mute ar esta línea que pasa así dentro de html pongo 55 html no es un lenguaje de programación es un lenguaje de marcado así que html te dice todo en telecinco +5 yo te digo cinco más cinco no te digo ni más ni menos pero php es otra cosa el hc es un lenguaje de programación así que cuando le dices 5 + 5 lo que realmente te dice es 10 es decir es capaz de tener una entrada realizar un cálculo y devolverte una salida una demostración si queréis muy sencilla de la diferencia entre un lenguaje de programación y uno de marcado pero no por ello menos útil bien hemos dicho que por tanto el signo más es la suma el guión es la resta por tanto 5 menos 5 es igual a 0 al igual que prácticamente en cualquier programa de ofimática que podáis conocer el asterisco sirve para multiplicar por tanto 5 por 5 es igual a 25 y al igual como prácticamente cualquier programa de ofimática que podéis usar la barra que obtenéis pulsando mayúsculas y 7 es la herramienta para dividir así que 5 entre 5 es igual a 1 hay varias en varias herramientas aritméticas más a mí me gustaría destacar una que es el porcentaje que no es realmente sacar el porcentaje sino es el resto entero de la división cuánto es 6 partido 4 en este caso seis partido 4 el resto entero de la división evidentemente nos da 2 porque 6 entre 4 cabe a una y sobran dos así que el resto entera de la división simplemente se trabaja mediante el porcentaje podréis pensar ahora mismo que quizás no sirve para nada pero más adelante veréis especialmente en algunos casos como tienda online en que esta herramienta os va a venir muy bien dos operadores con las que trabajar a continuación son el de incremento y el de decremento para esto voy a volver a activar mi bar y voy a hacer que mi bar sea igual a 5 así que echo mi bar el resultado en pantalla es 5 ahora en una línea intermedia voy a poner mi bar plus dívar plus es el operador de incremento concretamente el de post incremento y si ahora guardo me dice que vale 6 que ha pasado aquí cuando yo le pongo algo más más le aplicó un operador de incremento y esto equivale a decir toma lo que valía y sumarle 1 así que 5 en este momento mi barba de 5 llegados a esta línea a mi bar vale 6 cuando recuperó mirar por pantalla mi bar vale 6 no existe el operador de doble poste incremento por tanto si digo más más más más de puesto 5 de hecho el programa lo que hará es error error de sintaxis decirle más más al igual que decirle menos menos que es el operador de incremento si os fijáis equivale a esto bueno 5 decremento le quitó una unidad por tanto me queda 4 poner por ejemplo más más equivaldría a la fórmula más larga pero servible pero válida que es mi bar es igual a mi bar más 1 yo valgo lo que valía más 1 así que en este caso mi bar es igual a mirar más uno es igual a 6 en este caso por tanto podríamos usar ahí si más 25 más 27 538 y así es esta la única manera de hacer incrementos superiores a 1 no hay una fórmula abreviada que al principio suele costar bastante de atrapar que es la siguiente si le quiero sumar un valor ya sabemos que le pongo más más y ya está pero si le quiero sumar tres valores pongo más igual tres me va más igual 3 es igual que decir coge lo que valiera y sumarle 3 mirar menos igual 3 es igual a decir coge lo que vale lo que valiera y restarle 3 por tanto en este caso de 5 pasamos a 2 un operador muy especial sigo trabajando dentro de variables voy a cambiar a un archivo nuevo llamado operadores así que me hago un archivo nuevo lo llamo operadores punto php lo cargo y ya sabéis que no lo cargo aquí directamente sino que lo llamo operadores creadores php abro la etiqueta de código php y escribo lo siguiente voy a crear mi bar 1 es igual a hola mi bardos es igual mundo lo que yo quiero ahora es ver las dos variables una después de otra que podría hacer lo siguiente echo mi bar 1 tco mi bardos y técnicamente sería correcto se hará guardo y recargo comprobamos cómo pone hola mundo pero sin embargo es repetido dos veces la palabra eco y cuando repito varias veces algún programa acción seguramente hay una manera mejor de hacerlo entonces yo no puedo esta variable y ponerla a continuación simplemente porque eso no funciona guardó recargo y error de parcheado no puedo separarlas con un espacio porque no quedó mejor sino que queda exactamente igual hay un operador que en php se llama operador de concatenación que existe en muchos lenguajes de programación que es el punto debo decir que php que es un lenguaje que deriva de cee y por tanto hereda muchas de sus reglas en este caso difiere porque la gran mayoría de los lenguajes que me llevan dc el operador de concatenación es el signo más pero en cambio en php el operador de concatenación es el puntito así que si yo pongo mi bar 1-1 mi bardos guarda y recargo veremos como pone ahí hola mundo yo suelo decir que el operador de concatenación es algo así me recuerda quizás sea mi solo el enganche entre varios vagones de un tren fijaos cómo puedo poner allí junto mi bar uno otra vez punto mi bardos y si os fijáis es como un pequeño tren en donde los vagones están encadenados por puntos puedo encadenar además en cualquier momento mi bar 3 es igual a 6 podrán encadenar sin ningún problema variables de tipo cadena con variables de tipo numérico vivar 3,6 en este caso me decía que tenía una variable no definida fijaos el problema es que había creado mi bar 3 pero había llamado a mi bar 6 existe mi ver 6 no existe mi bar 6 y por tanto cuando recargo me dice estás llamando a una variable que previamente no has definido llamada mi barça así que como siempre mucho cuidado con lo que escribimos en php vamos a trabajar con otro tipo de operadores donde en este caso no voy a asignar sino que voy a comparar así que en este caso voy a decir echo 3 menor que 4 si os fijáis hay un operador que hemos estado usando hace un buen rato y que no os he dicho nada que es el operador de igual la igualdad igualdad sencilla quiere decir en php y en cualquier lenguaje de programación asignación quiere decir a un elemento en este caso una variable le asignó un valor pero qué quiere decir 3 menor que 4 en el momento en el que pongo menor que empiezo con los operadores de comparación así que en este caso lo que estoy preguntando es si acaso es cierto que 3 es menor que 4 el resultado depende un poco de cada servidor hay servidores que me dicen tú hay servidores que me dicen uno entonces en este caso válido y me encuentro que me dice uno ahora voy a poner porque es cierto que tras ser menor que 4 ahora voy a poner mayor que lo que estoy preguntando es cierto que es mayor que 4 no es cierto entonces hay algunos servidores donde ponen false hay otros servidores que ponen 0 y hay otros servidores que no ponen nada por tanto vamos a verlo en este caso y en este caso este servidor es de los que no ponen nada no es un error simplemente es una falsedad si el signo igual un signo igual es de asignación el doble signo igual es de comparación lo que estoy haciendo es preguntar es cierto que 3 es igual a 4 así que recargó y dice que no es cierto porque no dice nada es cierto que 4 es igual a 4 en este caso dice 1 porque es cierto y ahora una pregunta trampa es cierto que 4 es igual a 4 con comillas bueno pues en este caso los que sí que es cierto porque la igualdad con doble igualdad solo está contemplando el valor de los datos no el tipo de los datos en este caso ya sea mediante un número o mediante una cadena de caracteres alfanuméricos lo cierto es que el valor es 4 es cierto que esto es un número y esto es una cadena pero finalmente el valor es 4 por eso si comparo con doble igualdad el resultado de acierto porque da 1 hay un tercer método no muy usado en php pero que de vez en cuando os lo podéis encontrar que es la triple igualdad que es la igualdad de estricta lo que está preguntando es si por una parte el valor es el mismo y por otra parte el tipo de datos es el mismo así que en este caso evidentemente el valor es el mismo pero el tipo de datos no lo es ya que no es igual un número que una cadena así que guardo y recargo y en este caso me dice que es falso los menor que y mayor que se pueden combinar con iguales por ejemplo puedo poner menor que voy a poner un número es cierto que 4 es menor o es igual a 5 bueno no es igual pero sí que es menor por tanto el resultado es 1 es 5 es cierto que 5 es menor o igual que 5 no es menor pero sí que es igual por tanto uno es cierto que 6 es menor o igual que 5 ni es menor ni es igual por tanto el resultado no tiene más remedio que ser cero que ser falso cuidado mucho cuidado porque se pone menor que es menor o igual o se pone mayor o igual no se pone igual o mayor simplemente porque en php en la parte de programación orientada a objetos este símbolo quiere decir algo específico que no es igual o mayor por tanto pondremos siempre mayor o igual es cierto que 6 es mayor o igual que 5 es mayor aunque no sea igual es cierto que 6 es mayor o igual que 6 no es mayor pero es igual y por último un carácter muy divertido es la negación que se expresa con el símbolo de admiración en este caso lo que estoy preguntando es es cierto que 6 no es igual a 6 no es cierto porque 6 y que es igual a 6 por tanto el resultado es verdadero es cierto que 6 no es igual a 7 en este caso es cierto también existe la negación inversa estricta es cierto que 6 no es igual a 7 también con el tipo de datos en este caso es cierto es cierto que 6 no es igual a 76 un número 7 es una cadena en este caso no es cierto mira también cierto aclaró porque bueno ahí tendría que ver qué está pasando porque no puede ser que uno sea verdadero y otro sea falso pero en fin sea como sea con el doble con la doble designación de igual vale y con la admiración siempre lo que vamos a hacer es indicar la negación de cualquier elemento parece que no lo vamos a utilizar pero os aseguro que en el desarrollo de aplicaciones web usaremos muchas veces el signo de admiración para decir la negación porque la negación muchas veces es el grupo complementario a una afirmación vamos a continuación ahora sí con los operadores vulcanos y los operadores bull ya nos me permiten evaluar parejas o grupos de afirmaciones de expresiones mirad lo que hago es poner un paréntesis para trabajar mejor el contenido de cada una de las expresiones y voy a poner dos tipos de operadores búlgaros realmente hay tres pero vamos a usar dos que son los principales en primer lugar tengo el operador and el operador am me pregunta si es cierta una expresión y si también es cierta la otra es cierto que uno es igual a uno y que tres es igual a tres en ese caso guardo recargo y el resultado da 1 porque es cierto que esto es cierto y también es cierto que esta parte de aquí es cierta pero es cierto que uno es igual a 2 y también que 3 es igual a 3 bueno es cierto que 3 es igual a 3 pero uno no es igual a 2 por tanto el resultado global en la pantalla es falso las operaciones julianas nosotros nos sirven para validar parejas de expresiones sino que también nos permiten validar tríos cuartetos o lo que queramos 4 es igual a 4 en este caso es cierto que uno es igual a 2 y que 3 es igual a 3 y que cuatros igual a 4 guardo recargo y sigue sin ser cierto porque con los operadores julianos de tipo todos todas las expresiones tienen que ser ciertas para que la global sea cierta con una que no sea cierta la global ya no es cierta ocurre algo diferente con el operador william o por el operador booleana por cuyo símbolo es el vertical pipe que se saca pulsando al xerez y el número 1 del teclado se ponen dos países para poner uno se pone primero pulsar la tecla al xerez del teclado y luego pulsar las dos veces el número uno y en el teclado por lo menos con distribución en español sale el vertical type que probablemente es una barra que no hemos usado nunca solo para maquetar algún documento visualmente pues lo que nos está preguntando en este caso es es cierto que uno es igual a dos no es cierto o bien es cierto que tenés es igual a tres es así o bien es cierto que 4 es igual a 4 mientras que el operador william o andy requiere que todas las expresiones sean ciertas el operador guliano ahora con que una sea cierta es suficiente así que en este caso aunque esta de aquí no es cierta como esta de aquí sí que lo es y ésta también lo es finalmente el resultado en pantalla el resultado final hasta ahora estamos trabajando con conceptos bastante abstractos y puede parecer que no sirven para nada pero más allá nada más lejos de la realidad y es que vamos a ver a continuación con las estructuras de control como nos apoyaremos en las expresiones especialmente en las búlgaras para poder definir estructuras de control que es una estructura de control una estructura de control es una parte de php una parte de cualquier lenguaje de programación que se encarga de designar por donde va el programa por donde se va ejecutando y por tanto nos permite por ejemplo tomar decisiones hay dos tipos de estructura de control están las estructuras de control condicionales y están las estructuras de control de tipo bucle así que voy a hacer una primera estructura de control en este caso se llama if es una estructura de control de tipo condicional y la estructura de control de tipo condicional llamada if dice lo siguiente y expresión y expresión evidentemente de pseudo código verdad no es código real pongo código que ejecutó si la expresión es cierta alternativamente opcionalmente puedo poner else y pongo el código que ejecutó si la expresión es falsa así que básicamente una estructura de control tiene esas piezas primero válido la expresión si la expresión es cierta en este caso ejecutó un código si no ejecutó otro esto que acabo de escribir ese euro código no es código realmente es una mezcla entre el código y el lenguaje humano que nos sirve para aprender una parte del lenguaje voy a poner todo este código dentro de un comentario lo voy a desactivar y ahora voy a hacer un trozo de código real voy a decir edad es igual a 35 y ahora escribo lo siguiente si edad es menor que 20 voy a poner 30 por ejemplo si edad es menor que 30 echo eres un joven en caso contrario en caso de que la expresión no sea cierta echo ya no eres tan joven hasta ahora hemos escrito programas que ejecutaban el código desde arriba para bajo línea por línea pero en este caso tenemos una estructura de control y eso quiere decir que la estructura de control va a hacer un poco de filtro y va a decidir qué partes del programa así que se tienen que ejecutar y qué partes del programa no se tienen que ejecutar así que en este caso vamos a repasar lo tenemos que la variable edad es igual a 35 es cierto qué edad es menor que 30 en este caso no lo es sí es cierto se ejecutará esta línea pero si no lo es esa línea no se ejecutará y se ejecutará esta de aquí guardo y recargo comprobaremos bien en este caso era cuidado tengo un error se ha usado una constante edad esto es porque se me ha olvidado poner el dólar ahora sí así que ahora recargo y dice ya no eres tan joven qué pasaría si por ejemplo dijera edad es igual a 25 en este caso es cierto qué edad es menor que 30 si por tanto ejecutaría este código de aquí y no ejecutaría este código de aquí guardo recargo y dice eres un joven como podemos ver las estructuras de control if nos permiten especificar nos permiten elegir nos permiten introducir un criterio para ver qué partes del programa en un momento dado sí que se van a ejecutar y qué partes del programa no se van a ejecutar las estructuras de control y al igual que la gran mayoría de estructuras de control dentro de php admiten la anidación la anidación a la larga se considera una mala costumbre dentro de la programación pero esto será a la larga hoy estamos aprendiendo nuestra primera estructura de control y por tanto nos interesa saber que al menos se puede anidar que de cara al futuro sea conveniente o no ya es una discusión diferente así que yo hasta ahora si os fijáis realmente tengo tengo dos rangos tengo el rango de si eres menor que 30 te digo una cosa si eres mayor te digo otras son dos rangos diferentes pero yo ahora quiero poner cuatro rangos así que lo que voy a hacer es poner un if dentro de otro y dejémonos que estoy trabajando con las sangrías para que veáis claramente quién está dentro de quién por cierto que en php las sangrías al igual que en muchos otros lenguajes derivados de ce son puramente visuales no son funcionales podríamos no poner sangre as pero convendrán conmigo que en este caso poner sangría nos ayuda a saber quién depende de quién así que si era de es menor que 30 pero ahora cuidado ahora quiere decir y a su vez si edad es menor que 15 diré eco estas he hecho un chaval si no aquí las cosas se empiezan a complicar un joven else voy a poner su edad es menor que los 55 o 60 no sé eco ya no eres tan joven els eco ya eres todo un señor cuidado con las que van a causar algún problema pero bueno no pasa nada en este caso por tanto tengo anidadas cuatro condiciones y digo lo siguiente edad es menor que treinta y además dentro de que es menor que treinta además es menor que quince por ejemplo edad es igual a doce en este caso diré estás hecho un chaval pero edad por ejemplo es 18 en ese caso se cumplirá qué edad es menor que 30 pero no se cumplirá qué edad es menor que 15 por tanto nos dirá eres un joven esto globalmente es cierto pero esto no es cierto luego va a ejecutar esta línea de aquí en el caso de que igual edad sea llego a la 38 es cierto que edad es mayor que 30 pero no es cierto que edad sea perdón sí que es cierto que sea menor que 55 por tanto ejecuta esta línea de aquí en el caso en que diga por ejemplo 68 comprobaremos cómo dirá ya eres todo un señor con el problema de las en es por la etiqueta tf8 pero eso ya es un problema de html no de php y en este caso como veis no se ejecutará esta cuarta línea de aquí por tanto el mensaje de la moraleja es que se pueden anidar estructuras de control y dentro de php pero también veréis que otra de las moralejas es que siempre que podáis no lo hagáis porque el código anidado para empezar es difícil de leer por el ser humano y para acabar también a veces es poco eficiente en la ejecución en el servidor vemos ahora otra estructura de control de tipo condicional pero en este caso vemos una que se llama switch por eso escribo un nuevo archivo llamado switch la estructura de condición de condición switch está pensada para cuando los casos posibles son más que dos la estructura de control y trabaja con verdadero o falso y hay muchas preguntas en la vida real que se pueden resolver con verdadero o falso pero hay otras que no por ejemplo si yo te pregunto qué día es hoy tú no me dirá es verdadero o falso tú me dirás hoy puede ser lunes martes miércoles jueves viernes sábado domingo no hay sólo dos casos verdadero o falso posibles en este caso hay siete casos posibles así que para cuando hay más de dos casos posibles usamos una estructura de control como ya os digo que se llama switch os alegréis de qué la sintaxis es muy parecida a la estructura de control switch la expresión y digo acaso uno código libre muy importante el break habréis por qué caso 2 código y break y así tantas veces como haga falta esto es el pseudo código para entender el funcionamiento de la estructura de control while lo que estoy haciendo es meterlo dentro de un comentario para que se quede desactivado vamos a escribir ahora una estructura de control real digo día de la semana es una variable y voy a poner que es igual a lunes así que digo switch día de la semana en caso de que sea lunes pongo eco hoy es el peor de la semana y no os olvidéis de un break al finalizar dejadme que baje un poquito el tamaño de fuente para que todo lo que para dentro de la misma línea martes atención que esto de aquí no es punto y coma sino que son dos puntos esto sí que es punto y coma pero después del caso vienen dos puntos y digo echo hoy es el segundo un día de la semana y un break al final de cada uno de los casos keys miércoles los puntos seco ya estamos a mitad break keys jueves seco ya casi casi reik qué es viernes seco un día fantástico break y podríamos trabajar también atención con shabán dos puntos aquí muchas veces os equivocáis el mejor día de la semana y por último es domingo seco el lunes se acerca break hay otro caso posible que yo recomiendo poner que es default default es qué pasa si alguien me dice cualquier otra cosa ahora veréis echo lo que has introducido no es un día de la semana vamos a verlo en este caso lo que voy a hacer por tanto en este caso es decir día de la semana es igual al lunes por tanto que es día de la semana si es lunes ejecuta hoy es el peor día de la semana si yo pongo martes revisa ese día de la semana va a caso por caso y dice hoy es el segundo el peor el segundo peor día de la semana si yo pongo sábado me dice hoy es el mejor día de la semana como veis es un código de toma de decisiones que sólo ejecuta uno de los casos qué pasa si pongo longaniza esta estructura de control está pensada para tomar lunes martes miércoles jueves viernes a domingo pero no longaniza por tanto longaniza entra dentro del default de fault es cualquier cosa que no sea un caso normal es default y por tanto dice longaniza lo que has introducido no es un día de la semana los ‘breaks’ son importantes mirad lo que voy a hacer a continuación voy a eliminar los ‘breaks’ más que eliminarlos porque no me gusta eliminar nada lo que voy a hacer es mute ar los lo que voy a hacer es esconderlos así que guardo recargo y fijaos que si pongo el lunes y guardo de recargo y me dice oye sector de la semana hoy es el segundo ya estamos a mitad ya casi casi porque lo que ha hecho es ejecutar el lunes pero como no hay un break ha seguido ejecutando en línea línea línea línea hasta el final el break sirve para decirle ya has ejecutado esta línea break rompe esta estructura salte de la estructura no continúe ejecutando nada más porque no hace falta y eso sí puedes continuar ejecutando el resto del código que venga a continuación del programa seco el resto del código con el resto de instrucciones que consideren necesarias hoy es el peor día de la semana y después el resto del código una vez que hemos visto estas dos estructuras de control condicionales vamos a empezar con otras estructuras llamadas de bucle son también estructuras de control como it y como while pero hacen otra cosa ahora veréis un poco diferente primero vamos a empezar con una estructura de control llamada while cargo a él en el editor cargo while en el servidor y escribo el siguiente código escribo while condición como digo que ejecutó todo esto es el código así que lo voy a desactivar y ahora voy a poner lo siguiente mi bar es igual a 5 así que mientras sea cierto que mi bar es menor que 10 en este caso echo me voy a ejecutar de hecho voy a poner me voy a ejecutar con br para intercalar una etiqueta html de retorno de carro si ahora guardo y recargo vosotros ahora mismo igual no lo veis pero acabo de colgar el servidor porque ocurre lo siguiente lo que acabo de hacer ahora mismo en la pantalla se llama bucle de ejecución infinito por una razón muy sencilla guardo recargo voy a dejar un montón de zeraín a este trozo de código salido dentro de treinta segundos de acción a finalizarse y se continúa ejecutando este infinito razón muy sencilla si quieres que va a ser a la 10 dime me voy a ejecutar llego aquí mi madre es menor que 10 si me ejecutó vuelvo es cierto que me ver es menor claro no sigue siendo ejecutó aquí vuelvo aquí es cierto que mi bar es menor que 10 cierto se vuelve a ejecutar y por tanto como el valor de mi bar nunca llega a cambiar lo que ocurre realmente es que el bucle se ejecuta de manera infinita como ya os digo de manera infinita hasta los servidores normalmente tienen un límite de 30 segundos de ejecución por script hasta que lleguen esos 30 segundos o el tiempo que apache tenga estipulado y simplemente se detendrá simplemente llegar a ese script y el servidor devolverá un mensaje en el que dirá finalizado el script tras 30 segundos de tiempo máximo vamos a verlo sino lo parodió manualmente en este caso esta interacción deschamps parece que tiene algo más de 30 segundos de límite bien para evitar esto tengo que hacer algo muy sencillo dentro del bucle while pongo mi bar + + es decir utilizó un operador de incremento que está colgando el servidor lo que apunto es abrir una pestaña nueva y ocurre lo siguiente me ejecuta ese bucle únicamente cinco veces vamos a ver por qué y barça igual a 5 es cierto que mi bar es menor que 10 sí que es cierto así que me voy a ejecutar mi bar más cuánto vale ahora a mi bar vale 6 porque mi bar más más le ha sumado un valor es cierto que mi bar 6 es menor que 10 cierto pues me ejecutó otra vez llevar más más ahora vale 7 la siguiente vez que pasó por aquí vale 8 la siguiente vez que pasó por aquí vale 9 la siguiente vez que pasó por aquí vale 10 así que cuando me mar vale 10 la siguiente vez que lo intenta ejecutar dice es cierto que mi bar es menor que 10 es cierto que 10 es menor que 10 no es cierto y al no ser cierto se para la ejecución continúo con el programa y tras salir de ese bucle continúa con el resto del código las estructuras de control de tipo de tipo bucle como veis son estructuras que se encargan de repetir varias veces una cierta porción del código en este caso tenemos un caso especialmente desfavorable que es un caso en el que si no hemos tenido cuidado hacemos un bucle infinito hay veces veces concretas en las que nos interesan los bucles infinitos pero ahora mismo coincide que no una estructura muy parecida a wilde es la estructura llamada aforo podríamos decir y esto es simplemente una manera de hablar que la estructura foro es algo así como la hermana mayor de la estructura while mirar por qué la estructura foro es cierto que se declara poniendo por paréntesis y llaves por es la expresión pero la expresión es compleja es el inicio punto y coma el final punto y coma cuidado con la palabra final porque estará reservada de php final ahora debería usar y el incremento y aquí está el código que se va a ejecutar esto es pseudo código y vamos a verlo ahora ha demostrado a mí siempre me gusta mucho hacer este ejercicio mirar digo foro un día entendiendo día del mes es igual a 1 el primer día del mes es el día 1 punto y coma día es menor o igual que 31 supongamos un mes de 31 días punto y coma día más más y ahora digo echo hoy el día punto para encadenar día punto del mes espacios para maquetar correctamente vamos a ver que nos saca esto en pantalla un retorno de carro html y el resultado es este de aquí hoy es el día 1 del mes 2 3 4 5 6 7 8 9 y 10 y así con el resto de días hasta el día 31 así que que nos permite hacer el bucle for si os fijáis el bucle for es muy parecido al bucle while pero tiene una diferencia y es que con el bucle while la declaración inicial la he tenido que hacer fuera y el incremento lo he tenido que hacer dentro del código en cambio el bucle foro podríamos decir que es algo así como un poco más avanzado porque dentro del mismo paréntesis almacena tanto el inicio como el final como el incremento esto de que el bucle for es más avanzado que el buque vamos a ver otro bucle de control otra estructura de control de tipo bucle está podría denominarse una estructura de control tonta pero que ahora veréis que tiene su razón de ser es una estructura llamada dubail the wild php lo cargo en el editor lo cargo en el navegador y vais a ver qué dubail es como una variación de wilde pero con una diferencia primero se dice y se escribe el código que se ejecuta y luego se escribe while y se pone la condición de ejecución como veréis esto nos va a causar un problema mirad la atención yo digo persona igual a inocente la persona puede ser culpable o inocente así que ahora digo tú tco dispara while inocente perdón baile persona sea igual culpable y por cierto en la estructura de control de tipo while a diferencia del resto de estructuras de control que hemos visto hasta ahora se acaba con un punto y coma esto no es necesario en las estructuras que hemos visto hasta ahora sólo es necesario en uruguay atención la persona es inocente deberíamos disparar si persona es culpable entonces dispara deberíamos disparar si la persona es inocente no hay un problema de co dispara y es que con el bucle de while primero se ejecuta dispara y luego se pregunta claro cuando se pregunta ya es demasiado tarde porque ya se ha ejecutado el código si quieres no se volverá a disparar pero ya es ejecutado al menos una vez al entonces while primero pregunta y si es cierto entonces ejecuta uruguay el primero ejecuta y luego se pregunta que seguía siendo cierto vuelve a ejecutar que era falso no te ejecute es más pero una vez sí que lo es ejecutado para qué sirve esta estructura de control cierto es que no se usa todos los días pero tú por ejemplo imagínate que haces el buscador de productos no tiene online cuando alguien busca un producto y no haya ningún resultado en lugar de enseñarle nada por lo menos enseñar un producto el du wild lo que haría es ejecutar una vez enseñarle un producto y si luego no hay más productos no enseñe nada más pero por ejemplo en este caso podríamos decidir que más vale enseñar un producto que mostrar un resultado de una búsqueda igual a cero sin nada sin productos un ejemplo un poco de andar por casa de para que nos podría servir un poquito igual sirve para muchas cosas más a continuación vamos a hacer un ejercicio para poner en práctica los conocimientos que hemos aprendido hasta ahora y para ello vamos a hacerlo creando un ejercicio llamado calendario por tanto voy a crear una página llamada calendario punto php técnicamente aunque esa página se llama el calendario no tengo por qué escribir todo en php así que incluso en este caso en este ejercicio no voy a escribir la etiqueta doc type voy a escribir la etiqueta de apertura de gm voy a escribir la etiqueta de apertura de body cuidado porque el gel se me hace raro mal y ahora por aquí voy a ponerme está char set es igual a efe jon 8 y aquí entra y tel voy a poner calendario más que nada para demostraros de paso que hacemos este ejercicio cómo podemos mezclar perfectamente html y php guardo recargo y ahora voy a hacer un calendario y para hacer un calendario voy a hacer lo siguiente viva klaus vía y de es igual a 1 y digo por ejemplo hoy es el día 1 si quieres lo voy a poner en una sola línea para verlo mejor guardó recargo día 1 un poquito de estilo me permitirá es decir que todo aquello que sea de la clase día tendrá un wifi de 50 píxeles un raid de 50 píxeles y un borde de un pixel solid black guardo recargo y tengo ahí como un día del calendario como un cuadradito si yo no supiera php y quisiera hacer un mes entero yo sé que tendría que venir aquí y empezar a copiar 1 2 45 1 2 3 4 y 5 ahora ahí tengo cinco días déjame que además al día le ponga flow left y tengo ahí los cinco días laborables de la primera semana del mes pero ahora empezar a imaginar y empezar a imaginar que no supiera php y que por tanto tuviera que escribir los 31 días del mes manualmente ahora imaginaos que en lugar de escribir un mes quiero un año entero y tengo que escribir 365 líneas con el calendario cuando ese momento llega cuando tengo que repetir demasiadas cosas es cuando pienso que ahí quizás me podría ayudar así que hago lo siguiente dentro del body porque en cualquier parte de html puede intercalar body tengo una etiqueta de apertura y de cierre de php y quiero que algo se repita 31 veces así que digo four es igual a 1 díaz es menor o igual que 31 día más más y digo echo cuidado aquí cuidado aquí porque voy a decir echo y corto esta línea de aquí problemas para empezar una cadena de caracteres en php he usado las dos comillas pero cuando llego aquí me encuentro con que este objeto ya tenía dos comillas así que php cree que allí estoy cerrando estas comillas de aquí y no lo estoy haciendo este problema con php es muy común y evidentemente como os podéis imaginar nos causa un error porque el programa no sabe interpretar esto posibles soluciones a este problema la primera si dentro uso dobles fuera uso sencillas si dentro usó comillas dobles fuera uso comillas sencillas segunda solución si fuera uso comillas dobles dentro uso comillas sencillas y la tercera solución si estoy obligado a dentro y fuera usar comillas dobles a las comillas interiores les pongo una contra barra también conocida como carácter de escape la contra barra está diciendo estas son comillas sí pero no son comillas que cierran a estas son comillas normales así que con cualquiera de las tres soluciones comillas simples comillas dobles o caracteres de escape solucionamos el problema que tengo ahora si guardo y recargo lo que tengo vamos a verlo es un calendario día más más vamos a verlo 1 punto y coma bien está bien escrito tengo aquí a cuidado me vuelve a pasar aquí veis he arreglado estas comillas pero no éstas de aquí así que con trabajo de escape y ahora si tengo un calendario de 31 días pero en los 31 días pone 1 así que lo que haré ahora simplemente va a ser escapar y encadenar día pongo primero comillas para decir que es algo de estas comillas segundo punto para decir que encadenó con una variable la variable es díaz ya la tengo una vez que tengo la variable quiero volver al interior de la cadena así qué punto comillas y vuelvo a la cadena esto es como el tren que hemos comentado antes además también voy a hacer esto mismo para este número uno si ahora guardo y recargo observaré como ya tengo un calendario que curiosamente en este caso os voy a decir que funciona de casualidad funciona de casualidad porque justo miradero no funciona la semana son de seis días entonces está cayendo al siguiente día por casualidad verdad teóricamente tendría que ocurrir eso pero claro no le estoy diciendo en ningún momento eso lo haremos a continuación que quiero saltar al séptimo día de la semana pero de momento lo que me importa es que mira atención a la pantalla es que este trozo de código me ha ahorrado ver código fuente de la página escribir todo este código por tanto esto es para lo que nos sirve php php nos sirve para automatizar el código que vamos a escribir en lugar de escribir todo eso en lugar de escribir los bits día a día no hecho simplemente con esta sencilla estructura de control de bucle esta sencilla estructura de control repetitivo dentro de php y por supuesto una vez más así como hemos visto antes vemos como cuando miro el código fuente de la página no hay ni rastro de php porque simplemente php convierte su contenido a código html y ese es el código que devuelve en la pantalla ahora mismo los días no están saltando correctamente si nos fijamos los días de hecho están saltando por simple inercia cuando llegar al final de la línea así que para arreglar esto voy a crear una estructura de control de tipo if dentro de una estructura de control de tipo for yo no os he enseñado las estructuras de control para que necesariamente las usadas por separado las estructuras de control se pueden combinar sin ningún problema evidentemente os has enseñado por separado para separar la enseñanza pero ahora que estamos haciendo un ejercicio os voy a enseñar como si nos interesa se pueden combinar así que voy a decir lo siguiente si día la resta entre 7 es igual a 0 a 0 sin cadenas en ese caso echo div style clear dos puntos que hacía clear voz lo que hacía que ir voces deja de flotar así que le estoy diciendo en aquellos días cuyo resto de división entre 7 sea 0 ese día baja abajo 7 entre 7 cuál es el resto 7 / 7 cada una y el resto es 0 14 entre 7 cuales el resto 0 14 entre 7 es igual a 2 y el resto es 0 pero 4 por ejemplo o 13 entre 7 el resto es 0 no 13 entre 7 cada una y el resto de 6 si hago esto por tanto ahora sí comprobaréis como cada siete días aparece un eco de styles killer voz y obliga al calendario a bajar da igual cómo de grande o como de pequeño lo haga con esto por tanto os quiero demostrar varias cosas en primer lugar os quiero demostrar que se pueden y de hecho muchas veces se deben combinar las estructuras de control y lo otro que os quiero demostrar es como cosas que en principio parece que no tienen mucha utilidad como por ejemplo las expresiones de igualdad o por ejemplo el resto de la división entero entera sí que finalmente acaban teniendo una utilidad bastante práctica y estoy haciendo un calendario que en muchas aplicaciones web vais a encontrar calendarios quiero decir que no es un ejercicio en absoluto extraño para lo que vais a acabar haciendo una de las cosas que más nos puede costar no solo al principio sino durante el desarrollo de un programa es ver dónde empiezan unas comillas y dónde acaban por tanto la solución del carácter de escape aunque es posible no es muy recomendable al menos al principio por tanto voy a cambiar el carácter de escape para que veáis aquí y aquí qué es lo que está ocurriendo primero empiezo con un día que tiene clase igual a día y que tiene un y de igual a día problema esto de aquí es una variable por tanto como es una variable lo que hago es escapar para escapar para cerrar he empezado con unas comillas dobles aquí pongo unas comillas dobles de tal forma que esto se convierte en un bloque es una cadena de caracteres alfanuméricos ahora quiero enganchar esta cadena de caracteres alfanuméricos con esta variable pero ya sabemos que para enganchar una cosa con otra tengo que hacerlo con un operador de encadenamiento representado por el punto si os fijáis después de este esta variable tengo otro punto y vuelvo a tener una zona donde veo comillas dobles para abrir comillas dobles para cerrar tengo ahora día comillas dobles que se abren comillas dobles atención que se cierra las he puesto aquí abajo para que en html se fuerce el retorno de carro el salto de línea a la línea siguiente pero realmente es esto por tanto sólo escribo así seguirá siendo un poco lioso lo sé pero ahí lo veréis un poco mejor un truco de php que no me gusta especialmente pero hay gente que lo usa es que no es obligatorio escapar las cadenas de caracteres yo puedo poner por ejemplo vía díaz y ya está es decir dentro de una cadena de caracteres a pelo y sin decir nada más he introducido una variable de php no me gusta ese método aunque funciona porque estoy mezclando html y php dentro de una misma línea mientras que con los escapes defino correctamente que es cada cosa compruebo como recargo y funciona igual de bien aunque no me gusta especialmente esa sintaxis por tanto la sintaxis que os recomiendo aunque al principio os cause algún problema de lectura o de claridad es la de usar comillas dobles y comillas sencillas para evitar usar caracteres de escape en este caso lo que quiero hacer es marcar por ejemplo los domingos como festivo y para ello me voy a crear una clase llamada festivo así que los días que sean festivos diré que tendrán background dos puntos red por ejemplo pero claro evidentemente nadie es festivo ahora mismo porque me hace falta especificar que este día y este día y este y este de aquí tengan la clase festivo así que yo me pregunto a continuación que tienen en común el 7 el 14 el 21 y el 28 pues lo que tienen a continuación es que el resto de la división entera es igual a cero por tanto puedo editar un poquito el código para poner lo siguiente deep class es igual a día y ahora voy a hacer un break eco y aquí lo tenemos fijaos he cogido día he cogido la línea de la clase y la he partido por la mitad y es perfectamente legal siempre que por ejemplo si aquí empiece la etiqueta aquí acabe la etiqueta es perfectamente legal aunque este partido en dos líneas diferentes puede poner incluso varios espacios no pasa nada el servidor ya la unidad si queréis guardo y recargo y comprobamos como el resultado sigue siendo perfectamente válido dejadme que baje una entera aquí para que lo veáis correctamente el resultado sigue siendo perfectamente válido ahora voy a hacer lo siguiente lo mismo si día el resto de la división entera es igual pero en ese caso echo festivo que ahora esto pues eso que acabo de hacer lo que hace es esto de aquí lo que hace es que me marca los días domingo en rojo en festivo simplemente porque esto es clase de día esto es clase día esto es que ese día pero este es día festivo tiene dos clases la clase día y la clase festivo porque éste tiene dos clases mirad porque si vengo al código digo el día 1 es festivo no en ese caso esta línea nunca se llega a ejecutar es cierto que el resto es igual a 0 no pues no ejecute es festivo por tanto ese día día uno tiene este código y tiene este código pero no tiene este código de aquí porque la ejecución de ese código está supeditada al cumplimiento de esa condición el día 7 tiene ese día festivo tiene el resto de la división entera es igual a 0 sí pues en ese caso ese día es festivo lo que hago por tanto es primero marcar con php el día que hemos creado como festivo y luego por supuesto con css específico qué es lo que pasa para ese estilo concreto del día anteriormente hemos estado hablando de variables las variables son unos contenedores que pueden albergar información y guardarme esta información para más adelante cuando la quiera utilizar en esta ocasión vamos a extender nuestro concepto de las variables aprendiendo a trabajar con matrices dentro de php yo os digo esto porque a un nivel bastante básico las matrices son algo así como variables pero extendidas por tanto voy a crear un archivo llamado matrices php lo pincho y lo arrastró hasta el editor y dentro del local host voy a llamar a ese archivo poniendo localhost barra aprendiendo php barra matrices punto php comprobamos que estoy trabajando con el mismo archivo comprobamos que se ve correctamente bien ahora voy a iniciar unas etiquetas de apertura y de cierre de php y voy a decir lo siguiente ya sabemos que por ejemplo yo puedo poner que el nombre es igual a jorge así que nombre es igual a jorge no me devuelve nada en la pantalla no me devuelve necesariamente nada porque hasta que no hasta que no diga jorge con nombre perdón no aparecerá jorge en la pantalla pero ahora supongamos y este caso es bastante común que quiero hacer una pequeña agenda de nombres yo quiero hacer una pequeña libreta de direcciones una pequeña libreta de agenda en este caso en qué posición me deja nombre pues me deja en una posición bastante mala simplemente porque las variables son únicamente capaces de guardar un valor si yo ahora quiero guardar otro valor por ejemplo me voy a la línea siguiente y digo nombre es igual a juan recargo digo echo nombre y no me guarda jorge y juan sino que si escribo juan me ha machacado sobre escrito el valor del nombre así que las variables están bien y las usaremos muchísimas veces pero debemos ser conscientes de que guardan un único valor yo siempre digo que las variables son algo así como un cajón de madera donde solo puedes guardar una pieza de información pero si en lugar de tener un cajón quiero tener una cajonera o quiero tener un armario para eso tengo las matrices las matrices son como un armario me permiten tener múltiples cajones y guardar una pieza de información en cada cajón os voy a decir que dentro de la naturaleza de la tipificación de bill de php crear matrices es muy sencillo porque voy a hacer simplemente lo siguiente atención cuando he declarado la variable o lo que hasta ahora era una variable que se llamaba jorge le voy a poner un par de corchetes a continuación atención corchetes no los corchetes son los dos botones que están justo encima de las llaves al menos en el teclado en castellano y voy a poner corchetes y voy a decir que por ejemplo el primer registro es nombre cero y el segundo registro es nombre 1 en este caso lo que acabo de hacer es inaugurar la primera de nuestras matrices basadas en índices donde el índice es el numerito que hay dentro de los corchetes veremos que hay matrices basadas en índices numéricos y hay matrices también basadas en cadenas que son muy cómodas de usar pero de momento vamos a trabajar con matrices basadas en índices en este caso debo tener cuidado fijaos lo fácil que ha sido declarar una matriz o convertir una variable en una matriz porque lo que he hecho aquí arriba está bien pero lo que he hecho aquí abajo está regular entonces si ahora digo nombre de cero nombre con el índice cero es jorge nombre con el índice uno es juan dime que es nombre recargo y me dice cuidado no puedes hacer esto está regular damos cuenta de una cosa lo que tengo aquí es un notice no es un error por eso cuando os he dicho que lo que he hecho aquí abajo he dicho está regular no he dicho está mal y de hecho podría en principio ignorar el notice y vemos que aquí abajo dice array digo nombre de 0 es jorge el nombre de uno es juan que es jorge digo que es nombre el programa dice un array pero no querrás que tenga jorge y juan porque es una libreta de direcciones es lo que tenéis aquí es un notice es una advertencia y nos dice que en este caso está convirtiendo una matriz a una cadena ese es un error no es una práctica no recomendada pero no es un error y por eso lo pone dentro de un notice lo pone dentro de un notice porque cuando instalas seam se instala como servidor de desarrollo y eso quiere decir que hay un archivo que veremos más adelante que se llama php punto in y donde se configura cómo funciona php y php s por el modo de desarrollo en el modo desarrollo quiere decir que quiero ver todos los errores y todas las advertencias cuando subáis nuestras webs y vuestras aplicaciones web 2.0 a un servidor veréis que los servidores está en modo producción los servidores en modo producción te suelen decir los errores pero no te suelen decir las advertencias por qué pues porque si yo tengo una tienda online por ejemplo yo tengo una advertencia no un error sino una advertencia queda muy mal para la confianza de la gente en mi sitio web que haya por ahí un mensaje que el usuario profano interpreta como un error pero no es un error es una advertencia por otra parte habría que decir que dentro de los posibles es evitar que eso aparezca debes programar sin advertencias pero hay veces que son un poco inevitables en este caso lo que tendría que hacer por tanto para solucionar bien este ejercicio sería simplemente o bien llamo a nombre de cero y me dice jorge o bien llamo a nombre de uno y me dice juan en lo que os quiero demostrar por tanto es que de momento aunque las matrices conceptualmente sean más complejas que las que las variables pero de momento ya tenemos algo y es que yo puedo declarar dos nombres sin que el segundo elimine al primero es decir cada uno de ellos ocupando su cajón correspondiente en el armario y sin molestarse entre sí hacer matrices unidimensionales como esta que acabamos de hacer es decir matrices de una sola dimensión como veis es fácil pero es igualmente fácil generar matrices de dos dimensiones dentro de php yo suelo comparar las matrices de varias dimensiones con rejillas en este caso voy a hacer una matriz de dos dimensiones y yo os diría que una matriz de dos dimensiones es algo así como una hoja de cálculo os diría que una matriz de tres dimensiones es como un palet lleno de cajas donde hay cajas en x en y y en zeta y una matriz de cuatro dimensiones no se refiere es un ejemplo gráfico de cómo sería eso simplemente sería como una especie de palet desplazándose en el tiempo y hablaremos de ello porque yo generalmente suelo un poco asociar las dimensiones de las matrices a las dimensiones del espacio pero realmente no tiene nada que ver es simplemente una manera de verlo una ayuda para visualizarlo así que tú fíjate que yo tengo aquí por ejemplo el nombre y el nombre ha sido jorge ha sido juan podría ser jaime y porque no javier pero esto es una agenda muy mala porque sólo guardo nombres yo además de nombres quiero guardar teléfonos y quiero guardar por ejemplo emails así que por ejemplo jorge es jorge a jorge puntocom muy personales de su teléfono este su email y su teléfono es éste juan tiene ese teléfono jaime tienes de teléfono javier ten ese teléfono y cada uno de ellos tiene un correo electrónico así que hasta ahora yo he sido capaz de guardar una matriz de una dimensión que crece como veis en este caso en y pero yo ahora lo que quiero es guardar una matriz de tres dimensiones perdón de dos dimensiones que crezca en y y crezca en x como no puedo hacer por tanto bueno para ello lo que puedo hacer es simplemente después del corchete creo otro corchete y ha de crear un corchete y por cierto puedo crear tantos como quiera para hacer matrices de n dimensiones de esta manera tan fácil en otros lenguajes no es tan fácil o bien pongo un número o bien pongo una cadena alfa numérica entonces digo el elemento cero nombre es jorge voy a decir que esto es una entrada de entrada de la agenda entrada entonces digo entrada a 0 el teléfono es este de aquí entrada a 0 el email es info jorge puntocom por supuesto punto y coma al final así que para repetir el esquema ahora cogería esta plantilla y la pegaría a continuación la entrada 1 el nombre es juan el teléfono es este y el correo es info juan puntocom ya no solo soy capaz de declarar una matriz de una dimensión sino que ahora puedo declarar matrices de dos dimensiones no quiero que os quedéis con la idea correcta con la idea incorrecta de que cuando haces una matriz de dos dimensiones la segunda dimensión tiene que ser de tipo cadena no es así se pueden hacer cadena y cadena número número número cadena cadena número por tanto guardo recargo aquí cuidado voy a decir que quiero ver de la entrada a cero el nombre y ahora en este caso nombre vamos a ver lo que va a tocar a hacerlo con números venga voy a hacerlo con números voy a poner cero un nuevo modificarlo y dos porque tengo que hacer otra cosa para las matrices con índices 0 1 y 2 y ahora quiero del elemento 0 obtener su elemento 0 que es el nombre donde por ejemplo en este caso 0 es el nombre 1 es el teléfono 2 es el correo electrónico así que guardo recargo claro cuidado a ver nombre entrada y me da jorge 0 de 1 es el teléfono 02 info jorge puntocom así que como veis ya sea numéricamente o ya sea mediante cadenas dejadme que ahora lo ponga otra vez con cadenas pero es para demostraros que se pueden poner o bien números o bien cadenas de caracteres alfanuméricos y ahora pongo email y pongo email eso sí si ponéis ahora quiero de la entrada a cero el nombre y me dice jorge de la entrada pero quiero el email y me dice en su teléfono me dice su el correo electrónico es decir podéis mezclar en cualquier momento e índices numéricos con índices basados en caracteres alfanuméricos y si usáis caracteres alfanuméricos usar comillas si usáis índices numéricos podéis no usar comillas o podéis usarlas lo que acabo de crear aunque parezca que no es una pequeña agenda de contactos que he llegado un momento puede guardar cualquier tipo de elemento continuamos con un tipo un poco especial de variables llamadas variables de formularios son variables que evidentemente solo tienen sentido en combinación con los formularios que tenemos en html así que para ello voy a hacer dentro de la carpeta aprendiendo php voy a hacer ahora dos archivos un primer archivo llamado formulario envía punto html porque este primer archivo que voy a crear va a ser html no tiene por qué ser php y el segundo archivo que voy a crear se va a llamar formulario recibe punto php html va a tener un formulario y va a enviar datos y php va a recibir el formulario y va a hacer algo con esos datos así que cargo formulario envía punto html formulario recibe punto php y atención muy importante dentro del navegador accedo al primer archivo a través del local host va aprendiendo php barra formulario envía punto html no cargo voy a crear una mini estructura por lo menos que el archivo sea mínimamente correcto voy a hacer voy a hacer un budín y dentro del botín voy a hacer una etiqueta forma donde las etiquetas que previamente probablemente no comprendíamos de los formularios html ahora hoy las vamos a tener que comprender hay dos etiquetas principales una vez action y otra es mejor axxion indica apunta al archivo al que le voy a enviar los datos por tanto dentro de axxion voy a poner formulario recibe punto php y en mejor recordamos que tenemos dos métodos el post o el get y ya sabemos que como regla genérica siempre que podamos usaremos post aunque hay veces que el desarrollo de nuestras aplicaciones nos empujará a usar get lo digamos que como ahora no estamos metidos dentro de una aplicación sino que estamos un poco aprendiendo las bases del lenguaje vamos a usar post ahora yo digo input type muy importante name nombre imputar submit y si queréis pongo un place holder que diga dime tu nombre si ahora guardo y recargo aparece dime tu nombre le digo mi nombre es josé josé vicente de hecho y le voy a enviar lo que ocurre cuando le voy a enviar es que me lleva a formulario recibe php porque formulario recibe punto php es el axón es quien va a recibir la acción pero qué hace en el momento formulario recibe punto php pues no hace nada no hace nada porque está en blanco así que a continuación voy a escribir el siguiente código dentro del formulario recibe voy a decir simplemente una variable muy especial en este caso que es dólar atención es una variable especial post y digo apostó porque el formulario he prometido que alivió enviar por post por tanto si el método pongo post en el tipo de variable pongo post y si en el método pongo get en el tipo de variable con google así que pongo dólar post un par de corchetes como si fuera a llamar a una madrid y ahora dentro de las comillas del índice de la matriz este importe tiene el name nombre ahí dentro pongo el nombre si aquí pusiera longaniza aquí pondría longaniza lo importante es que con esto lo que le estoy diciendo es quiero recoger lo que ponga aquí en nombre así que igual no evidentemente pongo punto y coma y ahora esto es muy divertido porque si yo digo jose vicente y le voy a enviar mucha atención aquí pone jose vicente y recargo y digo esto es algo que he escrito le doy a enviar y poner esto es algo que he descrito es decir esto que acabo de hacer parece que es una tontería pero no lo es porque ya soy capaz de tomar datos de una página web enviarlos a un archivo php y hacer algo con ellos y ese algo que es bueno ahora mismo no mucho ahora mismo es simplemente mostrarlo en pantalla pero más adelante puede ser guardarla un archivo guardarlo en una base de datos o hacer un poco lo que queramos con ese archivo insiste una vez más en que debo tener cuidado con post y con get porque imaginaos que ahora cambio el formulario de post en primer lugar esto es algo que he escrito lo envío y como se ha enviado no lo veo dónde está esa información se ha enviado en una cosa que se llaman cabeceras de html pero atención mira de una cosa ahora voy a cambiar esto a get voy a cambiar el método del formulario en el archivo html lo voy a cambiar a get recargo para que se dé cuenta el navegador y digo jorge envió y pasan dos cosas primero al haberle dicho get aquí arriba pone localhost aprendiendo php formulario recibe punto php y nombre es igual a jorge cuando yo uso el método post los elementos se envían ocultos en las cabeceras pero cuando yo uso el método get los elementos se envían codificados en la url codificados serializados pero como veis no muy ocultos y además tengo un problema el problema es que no me reconoce el índice no me reconoce el índice porque yo estoy enviando esta información por get pero php está esperando recibirla por post ya puedes esperar pero lo vas a recibir así que hay que tener cuidado si en el archivo anterior la enviado por forget aquí la tengo que recibir con get vamos a volver a probar lo envió jorge le doy a enviar y veis como ahora si recibo correctamente jorge una de las razones esto que voy a decir es un comentario muy general pero una de las razones por las cuales se intenta evitar pasar parámetros mediante el formato web es que yo esto lo puedo tocar jorge pues juan y me aparece ahí juan i jaime y me aparece allí jaime y no se recomienda demasiado no es una buena práctica aunque evidentemente os enseñaré soluciones para evitar eso que los parámetros pasen claramente en la url porque la gente te los puede tocar y tú no quieres trabajar te los truco pero insisto eso es así eso es cierto pero estamos hablando de conceptos más avanzados en cuanto a desarrollo de aplicaciones por tanto vamos a empezar por el principio vamos a empezar por la teoría vamos a suponer de momento que todo el mundo es bueno y nadie te quiere hackear tu aplicación cosa que no es verdad pero supongamos la y más adelante ya nos preocuparemos de esta clase de cosas ahora mismo lo que nos interesa es aprender a pasar parámetros con get y compost de una parte a otra sí ya he conseguido realizar esta acción voy a realizar un pequeño ejercicio para demostrar que puedo hacer con todo esto voy a hacer una pequeña calculadora así que vengo a la carpeta y creó un nuevo archivo que se va a llamar calculadora punto php y dentro de calculadora vamos a aprender varias cosas en primer lugar quiero una estructura html quiero tener un jefe quiero tener un móvil dentro del body voy a crear php como os he dicho en más de una ocasión podemos mezclar y de hecho es bastante común mezclar html y php en el mismo archivo si de cara al desarrollo avanzado de aplicaciones es una buena práctica o no es algo que ya discutiremos más adelante pero la cuestión es que se puede ahora voy a hacer lo siguiente voy a poner un ife si se cumple una condición en ese caso a algo y si no se cumple esa condición en ese caso a otra cosa no porque ya sabéis que la admiración equivale al operador de negación no no y set una variable de post llamada número esto quiere decir esto de aquí lo que está dentro del paréntesis es la condición y la condición es si no es set y set que quiere decir más o menos existe si no existe la variable post llamada número que me la acabo de sacar de la manga habréis en ese caso a una acción y sí sí que existe la variable post número en ese caso hay otra acción bien si no existe en ese caso escribe lo siguiente forma action es igual a interrogante mejor es igual a post form action es igual a interrogante quiere decir que no lo envíes a otro archivo envía melo a mí mismo se recarga me a mí mismo y envíame los datos y ahora digo input type neymar atención número sí aquí he puesto número aquí tengo que poner número sí aquí he puesto post ahí tengo que poner post y si hay he puesto número aquí tengo que poner número aparte de fijados como hemos hablado anteriormente para evitar los problemas con las comillas simples y con las comillas sencillas y es que en php estoy poniendo comillas sencillas perdón si en php estoy poniendo comidas sencillas en html estoy poniendo comillas dobles place holder dime un número y ahora por último input type submit si yo ahora cargo este archivo se llama calculadora punto php y pongo dime un número como no he enviado la variable por post llamada número no esta apuesta no existe en ese caso me dice toma formulario ahora si pongo un número atención el 6 y lo envío en ese caso pasará lo que ponga aquí abajo ahora mismo no pasa nada porque no he puesto nada de código así que por ejemplo diré una algo muy sencillo el cuadrado del número que has enviado es punto porque ya sabéis que en php se encadena el tren con un punto y digo post número x post número si queréis pongo esto entre paréntesis para que tengamos claro que es una multiplicación multiplicó el número por sí mismo y ahora fijémonos en lo que voy a hacer si pongo 6 atención me dice el cuadrado del número que has enviado es 36 quito el interrogante pulsa enter si digo 4 envío el cuadrado del número que has enviado es 16 luego acabo de utilizar los formularios para crear un programa que no siempre hace lo mismo sino que acabo de crear un programa lo que hace depende de la entrada que le dé el usuario es decir acabo de combinar formularios html con scripting en php y esto lo he hecho simplemente para decir lo siguiente me has enviado un post número si no me lo has enviado es que lo vas a escribir ahora por tanto si no me lo has enviado te muestro un formulario donde me puedes introducir un número ahora si no es cierto que no existe el post número es decir si es cierto que existe el post úmero en ese caso dime no me muestra el formulario porque ya me lo has mostrado y en ese caso dime el cuadrado del número que has enviado es el número por el número en este caso porque quiero el cuadrado si hubiera dicho el doble pues sería número por 2 se me ha dicho la mitad sería número partido 2 ya un poco lo de menos lo importante es que éste envía un número envía una variable mediante php y este de aquí recoge esa variable y realiza una operación con ella las partes clave por tanto en este ejercicio son dos primero el axón interrogante que no lo envía a un archivo externo si no se lo envía a sí mismo y por otra parte el isset que lo que hace es decir no lo has enviado muéstrame esto ya lo has enviado no me muestre es esto muéstrame esto en su lugar quiero decir con esto que no hay que enviar la información a otros archivos no simplemente en los vídeos anteriores os he mostrado cómo se puede enviar a otro archivo y en esta ocasión nos ha enviado cómo se puede enviar a sí mismo hay veces que os interesará enviar otros archivos y hay veces que se interesará enviárselo a sí mismo hablamos ahora de una parte muy especial de php que se llaman las sesiones en el que la gestión de las sesiones dentro de php y para que entendáis para qué sirven y que son las sesiones tengo que primero explicaros un defecto que tiene php defecto según lo queramos mirar técnicamente no es un defecto es que es que php funciona así pero desde el punto de vista del usuario que empieza aparece un defecto mirad voy a crear un archivo llamado sesiones 1 php y voy a crear otro archivo llamado sesiones 2 php así que ahora cargo los dos dentro del editor cargo aquí sesiones 1 punto php y digo lo siguiente mí no lo que voy a decir php mi variable es igual a jorge ahora digo cuánto vale mi variable el programa me dice jorge hasta aquí no hay ningún problema la cuestión es que php es un lenguaje de tipo state less es un lenguaje sin estado y sin estado quiere decir que no es capaz de recordar el estado del script de una página a otra nosotros al final haremos varios scripts que se comportarán como un programa completo pero por defecto si no trabajamos con sesiones los scripts funcionan como un programa independiente cada uno de ellos demostración me creó una etiqueta hr fuera de la etiqueta php digo ir al archivo 2 y quiero oír evidentemente a sesiones 2 php así que guardo recargo y dice jorge vamos al archivo 2 voy al archivo dos y en el archivo dos simplemente escribo lo siguiente este sesiones uno y ahora aquí en el archivo sesiones 2 digo echo mira es más para que no penséis que igual me equivocado y comí bar lo he copiado y pegado si funciona en otro debería así funcionan uno debería funcionar en el otro pero no es así atención lo pongo aquí y ahora digo la variable es jorge quiero ir a sesiones 2 php pincho y me dice no sé qué variable es mi bar y yo digo como que no la sabes cómo puede no saber la siesta aquí te la acabo de declarar pero el problema es que el php funciona de la siguiente manera declara esta etiqueta declara esta variable recuerda la variable usa la variable y en cuanto cierro esta etiqueta o cualquier etiqueta que hay al final del archivo se olvida de todo lo que haya usado se olvida de todos los recursos que haya abierto y en este caso una variable es un pequeño recurso de memoria que abres en la memoria del sistema del servidor claro cuando voy a sesiones dos por mucho que yo le diga con mi bar ya no recuerda ha olvidado quién es mi bar esto es lo que ya os digo que no es técnicamente un problema si no es que php funciona así pero muchas veces a lo largo del desarrollo de estas aplicaciones nos gustaría que de página a página recordara ciertas cosas para esto precisamente una vez presentado el problema están las variables de sesión están el control de las sesiones dentro de php para declarar una variable de sesión tengo que hacer lo siguiente no voy a equivocar tengo que poner dólar en mayúsculas sesión dólar o sesión y como dentro de los corchetes pongo nombre las variables de sesión como veis son un poquito parecidas a las variables de formulario sólo que en lugar de poner post que pongo sesión ahora digo sesión en nombre no hay ningún problema y me dice jorge yo aquí declaro la variable de sesión jorge nombre que equivale a jorge y aquí llamo a esa variable de sesión y funciona ahora en principio vengo aquí y digo con mi bar y debería funcionar pero sin embargo le doy a archivo 2 y sigue diciendo que no encuentra esa variable de sesión le falta solo una cosita lo primero que tengo que hacer es declarar variable sesión bien pero lo segundo que tengo que hacer inevitable porque es no ya habéis visto que era error es poner una función llamada sesión start hay que escribirla exactamente así sesión en minúsculas y jon bajo start y corchete corchete porque es una función ya la haremos de que es una función así que esto lo tengo que copiar y lo tengo que pegar en todos los archivos en los que se escriban o se lean variables de sesión si ahora intento hacer lo mismo la variable vale jorge me voy al archivo 2 y me dice jorge es decir ahora si por una parte declarando el sesiones start y por otra parte declarando una variable ya puede usar esa variable siempre que la llame con este nombre en cualquier página que tenga un session estado al principio eso sí luego también os digo que en las sesiones por defecto duran alrededor de 15 minutos en el servidor es decir yo vengo a este archivo en menos de un cuarto de los recargo y me dirá jorge porque recuerda que alguien la nombró jorge si tarda media hora o más digamos 16 minutos o más recargo esa página y dice he olvidado quién es jorge esto se hace por una parte para ahorrar memoria en el ordenador en el servidor y por otra parte se hace para poder guardar nuestra privacidad ya que las variables de sesión se usan para hacer sesiones de usuario y no te interesa que si te deja esa sesión abierta en un ordenador esté infinitamente abierta en el ordenador para eso también por protección se cierra la sesión tras un cierto tiempo de inactividad que una vez más establece por defecto a 15 minutos pero se puede cambiar en ese archivo que os decía antes php punto y ni vamos a hablar a continuación de que es ese archivo llamado php punto n vamos a ver ahora la biblioteca pre integrada que determinará dentro de php de gestión de fechas vamos a ver un poco la superficie de esta librería y os voy a decir que es más útil de lo que en un momento dado puede parecer voy a crear un archivo llamado fechas punto php lo cargo dentro del navegador y las fechas consisten en una función que viene pre integrada dentro de php por tanto yo simplemente tengo que poner rate pongo un echo para que salga por la pantalla evidentemente pongo dates pongo paréntesis paréntesis y dentro de los paréntesis voy a poner un código y que pongo en ese código por ejemplo si pongo una mayúsculas equivale a decir que quiero ver el tiempo y unix y el tiempo y unix me creáis o no son los segundos que han pasado desde hoy hasta el jueves 1 de enero de 1970 eso es lo que se conoce como el tiempo y unix así que si digo eco de it y me dice este número si voy refrescando poco a poco veréis como el número va cambiando según los segundos que vayan pasando parece una frikada pero ese número tiene más importancia de la que puede aparecer hoy probablemente no pero cuando trabajemos con bases de datos veréis que sí si pongo por ejemplo una y mayúsculas el year el año me sale el año con cuatro dígitos pero si pongo una alegría a minúsculas me sale el año con dos dígitos de lo que quiere hacer me interesa una cosa u otro si pongo a los minutos me salen los minutos son ahora y hoy 12 en el reloj de este ordenador no sé si no perdonan esto es el mes 12 los minutos no sé a quién se le ocurrió esa idea es una y latina así que los minutos ahora sí son tres los segundos son la s y tú dirás para porque estás poniendo un montón de códigos y no sabemos de dónde salen bueno en este caso los los códigos están saliendo de mi cabeza porque como suele usar las funciones de fecha hay unas cuantas que me sé de memoria pero diréis vale pero dónde está la tabla de fechas pues la tabla de fechas está aquí simplemente en un navegador web ponéis byte perdón de php eid y con toda probabilidad en la primera coincidencia llegaréis a la documentación oficial de php en cuanto a la gestión y el uso de fechas entonces dentro de esta documentación de php vais a encontrar que hay una tabla fantástica que os dice cada uno de esos caracteres que yo estaba poniendo a que corresponde así que de es día del mes con dos dígitos de mayúsculas es una representación en texto por ejemplo efe es el mes en texto el es el año y es el año la hora la zona horaria tenéis hay un segundos desde la época iunics que es el 1 de enero del 70 es decir los números de todos de memoria que lo que hago es que me sé de memoria aquellos que suele usar para todo el resto lo que vamos a hacer es consultar esta tabla lo que voy a hacer ahora es formular una fecha y para ello voy a hacer lo siguiente echo hoy es y punto gheit d punto del mes dejadme que lo escriba en varias líneas porque si no os liar y luego si queréis lo re factorizar hoy es vip d del mes eco dave m eco del año eco dave y lo he hecho en varios secos para que veáis claramente qué hace cada línea así que si ahora guardé recargo dice hoy es 17 del mes 12 del año 2014 si lo quiero abreviar un poco más quiero que el mes aparezca en texto así que voy a poner hoy es día de mes de año y pongo hoy es 17 de 12 de 2014 está casi bien pero hay un problema y es que 12 aparece en número y yo quiero que aparezca en texto pero cuidado php está hecho en castellano no está hecho en inglés por tanto aunque yo me vaya a la tabla de php si pongo el mes donde estás mes a mes representación textual completa fijaos que pongo efe en lugar de minúsculas y mayúsculas y cuidado porque me dice hoy es 17 de december de 2014 y queda un poco feo porque lo que nos gustaría es que estuviera esto en castellano lo que voy a hacer por tanto es reutilizar los conocimientos que ya haya adquirido para conseguir este objetivo así que voy a decir lo siguiente suites voy a usar una estructura de control switch y voy a buscar de efe una estructura de control suite que tiene varios casos concretamente con el mes hay doce casos válidos keys ya no era dos puntos mes es igual enero break cage ferrari voy a crear una plantilla para trabajarlo rápido abril mayo junio julio agosto septiembre octubre noviembre de diciembre pero los casos para atrás ya sabéis que las sangrías no son funcionales pero aunque no son funcionales nos ayudan a saber dónde empieza donde acaba cada caso ferrari yo diría febrero march le diría a marzo april yo diría abril yo le diría junio you live que diría julio pocos yo diría agosto september yo diría septiembre october yo diría octubre pero qué pasa aquí y octubre va aquí november en noviembre dicen ver diciembre y este parece que me sobra si no es que me he dejado algún mes febrero marzo abril mayo mayo me he dejado mayo por tanto como puedo haber dejado mayo may es mayor si yo ahora guardo y recargo mirad me sigue diciendo hoy es 17 de diciembre pero si yo aquí en lugar de day efe le digo que quiero la variable mes la variable mes es esta que me acabo de sacar de aquí me dirá hoy es 17 de diciembre de 2014 yo que he hecho por tanto lo que he hecho es con una estructura de control switch acabo de atrapar esta fecha y le digo sí efe es january entonces la variable mes es variable que me sacó de la manga que me acabo de inventar es enero february febrero march marzo y por tanto que al final no llamo a day efe llamó a mes porque mes es la variable en la que estoy introduciendo el nombre del mes en castellano lo que estamos haciendo hasta ahora y probablemente seguiremos haciendo un poco más es programar en procedural es decir programación estructurada donde se ejecuta el programa de arriba hasta abajo cuando llega hasta abajo se acaba y ya está php es un lenguaje de tipo multi paradigma eso quiere decir que no trabaja con un solo paradigma sino trabaja con varios lo que hemos estado haciendo hasta ahora es programación estructurada hay otro tipo de programación que es programación orientada a objetos lo bueno de php es que nos deja elegir la idea de la programación orientada a objetos idea dentro de la cual todavía no nos vamos a meter es la idea de envolver todo el código de nuestros programas con una envolvente llamada objeto lo encapsula moss y por tanto podemos reutilizar más adelante esas capsulitas es incómodo porque hay que irlo encapsulado todo pero luego la ventaja es que cuando te haces una librería de capsulitas luego no vuelves a hacer las mismas cosas en cada programa sino que vas reutilizando esas cápsulas lo que yo ahora querría hacer es enseñaros una de esas cápsulas no todavía un objeto sino algo más sencillo y es algo que se llama una función yo acabo de hacer un código acabo de hacer un ejercicio que yo pienso que en un momento dado puedo reutilizar porque es muy común en un programa ponerlo de hoy es 17 de diciembre de 2014 en un programa en una web o donde sea así que para que cada vez que yo haga un nuevo programa voy a volver a escribir este código y siempre va a ser el mismo para eso lo re utilizo y gasto mi tiempo en escribir cosas que no hubiera escrito antes lo que voy a hacer por tanto es aislar este código dentro de una cápsula que se llama función por tanto os voy a decir que las funciones se crean de la siguiente manera en primer lugar digo function uso la palabra reservada function en inglés a continuación elijo un nombre si es posible en castellano para la función ya sabéis un nombre pero sin espacios sin acentos sin es por ejemplo dime la fecha estoy usando la nomenclatura cam el case que lo que hace es poner la primera en mayúsculas de cada palabra ahora pongo parámetros esta función como esta primera que hago no tiene parámetros por eso lo que hago es poner paréntesis paréntesis vacíos sin parámetros y ahora pongo una llave que se abre y otra por aquí que se cierra es decir si queréis algo un poco de sangría para que lo veáis mejor lo que he hecho es meter todo el código del switch y del eco dentro de una función para que lo veáis mejor en pantalla dejadme que ahorre un poco de código así que se puede escribir todo en una sola línea ahora que ya hemos hecho el switch ya hemos visto para qué servía cada línea pero ahora lo que quiero es claridad en la pantalla pero cuidado no hay que eliminar demasiado perejil bien dejadme también de factorizar un poco esto de aquí veis que tener demasiados ecos no parece bueno lo que voy a hacer es voy a poner varios puntos como cadenas de un tren y digo aquí meto el verte aquí meto el d aquí me todo el mes aquí meto las comillas aquí me todo el año los puntos que me sobran los borró y los ecos que me sobran los borro es lo mismo hoy es día del mes del año este código ya está bastante más limpio ya está bastante más legible y ahora vamos a comprobar su funcionamiento es curiosamente su funcionamiento es ninguno quiere decir esto que he cometido algún error no he cometido ningún error atención miradme muy importante lo que he hecho es crear una función pero crear una función es como crear una variable que la crees no quiere decir que la estás usando así que tú primero creas la función y luego la usas para crear una función se hace con la fórmula que os he puesto aquí arriba function nombre de la función el que tú quieras paréntesis paréntesis aunque no pongas parámetros y ahora entre el entre la llave de apertura y la llave de cierre eso es la función ahora voy a hacer lo siguiente una vez que he declarado una función voy a llamarla para llamarla simplemente tengo que decir dime la fecha paréntesis paréntesis fijaos que es como el de beit para entre paréntesis pero en este caso es dime la fecha paréntesis paréntesis es decir la diferencia es que take es una función que ya está metida en php y dime la fecha es una función que yo me acabo de crear bueno pues guardo recargo y me dice hoy es 17 de diciembre de 2014 y puede que esto que hayamos hecho ahora mismo no os parezca particularmente útil pero a continuación os voy a demostrar como sí que lo es esto que he hecho así como lo he hecho puede parecer que no sirve para nada y probablemente es cierto así como lo he hecho para qué quieres encapsular algo dentro de una función si luego lo vas a llamar justo a continuación para eso no hagas la función y ya está pero sin embargo lo que voy a hacer ahora es dentro de esta carpeta voy a crear un nuevo archivo que se llama un programa cualquiera voy a crear un programa cualquiera punto php cargo aquí un programa cualquiera y cargo aquí un programa cualquiera ahora dentro del script php voy a hacer lo siguiente atención voy a dejar la declaración de la función voy a eliminar la llamada a la función por tanto ahora el archivo fechas php únicamente tiene la función dentro de un programa cualquiera voy a hacer lo siguiente yo no puedo decir ahora simplemente dime la fecha fijaos dentro de un programa cualquiera llamo a dime la fecha en cuanto lo intento de ejecutar me dice has llamado a una función no definida llamada dime la fecha es cierto que la función la he definido aquí pero el programa no tiene por qué saberlo así que usó un elemento de php llamado incluye y digo incluye creo que no hace falta paréntesis incluye fechas punto php y lo que hago por tanto y lo que hago por tanto es que llamo a fechas php y a continuación cuando quiera porque no tengo por qué hacerlo a continuación digo echo esto es algo de código seco esto es algo más de código guardo recargo y dice aquí esto es algo de código hoy es 16 de diciembre de 2014 esto es algo más de código ahora sí que creo que podéis empezar a ver un poco mejor cuál es la utilidad de las funciones lo que acabo de hacer es encapsular el dime la fecha dentro de una función y la función dime la fecha a la vez está dentro de un archivo llamado fechas punto php digamos que ese archivo o fechas punto php ahora es una cápsula y yo esa cápsula me la puedo llevar al proyecto que sea para utilizarla siempre que quiera lo que va a ocurrir en este caso es que simplemente cada vez que la quiera usar tendré que copiar el archivo php en mi proyecto sea cual sea el proyecto que voy a hacer mediante la función incluye y a continuación cuando sea que quiera decir la fecha dime la fecha ahora sí aunque de manera muy básica la encapsulación es algo más complejo de lo que acabo de hacer pero para una primera demostración pienso que está bien lo que acabo de hacer es encapsular una función dentro de un archivo y poder reutilizar ese archivo siempre que quiera el archivo no tiene por qué estar uno al lado del otro generalmente cuando hagáis un programa cualquiera lo que haréis es una carpeta donde por ejemplo veréis funciones si yo ahora muevo fechas a esa carpeta llamada funciones cuidado porque tendría un problema porque si yo intento recargar me dirá warning incluye el incluye ha fallado porque ha fallado es muy sencillo simplemente ha fallado por la sencilla razón de que yo he dicho fechas punto php pero s fechas punto php ya no está al lado de un programa cualquiera ahora bien yo le digo entra dentro de funciones y dentro de funciones busca fechas punto php es decir me acabo de crear una carpeta una práctica que es súper común para guardar las funciones lo que he hecho por tanto y como os decía es una práctica bastante común que consiste en crear una carpeta llamada include es llamada inc llama la función es llevarla como quieras pero una carpeta específica para almacenar todas tus funciones y eso sí por supuesto y una costumbre no sólo en php sino en muchos lenguajes de programación es que cada vez que empiezas un script arriba incluyes todo lo que vas a necesitar y abajo lo usas así que en este caso sí guardo y recargo comprobaremos cómo vuelve a funcionar perfectamente porque el archivo no tiene porqué estar en la misma carpeta pero tiene que estar cerca una más arriba dos más arriba una más abajo dos más abajo puede ser más puede ser menos pro en definitiva una ubicación que puedas localizar desde el archivo principal vamos a crear funciones que puedan tener parámetros para eso me voy aquí me creó un nuevo archivo y lo llamo funciones con parámetros punto php abro funciones con parámetros aquí cargo funciones con parámetros allá pongo ola y pongo ola bien en este caso lo que voy a hacer es crear una pequeña función que se va a llamar buenos días la función buenos días va a decir hola jorge bienvenido a esta aplicación he creado una función de momento no devuelve ningún resultado porque la he definido pero no la ha llamado y ahora la llamo buenos días cada vez que le digo al programa que ejecuten buenos días me dirá hola jorge bienvenido a esta aplicación pero tengo un problema y es que vamos a un poco previsualizar que tendremos cuando creemos una aplicación compleja en una aplicación compleja no creo que haya un solo usuario y que se llame jorge habrá muchos usuarios que tendrán diferentes nombres así que si yo tengo a juan que tengo que hacer ahora crear otra función llamada buenos días juan y si luego tengo javier otra función llamada buenos días javier si hiciera eso en cuanto crear la tercera función en mi cabeza algo saltaría y diría algo estoy haciendo mal estoy repitiendo demasiado código imagínate que si las funciones para todos los nombres del mundo algo estaría haciendo mal lo que hago no es hacer muchas funciones sino personalizar el comportamiento de una función hacer que una función sea una especie de llave inglesa que me sirva para varios tornillos entonces lo que hago es poner aquí un parámetro que va a ser por ejemplo nombre puede ser nombre calcetín longaniza y mental siempre que veáis que no es que me lo invento y ahora voy a cambiar jorge mi nombre por tanto ahora me dirá buenos días nombre hola nombre bienvenido a esta aplicación cuidado porque hasta que nos explique sobre carga si ahora intento ejecutar me dará un error porque dice tú me has prometido que me ibas a dar un parámetro pero sin embargo me has llamado sin ningún tipo de parámetro y por tanto no es un error porque fíjate que es un warning es una advertencia no es un error porque fíjate que es un notice pero no deja de quedarse o en pantalla así que yo básicamente voy a cumplir la promesa de que hola juan así que me dirá hola juan bienvenido a esta aplicación hola juana bienvenido a esta aplicación que se acaba en una serie de reglas para poner bienvenida al lugar de bienvenido pero en fin hola stella bienvenida a esta aplicación hola jose bienvenido a esta aplicación lo que acabo de hacer por tanto es declarar una función con un parámetro y el parámetro me permite personalizar cómo se va a comportar esa función de esa manera la función no hace una única función si no puede hacer múltiples funciones por eso cuando declara una función tengo que declarar la con un paréntesis si la función no lleva parámetros da igual tienes que poner los paréntesis igualmente no lleva parámetros por los paréntesis vacíos que luego la llama sin parámetros por los paréntesis vacíos pero tienes que poner paréntesis y si pones funciones pues pones dentro de los paréntesis las funciones no solo los parámetros no sólo se pueden poner parámetros sino que se pueden poner varios parámetros por ejemplo voy a poner nombre coma edad bienvenido a esta aplicación ahora que tienes punto edad y punto años me va a parecer mal por la ñ pero ten cuidado yo no puedo decir buenos días josé por qué me dice esperaba que me dieras un segundo argumento me has dicho que me ibas a decir el nombre y la edad pero solo me has dicho el nombre no es un error pero queda feo así que jose coma 39 así que recargo y me dice hola jose bienvenido a esta aplicación ahora que tienes 39 años jaime 24 hola jaime bienvenido a esta aplicación ahora que tienes 24 años wang 30 hola juan bienvenido a esta aplicación ahora que tienes 30 años como veis podría tener ahora no ahora pero más adelante infinitos usuarios en una base de datos cada uno con su nombre y su edad y sólo tendría que hacer una sola función vamos a ver con php un modo bastante sencillo de conseguir persistencia que es escribiendo datos en un archivo de texto plano así que para ello voy a hacer lo siguiente me voy a hacer un nuevo archivo un documento de texto que se va a llamar escritura escritura php va a tener el siguiente código voy a decir lo siguiente archivo es igual a efe open donde f open es abrir un archivo nuevo el archivo se va a llamar prueba punto txt y a continuación tengo que poner por ejemplo un modificador donde r es leer w es escribir a es aprendiz ar añadir y luego está r plus que es lee crea el archivo si no existe w plus que es escribe crear archivos no existe y applus es añade crea el archivo si no existe todo esto que estoy diciendo lo tenéis en poniendo php efe open todo esto que estoy diciendo se puede consultar en la documentación de php y debéis tener por aquí una tablita que son los modos r es r plus verón read r plus es re lectura escritura v v plus a plus estoy usando este de aquí apertura si el fichero no existe lo intenta crear ojo lo intenta crear si tiene permisos en la carpeta por supuesto vamos a suponer que los tenemos y en sambo los tenemos cojo esto escritura y ahora hago lo siguiente en primer lugar abre un archivo en modo añadir que si pongo w lo que hago es que cada vez me cargo lo que tenía y escribo cosas nuevas yo no quiero eso yo lo que quiero es abro el archivo respeto lo que había y escribo a continuación y digo lo siguiente efe faith esto es un texto que voy a escribir poner por favor contra barra n para decir baja una línea y voy a decir lo siguiente y es que esto lo quiero escribir en el archivo archivo como esto es un texto que voy a escribir es decir en el archivo quiero escribir esto de aquí por último aunque no es obligatorio aunque no es obligatorio deberíamos poner un efe klaus cierra el archivo digo que no es obligatorio porque php en su naturaleza lo que hace es cerrar automáticamente cualquier recurso que hayáis abierto y en este caso un archivo es un recurso pero es una muy buena costumbre cerrar manualmente el archivo así que voy a probarlo no tiene por qué ocurrir nada en la pantalla eco ok los querés quedar un poco más tranquilos mirad bien fatal error efe rip no ese ferry efe wright se me ha liado una w así que recargo y dice ok y si todo ha ido correctamente atención ahora la pantalla si todo ha ido correctamente ahora me encuentro que existe un archivo llamado prueba punto txt y si hago doble clic o traigo aquí prueba punto txt pone este es un texto que voy a escribir así que ahora voy a ejecutar una vez más y si abre el archivo txt ahora pondrá esto es un texto que voy a escribir esto es un texto que voy a escribir y si ahora ejecutó una vez más ahora pone tres veces esto es un texto que voy a escribir es decir cada vez que estoy ejecutando este archivo lo que está ocurriendo es que estoy añadiendo una línea más que dice esto es un texto que voy a escribir es decir ya tengo un programa fijaos qué sencillo que es que es capaz de tomar algo que está existiendo en php y escribirlo de manera permanente en un archivo txt tal que si queréis ahora puedo cerrar el navegador pero lo que he escrito dentro de ese archivo txt se queda guardado para siempre voy a hacer una cosa voy a crear mirada de atención voy a crear un documento nuevo que se va a llamar lectura a punto php y dentro de lectura voy a crear un archivo llamado agenda punto txt en agenda punto txt voy a poner juan jorge martín y yo que sé y jose tengo cuatro nombres en la agenda ahora cargo lectura y evidentemente aquí también cargo lectura y dentro de lectura lo que voy a hacer es escribir el contenido de ese archivo voy a devolver el contenido de ese archivo para ello lo primero que hago es lo siguiente archivo es igual a efe primero abro el archivo y digo que abre el archivo llamado agenda txt coma r porque quiero abrir el modo lectura a continuación lo que voy a hacer es lo siguiente un bucle while ya sabéis que un bucle while es un bucle que hace algo repetitiva mente y lo que va a hacer repetitivamente en este caso es leer línea a línea léeme línea a línea y no pares hasta que hayas acabado y digo while negativo feo feo es una muy mala en castellano pero quiere decir el final del archivo el en off file voy a decir lo siguiente voy a decir echo efe read archivo léeme línea a línea del archivo y por ultimo efe close archivo punto y coma voy a hacer lo siguiente voy a poner un parámetro que es 8.192 que es el número de bytes que tiene el archivo como máximo eso quiere decir que no podría leer más allá del del byte 8.192 para un archivo pequeño suficiente este es uno de los casos de más vale que sobre que falte entonces recargo bien en ese caso me dice que va aclaró feo del archivo y me falta poner el archivo así que el archivo es archivo pero no es una constante es una función que hace falta decirle a quien se refiere esa función así que guardo recargo y me dice juan jorge martín josé si queréis para verlo mejor voy a poner echo efe read más vr más un salto de línea en html así que tengo vamos a verlo allí momentín eco efe read vr voy a ver dónde eres por si acaso bueno déjame ver el código juan jorge josé y martín vale cierto que nos está devolviendo toda la vez y luego pone los verdes línea a línea bien lo que quiero hacer ahora ya tengo de momento todo el contenido en la pantalla lo que querría hacer ahora es modificar este ejemplo para que me vaya avanzando línea a línea en lugar de leerme todo el contenido del archivo lo que voy a hacer ahora es simplemente en lugar de usar efe read voy a usar efe gets que en lugar de leerme el archivo entero en línea a línea lo cual me sirve en este caso por ejemplo para poner un ver un retorno de carro en cada una de las líneas que ha puesto en la pantalla ahora me he servido para meter algo tan sencillo como un retorno de carro pero ahora luego veréis que me servirá para cosas más complejas como por ejemplo maquetar este archivo de texto dentro de una tabla a continuación os voy a proponer un ejercicio práctico para poner en práctica todo lo que hemos aprendido hasta ahora este ejercicio que es un clásico dentro de la programación es un ejercicio que se hace como aprendizaje de cualquier lenguaje de programación consiste en crear una agenda telefónica por tanto voy a crear simplemente una carpeta llamada agenda como una especie de proyecto separado del resto de archivos que mostró hasta ahora y cualquier proyecto suele empezar con un archivo llamado index php evidentemente la finalidad de este archivo será trabajar con un archivo llamado agenda al que voy a colocar no la extensión txt sino la extensión la extensión csv al final del ejercicio os enseñaré por qué le digo que sí voy a editar el csv aunque fijaos que me dice que es un archivo de opinión fiscal -que o de excel yo le voy a decir que voy a editar manualmente dejadme cerrar todas las ventanas pero cuidado vamos a ver here it cargo ahí agenda punto txt y voy a crear un par de registros manualmente voy a decir juan coma que tiene este teléfono coma tiene el correo info juan puntocom jose que tiene este teléfono tiene el correo info jose puntocom jaime que tiene este teléfono tiene el correo jaime jaime puntocom lo veis bueno pues voy a continuar voy a entrar dentro de la carpeta agenda al entrar dentro de agenda inevitablemente ejecuto el archivo index.php pero el archivo index punto php ahora mismo no tiene nada de código por tanto yo lo voy a crear html html para ser correctos vamos a declarar un dock type doctor html y digo jefe body boy dentro del head voy a poner un title en el que voy a poner simplemente de agenda telefónica y dentro del body voy a poner por ejemplo una 1 y voy a decir la agenda telefónica copyright josé vicente carratalá así que guardo recargo y tengo ahí agenda telefónica copyright jose vicente catalá ahora voy a hacer lo siguiente la atención en primer lugar quiero leer por tanto si quiero leer pongo php php puedo intercalar php en cualquier momento dentro de html y ahora escribo lo siguiente y ahora escribo vamos a verlo dejar que me concentré y digo archivó es igual a efe open agenda psv como applus a plus es no perdona lo que voy a hacer en primer lugar es leer y ahora digo vamos a ver el leer vamos a copiar un poco del código lectura y digo siempre que no hayas llegado al final lee me línea a línea vamos a verlo si está funcionando correctamente dejadme que ahorre líneas medir a juan coma este número coma este correo por tanto ya tengo una cabecera y tengo una lectura desde el archivo vamos a continuación a maquetar un poco este contenido este contenido está muy poco estructurado y por eso yo antes de llamar a php voy a crear una table voy a crear una tabla voy a mezclar php con una tabla html esta tabla tendrá una fila que tendrá titulares de tabla 1 2 y 3 que serán el nombre el teléfono y el email ahí está la tabla se ve mal pero eso es porque no he puesto ahí border es igual a 1 y with es igual al 100% ahí tengo nombre teléfono y email pero claro el contenido está fuera de la tabla porque no está maquetado con etiquetas cr y todo esto balear tengo un problema es el siguiente como meto yo aquí esto me devuelve el contenido de cada línea dentro d un elemento adentro de cada uno los elementos pero dentro de cada línea pero yo no quiero dividir con te resistes así que voy a hacer una cosa atención todos a la pantalla lo que voy a hacer es decir línea es igual a esto y ahora dentro de línea voy a hacer lo siguiente voy a hacer reemplazo es igual str place str replace es una función de php que reemplaza unas cosas con otras y ahora digo cuando te encuentres una coma reemplaza la con un té de tv dentro d línea ocurre que ahora mismo no me sé de memoria la sintaxis de str place por eso lo que hago es decir p h str replace y en ese terror de place compruebo que vamos a verlo algo más fácil bueno leamos la documentación oficial antes mix search es lo que debes buscar replace es con que lo debe reemplazar y saber si es de quien lo quieres buscar donde lo quieres buscar vale pues ahora digo lo siguiente eco usted punto reemplazo punto bebé donde el reemplazo lo que va a hacer es cada una de las comas y donde se encuentre una coma lo que va a hacer es cerrar columna abrir columna le he puesto una apertura en una versión al final porque no hay como al principio y como al final si todo esto ha ido bien cuando ahora guardo y recargo a cuidado cuidado ahí tengo un problema ha funcionado casi bien y es que tengo celdas pero no tengo el cierre de línea el cierre de línea va aquí tr si ahora guardo y recargo ahora si tengo juan teléfono email veo que algo me sobra por aquí no sé por qué ahora veré por qué pero ya tengo por aquí por lo menos el contenido maquetado dentro de una tabla se inspeccionó el elemento veré que hay una fila además una fila además no sé ahora mismo por qué porque al final parece como que quisiera ver una coma pero el caso es que no la hay bien de momento me voy a quedar la tabla así porque veo que de momento funciona esto quiere decir que yo era podría venir a la agenda y si pongo por ejemplo qué no sé javier tiene este número y tiene info javier puntocom comprobaremos como al leer aparecerá en un nuevo registro es decir ya soy capaz de tener una agenda telefónica de listar todos los registros pero ahora lo que quiero es no tener que añadir registros manualmente dentro de este archivo quiero añadir registros dentro de este mismo programa antes de acabar la tabla quiero poner un nuevo registro y quiero tener la capacidad de añadir un nuevo registro así que para ello voy a hacer lo siguiente en primer lugar me hago cuatro columnas aunque de una de ellas esté vacía me da igual meto una columna vacía en las en los titulares hemos visto que hay que hay un error con lo cual lo corrijo si esto se abre esto se cierra ahora hay cuatro elementos en la tabla pero los hay porque los quiero ahora sí voy a rellenar con uno vacío porque está vacío simplemente porque lo voy a usar al final está vacío de momento ahí pero porque lo voy a usar a la final atención cuando salgo de php digo tr y voy a hacer un formulario si quiero añadir un nuevo usuario lo tendré que hacer con un formulario por tanto un formulario que se abre y se cierra un tv que tiene un input type neymar nombre place holder nombre un tv que tiene otro tipo texto name teléfono creo que va ahora place holder teléfono un último y este tipo texto name gmail place holder email y por último habrá así un input de tipo submit si ahora guardo y recargo bueno en el forn le voy a decir action es igual a interrogante esto quiere decir que me lo envió a mí mismo eso es igual a post y yo hago lo siguiente recargo y veo como tengo aquí el listado de nombre teléfono email y tengo la capacidad de añadir un nombre un teléfono un email y enviar a donde lo voy a enviar cuando le dé al botón enviar a mí mismo le voy a enviar y se recarga esta misma página pero claro hemos diseñado el formulario tengo un trozo de php que se encarga de leer la base de datos en este caso la base de datos un archivo de texto pero necesito otro trozo final de php que se encargue de leer la base de datos de perdón escribir en la base de datos escribir todo aquello que provenga de este formulario lo que tengo que hacer ahora es trabajar en cualquier parte del archivo para escribir un elemento más en la agenda por ejemplo lo voy a poner aquí arriba y ahora aquí arriba me recupero el archivo de escritura php lo copió y digo lo siguiente trabajo el archivo agenda punto csv ahora sí en modo a plus en modo añadir efe/archivo no voy a escribir esto es un archivo que voy a escribir escribo lo siguiente post nombre es decir lo que he enviado por post con nombre coma porque es un archivo separado por comas post el teléfono y los separó mira voy a desde elche hasta aquí por comas y post email es decir dentro del archivo lo que quiero escribir es lo que he enviado el formulario del nombre con lo que he enviado el formulario del teléfono con lo que he enviado como email y baja la línea debajo cierro el archivo ya lo volveré a abrir más adelante pero se ha acabado con él de momento lo cierro y ahora escribo lo siguiente cuidado en este caso lo que me puede pasar es que el programa me dé un error porque está esperando a que encuentre un post nombre igual no existe así que digo sí y set si existe post un hombre en ese caso ejecuta este código y si no existe no hagas nada así que vamos a verlo ya tenemos una línea agenda voy a [Música] recargar y ahora quiero crear al usuario un nombre con j jacobo el usuario jacobo tiene el teléfono 11 11 tiene el mail info jacobo puntocom si todo va bien y el programa no genera ningún error le digo enviar y aquí ya me aparece jacobo 1 1 1 1 4 baja como puntocom tengo también a julia con el teléfono 22 22 22 y el email info julia puntocom y si ahora le voy a enviar comprobamos cómo voy añadiendo registros a mi agenda atención si ahora voy a agenda csv comprobaréis como ahora jacobo y julia forman parte de la agenda así que aunque mínimo pero ya tengo un programa completo ya tengo un programa que es capaz de leer que es capaz de escribir y que puede persistir y que incluso os digo más es un programa colaborativo ahora mismo quizás no lo es porque estamos trabajando en nuestro propio ordenador nosotros podemos tocar pero si cogemos este script y lo subimos a un servidor donde múltiples personas pueden acceder podríamos generar una agenda telefónica varias personas añadimos registros a la misma base de datos lo que hemos hecho hasta ahora dentro de las cuatro operaciones más comunes dentro de una base de datos que es el modelo cruz donde el modelo cruz es create read create read update y delito que es crear leer y actualizar y eliminar hemos creado las dos primeras las dos primeras operaciones que son crear y leer nos faltaría actualizar y eliminar solo podemos dejar incluso para base de datos directamente pero hay una quinta operación que aunque no se considera propia de las cuatro principales finalmente lo es que es buscar yo quiero crear un buscador porque yo igual ahora mismo está bien porque tengo una agenda con seis elementos pero imagínate que empiezo a escribir empiezo a escribir y llega un momento que tengo 200 elementos una de las ventajas de la informática es que hace mucho más que una mera guía telefónica tú puedes buscar y filtrar rápidamente los otros entre por ejemplo 200 mil clientes digamos o 200 mil entradas de la agenda voy a programar por tanto un pequeño buscador para ello me voy a index y por ejemplo arriba justo abajo justo arriba del table digo esto es tabla listado de clientes ahora voy a hacer lo siguiente esto va a ser el buscador de clientes lo puedo buscar por ejemplo por el nombre y ahora digo forma action es igual a interrogante mejor es igual a post y ahora digo input tal es importante name no se puede llamar nombre porque el nombre ya lo estoy usando aquí así que pongo nombre buscar input type submit y digo place holder e introduce el nombre del usuario a buscar cuidado porque lo único que pasará es que si guarde recargo cuidado se guardó y recargo introduzca el nombre del usuario a buscar no se ve pero está ahí verdad ahora hago lo siguiente br br simplemente para separar para separar y ahora voy a hacer allí un pequeño buscador php php para hacer un pequeño buscador me voy a copiar esta estructura esa estructura es la que lee y voy a decir agenda csv línea es igual a esto y ahora voy a decir esto de aquí mira me cargó esto y digo explotado es igual a explorer o explorer o split los dos funcionan coma como línea que haces clic si me voy a hp split o php explorer hace básicamente lo mismo lo que hace es definir cuál es el patrón para cortar cual es el patrón para partir y de dónde lo quieres partir es decir cada vez que te encuentres una coma cada vez que te encuentres una coma parte lo eso quiere decir que ahora por ejemplo nombre es igual explotado al primer elemento de la matriz el teléfono es igual ha explotado uno e mail es igual a explotado 2 es decir cuando hago un split lo parte muy bien y dónde lo mete la misma variable como parte lo convierte en una matriz y mete cada uno de los elementos en un inicio de la matriz así que ahora digo lo siguiente nombre es igual a lo que te he enviado por nombre buscar y cito lo que te he enviado por nombre buscar en ese caso y sólo en ese caso dime eco el nombre es punto nombre punto br el teléfono es punto teléfono y el email es punto email si ahora guardo y recargo veré lo siguiente nombre buscar a 99 por supuesto nombre buscar no está definido así que digo sí y si tocamos aquí y sepsi existe el post nombre buscar si he enviado el formulario porque igual no he enviado el formulario en ese caso ejecuta me todo este código es decir si yo vengo aquí yo no he enviado un hombre a buscar yo no he buscado nada así que si no he buscado nada no me intentes ejecutar todo esto de aquí por eso digo solo si está puesto solo si existe nombre buscar en ese caso ejecuta en el buscador sin nadie ha perdido nada no ejecute es ningún buscador bien si ahora pongo por ejemplo juan comprobemos si funciona recargo y me dice bueno ahora veremos qué pasa y el nombre es juan el teléfono es este el mail es info -juan puntocom si busco jose el nombre es josé el teléfono es este y el mail es info jose puntocom es decir como podéis ver independientemente de los notice que me dé por ahí ahora veré a qué se deben pero independientemente de estos notice que luego no aparecerían lo que ocurre simplemente es que tengo a parte del listado y aparte de la inserción un pequeño buscador buscador cutre ahora mismo si queréis pero buscador al final acabó javier con su teléfono y su correo independientemente de luego el listado y luego la inserción y oye si no buscas nada pues simplemente no aparece ahí es decir si no buscas nada no es cierto que esté puesto post nombre buscar y por tanto no se llega a ejecutar ese código por último le podemos dar a este ejercicio un poco de estilo simplemente escribiendo algo de style en la cabecera por eso si queremos hacer un estilo interno así que yo ahora aquí podría poner todo este contenido dentro de un contenedor voy a poner un div al final para que el contenedor lo contenga todo y ahora podría hacer algo como por ejemplo el contenedor tendrá un wifi del 80% tendrá un parking de 10 píxeles tendrá un background white y tendrá un martín auto y quizás un borde radios de 10 píxeles y tal vez un box salou de 0 píxeles 10 píxeles 20 píxeles black con esto lo que consigo es que ese contenedor esté centrado en la pantalla ahora veremos qué pasa con esta tabla no pasa nada vamos a verlo todo bien si ahora lo que voy a hacer es por ejemplo el body y le digo qué va a tener lo siguiente el body va a tener un background gray y un font family areal para que la letra sea de palo voy a decirle un padre hijo un poquito mayor y voy a decirle que bueno el wef claro es que aquí empuja demasiado bien igual lo puedo solucionar table le quito los parámetros del table que los había puesto porque no tenía css pero ahora tengo css y le digo wifi es igual a 100 y font-size es igual a 10 píxeles y ahora tengo ahí la tabla se me sale un poco por el input también le puedo decir lo siguiente y es table input los inputs que estén dentro de la tabla with 25% y claro cuidado 100% para que cojan el 100 de la celda y así no se me salga incluso le puedo decir table trv es decir el td que está dentro del tr que es dentro de la tabla le digo un parking de 10 píxeles para qué espacio un poco más si quieres no 10 pero 4 por ejemplo y así fijaos que poco a poco ahora puedo decir con tener oro input es decir sólo con el input que está justo dentro del contenedor le digo wifi por ejemplo 80 por ciento para que sólo ese de ahí vamos a ver que no está en el contenedor donde está el contenedor form input ahora si le digo que ocupe el 80 para que ese buscador sea un poco más grande también le puedo decir porque no como en cualquier proyecto web prácticamente que hago que el h1 y el h2 tengan un padding de 0 píxeles y tengan un margen de 0 píxeles para que no se coman tanto espacio y ahora sí lo que haría es quizás poner un par de veces para que haya un poquito de espacio entre el título el buscador y la tabla en definitiva podéis ver cómo con un poquito de css ese ejercicio que con php puro y duro se hace tan feo pues se puede maquetar hasta donde queramos o hasta donde sepamos usando el lenguaje css de marcado presentación al

vamos a empezar a trabajar conectándonos a base de datos y para ello lo primero que tenemos que hacer es aprender cómo funciona una base de datos donde el motor de base de datos más común para conectar con php suele ser mysql no es el único que puede conectarse pero suele ser el más común en primer lugar vamos a comprobar si tenemos nuestro servidor se ha arrancado pero ahora mismo yo no recuerdo si arrancamos o incluso instalamos como servicio el motor de base de datos de mysql así que voy a ir a la carpeta de disco duro local voy a ir a la carpeta samp voy a ir a abrir el ejecutable de sham control e incluso os digo más lo voy a ejecutar como administrador para en un momento dado momento en un momento dado incluso poder ejecutarlo poder instalarlo como servicio bueno estoy arrancando por tanto el panel de control vamos a ver si aparece por aquí y en su momento arranque apache es más deje apache abierto como servicio pero no hice lo mismo con mysql porque hasta ahora estábamos aprendiendo a programar con php y no con mysql mysql es un motor de bases de datos que viene integrado con el samp y del cual seguro que tenéis soporte en el proveedor de hosting que hayáis contratado así que lo que voy a hacer es pinchar esta pequeña cruz para marcar el servicio como instalado es decir que cada vez que arranque mi ordenador arranque también con mysql esto será efectivo con toda probabilidad a partir del próximo arranque del sistema operativo así que mientras tanto ahora mismo lo que voy a hacer es pulsar start para asegurarme que mysql arranca correctamente y por defecto siempre me arranca el puerto 3 3 0 6 si tengo alguna aplicación no es muy común pero si tengo alguna que por lo que sea esté usando el puerto 330 6 le puedo encontrar con el problema de que no pueda arrancar mysql pero hay muy pocas aplicaciones que usen este puerto con lo cual lo normal es que arranque correctamente para hacer por tanto lo que vamos a hacer a continuación necesitamos tener tanto apache como mayor sql arrancados correctamente y de color verde ahora que tenemos mysql arrancado vamos a ver que dentro del panel de control de shampoo existe una utilidad una herramienta dentro del último grupo llamado tools llamada php maya admite que hp miami es una de las maneras más sencillas de empezar aprendiendo mysql porque lo que nos proporciona es una interfaz visual muy sencilla de usar muy fácil de utilizar para crear nuestras primeras bases de datos y entender de la manera más fácil posible cómo funcionan lo que estoy viendo aquí por tanto es lo que tengo en la dirección del local host php my admin es una utilidad que viene con sanz desde hace muchas versiones por tanto no hace falta incluso ni tener la última con que tengamos una inferior a 4 ó 5 años de antigüedad pues viene predeterminada y tiene las siguientes partes lo que estoy viendo aquí es una interfaz visual para gestionar mi servidor mysql y veré que en la parte de la izquierda tengo un listado de las bases de datos que ahora mismo hay creadas vosotros no habéis creado ninguna base de datos pero cuando instaléis mysql por defecto viene con unas cuantas bases de datos de prueba algunas son de prueba como por ejemplo colección de cds o como por ejemplo tests algunas son de sistema como por ejemplo information esquema o performance esquema en definitiva yo nunca voy a tocar las masas de datos que vienen por defecto con samp lo que haré es trabajar sobre mis bases de datos que voy a crear a partir de ahora si a la izquierda tenemos un listado de las bases de datos que vienen por defecto en el sistema a la derecha tenemos una serie de botones con las cuales podemos gestionar podemos aplicar operaciones sobre esta base de datos para empezar y siempre una mirada arriba en la parte de arriba se me informa de donde estoy ahora mismo ahora mismo estoy en el servidor 12 7.0 puntos 0.1 que equivale a la ip de este servidor local así que hagamos lo que hagamos ahora lo veréis siempre tendremos que echarle un vistazo ahí arriba en primer lugar voy a empezar por el primer botón de esta fila de botones de ese menú de botones llamado bases de datos así que en bases de datos veré por una parte que puedo realizar operaciones sobre las bases de datos ya existentes ya sabéis que esto no lo quiero hacer o bien puedo crear una base de datos nueva así que voy a empezar creando me una primera base de datos para comparar con el ejercicio que probablemente hemos hecho anteriormente el de agenda voy a llamar a esta base de datos agenda cuidado atención porque se sigue una regla de nomenclatura que es muy parecida a las reglas de declaración de variables en los lenguajes de programación y es que se puede poner agenda uno pero no se debe poner una agenda así que vamos a hacer que siempre las bases de datos empiecen con un carácter alfanumérico es decir con una letra puedo poner agenda a uno puedo poner la agenda guión bajo uno pero en definitiva no debería empezar con un número voy a llamar por tanto a esta base de datos agenda ya continuación un parámetro algo más extraño es el cotejamiento el cotejamiento veréis que tiene una gran cantidad de opciones preparadas para crear semos y simplemente nos dice con qué juego de caracteres vas a operar es decir qué juego de caracteres vas a introducir en esta base de datos por lo que es lo mismo sobre qué país vas a trabajar si yo por ejemplo entro dentro de ute efe 32 y juegos para croata checo danés esperanto estonio alemán húngaro islandés lituano persa polaco románico rumano eslovaco en definitiva son juegos de caracteres optimizados para los caracteres que usan cada idioma particular bien nosotros lo que vamos a hacer es ir abajo del todo hasta que encontremos en el penúltimo lugar un juego de caracteres llamado f8 el lute efe 8 es el correcto para europa europa occidental y prácticamente todo el mundo occidental dentro de este juego de caracteres por 13-8 y si bajamos a la s encontraremos spanish y spanish 2 español y español e internacional en principio nos da igual cualquiera de los dos podemos cualquiera de los dos así que creó una base de datos llamada agenda y le digo que voy a trabajar en 13 8 spanish qué pasa curiosamente si no escoges ningún cotejamiento cuando creas una base de datos lo que ocurre es que por defecto se pone el cotejamiento en idioma sueco y esto es así porque mysql originalmente antes de ser comprada por sam y antes a su vez de ser comprada por oracle era una empresa sueca por tanto un poco como un guiño al programa original por defecto la cotización del corah miento se pone en sueco vale pero si le decimos que vamos a trabajar en defensa en español no habrá ningún problema una vez que he puesto el nombre de la agenda y le he dicho el cotejamiento de caracteres voy a decirle crear tras lo cual atención muy importante la base de datos agenda ha sido creada y podré comprobar por aquí a la izquierda como sin darme cuenta prácticamente ha aparecido una nueva base de datos llamada agenda pero atención y aquí es donde todo el mundo comete el error por haber creado una base de datos no quiere decir que automáticamente haya entrado dentro de ella fijémonos siempre aquí arriba que me dice que yo no estoy dentro de una base de datos yo estoy dentro del servidor de la raíz del servidor así que lo que tengo que hacer es pulsar aquí agenda y ahora comprobaremos cómo estamos dentro del servidor pero también dentro de la base de datos agenda observo que no se han encontrado tablas en la base de datos por supuesto cómo se iban a encontrar tablas si la acabo de crear desde cero esto es lo que tiene que ocurrir y para cerrar este vídeo voy a decir que si en algún momento en algún caso creáis una base de datos y os equivocáis o bien al poner el nombre o bien al poner la colación no pasa nada porque todo esto más adelante se puede modificar con relativamente poco impacto más traumático es cuando ya tienes una aplicación en funcionamiento estando la aplicación en funcionamiento cambiar parámetros como estos no digo que no se pueda digo que es traumático digo que nos puede dar errores pero por lo menos veréis que mysql es un motor de base de datos que en cualquier momento nos deja cambiar prácticamente cualquier tipo de parámetro como os podéis imaginar lo primero que solemos hacer al entrar dentro de una base de datos vacía es crear tablas si el servidor contiene bases de datos las bases de datos a su vez contienen tablas así que en este caso voy a crear una tabla dentro de la agenda llamada contactos al crear la tabla de contactos se me pide que introduzca cuál es el número de columnas así que cuál es el número de columnas la cuestión es no lo sé yo de momento lo que suelo hacer siempre es poner un número 5 o poner un número 10 sabiendo que si luego me falta en columnas voy a poder añadir más columnas tantas como quiera y si luego me sobran aquellas columnas que se queden vacías simplemente el programa las va a descartar así que de momento por ejemplo voy a poner 5 campos y pulso continuar una vez que especificado que voy a crear estos cinco campos aparece esta ventana en la que se me invita a indicar cuál es la estructura cuál es la nomenclatura de cada uno de esos campos os voy a decir que vais a tener bastante libertad para especificar cuál es la estructura de vuestra tabla dentro de la base de datos pero sin embargo os voy a poner una condición solo una condición y de hecho nos la pongo yo realmente la pone mysql en todas las tablas que creemos salvo en algún caso y porque esté justificado pondremos siempre un primer campo como un identificador único y autonómico por tanto voy a poner en la primera columna veis como he pedido 5 de abarth en cinco huecos el nombre de columna y de el ide es algo así como el dni de ese registro es un número único para identificar inequívocamente a ese registro es algo que no es obligatorio dentro de mysql pero aumenta o contribuye a aumentar la integridad de los datos es decir el asegurar que vamos a poder localizar en un momento dado un dato sin margen de error para que haya duplicados a continuación tengo que tipificar el dato tipificó el dato diciendo qué tipo de dato va a ser hay cuatro grupos principales creo que sí son cuatro que son de interés número entero marchar de pequeño texto texto de texto grande y de it para fecha en mi caso como el identificador va a ser un número entero voy a dejarlo como int como integral aunque también os tengo que decir que el motor mysql viene con muchos otros tipos de datos como por ejemplo tiny int entero minúsculo entero pequeño medio entero gran entero decimal de coma flotante de doble precisión número real bit bull ‘enano’ fechas cadenas e incluso datos espaciales como por ejemplo geometría para introducir coordenadas tridimensionales en principio por tanto vamos a poner un número entero ya continuación ya en este parámetro en longitud de valores es donde mucha gente se acaba confundiendo voy a poner el número de caracteres que podrá tener ese número si yo pongo 2055 la gente suele pensar que el número entonces podría ir de 0 a 255 y no es así es el número de caracteres que puede tener mi número por tanto puede tener 9 y 254 9 es detrás es una cifra con 255 huecos con 255 números así que en mi caso lo que voy a hacer es poner por ejemplo 10 10 equivale a tener 99 millones de contactos por eso digo que perdona 99 millones de contactos no equivale a tener un billón de contactos no hasta 9 hasta 10 millones de contactos por tanto 10 parece un número minúsculo para introducir una idea pero con 10 ya puede tener 10 visiones de contactos lo cual está bastante bien y por último para este campo y atención solo para el campo de ive lo que voy a hacer es aquí un poco más a la derecha voy a decir que este campo es un índice primario y es auto incremental es un índice primario ya que es algo así como el dni de la tabla es el campo que sirve como identificador primario de la tabla y además auto incremental si aparece un registro con el número uno quiero que a continuación el siguiente que ponga sea el número dos y el siguiente el número tres y no lo quiero gestionar eso yo manualmente quiero que me lo gestione el motor automáticamente así que una vez que tengo este primer campo voy a continuar con los demás puedo poner por ejemplo nombre y cuidado nombre no puede ser un campo de número entero así que en este campo voy a poner marchar no texto ya que marchar equivale a un texto pequeño digamos un párrafo de un libro mientras que texto equivale un texto grande puede ser un libro en sí mismo así que marchar y ahora cuántos caracteres ponemos pues por ejemplo voy a poner 255 yo en este caso solo aplicar la regla de más vale que sobre que falte es decir más vale poner un campo grande y que luego no haya nadie que tenga un nombre de 255 caracteres que no poner 10 caracteres y que alguien tenga un nombre de 12 caracteres no pueda guardar su campo no puede almacenar su campo por tanto por eso os decía que suelo seguir la regla de más vale que sobre que que falte voy a advertir una cosa y es que estoy haciendo esta regla un poco para curarme en salud y saber que no voy a tener problemas al introducir datos pero esta regla que estoy tomando un poco a la ligera iría en contra de la eficiencia si yo estoy usando mucha más memoria de la que realmente voy a necesitar en lo que puedo acabar finalmente es en una base de datos que gaste mucha más memoria de la que realmente necesitaría por tanto no digo que no nos vayamos no nos vamos a preocupar de eso no nos vamos a preocupar ahora que es nuestra primera base de datos hay una hay una regla dice que hablaremos de ella que dice que la optimización prematura es el origen de todo el mal entonces preocupémonos de saber hacer bases de datos y más adelante nos preocuparemos de optimizar las tengo ya por tanto como veis aquí el segundo campo que es nombre así que por qué no podría hacer apellido uno sería un campo marchar de 255 caracteres apellido 2 sería un campo marchar de 255 caracteres ya tengo por tanto tres campos para almacenar un nombre y dos apellidos los nombres de las columnas no deberían empezar con un número fijándonos que he puesto apellido 1 y apellidos y esto es perfectamente válido por otra parte podría hacer que los nombres de las columnas empezarán con mayúscula o en definitiva que tuvieran mayúsculas sin embargo yo por costumbre lo que suele hacer es ponerlo todo en minúsculas por una razón muy sencilla ahora estamos creando una base de datos pero como os podéis imaginar nuestra finalidad última es conectarnos a esa base de datos desde un lenguaje de programación cuando nos conectemos veréis que cometes errores de sintaxis derivados de escribir mal el código del programa pero hay otra serie de errores que son errores lógicos o errores de sincronización que no dependerán del lenguaje de programación así que muchas veces nos pasa que ponemos apellido con mayúsculas en la base de datos pero llamamos apellido con minúsculas desde el lenguaje de programación y de repente por alguna razón que desconocemos no encuentra el dato que estoy pidiendo y me puedo tirar media tarde la tarde entera para al final darme cuenta que él una falta de sincronización en las mayúsculas así que lo que suelo hacer para evitar este tipo de problemas es no poner mayúsculas en los nombres de los campos evidentemente dentro de los datos de la tabla si hace falta pondré mayúsculas y pondré ñ y pondré acentos todos los que haga falta pero como regla para evitar estas colisiones no solo poner mi acentos ni en es ni mayúsculas dentro de los nombres de las tablas creamos a continuación unos pocos campos más como por ejemplo el teléfono teléfono iría con acento pero evidentemente lo que voy a hacer es no ponerlo con acento cuidado porque teléfono podría ser un campo entero pero qué pasa si pongo el 34 el signo más ya no es un número de entero qué pasa si el prefijo del país lo pongo entre paréntesis el paréntesis ya no es un número entero por tanto qué pasa si alguien me separa los números del teléfono con guiones de lección ya no es un número entero así que a menos que introduzca una regla de validación con la cual obliga a los usuarios a poner todo y caracteres enteros si no realiza esa regla de validación por defecto voy a especificar marchar y una vez más tendré que ver cuántos caracteres como máximo puede tener un teléfono por defecto voy a poner 20 parece que tengo ahora un problema y es que me he quedado sin columnas había especificado que quería cinco columnas iniciales pero ocurre que de repente me doy cuenta de que necesito más por ejemplo me harían falta dos columnas más para poner el teléfono y para poner el email así que lo que puedo hacer muy fácilmente es aquí arriba agregar una columna no digo que quiero agregar dos columnas pulsa el botón continuar y comprobamos cómo en un momento aparecen dos columnas más pues no había dicho que lo que suelo hacer es poner cinco o diez y si luego me faltan simplemente puedo añadir nuevas columnas dinámicamente con esta utilidad voy a escribir ahora email donde el email será un marchar será un texto y va a tener como mucho 255 caracteres y por último voy a poner teléfono email y dirección y la dirección va a ser simplemente un marchar de 255 caracteres ya tenemos por tanto los siete campos que necesitamos para esta tabla inicial y una vez que hemos seleccionado estos campos podremos pasar a las siguientes opciones comentarios de la tabla no son en absoluto obligatorios pero siempre son recomendables en esta tabla vamos a guardar los contactos de la agenda como motor de almacenamiento en las últimas versiones de mysql viene por defecto un motor de base de datos llamado y no debe en las en las naciones más antiguas de mysql venía mi isám no merckx más aunque vine aquí en cualquier momento más adelante lo podremos cambiar pero por defecto el setting que viene por defecto y no debe es correcto en cuanto a cotejamiento yo podría indicar un cotejamiento diferente del general para esa tabla concreta por ejemplo imagínate que a una tabla llamada usuarios coreanos en este caso lo que haría es el cotejamiento de esa tabla ponerlo en coreano si no pongo nada se asume que el cotejamiento de esa tabla es el mismo que el de la base de datos principal y en definición de partición en principio todavía no vamos a poner nada así que por último voy a pulsar el botón guardar para guardar estos cambios veremos por tanto lo podemos ver aquí que ahora nuestra base de datos agenda tiene una tabla contactos se hago clic en la tabla contactos veremos que estoy atención ahí arriba en el servidor local en la base de datos agenda y en la tabla contactos y además aparece el comentario opcional que hemos puesto en esta tabla vamos a guardar los contactos de la agenda y simplemente aparece un mensaje que no es de error y dice mysql ha devuelto un conjunto de valores vacíos es decir 0 columnas esto quiere decir simplemente que has creado una nueva tabla pero nuevas metidos datos por tanto es normal que el resultado sea de 0 columnas es decir el resultado sea vacío una vez que tenemos nuestra tabla recién creada y por supuesto está vacía depende de la versión de php miami en la que estéis quizás os permite entrar dentro de la pestaña examinar y os dice que no hay nada o alguna versión de péretz my admin lo que puede hacer es saltar directamente a la segunda pestaña de estructura y no dejarlos entrar en examinar hasta que no tengáis registros es un poco lo de menos lo que vamos a hacer ahora es empezar trabajando con las cuatro operaciones básicas de una base de datos de tipo sql y evidentemente mysql es una de estas bases de datos las cuatro operaciones son las o prefieres cruz que son create read update y the lead crear leer actualizar y eliminar la primera con la que vamos a trabajar por tanto es create es crear vamos a insertar la pestaña de insertar me permite insertar nuevos registros dentro de la base de datos atención el campo y de no quiero que lo toquéis porque el campo y hemos especificado que va a ser auto incremental o sea que lo va a gestionar automáticamente la base de datos ahora quiero introducir un registro que va a ser juan garcía lópez su teléfono es este de aquí su email es info -juan puntocom y su dirección es calle de juan número 4 si pulso continuar y no quiero que introduzcas nada dentro de y de si pulso continuar observaréis que aparece un mensaje de validación donde dice se ha insertado una fila y la ide de la fila insertada es 1 la y de la clave primaria auto incremental de esa fila es 1 aparece algo muy curioso aquí que es un montón de texto que lejos de ser un error es una sentencia de inserción sql veréis cuando habéis sido insertar ya habéis insertado un campo lo habéis hecho mediante un formulario visual lo que hace el programa es decirte mira que sepas el comando sql correspondiente a la acción que acabas de hacer es este de aquí y esto es algo que me gustaría que no si queréis ahora mismo pero a partir de ahora poco a poco cada vez que hagamos algo en sql nos vayamos fijando en cuál es el comando sql cuál es la sentencia sql correspondiente porque al final tendremos que gestionar mysql desde el lenguaje de programación y desde el lenguaje de programación no habrán estas ayudas que aparecen en medias como formularios no es algo que quiero que hagáis ya mismo pero quiero que poco a poco os vayáis fijando para ver que siempre que insertamos algo en una base de datos si os fijáis es insert into agenda contactos o sea insertar dentro de la base de datos agenda tabla contactos que tiene estos campos de aquí los valores y estos valores de aquí tengo que decir que el lenguaje sql la base de datos mysql son en principio lo menos atractivo de aprender para todo el mundo pero por puro desconocimiento porque esos pones a leer sentencias sql veréis que si sabes inglés prácticamente sabes sql son sentencias escritas en un lenguaje como veréis bastante claro ya tengo por tanto la primera inserción pero no contento con esto quiero realizar un par de inserciones más así que me vuelvo a la pestaña de insertar y ahora quiero insertar a jaime con el apellido lópez pues no sé juárez su teléfono es este su email es info jaime puntocom y su dirección es calle de jaime número 54 pulso continuar y vuelvo a esta ventana en la que se me informa que he introducido el registro correctamente voy a insertar por último dentro de este vídeo un par de registros más tengo a jose tengo apellido no sé garcía márquez su teléfono es éste su email info jose puntocom y su dirección es calle de jose número 6 y por último un cuarto registro ya sabéis que nunca tocó el id porque es auto incremental quiero que lo gestione automáticamente la base de datos tengo a julia su apellido es ruth su apellido es esa ropa y el teléfono es estado aquí el email es info julia puntocom y la dirección es calle de julia número 67 así que pulso continuar y ya tengo cuatro registros correctamente insertados dentro de la base de datos una vez que hemos aprendido aunque sea a nivel de formulario a crear nuevos registros dentro de la base de datos vamos a aprender a leer los fijados que dentro de la estructura cruz la ce es de create de crear la r es de ruiz de leer así que para leer la base de datos es decir para obtener un listado de la base de datos simplemente tengo que ir a la pestaña examinar y dentro de la pestaña examinar en cualquier momento voy a ver un listado con los registros que hasta ese momento e insertado puede observar que hasta el momento han sido cuatro y es más puedo observar que el número ide se ha asignado de manera completamente automática e incremental sí ya sabemos crear y ya sabemos leer nos faltan las dos operaciones que son actualizar update y eliminar de lead para actualizar un registro simplemente lo que tengo que hacer es evitarlo así que vengo a la edición del registro y digo que por ejemplo este cuarto registro pues o editar y digo que su teléfono va a ser 1 1 1 1 1 1 simplemente pulsó el botón continuar y comprobaréis como el teléfono ha sido actualizado correctamente lo único que tengo que hacer para actualizar un registro por lo menos a través de la interfaz de usuario pulsar editar y en el formulario que sale a continuación realizar la modificación que quiera y por último botón continuar igual de fácil mediante el formulario que es realizar una actualización o una edición es también realizar un borrado si yo quiero eliminar un registro simplemente tengo que pulsar el botón borrar como cualquier borrado de datos siempre es peligroso antes de realizarlo el programa me pregunta que confirme realmente deseo eliminar desde agenda donde el ide es igual a 4 en este caso voy a pulsar ok tras lo cual comprobar que he eliminado correctamente el cuarto registro hemos visto por tanto lo fácil también que es actualizar y que es eliminar las cuatro operaciones básicas por tanto son insertar leer actualizar y eliminar pero actualmente hay una operación que se considera imprescindible que es la operación de búsqueda la búsqueda aunque no lo parezca realmente es una selección es una selección con condiciones por tanto lo que voy a hacer a continuación es simplemente decir que por ejemplo quiero buscar un registro cuyo nombre sea hwan por tanto continuó y aparece el registro o los registros porque podría haber varios que cuadran con esa condición que cuadran con juan también puedo atención buscar elementos que empiecen con jota pero si yo pulso buscar si yo pulso continuar no quedará ninguno esto es por lo siguiente cuando yo pongo un operador de tipo like lo que estoy especificando es que quiero una coincidencia bastante exacta en cuanto en cambio cuando pongo un like con almohadillas lo que va a aparecer es todos aquellos nombres que tengan jota en el nombre así que me aparecen juan jaime y jose si nos fijamos y es más si leemos el enunciado dirá select el from contactos selecciona melo todo de contactos donde el nombre tenga una jota así que como veis por tanto finalmente una búsqueda básicamente es una selección de base de datos pero introduciendo condiciones donde una manera de introducir condiciones poner la orden en la cláusula web algo muy muy importante cuando creamos una base de datos y antes de aprender nada más deberíamos hacerlo ya es introducir privilegios es decir especificar qué usuario o qué usuarios tienen acceso a esa base de datos y especificar qué puede hacer cada usuario concreto los privilegios dentro de una base de datos se establecen de la siguiente manera en primer lugar no quiero estar ya en la tabla contactos quiero estar en la base de datos agenda ya que no quiero establecer privilegios por nada la concreta quiero saber es el privilegios para una base de datos concreta así que en primer lugar hago clic aquí arriba o hago clic aquí a la izquierda para que aquí arriba ponga a base de datos agenda a continuación veo que ha desaparecido privilegios de esta barra pero esto es porque en mi pantalla no me caben más botones por eso me voy a más y observó que dentro de más existen todos aquellos botones que no cabían previamente y me voy a privilegios depende de qué resolución de pantalla tengáis vosotros igual os ha cabido aquí en mi caso no dicho por tanto privilegios y observo que ya existe un usuario llamado root en castellano raíz con acceso a la base de datos el usuario raíz es un usuario que existe siempre en mysql es el superusuario el súper administrador que administra todo el sistema de base de datos en este servidor ahora bien los sistemas windows difieren de los sistemas unix en cuanto a que por ejemplo en champ para windows tu puedes crear un ph promedia admin tu puedes instalar como yo voy a instalar una base de datos y no se te obliga a poner una contraseña de administración es decir cuando yo estaba en champ simplemente he entrado dentro del próximo media min y nunca se me ha perdido una contraseña si alguna vez instalar mysql php inmediatamente sobre un sistema unix por ejemplo un linux por ejemplo mac os puede ocurrir que os obligue a poner una contraseña de superusuario al instalar y no os deje entrar si no ponéis la contraseña correcta por tanto en este caso para que ahora mismo estoy con sap y estoy en windows es normal que yo haya entrado como root y no se me haya pedido de la contraseña no es una práctica muy segura pero tengamos en cuenta que estoy con un servidor de prueba no con un servidor de producción en todo caso nunca nunca nunca debería conectarme a una base de datos como root por tanto lo que voy a hacer es agregar un nuevo usuario para esta base de datos al pinchar sobre agregar usuario aparece este formulario donde define cuál es mi usuario por tanto nombre voy a ser poco original para que cuando me conecte desde la programación recuerde los datos el nombre de usuario es agenda usuario como os podéis imaginar este es un nombre muy inseguro porque cualquier hacker que quisiera reventarme en la base de datos probando probando podría bueno agenda y usuario verdad pero ahora mismo nuestra intención es a aprender mysql más adelante nos preocuparemos de la seguridad cuál es el servidor el servidor es local por tanto el hijo local y observo como por aquí aparece el localhost cuál es la contraseña atención la contraseña es agenda password confirma la contraseña agenda password y atención si ya habéis rellenado este campo de contraseña ya habéis confirmado la contraseña no es necesario generar contraseña porque eso generaría una nueva así que no pulses ahí base de datos para el usuario otorgar todos los privilegios para esta base de datos agenda y por último no voy a marcar nada de esto pero simplemente podría elegir especificar cuáles son los permisos concretos para un usuario por ejemplo podría seleccionar pero podría no tener permiso para insertar o no o no tener permiso para actualizar o no tener permiso para eliminar podría crear por no alterar ni eliminar ni crear rutinas ni ejecutar no voy a poner nada y al no poner nada se me asignan todos los permisos o simplemente deciros que en un momento dado se pueden crear usuarios con limitaciones limitaciones en el tipo de operaciones que puedo realizar o limitaciones en los recursos gastados por ejemplo el usuario no puede hacer más de tantas peticiones por ahora más de tantas actualizaciones por ahora más de tantas conexiones por ahora y más de tantas conexiones de usuario por ahora sí está a cero cero quiere decir infinito pero quiere decir que este usuario puede hacer las peticiones actualizaciones y conexiones que quiera en principio como ahora mismo estamos creando una base de datos para conectarnos nosotros como administradores vamos a dejar todo esto a cero imaginaos que un día hacéis una base de datos para una empresa muy grande donde hay muchos trabajadores y cada uno en un momento dado puede empezar a realizar peticiones a lo loco podría ser que si se juntan muchos trabajadores a la vez se podrían tumbar el servidor de bases de datos podrían pedirle al servidor más de lo que puede ofrecer por eso en ese caso nos interesaría establecer limitaciones pero de momento no lo vamos a hacer así que vamos a pulsar continuar y vamos a finalizar la creación de este nuevo usuario para esta base de datos finalmente los botones de por ejemplo simplemente una tabla los botones de insertar buscar borrar editar están muy bien porque nos permiten gestionar visualmente nuestra base de datos pero tenemos que saber que finalmente nuestra base de datos no la vamos a gestionar visualmente sino que la vamos a gestionar mediante el lenguaje sql cuando lleguemos al lenguaje de programación ahora a continuación nos veremos por tanto un buen entrenamiento para ver las bases de sql antes de saltar al lenguaje de programación es pinchar en esta pestaña donde tienes un pequeño campo de pruebas y donde puedes empezar a probar cosas dentro de sql fijaos que tenéis las cuatro operaciones principales select all select lo que quieras en definitiva seleccionar o lo que es lo mismo leer insertar e insertar registros update actualizar registros de lead eliminar registros vamos a empezar con la selección más sencilla que es select asterisco asterisco quiere decir todo from contactos así que en este caso lo que estoy haciendo simplemente es especificar que quiero listar la tabla de contactos pulso continuar y si todo ha ido bien el resultado de esta petición es simplemente un listado si os fijáis mirad cuando el pulso en examinar básicamente tengo eso básicamente tenía select all from contactos seleccionar todo de contactos ahora cuando seleccionó todo de contactos puedo empezar a establecer condiciones una tabla una cláusula de condición por ejemplo el software así que voy a decir where nombre es igual comillas comillas a juan el nombre de la columna no hace falta que se ponga entre comillas pero el valor que se está buscando sí que debe ponerse entre comillas a menos que fuera un número y como en este caso no lo es pues hay que poner comillas estoy realizando una búsqueda selecciona velo todo de la tabla contactos pero ojo donde se cumpla la condición de que el nombre sea juan pulso continuar y me encuentra correctamente el registro juan acá vamos a hacer por tanto una búsqueda con una condición usando sql más cosas además de where no en lugar de sino además de where tengo otras cláusulas como por ejemplo order order by y d quiero seleccionar todo de contactos y lo quiero ordenar por él y de ascendiente ascendiente es de menos a más continuó y observamos como menos seleccionado 1 2 y 3 me lo ordena por ir de menos a más pero qué pasa si pongo ctesc quiero ordenar por el id descendiente descendiente quiere decir que primero los números más grandes y luego los números más pequeños pulso continua y observaréis como aparece 321 tengo el mismo listado pero ordenado de manera diferente no sólo me lo puede ordenar por un campo numérico también me lo puede ordenar por orden alfabético ordena melo por nombre ascendiente por orden alfabético evidentemente por tanto pulsamos continuar y comprobamos como primero va a jaime luego va a jose j y por último bajo an j vemos por tanto como order by me sirve tanto para una cosa como para la otra así que veremos que las opciones de selección en sql son tan sencillas como poner select all from tabla y a partir de ahí empezar a establecer peticiones continuamos con una inserción así que hay varias maneras de insertar en sql una muy sencilla es la siguiente inserto en tu contactos values abro paréntesis y cierro paréntesis y dentro de los paréntesis atención tengo que poner el mismo número exacto de campos que hay en la tabla si pongo un campo más o pongo un campo menos no funcionará por tanto yo lo que suelo hacer es poner lo siguiente 1 2 3 4 5 6 7 1 2 3 4 5 6 7 poner una serie de comas para saber que tengo que separar los campos el primer campo es un campo y de auto numérico primario siempre que encontréis siempre que estáis insertando algo dentro de un campo primario autor médico tenéis que poner null null le dice a la base de datos a peñate y ponme hay un incremental a continuación nombre pues quiero poner a javier como es un texto va entre comillas a continuación apellido lópez a continuación segundo apellido garcía a continuación teléfono lo he puesto como una cadena de caracteres no como un número por tanto con comillas a continuación el email info javier puntocom y por último veis el último espacio de la coma la dirección calle de javier número 5 por cierto que deberíamos poner al final de cada sentencia sql un punto y coma cuando estamos haciendo una única sentencia sql no pasa nada por no poner punto y coma pero más adelante podemos querer hacer varias sentencias sql en una sola petición así que es bueno que nos vayamos acostumbrando a poner un punto y como al final si no ha habido ningún error y no debería haber habido un error le voy a dar a continuar siempre que hay un error no digo siempre pero digo el 95% de los casos es porque aquí hay un número de columnas y allí hay un número diferente de columnas debemos hacer que los datos sean los mismos le doy a continuar y si todo ha ido bien me dice mysql ha devuelto un conjunto de valores vacíos es decir cero columnas si ahora me voy a examinar vamos a ver a examinar nos daremos cuenta como ahora tengo a javier me ha puesto el ide número 5 porque no ha rellenado el ide número 4 que yo había utilizado antes y no quiero que lo rellene de hecho puede parecer lo contrario pero lo que me interesa es que utilice un número de aire que no había utilizado hasta ese momento hemos visto por tanto como la sentencia de insert into voy a insertar otro valor insert into contacto esta sentencia nos permite insertar nuevos valores dentro de la base de datos 1 2 3 4 5 6 7 antes de empezar me haga un poco de espacio y digo que jose o por ejemplo jacobo no lo sé herrero garcía con este teléfono con este email info jorge puntocom y con calle de jorge número 67 me inserta un nuevo registro dentro de la base de datos lo importante en este caso es que aquel campo que iría con ive aparezca la palabra null null que vaya a decir nada 0 0 quiere decir ponle tu vida que le corresponde continuó y si todo ha ido bien me debe dar un mensaje de ok y si algo no ha ido bien como ya os digo en la grandísima mayoría de los casos es porque si la tabla requiere siete campos o la habéis puesto seis o la habéis puesto 8 dos operaciones más la primera de ellas update update que me sirve para actualizar es peligrosa al igual que delito porque mirad si digo update vamos a ver contactos y por ejemplo voy a poner teléfono es igual mira a 111 esta secuencia sql es peligrosa porque porque yo no estoy especificando a quién le quiero actualizar el teléfono y por tanto lo que ocurrirá dejadme comprobar que no tengo ningún error lo que ocurrirá es que cuando lo voy a continuar las 5 filas han sido afectadas y cuando lo que he hecho es que a todo el mundo le he puesto el teléfono 111 y esto no debería ser así la manera correcta de escribirlo sería la siguiente update contactos set teléfono es igual a 222 por ejemplo y le pongo una cláusula web de condición where nombre es igual a juan cuidado porque si tuviera varios juan en la lista le cambiaría a todos los juanes a la vez por tanto se puede poner también donde el nombre sea igual a juan y apellido sea igual a garcía es decir localizar mejor un registro concreto comprobamos ahora como si pulso continuar lo que he hecho es realizar una actualización mediante el lenguaje sql y ahora sólo a juan le he cambiado el teléfono de 111 a 22 22 o lo que queramos simplemente podemos actualizar cualquier registro o cualquier pack de registros mediante el comando sql update yo tengo ahora por ejemplo a juan garcía quiero localizar al usuario con algo mayor de precisión no solo por su nombre sino también por su apellido así que me voy a sql y le digo que quiero update contactos set teléfono es igual a 33 333 y pongo un operador william o de andar where nombre es igual a juan and apellido 1 es igual a atención era garcía voy a poner lópez sólo quiero actualizar el teléfono donde el nombre sea juan y el apellido sea lópez me juan no es juan lópez es juan garcía por tanto continuó y me dice que 0 filas han sido afectadas no es que haya un error es que 0 candidatos han sido encontrados y fijémonos que juan sigue teniendo el teléfono 2 2 2 2 pero si yo ahora vuelvo y pongo y apellido sea igual a garcía comprobaremos como ahora y sólo ahora una fila ha sido afectada y por tanto habrá juan tiene el teléfono 333 333 mediante operadores bull ya nos and y ahora podemos seleccionar diferentes tipos de elementos por ejemplo el operador ahora me serviría para decir quiero cambiar los teléfonos a javier ya jacobo así que me voy a sql y digo quiero poner el teléfono 44 44 44 donde el nombre sea javier o bien sea cierto por nombre o sea igual a jacobo por tanto continuó observar que dos filas han sido afectadas y si ahora examino comprobar como el 444 se ha asignado tanto a javier como a jacobo por último la sentencia de sql correspondiente a delito correspondiente a eliminar así que voy a hacer lo siguiente del lic contactos y cuidado cuidado porque en este caso puedo tener el problema de que si continúo me puedo cargar todo así que para no hacerlo antes ya lo he hecho en el update voy a poner un web where nombre es igual a juan así que guardo recargo me dice realmente deseas hacer esto esto no me lo ha preguntado hasta ahora siempre que hago un delito como es una operación muy delicada la eliminación de datos en una base de datos es algo que en principio no es deseable ya veremos por qué pero le voy a aceptar por tanto una fila ha sido eliminada y ahora me voy a examinar comprobaréis como no tengo el usuario con y de igual a 1 queda juan y voy desde el 2 hasta el 6 es decir acabo de eliminar un usuario en los operadores ya que estamos puedo eliminar rangos de usuarios por ejemplo quiero eliminar el 5 y el 6 como lo haré pues puedo decir lo siguiente de live from son contactos donde vive es mayor que 4 5 cumple esta condición 6 cumple esta condición por tanto cuidado porque converso la sentencia sql puedo eliminar un buen rango de usuarios así que pulso continuar y me dices realmente deseas esto le voy a decir que quiere aceptar y por último me dice que ha afectado dos filas y finalmente me voy a examinar comprobaré cómo me he quedado con dos usuarios con respecto a la tabla original

vamos a empezar creando un sistema de gestión de los clientes crm y lo que vamos a hacer para ello es implementar el sistema de cruz dentro de un pequeño proyecto en php lo vamos a utilizar como excusa simplemente para conectarnos correctamente a una base de datos así que nos metemos en sam’s nos metemos en hp docs me voy a crear una nueva carpeta llamada sql y dentro de sql me voy a crear una nueva carpeta llamada crm así que dentro de crm voy a crear un archivo llamado index punto php este archivo lo voy a cargar por una parte en el editor y por otra parte lo voy a llamar en el navegador así que localhost o barra sql barra crm para comprobar que este es archivo correcto y por tanto este es el archivo correcto es decir que estoy trabajando en el mismo archivo en los dos lados en los dos sitios ahora voy a hacer lo siguiente en primer lugar una pequeña estructura correcta en html no nos cuesta nada dejadme que os lo ponga un poquito más grande para que lo podáis ver mejor doctor html y a continuación voy a poner una etiqueta de apertura html que contendrá un gen y que contendrá un móvil y dentro de esta estructura lo que haremos es conectarnos a la base de datos para conseguir leer escribir actualizar y eliminar y que al final la gestión de la base de datos la haga un programa informático y no la hagamos nosotros directamente tocando la base de datos cosa que muchas veces no se descarta pero no es como al menos los usuarios deberían acceder al software así que en primer lugar lo que necesito es un listado por tanto abro php voy a poner algo así como h1 el listado de clientes guardo recargo ya que lo tengo aquí en el head voy a poner un pequeño título y digo efe rm sql un poco para nombrar el ejercicio que vamos a hacer y ahora que tengo el archivo listo para empezar a trabajar me voy a volver a php my admin y voy a crear la base de datos correspondiente a éste efe rm ahora a continuación me voy a hp my admin y voy a hacer las siguientes operaciones en primer lugar sobre el propio servidor es decir en la raíz del servidor no dentro de ninguna base de datos hago clic aquí arriba en servidor pincho sobre el botón bases de datos y voy a crear una nueva base de datos llamada crm 1 el cotejamiento voy a poner efe 8 en español y voy a pulsar sobre crear mucho cuidado siempre lo digo porque haber creado una base de datos llamada por ejemplo cr efe rm uno no quiere decir que hayamos entrado dentro de ella justo a continuación de crearla tengo que hacer clic sobre la base de datos para asegurarme que no solo estoy en el servidor sino que también estoy dentro de la base de datos me dice que no se han encontrado tablas dentro de esta base de datos así que se me invita a crear una por tanto lo primero que voy a hacer evidentemente es crear una tabla llamada clientes donde de momento voy a poner 10 columnas puede que nos falte puede que nos sobre pero eso en definitiva nunca es un problema en mysql así que la tabla se llamará clientes tendrá 10 columnas y voy a pulsar sobre continuar dentro de continuar observáis como aparecen 10 filas que corresponden a las 10 columnas que voy a crear la primera de ellas será el campo y de siempre debería ser de salvo casos justificados es un número entero tiene 255 caracteres por ejemplo voy a aplicar la regla de que más vale que sobre que que falte y voy a decirle que será un campo del índice primario auto incremental esto estas dos propiedades únicamente sobre el campo y d a continuación el nombre del cliente dado que estamos hablando de clientes razón social la razón social o nombre dirección código postal y país puedo poner otras cosas como por ejemplo el cif que luego se active mi dni o lo que sea pero de momento voy a poner feef ya que estamos hablando de una empresa quiero poner un nombre de contacto así que nombre contacto teléfono contacto email contacto y pongamos que por lo que sea me vale ya con este número de campos he perdido 10 he utilizado 9 me sobra 1 no pasa nada ahora cuando finalice la creación de la tabla veremos como mysql automáticamente elimina los campos que se hayan quedado vacíos razón social va a ser un marchar dirección va a ser un marchar código postal va a ser un marchar país va a ser un marchar cif va a ser marchar no me de contacto también lo va a ser y los ocho campos que he creado después de ide van a ser marchar cada uno de ellos por defecto va a tener 255 caracteres ya os digo que estoy aplicando la regla de que más vale que sobre que falte pero en principio ahora lo que vamos a hacer ahora teniendo en cuenta que es un primer contacto con programación con php y mysql es algo que no me importa así que pinchamos el botón guardar y finalizamos la creación de esa tabla para poder empezar a ver algo dentro del programa voy a crear un primer registro de manera manual es decir un primer registro desde dentro de ph by admin así que no lo toco ya sabéis que iré no lo toco y digo cliente número uno coma ese punto el cliente número uno es él calle del cliente número 1 código postal 46 0 14 país españa este 7 de aquí como lo acabo de inventar nombre de contacto jaime lópez teléfono contacto este su teléfono y el contacto info jaime puntocom lo que hago por tanto es crear una tabla a continuación mediante el botón de insertar crear manualmente un registro para esta tabla para que a continuación cuando vaya php y realizó un listado pues realmente hay algo que listar es muy importante que de cara a conectarnos con php mysql la base de datos tenga un usuario con privilegios y contraseña si no no podremos realizar la conexión así que cuidado estoy en la tabla clientes los privilegios no se deben poner en una tabla se deben poner en la base de datos así que subo a la base de datos me voy en mi caso al botón más observo que ahí tengo privilegios y por tanto sigo observando como tengo un usuario llamado root en un usuario raíz no quiero trabajar nunca con ese usuario voy a agregar un nuevo usuario el nombre de usuario va a ser crm usuario el servidor va a ser local la contraseña va a ser crm password la [Música] la confirmó efe rm password y aquí la tenemos por tanto crm usuario en localhost y por tanto lo que haremos finalmente es pulsar el botón continuar no voy a tocar ningún límite en los accesos este usuario podrá hacer de todo podrá hacer tantas peticiones como quiera así que por último pulsamos sobre continuar ahora sí sí ya tengo una base de datos y ya tengo una tabla y ya tengo un usuario con permisos y tengo al menos un registro dentro de la tabla puedo empezar a conectar a intentar conectar php con mysql voy a anidar php aquí al lado de la página web con la que voy a estar trabajando a continuación lo que quiero es obtener un listado de clientes y para ello hay varios métodos hay varias colecciones de librerías de conexión a base de datos dentro de php la que se recomienda es la más moderna la que tiene opciones de seguridad más altas es mysql y en este caso os he traído un copia pega de cómo conectarnos de la manera más sencilla a una base de datos en primer lugar creamos una variable llamada como queramos por ejemplo de b y digo que esta variable es igual a un new mysql y es decir es una nueva instancia de un objeto mysql y cuando hablemos de objetos ya veremos qué quiere decir esto de la palabra reservada mío debe se puede cambiar pero ni uno se puede cambiar y mysql y no se puede cambiar se tiene que escribir tal cual se tienen que escribir igual dentro de new mysql y el programa está esperando a que pongamos algunos datos como por ejemplo el servidor en mi caso el servidor va a ser local así que si es local pongo localhost a continuación se me pide el usuario que usuario el que he creado justo antes así que crm usuario a continuación se me pide la contraseña que contraseña la que he creado justo antes así que crm password y por último se me pide el nombre de la base de datos el nombre de la base de datos era cr m 1 es importante por tanto por haber creado un usuario con privilegios para la base de datos ya que si no disponemos de este usuario directamente no nos podremos conectar a esta base de datos así que guardo recargo y continúo podría observar como si guardo y recargo en la página web no tiene por qué pasar nada porque simplemente lo que he hecho es abrir una conexión ciega a la base de datos ciega quiere decir que por dentro está conectado pero no tiene por qué mostrarte nada en la pantalla continúo con una siguiente línea bastante interesante para por ejemplo países como españa y es que digo que debe porque debe porque aquí arriba el puesto debe si hubiera puesto aquí arriba longaniza aquí abajo pondría longaniza y digo debe guión y mayor que es una palabra reservada para decir que quiere usar un método dentro de ese objeto set carácter etc ocho de los datos que vas a recibir de mysql fuerza que estén en un tf8 fuerza que se representen correctamente los acentos y las señas y las pesadillas entre otros esta línea teóricamente es opcional pero si la ponéis mejor que mejor ahora aplicó esta línea de aquí es resultado el resultado es selecto all from clientes lo que estoy haciendo por tanto es que en primer lugar he abierto habrá una conexión con la base de datos a continuación opcional esfuerzo a que lo que venga venga en el f8 la parte fuerte ahora que la base de datos está abierta le pido algo le pido algo en este caso es select all from clientes es el propio lenguaje sql dejadme que ponga un poco de sangría para que veáis qué ocurre dentro de cada una de las líneas y por tanto por último digo qué te pasa aquí que me falta una comilla bien ahora qué he perdido algo recojo resultados la recogida de resultados desde mysql se suele hacer especialmente cuando esa recogida tiene varios registros de resultado dentro de un bucle de control while por tanto voy a decir while row es igual a mysql y fecha a raíz de los resultados es decir el resultado por melo en una matriz asociativa y dentro del while voy a empezar a escribir cosas dejadme que ponga dejadme que cambie un poco este código para que lo veáis más claro dentro de la regla que siempre suelo decir de que lo que está en inglés no se toca y lo que está en castellano se puede tocar base de datos es igual amigo mysql base de datos base de datos reasons lo voy a cambiar por resultado y robo lo voy a cambiar por fila y de esa manera quiero que tengáis muy claro que todo aquello que he escrito en castellano es que lo podéis cambiar es cambiable pero todo aquello que escrito en inglés tiene que estar exactamente así escrito bueno finalmente lo que voy a hacer va a ser algo tan sencillo como esto con esto finalizaremos nuestra primera petición a mysql php y veréis que hay unas cuantas líneas que usar pero finalmente no son tan difíciles y digo echo fila nombre porque ahora es una matriz lo he convertido en una matriz asociativa si la nombre punto fila apellido 1 el nombre no no es nombre es razón social quiero decir con esto que si aquí he puesto clientes razón social ahí debo poner razón social tiene que coincidir exactamente lo que ponéis en la matriz con el nombre de la columna fila dirección punto espacio punto fila código postal y de momento con esto me es suficiente pongo vr y por supuesto ya sabéis que las líneas en php deben acabar con un punto de comas y no tendré errores es decir para cada uno de los elementos de la base de datos quiero que me devuelvas simplemente para cada uno de ellos su razón social su dirección y su código postal y que saltes de línea para el siguiente registro dejadme que ponga un espacio y dejadme que ponga un espacio si ahora guardo y recargo aquí es muy fácil que os olvidéis con los encadenamientos que guardo y recargo comprobaréis que ya tengo el listado de un primer cliente está apareciendo cliente número uno calle del cliente número 146 0 14 simplemente porque este es el registro que tengo en la base de datos lo que estoy consiguiendo por tanto es que viaje desde la base de datos hasta la página web pasando por php los registros que hay dentro de la base de datos una vez que tenemos esta petición a continuación voy a meterla dentro de una tabla por tanto dentro de la tabla voy a poner table pr th y dentro de este h voy a decir por ejemplo cliente o razón social voy a ponerle un poco de sangría p h dirección y th el código postal recordamos que recordamos que si empezamos a trabajar con acentos es muy importante que metamos un meta charset es igual a efe 8 en la cabecera cierro por aquí la fila y me abro una fila nueva para resultados aquí dentro de table ya sabéis que antes de trabajar con css siempre me gusta poner un poquito de html para por lo menos ver cuál es el aspecto de la tabla with 100% y porter es de 1 así que te r y ahora sí voy a hacer lo siguiente mirad voy a decir aquí lo siguiente y lo voy a hacer con un código muy extendido para que lo veáis claro echo tr lo voy a hacer en varios secos para que el código sea más fácil de leer en pantalla será menos eficiente pero será más fácil de leer el punto y la razón social y punto dv copio copio dirección copio código postal y por último no nos olvidemos de poner un scooter aquí abro fila aquí pongo tres columnas y aquí cierro fila tampoco nos olvidemos de acabar cerrando la tabla si hacemos un poquito de sangría deberíamos hacer así podríamos poner estos campos dentro de table para que esté claro que pertenecen a table en primer lugar lo que haré es crear un titular en segundo lugar lo que haré es poblar la base de datos y si guardo y recargo comprobar como ahora los datos aparecen dentro de una tabla y comprobaré como ahora se ha creado una fila específicamente para nombres de columna y otra fila específicamente para resultados de la base de datos voy a crear una fila nueva porque si ya he podido leer ahora además quiero poder escribir por tanto me abro una nueva tr es decir me abro una nueva fila hago tres campos dejadme que los ponga en la misma línea y escribo lo siguiente un formulario action es igual a lo mismo método es igual a post es decir estoy creando un formulario la última fila de la tabla va a contener un formulario el primer campo va a ser un input type de tipo texto con el name es igual a razón social y el place holder va a decir razón social el segundo va a ser un input también de tipo texto con el nombre dirección y el place holder dirección postal y el tercero también va a ser un input de tipo texto con el neem teléfono y el place holder teléfono claro debo tener cuidado porque me hace falta un cuarto campo el cuarto campo es un campo reservado para un input type submit esto me va a causar un problema y el problema es que aquí hay tres columnas y aquí hay cuatro por eso os voy a tener el pequeño detallito de poner aquí una columna apertura y cierre aunque esté vacía y voy a poner también aquí una columna apertura y cierre aunque esté vacía porque aunque está vacía estoy aquí poniendo cuatro columnas y aquí poniendo cuatro columnas porque el formulario necesita cuatro columnas si ahora guardo y recargo comprobaréis como tengo aquí el listado de los nuevos clientes pero tengo aquí además en la parte final un pequeño formulario que me va a permitir introducir nuevos clientes cómo va a funcionar pues yo pondré nombre del nuevo cliente su dirección su teléfono y cuando le vea enviar se me recargar a esta misma página donde se deberá atrapar esos datos y meterlos en la base de datos mysql yo estoy enviando este formulario a mí mismo a mí mismo quiere decir a esta propia página y lo estoy enviando con el método post así que ahora por ejemplo por aquí arriba voy a hacer un código php donde voy a decir código que se ocupa de atrapar el formulario y meterlo en la base de datos para nuestra sorpresa os diré que la misma porción de código que sirve para realizar un listado de la base de datos también sirve para realizar una inserción fija os voy a copiar y pegar este trozo de código permitidme que eliminen los comentarios que son los mismos que antes todo el bucle while me lo voy a cargar lo voy a eliminar porque porque ahora que he pedido algo recojo resultados es que no he pedido nada no quiero que me dé resultados lo único que quiero es que inserte es algo así que lo eliminó y una estructura de control para realizar una inserción en la base de datos son simplemente estas tres líneas de las cuales la segunda incluso sin ti si me apuráis es opcional porque es conectarte asegúrate que trabajas con un 13 8 y te pido algo y lo que te pido es lo siguiente insert en tus clientes values y pongo null 1 2 1 2 3 4 5 6 7 8 9 os acordáis que nuestra tabla tenía nueve columnas si no os acordáis nos damos a la web nos vamos a php admin y en clientes en estructura observamos que tenemos nueve campos ni más ni menos siendo el primero de ellos el ide así que me da igual que realmente vaya a insertar solo tres campos porque si tengo nueve columnas con esta estructura que os he enseñado con esta sintaxis que se ha enseñado tengo que poner las nueve columnas aunque luego deje algunas vacías dentro de esta fijaos que si en php estoy arrancando con comillas dobles en mysql estoy arrancando con comillas simples para no colisionar pongo post razón social dentro de aquí pongo post no sé que era era dirección y por último todo esto teléfono y las demás me las dejo vacías simplemente porque en el formulario no las estoy recogiendo de momento así que esto que acabo de escribir es simplemente una inserción en la base de datos inserto en clientes los valores que he recogido del formulario post razón social post dirección post teléfono lo complicado en este ejercicio donde os vais a equivocar si o si es al poner las comillas porque debéis entender que esta comilla simple y esta comillas simple son las comillas de sql pero esta comilla doble y ésta como ya doble son para escaparse de php y dejar de poner una cadena de tipo string y poner una variable sacada del formulario por eso aquí os equivocáis frecuentemente tenéis que poner comillas simples de sql comillas dobles de escape y por supuesto que no se os olvide que se os olvidará un punto para encadenar una cadena con una variable salgo de la variable punto para encadenar comilla doble para volver a entrar en la cadena comilla simple para salir de mysql así que como veréis esta es la estructura de control las comillas van a hacer que tengamos dificultades las comillas van a hacer que tengamos problemas pero sin embargo si lo probamos veremos lo siguiente bien en este caso cuidado porque ha intentado es realizar una inserción de hecho lo ha conseguido sin hacer nada yo le había enviado nada es únicamente había recargado la página cuidado esta estructura de control se ejecuta a sí o sí por eso la voy a meter dentro de otra estructura de control de tipo y voy a decir sólo sí y set sólo si existe sólo si me estás enviando el campo post razón social en ese caso y sólo en ese caso ejecutar me en este código por tanto como veréis esa estructura ahora está condicionada al cumplimiento de esta condición así que guardo recargo ahora no aparecen error aparece la línea vacía ahora la eliminaremos y aquí voy a poner razón social cliente de prueba como ese su dirección es su código postal este de aquí si ahora envío y todo funciona correctamente cruzamos los dedos y redoble de tambor le damos a enviar y tenemos ahí ya cliente de prueba su dirección con ese código postal y es más comprobamos que dentro del cliente aparece por una parte del registro vacío que me ha causado el no haber puesto el if ahora luego nos preocupamos de él y por otra parte ahora si el registro que acabó de crear mediante el formulario veo por tanto que ya he ganado bastante independencia con respecto a la base de datos porque ya tengo una aplicación php que es capaz en primer lugar de listar y en segundo lugar de insertar puedo crear puedo insertar pero ahora me gustaría borrar por ejemplo y sin ir más lejos me gustaría borrar este registro que tenía aquí en medio voy a utilizar esa columna que parece que había creado para nada aquí en los registros y por ejemplo detención voy a poner de momento borrar borrar que es un texto que de momento es estático cuando digo que es estático quiero decir que realmente cuidado cuidado qué te pasa en la línea de 7 pero s vamos a verlo algún error cometido aquí y cuidado búsqueda busque base de datos que he puesto algún espacio sin querer bien entonces ahora tengo borrar borrar borrar simplemente para demostraros como poniendo borrar ahí apareció en borrar en cada una de las líneas así que ahora en lugar de eso voy a hacer lo siguiente cuidado de atención digo h ref yo mismo cuidado comillas sencillas h refugio mismo dejadme que ponga una etiqueta html de button de botón y voy a poner borrar yo pongo borrar fijaos que aparece un botón y si le digo borrar me dice y vuelvo a lo mismo y vuelvo a mí mismo así que ahora digo lo siguiente tienes que ir a ti mismo y operación es igual a borrar con lo cual veréis que cuando recargue y borrar ahí dirá y operación es igual a borrar sólo en estos de borrar no en el de enviar pero claro cuál tienes que borrar si no identificas a cada uno de ellos puedes borrar todos por accidente así que yo ahora voy a hacer lo siguiente y operación es igual a borrar y de es igual me escapo a fila y d lo que va a hacer esto es decirle a cada fila que tiene que borrar un ide específicos y pulso este por ejemplo este botón para borrar aire es igual a 1 este es borrar y desigualados este es borrar y de es igual a 3 de esa manera lo que puedo hacer por tanto es invocar a una operación llamada borrar y además especificar exactamente a quien quiero borrar para no borrar a lo loco y por accidente borrar toda la base de datos una vez que tengo esta estructura y esta lógica creada con el método get ya que usando esto estoy usando realmente parámetros en la url y estoy invocando al método get the php en ese caso voy a empezar a editar ya trabajar con los parámetros por último aquí arriba dentro de este mismo espacio inicial para operaciones voy a hacer lo siguiente código que se ocupa de eliminar un registro cuando alguien lo pide ya le digo lo siguiente si está puesto el parámetro de operación y además es cierto and gay operación es igual a borrar porque creo que era borrar si en borrar en este caso y sólo en ese caso te conectas a la base de datos establece que el char set efe 8 y ahora mirad con mucho cuidado dices de live from clientes fuera y de es igual gay y de por qué get y de por qué estoy pasando un parámetro llamado y de por el método que está y solo quiero borrar aquel elemento cuya aire sea igual al parámetro que estoy pasando en este caso querría decir que solo quiere borrar a aquel cliente cuyo i d sea igual a 3 vamos a probarlo así que la guarda y recargo y si todo wow y si todo ha ido correctamente mirad me acabo de quedar el 3 por accidente lo siento me voy a cargar ahora el 2 si veis cómo me he cargado el 2 y ahora pongo lo siguiente mirado este es un cliente que voy a borrar su código o su dirección y su teléfono su código postal envió tengo un nuevo cliente este es un cliente que no voy a borrar aquí borrar con v no voy a borrar a la venga venga su dirección esta es su dirección y su código postal es este de aquí así que envío y veis que con el botón de enviar yo puedo crear tantos nuevos clientes como quiera pero ahora voy al cliente que voy a borrar y simplemente le doy a borrar y lo borro así que a falta de actualizar ya tenemos en este caso un listado de clientes donde podemos seleccionar donde podemos eliminar y dónde podemos crear nuevos clientes es cierto que debería haber una concordancia entre por ejemplo el teléfono y el código postal ahí estoy pidiendo el código postal estoy devolviendo el código postal y ahí estoy en principio parece que pidiendo el teléfono vale por tanto voy a poner aquí el teléfono el código postal aquí en el place holder voy a poner código postal también para que todos vean lo que estoy pidiendo y cuidado cuidado mucho cuidado porque si aquí esto se llama código postal aquí arriba esto se debe llamar código postal es decir lo que recoge el formulario y lo que guarda el formulario ahora sí si guarda y recargo veréis que ahí pone el código postal y ahí pone el código postal y por tanto lo guarda en el mismo archivo ahí tenía una falta de concordancia digamos entre el teléfono y el código postal lo importante es que al final lo guarda en el sitio correcto si en un momento dado estamos trabajando en local y queremos movernos o bien a otro ordenador que tenga otros amp o bien queremos movernos a un servidor físico queremos migrar nuestra base de datos a un servidor físico nos encontramos que tenemos un problema el problema es el siguiente la programación que hemos hecho hasta ahora en php es muy fácil de mover porque es un archivo que yo en cualquier momento me meto en el pendrive y me llevo a otra parte o que a través de ftp subo un servidor web pero qué pasa con la base de datos donde está esa base de datos para que yo la pueda y me la pueda llevar bueno yo os voy a decir por mensaje digo por mensaje os voy a decir por de pronto os voy a dar un mensaje poco tranquilizador y es que la base de datos está pensada para que tú específicamente no la puedas tocar porque para eso está el motor de base de datos mysql mysql lo que hace es gestionar en tu nombre los accesos a la base de datos a darte más seguridad para darte concurrencia y para darte una serie de ventajas y tú dirás todo eso me parece muy bonito pero yo me quiero llevar mi base de datos así que al igual que con php tú puedes escoger el archivo y copiar todo a un dispositivo es el mismo concepto no existe con base de datos pero existe un concepto parecido que es exportar e importar así que si yo quiero este proyecto y llevarme otro ordenador voy a hacer lo siguiente me voy a ir a php malla admin me voy a ir a la base de datos que quiera exportar por ejemplo en este caso cr m1 y voy a encontrar que dentro de las pestañas tengo estructura sql buscar generar consulta y exportar si exportó veré que tengo diferentes opciones tales como por ejemplo sql csv json php array o xml pero no os confundáis la correcta es sql es la que viene por defecto así que simplemente mirad lo que tengo que hacer es pulsar continuar y el programa lo que va a hacer es generar me voy a guardar melo en la carpeta correcta me va a generar un archivo con la extensión sql que yo a continuación si queréis como paso previo a la migración me voy a poner al lado de mi archivo php es un archivo que ocupa poco apenas ocupa dos casas y eso no es la base de datos sino que es una exportación de la base de datos tanto con su estructura como con sus datos como con su contenido una vez que tengo esa exportación de la base de datos ya me puedo copiar tanto la programación como la exportación dentro de por ejemplo un pendrive y me lo puedo llevar a otro ordenador cuando me lo lleve a otro ordenador simplemente tendré que ir a la raíz del servidor probablemente tendrán que crear una base de datos vacía llamada cr m1 y entonces usaré importar la opción de importar me permite seleccionar un archivo que puede estar en la extensión sql y a partir de ahí no lo voy a hacer ahora porque ya tengo una base de datos llamada cm1 lo que haría sobre escribirla pero a partir de ahí lo que puedo hacer es traer mi base de datos es decir no puedo copiar y pegar pero sí que puedo exportar e importar les voy a decir por tanto que si te llevas tu base de datos de un ordenador a otro con que en los dos tengas instalados amp y que tenga admin no tendrás ningún problema qué pasará con un hosting por ejemplo que hayas contratado pues confirmándolo vosotros pero en la gran mayoría por no decir todos la herramienta por defecto para gestionar bases de datos es ph promedialmente es un estándar por tanto encontrareis el mismo botón de importar y de exportar importar por si queréis a la base de local y subirla a un servidor o incluso exportar si después de un tiempo que desee hacer una copia de seguridad de la base de datos que tenéis en un proveedor

vamos a hablar a continuación de un lenguaje de scripting llamado javascript que nos sirve para hacer que los sitios web se conviertan en sitios web dinámicos y cuando hablo de dinámicos no quiere decir animados no quiero decir que se muevan sino quiero decir que reaccionen a los comportamientos a los eventos del usuario lo primero que os voy a decir es que a diferencia de otros lenguajes dinámicos como por ejemplo php javascript no requiere tener instalado un servidor como por ejemplo apache o como por ejemplo sham sino que javascript es un lenguaje dinámico pero no se ejecuta en el servidor sino que se ejecuta en el cliente que es el cliente el cliente es el usuario final que ve la web y por tanto cuando hablamos del cliente cuando hablamos de que un script se ejecuta en el cliente queremos decir que se ejecuta en el ordenador del cliente y se ejecuta en qué parte del ordenador del cliente pues en su navegador web es el navegador web el encargado de recibir el código javascript interpretarlo y ejecutarlo por tanto existe un motor de javascript integrado dentro de cada navegador moderno que tenemos hoy en día en nuestros escritorios lo primero que voy a hacer por tanto es crear una carpeta llamada javascript dentro de la carpeta javascript vamos a crear un primer ejemplo he creado como un nuevo documento de texto pero por supuesto voy a renombrar como index.html además a diferencia de lo que ocurre con php php nos obliga a cambiar la extensión del archivo por la extensión index.php en lugar de index html con javascript esto no es en absoluto necesario un archivo que tenga javascript puede tener la extensión html php o esp que programamos en ese lenguaje o jsp si programamos en ese lenguaje a continuación lo que voy a hacer es abrir un editor de textos y cargar ese archivo index.com nl y voy a empezar escribiendo código de la siguiente manera podemos encontrar archivos javascript situados de manera externa al archivo original de hecho más adelante haremos eso pero ahora para empezar lo que haremos es crear un tipo de javascript interno al igual que en css podemos encontrar tres tipos de animación de javascript javascript en línea es decir en la misma etiqueta javascript interno en una etiqueta llamada script en lugar de style y javascript externo vinculado y enlazado desde el archivo principal por tanto voy a empezar poniendo doc type html escribo una etiqueta de apertura y cierre html creo por supuesto un head y un body y ahora os voy a decir que en principio el javascript se puede meter en cualquier parte del documento html lo ideal es que se introduzca dentro del head ocasionalmente en javascript a problemas ahora luego haremos de ellos cuando se inserta dentro del head pero de momento lo vamos a insertar aquí simplemente tengo que crear una etiqueta que se abre y se cierra llamada script y todo lo que haya aquí dentro es javascript en javascript no es el único lenguaje de scripting que se puede meter dentro de una página web pero desde luego sí que es el principal por eso no es obligatorio pero sí que es una buena costumbre poner type texto javascript yo tengo que reconocer que debería hacerlo pero muchas veces no lo hago y directamente pongo script de apertura script de cierre y ya está pero para hacerlo bien deberíamos poner texto barajaba speed y ahora todo lo que pongamos aquí dentro se convertirá en javascript cuidado que lo que acabo de hacer es poner este código que evidentemente no va a funcionar que quiere decir que no va a funcionar bueno voy a ejecutar esta página web es decir voy a abrirla en un navegador web no aparecen a la pantalla porque no tiene por qué aparecer nada y ahora voy a sacar una cosa con la que vamos a estar interactuando en todo momento qué es el inspeccionar elemento es la consola de javascript así que con la consola voy a poner esto en la parte de abajo de la pantalla no lo quiero externo en la parte de abajo con la consola me dice tengo un error no declarado que es un identificador que no esperaba es decir al igual que ocurre en php si tú dentro de un lenguaje de scripting ya sea php o javascript pones algo como esta línea simplemente de javascript de error porque no sabe cómo interpretarlo por eso lo que voy a hacer simplemente es eliminar ese código para eliminar ese error lo que voy a hacer por tanto dentro de este bloque es trabajar todo el rato así es decir voy a trabajar por una parte con el script voy a trabajar por una parte con el código por otra parte habrá un navegador web que a su vez se divide en dos ventanas una para ver en pantalla que nos va a dar nuestro código y dos la consola que nos va a decir si todo va bien y si hay algo que no va bien exactamente qué es lo que no va bien en qué línea está y en ocasiones también nos dirá cómo arreglarlo la primera instrucción que se aprende dentro de javascript es la más molesta y que os podéis imaginar pero la vamos a usar evidentemente con motivo docente es la instrucción alert alert me saca un mensaje molesto flotante en la pantalla como por ejemplo un mensaje que habéis visto muchas veces es el visitante un millón de esta web así que cuando guardo y recargo comprobaréis como aparece esta molesta ventana que tengo que cerrar qué es una ventana de alerta no la usamos para muchas cosas para el usuario final pero sí que la usaremos para un proceso que veremos llamado debug el proceso de debut es el proceso de búsqueda de errores así que tenemos ya por tanto una primera línea de javascript que contiene una función ya hecha una llamada a una función integrada dentro de javascript que es la función alert esta función admite parámetros dentro de los paréntesis admite una cadena o una variable y por último observamos que aparece un punto y coma llegados a este punto tengo que hablar un poco de la sintaxis de javascript en cuanto al cierre de comandos a diferencia de php javascript cierra comandos o bien con un punto y coma o bien con enter esto quiere decir que en javascript siempre que hagas enter para crear nuevas instrucciones no es obligatorio que pongas punto y coma sin embargo aunque no es obligatorio sí que es una buena costumbre porque el resto de lenguajes derivados de ce sí que te exigen poner punto y coma por eso no haya para javascript sino por ejemplo para cuando salte esa php vendrá bien que mentalmente te hayas acostumbrado a poner punto y coma por tanto no es obligatorio pero por favor ponerlo en cada línea que introduzcas vamos a utilizar una función un poco menos molesta que alert para eso en este caso lo que voy a hacer es desactivar la línea que pone a leer mediante la inserción de un comentario los comentarios se introducen como en la mayoría de lenguajes basados en c es decir doble barra para introducir un comentario de única de una única línea y barra asterisco y hasta disco barra para introducir un comentario multi línea observaremos cómo tras introducir ese comentario la línea se ha vuelto de color azul como que está desactivada y si recargo ya no aparece el alerta la segunda instrucción que vamos a aprender de javascript es document punto write dentro de document puntos right voy a poner hola mundo muy importante que al ser también una función realmente es un método de este objeto debemos poner por una parte un paréntesis que se abre y se cierra y por otra parte hola mundo lo estoy poniendo dentro de unas comillas si ahora guardo y recargo observaré que ahora dentro de la pantalla principal aparece hola mundo es decir dentro del body aparecería hola mundo pero no no está escribiendo realmente el body fijaos que el body está vacío sino que quien lo está escribiendo es javascript es decir si ahora guardo y recargo y movía los elementos damos cuenta que dentro del body aparece hola mundo cuando dentro del body realmente no había nada es javascript el que ha tomado este comando y lo que ha hecho es bajarlo a la parte de abajo documento write por tanto como veis lo que hace simplemente es escribir cosas dentro del body diego simplemente por decir algo porque escribir con dentro del body es muy importante para lo que finalmente acaba haciendo una web trabajamos a continuación con la creación y declaración de variables javascript es un lenguaje que en principio trabaja sin tipificación estricta de variables eso quiere decir simplemente que no hace falta declarar el tipo de variable cuando la creamos lo que sí que hace falta es poner una palabra inicial reservada llamada bar así como en php se pone un dólar delante dentro de javascript se pone la palabra reservada bar a continuación pongo mi variable bar mi variable es igual por ejemplo a 3 y lo que acabo de hacer no tiene por qué tener ningún reflejo realmente en la pantalla es que dentro del espacio de memoria reservado para mi variable le ha asignado el valor número 3 esto quiere decir por tanto que ahora dentro del documento white voy a poner mi variable si guardo y recargo observaremos como el resultado es igual al número 3 puedo también realizar operaciones aritméticas con las variables por ejemplo si digo que quiero devolver el resultado de mi variable por 3 querrá decir que finalmente me devuelve el valor 9 es decir 3 por la variable y por 3 porque lo he calculado de esa manera vamos a hablar por tanto ahora de que elimina algunas líneas de operadores matemáticos dentro de javascript los operadores matemáticos dentro de javascript son prácticamente iguales a los operadores matemáticos que encontramos en cualquier otro lenguaje de programación así que documentó puntos right y por ejemplo para sumar simplemente tenemos que poner el signo de la cruz digamos la suma el más así que document puntos byte 33 es igual a 6 el operador de suma hay que decir que en javascript es también el operador de encadenamiento ya que el mismo operador que se usa para sumar se puede usar o la más mundo para encadenar yo no estoy sumando ola y mundo porque no se pueden sumar aritméticamente no dan resultado sino que lo que estoy haciendo es encadenar los por tanto ola más mundo equivale a ola mundo es decir lo que en php es el operador de encadenamiento que se hace con el punto en javascript es con el signo más para hacer restas simplemente debemos utilizar el guión 6-3 6-3 es igual a 3 la multiplicación se hace con el asterisco 4 partido 24 perdón por dos es 8 por otra parte 42 la barra que está con mayúsculas 7 es la división así que cuatro partido entre dos cabe a dos y dentro de javascript tenemos también el operador aritmético del resto de la división entera por tanto 4 entre 2 el resto de la división entera es 0 o por ejemplo 5 entre 2 el resto de la división entera es 1 básicamente como podemos ver tenemos los mismos operadores matemáticos que encontramos en otros lenguajes de programación a partir de aquí pasamos a los operadores de menor que mayor que mayor o igual menor o igual y las igualdades que una vez más se parecen a otros lenguajes de programación la buena noticia cuando aprendes diferentes lenguajes de programación es que no tienes que aprenderlo todo otra vez desde cero sino que hay particularidades que existe hay que aprender pero hay otras muchas generalidades que se parecen entre sí y que probablemente ya conocías si conocías un lenguaje anterior por ejemplo en este caso la igualdad fórmula mediante un doble igual ya no estoy realizando una operación aritmética lo que estoy haciendo es una comparación es cierto que 5 es exactamente igual a 4 la respuesta es falsa la respuesta es falso pero es cierto que 5 es igual a 5 en este caso la respuesta es true la respuesta es cierto existe también el operador de igualdad estricta es cierto que 5 es exactamente igual a 5 es cierto pero es cierto que 5 número es exactamente igual a 5 en cadena pues es falso porque solo es verdadero si le quitó un igual si le quitó un igual comprobaremos que es verdadero porque 5 es igual a 5 aunque 5 sea un número y este 5 o sea una cadena con la doble igualdad no importa pero con la triple igualdad sí que lo hace al igual que tenemos la doble igualdad también tenemos el admiración igual donde en muchos lenguajes de programación la admiración quiere decir no quiere decir negación así que enviasen igual quiere decir no es igual es cierto que 5 no es igual que 5 y es force porque 5 si es igual a 5 pero es cierto que 5 no es igual a 4 estruch eso es cierto 5 no es igual a 4 de la misma manera que tenemos la igualdad y la nueva igualdad también tenemos menor que y mayor que es cierto que 5 no es el perdón es cierto que 5 es menor que 4 no no es cierto pero es cierto que 5 es mayor que 4 pues sí que es cierto también tenemos los dobles operadores tenemos mayor o igual es cierto que 5 es mayor o igual que 4 bueno no es igual pero sí que es mayor por tanto el resultado es true también tenemos el menor o igual es cierto que 5 es menor que 4 pues desgraciadamente ni es menor ni es igual por tanto como ninguno de los dos válida tenemos que dar un resultado falso disponemos también de los operadores volea nos así que en este caso diría es cierto que 5 es igual a 4 y también doble ampersand es cierto que 4 es igual a 4 estoy evaluando en este caso dos igualdades y una de ellas no es cierta así que el resultado final será force el resto social es falso porque es cierto que 4 es igual a 4 pero no es cierto que 5 es igual a 4 y con el operador booleana andy todas las expresiones por partes tienen que ser ciertas para que la expresión global sea cierta sólo con una de ellas que no sea cierta y la expresión global es falsa sin embargo si uso el operador booleana ahora representado por dos barras verticales dos pares que recordamos se pueden sacar con el xerez y el número 1 del teclado en este caso la exclusión global sí que se evalúa como cierta porque no es cierto que 5 sea igual a 4 pero sí que es cierto que cuatros igual a 4 y con el operador juliano ahora con que una de las expresiones sea cierta la expresión global da cierta como también normalmente hago esta demostración con dos operaciones pero lo cierto es que se pueden introducir más voy a bajar un poco el tamaño para hacer más espacio en pantalla y voy a decir es cierto que 5 llegó a la 4 o es cierto que 5 es cierto que 45 a la 4 o es cierto que 3 es igual a 3 en ese caso el resultado sigue siendo verdadero porque aunque ésta no es cierta éstas sí que lo son y con el operador bolea no ahora con que una de las expresiones sea cierta el resto dan como ciertas si evidentemente preguntamos es cierto que 5 igual a 4 y 4 igual a 3 y 3 es igual a 2 pues si no hay ninguna cierta evidentemente no se puede hacer nada pero fijaos que con que ponga una de ellas como cierta el reto global da cierto disponemos también en javascript de las estructuras de control las estructuras de control son las que podemos encontrar en prácticamente cualquier lenguaje de programación empezamos por ejemplo con la estructura llamada form la estructura de ford fijaos que me aparece de un error pero es porque no he formulado correctamente todavía el foro requiere que le ponga una serie de condiciones de inicio parada e incremento dentro de los paréntesis y que ponga el código que se va a ejecutar dentro en las llaves así que voy a decir me creo una variable llamada y es igual a 1 me creo una condición de finalización siempre que sea menor o igual a 31 un mes de 31 días y más más siendo más más un operador de incremento y más más equivale a y es igual a y más 1 en lugar de escribir eso lo que se hace es utilizar un operador abreviado de incremento de post incremento con el que simplemente ponemos más más a continuación voy a poner algo así como documento punto right hoy es como si fuera lunes no nos olvidemos de poner un ver para retornar el carro así que fijamos que tengo 31 copias del texto hoy es como si fuera lunes también puedo encadenando por supuesto poner la siguiente frase hoy es día y y es como si fuera lunes así que guardo recargo y dice hoy es día 1 hoy es día 2 hoy es día 3 hoy es día 4 porque porque es día y ahí precisamente es esta variable que va aumentando de valor hay veces que los alumnos preguntáis oye porque esa variable y por qué no puede ser la variable a podría ser la variable a la variable x si quieres que eso es un poco lo de menos pero hay gente que pregunta pero porque todos los que enseñamos siempre ponéis la variable la respuesta es que un poco por costumbre por inercia te diré que la variable y quiere decir hiteador y uniter ador es simplemente un elemento que va a y tirando y que va aumentando de valor pero más allá de eso más allá por el guiño técnico de bar y por operador el bucle for funcionará perfectamente poniendo a poniendo x poniendo z o poniendo el nombre de variable que queráis no de poner y es simplemente una costumbre que procede de la palabra la palabra integrador como podemos ver por tanto este esta estructura de control de tipo que lo que hace es repetir el document punto right x veces en este caso la repite 31 veces otra estructura de control con la que podemos trabajar es la estructura de control llamada agua el déjame eliminar todo esto voy a empezar desde cero y voy a poner lo siguiente en la estructura de control while se escribe con la palabra while paréntesis para introducir la condición que va a ir dentro de la estructura de control y dentro de las llaves introducir el código que voy a ejecutar así que dentro de los paréntesis voy a decir siempre que y si quieres siempre que día del mes sea menor o igual que 32 en ese caso de documento punto right hoy es día más día del mes y como no ponemos también un ver cuidado en este caso porque estoy llamando a día del mes y yo no he declarado quién es día del mes por tanto si ejecutó lo que voy a obtener es un error tengo un expected token es decir no se reconoce este punto y coma y no se reconoce este punto y coma porque no va a aquí ahora no es este punto y coma el que está mal ahora si bien si corrijo este error ahora me da otro reloj diferente que dice día del mes es not be fine claro tenemos que tener siempre esa ventana de consola sacada porque si no yo recargo aquí no aparece nada en la pantalla y yo no sé por qué no aparece nada estoy cometiendo un error pero no lo sé por tanto lo que hago es inspeccionar elemento y por esta razón dejamos siempre sacada la ventana de consola bien nos dice que el error es que día del mes no ha sido definido así que lo que hago es lo siguiente bar día del mes es igual a 1 guardo recargo y mucho cuidado porque lo que tengo en este momento es un bucle infinito tengo un bucle infinito porque simplemente digo bar día del mes es igual a 1 mientras que día del mes sea menor o igual que 32 ejecutar esto día del mes nunca está creciendo y como día del mes nunca está creciendo siempre será menor o igual que 32 y por tanto meteré al programa como veis aquí atención a la pantalla mirad aquí arriba lo estoy metiendo en un bucle infinito que pasa con una web cuando está en un bucle infinito y descontrolado como en este caso lo que ocurrirá esto depende del navegador pero lo que ocurrirá es que el navegador dentro de unos pocos segundos me sacará un icono para automáticamente la ejecución del script y me sacará un icono que dirá tu script está tratando demasiado así que qué quieres hacer lo quieres terminar a palo seko o quieres dejar unos segundos más para que acabe de ejecutarse en este caso le diríamos que queremos detenerlo estamos en chrome por tanto en unos pocos segundos calculo que saldrá el típico icono de una carpeta blanca sobre fondo morado que aparece como una página web que se ha muerto aunque se ha quedado colgada y que nos dice que la web está tardando demasiado en responder no digo que los bucles infinitos sean malos los bucles infinitos descontrolados sí que son malos hay veces que para nuestra programación hay veces que avanzan nuestros programas queremos que un programa haga algo constantemente por ejemplo en el caso de un reloj quiero que una vez por segundo se pregunte a sí mismo cuál es la hora pero no en este caso que lo que es un bucle con su completamente descontrolado y como os digo dentro de unos segundos aparecerá el mensaje de error como podemos ver tras unos pocos segundos la web ha detenido automáticamente el proceso de carga lo que voy a hacer simplemente es introducir dentro del while la condición de día del mes más más es decir cada vez que pasas por aquí coge día del mes y suma un valor y de esa manera ahora si recargo y laos cuenta que tengo hoy es el día 1 hasta hoy es el día 32 tenía que haberle dicho hoy es el día 31 y ya no tengo un error vemos por tanto como el bucle while conceptualmente es igual que el bucle for la diferencia es que el bucle for dentro de los paréntesis tiene las condiciones de inicio incremento y parada mientras que el bucle while solo tiene la condición de parada y por tanto tenemos que poner la condición de inicio y la condición de incremento respectivamente fuera y dentro del bucle un bucle que deriva del bucle de wilde el bucle wiles el bucle de uruguay el bucle de while se escribe de llaves while paréntesis tiene un poco al revés porque de hecho funciona al revés y es el único bucle de toda la secuencia es la única estructura de control que requiere poner un punto y coma al final el resto no lo requiere así que voy a decir documento punto right dispara haz eso mientras que usuario sea igual a culpable si el usuario es culpable y dispárale qué es usuario cuidado se la guarde recargo me dice usuario y es notifight bien puede hacer lo siguiente var usuario es igual a inocente así que vamos a ver lo que quiere decir este código el usuario es inocente o es culpable en este caso es inocente así que yo estoy diciendo si usuario es culpable solo en ese caso dispárale pero hay un problema y es que recargo y me dice tú es decir primero ejecuta el código y luego se pregunta se lo tenía que haber ejecutado el problema es que para cuando se pregunta si lo tenía que haber ejecutado ya lo ha ejecutado y por tanto en este caso ha disparado a un inocente desde el peligro del bucle de while y es que primero actúa y luego pregunta hay veces pocas realmente hay veces en las que nos interesará este comportamiento pero lo más general lo más común es que nos interese el bucle while en lugar del de while un bucle que primero pregunte si tiene que ejecutar algo y depende de la respuesta que se le dé sólo en el caso afirmativo realmente ejecute algo de código las que las estructuras de control que hemos visto hasta ahora son estructuras de control de tipo bucle eso quiere decir que repiten n veces una cierta porción de código otro tipo de estructuras de control son las de toma de decisión donde básicamente tenemos dos que son la estructura de control yf y la estructura de control switch la estructura de control tiene esta formulación y paréntesis dentro de unos paréntesis se encuentra la condición y luego llaves dentro de las llaves se encuentra el código que se va a ejecutar así que pongo documento punto right y dentro del if pongo la condición vamos a ver creó una variable llamada edad que es igual por ejemplo a 30 y digo sí es menor que 30 en ese caso documento punto right eres un joven pero puedo también poner él donde lo que hago es evaluar una expresión si el resultado de la expresión es cierta se ejecuta el código que se encuentra entre estas primeras llaves pero si el resto de la expresión es falsa en ese caso se ejecuta el código que se encuentra dentro de este segundo pack de llaves en este caso pondría documento puntos raid ya no eres joven así que si guardo y recargo observaremos que como edad es igual a 30 por tanto no es cierto que sea menor que 30 en ese caso no se ejecuta este código sino que se ejecuta este de aquí ya no se trata por tanto de ejecutar un código en bucle sino que se ejecuta ds3 se trata de realizar una pregunta y en base a la certeza o falsedad de la respuesta lo que hacemos es ejecutar un código u otro será pusiera por ejemplo qué edad es igual a 25 en este caso sí que sería cierto qué edad es menor que 30 y por tanto el resultado en pantalla sería eres un joven una última la estructura de control una estructura de control de toma de decisiones hermana de if es la estructura llamada switch y básicamente hace una pregunta y acepta como resultado verdadero o falso pero hay veces que las preguntas que haces no te interesa que sean de verdadero o falso si yo te pregunto por ejemplo qué día de la semana de soy tú no me dirás verdadero o falso tú me puedes decir siete casos diferentes así que voy a decir por ejemplo bar día de la semana o bar día para ahorrar un poco palabra por habilidad así que día es igual al lunes lo que hago es formular lo siguiente switch un paréntesis para introducir aquello que se está evaluando y unas llaves para el código que se va a ejecutar y dentro de las llaves ponemos lo siguiente case lunes dos puntos no confundir con punto y coma y pongo documento puntos right hoy es el 1er de la semana y voy a hacer un poco de espacio para este ejercicio lo ejecutamos y tengo que hacer un caso para cada uno de los días de la semana que el lunes lunes lunes lunes lunes y lunes que es lunes martes miércoles jueves viernes sábado y domingo para cada uno de los casos tiene que haber una línea llamada case con el caso correspondiente y dos puntos a continuación el código que se va a ejecutar y cada uno de los casos tiene que finalizar con una instrucción llamada break hoy es el segundo día de la semana hoy es el 3er día de la semana hoy es el cuarto día de la semana hoy es el quinto día de la semana hoy es el sexto día de la semana y hoy es el séptimo día de la semana sí ahora guarda y recargo atención como he dicho qué día es igual a lunes válido la variable día y me dice oye es el primer día de la semana si digo martes digo hoy es el segundo día de la semana si digo miércoles hoy es el tercer día de la semana una cosa que os voy a enseñar dentro de este ejercicio es la siguiente en primer lugar en cuanto a sintaxis dentro de javascript encontramos que todo el código que estoy escribiendo hasta ahora lo estoy escribiendo con sangrías las sangrías en javascript al igual que ocurre en php y otros lenguajes de marcado como html y css son sangrías visuales no son sangrías funcionales no hacen que el programa se ejecute con más rapidez pero sin embargo las estoy poniendo simplemente para que yo visualmente y también vosotros de cara a entender cómo funciona cada estructura de control le podamos leer mejor el código otra de las cosas que os quiero enseñar con este vídeo es que no es necesario aunque desde luego sí que es más estético poner cada una de las instrucciones en una sola línea en este caso lo estoy haciendo por claridad para que el código se pueda leer mejor pero también puedo suprimir y poner cada uno de los casos en una sola línea lo que estoy haciendo por tanto con el consiguiente ahorro de espacio en pantalla es decir estoy ahorrando dos tercios del espacio que estaba gastando inicialmente lo que estoy haciendo es poner el caso dos puntos el documento punto right punto y coma ahora es muy importante y el break punto y coma dentro de la misma línea lo que os voy a decir a continuación cogerlo muy con pinzas el anterior método de escritura es decir donde cada instrucción ocupa una línea podemos conocerlo un poco como javascript para novatos mientras que poner varias instrucciones en una sola línea sería un poco javascript para expertos esto que os acabo de decir cogerlo muy con pinzas porque hay expertos que trabajan con el código desplegado y hay novatos que por lo que sea trabajan con el código compactado la tendencia general que luego vosotros la cumpliréis o no es que si escribes de esta manera es más difícil leer el código pero ocupa mucho menos cuando tienes mucho código trabajar de esta manera hace que hagas menos scroll arriba y abajo de la pantalla sin embargo la dificultad que tiene es que el código cuesta más de leer en cambio trabajar de esta manera que es como estamos trabajando hasta hace un momento y cómo vamos a seguir trabajando por claridad porque esto es una formación nos interesa más la claridad que la eficiencia del código de esta manera se gasta mucho más espacio pero de un vistazo podemos entender perfectamente cada línea dónde va y de quien depende así que vamos a seguir trabajando de esta manera vamos a seguir trabajando cada instrucción en una línea gastaremos más espacio pero de momento si estamos aprendiendo nos interesa más la claridad que la eficiencia en el gasto de líneas usadas en multitud de lenguajes existe un caso alternativo un caso final llamado default yo por ejemplo en este caso switch estoy introduciendo la palabra día y vía puede ir de lunes a viernes vale pero qué pasa si alguien pone viernes werner es ese día que es jueves pero ya casi es viernes verdad entonces sí pongo esto el programa moment in keys juanes a perdona que es lunes estos lunes lo modificado donde no tocaba félix jueces y simplemente el switch no me dice nada porque yo estoy preparado para que me digas lunes martes miércoles jueves viernes a domingo pero me has dicho juanes eso no sé qué es yo sé como humano que es la mezcla entre jueves y viernes pero el programa no lo sabe así que lo que se hace es poner un case llamado default case default se pone algo documento puntos right en algo es lo que tú quieras lo que has escrito no es un día de la semana y si quieres también técnicamente no hace falta pero es una buena costumbre ponemos un break así que fíjate que en expected talk en default case default cerrado mal alguno de los elementos igual simplemente es la palabra de falta efectivamente no hace falta en javascript poner el que es para entonces simplemente ponemos default dos puntos y el código que queremos ejecutar de tal forma que si el código no está en ninguno de los casos que teníamos contemplados simplemente ejecutará el caso de fault antes de no decir nada simplemente dirá lo que hayas escrito no es un día de la semana

vamos a estar hablando a continuación de la librería de desarrollo para javascript llamada jquery o jay query es una librería que es javascript no salimos del lenguaje javascript pero lo que hacemos es introducir una serie de propiedades y métodos que nos permiten simplificar la estructura de código en lenguaje javascript por tanto voy a crear una nueva carpeta la voy a llamar jey query jquery dentro de esta carpeta voy a crear un nuevo documento index.html y ese documento lo voy a cargar tanto en heavy como en el navegador como siempre siempre la misma filosofía de cargar el mismo archivo en el editor y en el navegador ahora escribo un documento con su docta con su etiqueta html con su jefe con su móvil dentro del head voy a crear una etiqueta de tipo script que ya que estamos vamos a decir que ese tipo texto barra javascript y a continuación vemos que para empezar a escribir en jake no hace falta hacer nada más que escribir javascript a continuación lo que tengo que hacer es bajarme la librería ayer y donde la voy a encontrar de donde me la voy a bajar me la voy a bajar de la página oficial jay query puntocom accedé by jay query accedo a esta página web y voy a descargar en este caso la librería usando este botón pincho y se me dice que a día de hoy puedo descargar o bien la serie 1 o bien la serie 2 cuál es la diferencia la diferencia es que jake o heridos tiene la misma a pie pero no soporta internet explorer 6 7 y 8 y por tanto al no soportar estos navegadores pesa menos es más ligera tarda menos en cargar así que lo que tenéis que hacer en un momento dado es pensar qué usuarios va a tener vuestra aplicación web si queréis dar compatibilidad si pensáis que todavía podéis tener usuarios con versiones antiguas de internet explorer probablemente os interesará ir a la serie uno de jquery si sabéis que vuestros usuarios no tienen ya estas versiones o bien no les queréis dar soporte directamente podéis descargaros la versión 2 en este caso como el navegador que voy a usar es un navegador con soporte completo para html5 es decir no es interés es perder 6 7 u 8 me voy a descargar la serie 2 ahora se me dice puedo descargar o bien la versión comprimida o bien la versión descomprimida la versión descomprimida ocupa unos 200 y pico cast la versión comprimida ocupa creo recordar unos 60 y 70 cas así que yo lo que voy a hacer ahora al menos al principio es usar jquery no quiero meterme dentro de jquery a modificarlo por eso como de momento solo quiero usarlo me voy a bajar la versión comprimida me la descargo en mi carpeta de cuero permitidme que le cambie el nombre para simplificar lo voy a llamar jey query punto j s ocupa bueno un poquito más de lo que había previsto verdad tampoco mucho ocupa 83 casas y voy a llamarla de la siguiente manera lo primero que he hecho como habréis visto es asegurarme que la librería está físicamente al lado del archivo index.html a continuación escribo la siguiente línea script también porque no type text javascript y ahora voy a decir ese receso es la fuente es jake query js aquí dentro yo voy a escribir mi código aquí arriba lo que he hecho es cargar la librería jay query por supuesto es importante que la librería query la carga antes de escribir vuestro código para que cuando llegue a escribir nuestro código previamente haya cargado todos los métodos todas las funciones todas las propiedades de la librería jay query a continuación no es obligatorio pero es algo que yo os recomiendo muchísimo vamos a poner el siguiente método voy a poner y así de paso estudiaremos un poco la sintaxis de jquery que al principio es un poco compleja pero finalmente es muy repetitiva por tanto os costará al principio de entender pero una vez que la entendáis la tenéis para siempre en primer lugar se pone un dólar no tiene nada que ver con el dólar que se pone en php nada que ver el dólar de yale wearing es un dólar de ese lector cuando yo selecciono algo pongo dólar paréntesis y dentro del paréntesis voy a poner algo que seleccionó y por tanto algo que una vez seleccionado le voy a aplicar una operación en este caso voy a poner documento lo que acabo de hacer por tanto es poner dólar document selector document seleccionó el documento pongo punto y a continuación después del punto voy a especificar qué es lo que voy a hacer con lo que es seleccionado y evidentemente si selecciona algo es porque quiero hacer algo con eso que he seleccionado así que antes del punto y con el dólar se pone lo que voy a seleccionar y desde después del punto se le pone lo que voy a hacer con eso que he seleccionado documento puntos web y la primera función que vamos a ver de jay query es la función review y la función breve indica la función que vamos a que vamos a ejecutar cuando el documento haya sido cargado qué quiere decir esto cuando el documento esté preparado ejecuta la función de inicio que es la función de inicio la función de inicio es una función que vamos a crear ahora donde pondremos algo de código y una función en javascript simplemente es una cápsula de código es una cápsula cuidado debe tener el nombre es una cápsula que engloba a unos cuantas no es cuántas instrucciones función inicio yo aquí he puesto inicio porque aquí pone inicio es decir cuando el documento esté preparado ejecuta la función de inicio tiene que haber una función llamada de inicio aquí podría exponer longaniza pero aquí tendríais que poner longaniza también es decir recordad siempre os lo digo que todo aquello que esté en inglés tenéis que ponerlo exactamente como está pero todo aquello que pongamos en español en castellano se puede cambiar he dicho que siempre recomiendo esta función pero no os he dicho porque la razón es muy sencilla html y javascript se empiezan a ejecutar desde arriba hasta abajo mira desde arriba hasta abajo desde arriba hasta abajo y hay veces que realizó operaciones en javascript que dicen que modifique el body modifique un botón modifique un div modifique una cabecera el problema cuando llegó hasta aquí igual ese botón esa cabecera ese día ese elemento no está estoy llamando a algo que realmente todavía no existe que hace javascript o en ese momento es paciente y se espera no falla es impaciente da error y no lo vuelve a intentar por eso mucha gente lo que hace a modo de truco es que el javascript que se debería introducir en la cabecera lo introducen al final del documento html para asegurarse que cuando se llegue a javascript antes haya cargado todo lo que está dentro del botín esta es la misión exactamente de la función web y la misión de la función review es decir qué este código exista en javascript pero no se ejecute hasta que el documento no esté preparado y cuando el documento está preparado cuando se ha cargado completamente vale por tanto por este motivo esta función de javascript este método de jquery no es obligatorio pero yo os lo recomiendo para que lo pongáis como regla general en todos los proyectos para aseguraros que para cuando se ejecute el código javascript sea que todos los elementos dentro del body se haya encargado correctamente vamos a trabajar con algo que nos deje claro cuál es la función de javascript y de jquery para ello para empezar voy a crear un botón y voy a capturar eventos de usuario porque esto es en gran medida lo que hace javascript que es responder a eventos hay interacciones que haga el usuario no es lo único que hace pero es una gran parte de las funcionalidades de javascript así que creó un botón y le digo pulsa me si te atreves por tanto aparece aquí un botón llamado pull same que hace un botón html si no le doy comportamiento javascript pues no hace nada porque muchas veces suelo decir que la etiqueta button en html no sirve de nada hasta que no aprendes javascript pero este es el momento ahora vuelvo a usar la fórmula de selector de jquery voy a usar todo el tiempo esta fórmula por tanto dólar paréntesis dentro de los paréntesis específico lo que seleccionó lo que seleccionó es la etiqueta es decir sí quiero seleccionar la etiqueta button simplemente dentro de los paréntesis tengo que poner button ahora pongo a punto y pongo clic el evento clic en la función clic simplemente lo que hace es decir cuando sobre botón hagas clic ejecuta algo por ejemplo mensaje una función llamada mensajes creó una función llamada mensaje y dentro del mensaje voy a poner algo tan sencillo y algo tan molesto como alert expulsado el botón guardo recargo saco siempre la consola para ver si he cometido algún error a un nivel tan sencillo no creo que cometa errores cuando la cosa se complique con toda probabilidad los cometer así que bueno recargo fijaos que el alerta no se ejecuta porque el averno se ejecuta hasta que sobre el botón no haga clic por tanto cuando quiero sobre el botón sólo entonces se me dice expulsado sobre el botón llegó clic en cualquier otra parte no se me dice nada pero si hago clic en el botón se me dice has pulsado el botón el código se empieza a complicar un poco es cierto veréis que finalmente tampoco se complicará tanto pero vamos a leerlo un poco en castellano básicamente se nos dice cuando el documento esté preparado ejecuta la función de inicio qué dice la función de inicio la función de inicio dice cuando sobre el botón hagas clic ejecuta el mensaje y la función mensaje dice simplemente alerta ha expulsado el botón si os fijáis no es tan complejo de leer cierto es que para poner un solo botón hemos creado una estructura algo compleja pero esa estructura ya la tenemos ahí para cualquier cosa que queramos hacer vamos a trabajar ahora con una propiedad css con una propiedad llamada css para ello voy a crear un divo con una idea ponme y ahora dentro del ibex voy a poner algo tan sencillo como este es un texto que hay en el libro guardo recargo y aquí lo tenemos tenemos el botón y tenemos el deeb que tiene el y de poner una de las algunas noticias que os voy a dar es que los electores en jquery los electores por y de iu por clase se basan en los electores de css cuál era el selector css para unir la almohadilla cuál era el selector css para una clase el punto pues en jquery ocurre lo mismo por ejemplo voy a decir cuando sobre el botón hagas clic ejecuta una función llamada cambia a color la función llamada cambia color dice selecciona el elemento que tiene el y de comer por tanto como seleccionó un y de lo que es poner una almohadilla almohadilla ponme equivale a y de paul me punto css y ahora pongo comillas comillas coma comillas comillas y digo background rgb por ejemplo rojo 25 500 así que guardo recargo y probamos el código cuando sobre el botón haga clic ejecutar e cambia color y cambia color al dip con y de ponme le cambia el fondo para que sea rojo comprobamos como pulsó el botón pulsa me y el fondo del dif se vuelve de color rojo he conseguido cambiar una propiedad css dinámicamente cuando pulso un botón a continuación vamos a trabajar con un método cuya funcionalidad de es doble esto en programación orientada a objetos de funciones se dice que está recargado o que se dice que está sobrecargado que es y escribir texto así que por ejemplo voy a hacer lo siguiente con mi punto texto paréntesis texto quiere decir escribe o lee texto si los paréntesis están vacíos textos se usa para leer si los paréntesis están llenos se usa para escribir este es un otro texto qué voy a hacer ahora cuando sobre botón haga clic ejecutar e cambiar color y la función cambia a color por una parte dentro del libro con y de paul me va a poner un texto en el que pondrá esto es otro texto y por otra parte le va a cambiar el color a rojo fijémonos como le doy a pulsa me y pone este es otro texto y el fondo ha cambiado para ser de color rojo como os decía hace un momento text tiene un doble comportamiento y esque si está vacío se va a encargar de leer voy a hacer algo un poco complejo atención mira voy a hacer que por ejemplo en el dip ponga 25 5 25 50 esto creo recordar que es el color amarillo así que ahora digo bar color es igual a tome punto texto es decir creó una variable llamada color y digo que la variable color es igual al texto que haya dentro del pont cuál es el texto que hay dentro del dispone ahora mismo es 255 25 50 si yo ahora vengo aquí voy a decir encadenando encadenó con paréntesis y signos de + voy a hacer esto un poquito más pequeño aquí color y lo que voy a hacer es que el color de fondo sea de aquel color que yo haya puesto aquí arriba comprobemos que funciona si todo está funcionando correctamente el fondo será de color amarillo porque amarillos 255 25 50 guardo recargo pulso y se pone de color amarillo si digo color es 0 0 255 eso es azul así que guardo recargo pulso y el fondo se vuelve de color azul es decir en este caso no he usado text para escribir sino que como el parámetro está vacío como el paréntesis está vacío lo que estoy haciendo es usar el text para leer para leer algo de texto y en este caso lo que he hecho es ese texto que he leído lo he introducido dentro de una variable la variable color y esa variable color es la que he utilizado para decir de qué color tengo que poner el fondo del vive con él y de llamado paul me vamos a trabajar en este caso voy a borrar un poquito de este código vamos a trabajar en este caso con un deber y de es igual a texto así que vive y de es igual a texto va a contener un texto yo lo que suelo hacer mirad es irme al ipsum puntocom y dentro del lips un punto com eso luego copiar el texto un poco como texto de prueba cambia de colores no design no pasa nada esconder voy a hacer lo siguiente button y d esconde esconde el texto y button y d muestra y muestra el texto a menos que tengo esconde el texto y muestra el texto esto me sirve para enseñaros un par de métodos muy divertidos pienso yo llamados esconder y mostrar hide show así que digo cuando sobre esconder aquel elemento que tiene el líder esconde haga clic ejecuta me la función esconder sin embargo cuando sobre muestra haga clic se ejecuta la función mostrar he prometido que voy a usar dos funciones luego tengo que crear dos funciones function esconder function mostrar guardamos recargamos lo que voy a hacer por tanto ahora es algo tan sencillo como simplemente hacer lo siguiente el texto punto hair es decir seleccionar aquello que tiene el id de texto y esconderlo texto punto show seleccionar aquello que tiene el iii de texto y muestra melo porque recordemos que el dip dónde está el texto tiene el iii de texto si ahora recargo por supuesto para ver los cambios comprobaremos lo siguiente esconde el texto lo que hace es esconder completamente el dif del texto muestra el texto lo que hace es volver a mostrar el dif del texto haydée y show a su vez admiten parámetros los parámetros son los siguientes yo puedo poner por ejemplo el número de milisegundos que va a tardar en ocurrir la acción en este caso milisegundos equivalen a un segundo se hará guarde recargo atención esconde el texto fijaos que lo esconde en un segundo muestra el texto me lo muestra también en un segundo se puede usar milisegundos o se pueden usar slow y fast veremos por tanto como ahora el texto se esconde lentamente pero se muestra rápidamente se esconde lento y se muestra rápido de todas formas a mí no me hace especial gracia el hide y el show porque porque no solo que los muestren los esconde minados cuando los cuando el texto lo que ocurre es que como que se escala como que se va hacia estas tiene de aquí y esta redimensión a mí no me hace demasiada gracia por tanto yo en lugar de usar los métodos de hair y show prefiere usar los métodos de fate out para esconder y face in para mostrar hacen lo mismo la diferencia es que me esconde el texto y me muestra el texto pero no lo re escala no lo hace pequeñito hacia una esquina por tanto podéis ser los que queráis pero a mí esos dos no se me gustan me quedan más elegantes que los que los deja el show antes de continuar avanzando en el resto de métodos de jquery vamos a ver para qué nos podría servir lo que hemos aprendido hasta el momento vamos a practicarlo por ejemplo con una web móvil con una aplicación que cargue una web pensada para dispositivos móviles cuál es un problema de los dispositivos móviles no ya los tiempos de carga que también es decir al menos a día de hoy los anchos de banda de los teléfonos móviles son más pequeños que los de las conexiones por cable domésticas pero es que además cada petición que haces a una página web tarda más en cargar por tanto en una página web para escritorio no pasa nada porque tengas varias sub páginas html y vayas con el menú de navegación superior de una a otra pero eso en la web es horrible porque cada página nueva a la que quieres entrar es más tiempo de espera lo que vamos a hacer por tanto es utilizar lo que hemos aprendido de jquery para automatizar ese proceso mirad lo que voy a hacer voy a crear un documento llamado web móvil punto html ese documento por supuesto lo voy a abrir tanto en el editor como en el navegador permitidme copiar un poco de la estructura vacío un poco los elementos pero me quedo un poco con el esqueleto me quedo con la plantilla y ahora relleno lo siguiente relleno un género el relleno un menú y dentro del main voy a hacer secciones bieber y d principal así que principal contendrá el siguiente texto esta es la sección principal de la web donde te hago un resumen de todo lo que te quiero contar voy a crear otro vivo llamado por ejemplo el blog aquí el blog de la web en la que estás entrando creo otro vivo y pongo por ejemplo contacto y pongo un formulario en ese formulario pongo un input permitidme que no ponga demasiados parámetros porque simplemente quiero ilustrar el ejemplo input type su meta si yo ahora guardo y recargo algo así como para ponerte en contacto conmigo [Música] el siguiente formulario más de recargo y tengo esto en la parte principal de la web dejadme verlo un poco como un móvil lo tengo todo apelotonado además de que puedo escribir un title muy móvil puede escribir una etiqueta mecha meta charset es igual a efe 8 para que me aparezcan correctamente los acentos y ahora por último en el género voy a poner esta es una web móvil ahora voy a hacer un menú de navegación pero un poco especial porque va a ser un menú basado en botones bouton inicio busto blogs y un botón contacto es decir un botón por cada una de las zonas principales de la web esta es una web móvil el menú de contacto o el menú de navegación estaría con botones y todas las secciones aparecen a la vez todas las secciones se han cargado simultáneamente en la pantalla si queréis antes de empezar con el código javascript lo que voy a hacer es poner un poco de estilo así que nada button tiene un width del 100% para que los botones estén horizontales como es costumbre verdad margin-bottom de 10 píxeles para que los botones estén un poquito separados entre ellos si queréis voy a poner por ejemplo 5 píxeles ahora dentro del body pondré algo así como font family es igual a san serif para que la letra sea de tipo sin cursiva sin remates sin decoraciones y voy a poner a uno con 6 14 píxeles quizás no tanto vamos a ver 24 píxeles y text align cuál es el problema en este caso pues el problema es que la sección principal de la web el blog y el formulario de contacto todos aparecen a la vez en la pantalla digo vive pues no sé qué aparece en el libro vamos a poner un padding de 10 píxeles para que haya un poquito de espacio en el input voy a decir un wish del 100% para que los elementos de formulario lleguen hasta el final y una y otra vez un margin de 5 píxeles un margin bottom de 5 pixeles para que cada uno de los elementos flote hacia abajo quizás no os digo que no quizás es una maquinación muy parca pero desde luego es una creación típica y encontrable para un teléfono móvil y ahora sí vamos a aprender vamos a usar lo que hemos aprendido hasta ahora de javascript y de jquery para trabajar el contenido de la web móvil atención todos en la pantalla porque ahora voy a hacer lo siguiente mirar todo aquello que sea un día punto es decir cuando entres en esta página lo que quiero que hagas es que todo aquello que sea de tipo debe esconderlo así que guardo recargo y observó como todo lo ha escondido ahora en el inicio en la función de inicio quiero que hagas lo siguiente aquello que tiene el id principal puntos así que guardo y recargo y fijaos como lo que tiene el aire principal solo el principal aparece el blog y el contacto desaparecen lo que he hecho es configurar el comportamiento de la función de inicio pero ahora voy a configurar el comportamiento de los botones que de momento no tienen ningún comportamiento así que hago lo siguiente cuando sobre cuidado tengo que poner y des botón inicio y d botón blog para poder identificarlos correctamente e inequívocamente botón contacto vale pues ahora sí cuando sobre botón inicio haga clic ejecuta muestra inicio cuando sobre botón blog haga clic ejecutaré nuestra blog cuando sobre botón contacto haga clic ejecutar e muestra contacto y ahora he prometido que voy a crear estas funciones tengo que crearlas function muestra inicio function muestra blog y function muestra contacto y digo qué todos los días – escondes pero el principal – muestras todos los días – escondes pero el blog me lo muestras todos los días menos escondes pero el contacto me lo muestras aquí así que si ahora pruebo este programa veremos como cuando pulsó inicio aparece inicio cuando pulsó blog aparece blog cuando pulsó contacto aparece contacto y así con cada una de las partes de esta página web lo que quiero que veáis lo que quiero que entendáis es que yo estoy navegando por una página web y yo no estoy cada vez cargando una nueva página del servidor yo lo que he hecho es pedir una página entera grande si queréis al servidor tardará lo que tarde pero sólo tarda una vez toda la página se me carga pero se me esconden todas aquellas partes que no son el inicio y luego con los botones lo que voy haciendo simplemente es jugar a un truco de mostrar y esconder lo que más me interesa en cada momento por supuesto en lugar de show y de jaime podría utilizar los comandos que he comentado antes que me gustan más que son faire out fast y facebook así que voy a hacer esto un segundo que los cambien y feiral fast cuando recargo el programa de hace esto blog y fijaos cómo desaparece el anterior y aparece el siguiente bueno esto ya es más una cuestión estética que otra cosa simplemente es para que no ocurra todo tan rápido sino que hay una pequeña transición entre una y otra una de las diferencias principales dentro de que finalmente nos sirven exactamente para lo mismo pero una de las principales diferencias entre php y javascript es la interactividad ya que con javascript tenemos contenido completamente interactivo mientras que con php tenemos cada vez que recargar la página lo que voy a hacer por tanto es un ejercicio y así de paso aprendemos a un parámetro nuevo llamado calculadora vamos a hacer una calculadora por tanto voy a cargar la calculadora dentro de la vista de código y dentro del navegador voy a hacer lo siguiente permitidme que me copien una vez más la plantilla para vaciarla es decir mirar me copió el body pero el body vacío me copió la función de inicio pero el resto las eliminó y el estilo en principio no quiero nada decir lo que quiero es una plantilla vacía para empezar a trabajar ahora dentro del body voy a hacer un input interesante que no hace falta que esté dentro de un formulario llamado es un tipo texto con el id operando 1 voy a hacer otro y de otro y quería decir con él y de operando dos por ejemplo les voy a poner un signo más en medio así que ahora voy a hacer un igual y voy a hacer un input de tipo texto llamado resultado si recargo en la pantalla aparece esto este campo más este campo es igual a este campo de aquí usando lo que hemos aprendido hasta ahora deja pendiente de javascript de jquery vamos a crear una pequeña y sencilla calculadora por tanto voy a hacer lo siguiente mirad para ejecutar la calculadora eso si necesito un botón un botón llamado calcula para que todos se pongan en funcionamiento así que tengo aquí un botón calcula cuando sobre el botón haga clic quiero que se ejecute la fórmula de suma así que empiezo de esta manera cuando sobre el botón haga clic ejecutar la operación la operación es una función que tengo que crear que tendrá el siguiente código tensión mirad creó una variable operando 1 y digo operando 1 del elemento que tiene el ive operando 1 su valor su value qué quiere decir value by the value de valor es el valor que tenga dentro el campo de tipo input creo a continuación otra variable bar operando dos es igual a de aquel elemento que tenga el y de operando dos su value su valor y ahora por último voy a decir que en aquel elemento que tenga el valor el y de resultado quiero poner el value operando uno más operando 2 al método value le pasa lo mismo que al método texto cuando el método value está sin parámetros el paréntesis está vacío quiere decir que quiero leer quiero leer un valor pero el mismo método cuando el paréntesis está lleno quiere decir que quiero escribir quiero escribir un valor vamos a ver si esto funciona guardo recargo y digo 5 más 3 calcula y me dice cuidado 53 bien porque me he dicho 53 que es 53 53 no es la suma entre 5 y 3 es simplemente el 5 y ponerle detrás un 3 es decir que pongo hola mundo y cálculo aquí pone hola mundo por tanto si pongo 5 y 3 no es capaz de detectar que esto es un número y cree que es una cadena cree que es comillas 3 no números y no una cadena bueno os voy a decir un pequeño truco que es usar la librería matemática de javascript por tanto voy a poner más puntos round es decir redondea me este valor este es un pequeño truco qué sirve simplemente para que al redondear obligatoriamente un número obligatoriamente una cadena se va a convertir en número el resultado de un redondeo matemático siempre va a ser un número por tanto ahora le digo 6 más 4 cálculo y es igual a 10 le digo tres más cuatro y me dice es igual a 7 le digo este número más este número de aquí y es igual a este número de aquí es decir tengo una pequeña calculadora donde lo que quiero que veáis es que cuando yo pongo aquí un número y aquí pongo otro número cuando le di al botón calcula yo no estoy yendo a otra página para realizar el cálculo sin salir de esta página aquí mismo estoy realizando la operación y por esa razón por simplificarlo mucho es por lo que digo que javascript es mucho más interactivo que php vamos a continuar aprendiendo métodos de jay query de jquery para eso lo primero que voy a hacer es cargar la carpeta con la que estábamos trabajando anteriormente voy a cargar la carpeta de jay query y por tanto voy a crear un nuevo proyecto llamado por ejemplo index tos no quiero que sea una nueva carpeta quiero que sea un nuevo archivo un nuevo documento de texto en este caso como anteriormente tenía el documento index.html pues lo voy a llamar index 2 para no estropear el que hemos hecho anteriormente así que como siempre lo cargo tanto en el editor como en el navegador y o bien copiando lo de algún ejercicio anterior o bien escribiendo lo creo la estructura que siempre debemos crear como mínimo para trabajar con una página web consistente en la etiqueta de html que dentro de ella contiene la etiqueta head y la etiqueta gori recordamos que para trabajar con un javascript y conseguir query es necesario crear una etiqueta de script que sea se cierra dentro del gel y en este caso lo que voy a hacer es usar una primera copia de esta etiqueta para cargar la librería de jake wearing y una segunda copia para crear mi propio código recordamos que también es conveniente no es obligatorio pero es conveniente poner que la etiqueta script de este tipo de texto barra basket la librería de guardia y se ha cargado correctamente deberíamos ser capaces de hacer lo siguiente documento punto rebbie ejecuta la función de inicio y la función de inicio una cosa que suelo hacer yo muchas veces es esto antes de hacer ningún ejercicio antes de hacer ningún proyecto para comprobar que he cargado correctamente la librería de jay query lo que hago es un alert hola así que si la ley debería ha cargado correctamente reconocerá el método ready y si reconoce el método ready ejecutará el inicio y si ejecuta inicio ejecutará aller por tanto recargo y si veo ahí hola es que hasta ahora voy bien recordamos también que recomiendo sacar la consola siempre visible la consola especialmente cuando estamos aprendiendo para comprobar qué bueno pues lo que estamos escribiendo funciona correctamente vamos a empezar hoy por un método que es bastante interesante porque lo vamos a usar mucho durante el desarrollo de nuestros proyectos que es el método html es parecido al método que hemos visto anteriormente llamado text donde recordamos que el método text tenía dos comportamientos si no tiene nada del paréntesis se ocupa de leer pero si tiene alguna de paréntesis y se ocupa de escribir pues el método html hace exactamente lo mismo por tanto voy a crear un botón en el que voy a poner pool sabe y voy a crear un dip vive y de texto y dentro del texto voy a poner algo como esto es un texto que está dentro del día algo así de sencillo lo que haremos ahora será lo siguiente vamos a advertir de un evento vamos a decir que cuando sobre el botón haga clic ejecutaré la función de texto y la función de texto va a hacer algo tan sencillo como esto voy a poner bar texto es igual a seleccionar aquello que tenga el iii de texto y punto html paréntesis paréntesis sin poner nada en los paréntesis sin poner nada dentro de los paréntesis quiere decir que ese método html se va a usar para leer no para escribir y por tanto ahora voy a hacer algo tan sencillo como alert donde que es alert texto pues hablar texto es una variable que ha acogido el contenido html con el llamado texto por tanto ahora sí guardo y recargo vemos que tengo el botón pulsa me y vemos que tengo el texto que está dentro del dif por tanto si le doy a pulsar me comprobaremos que él en aller pone esto es un texto que está dentro del dip es decir lo que ha hecho es capturar el contenido de ese vive el dip con y de texto capturar su contenido html lo ha puesto dentro de una variable llamada texto y lo que ha hecho es lanzarla dentro de un alert voy a aprovechar este momento para deciros que esto que acabo de hacer en la pantalla es un poco quizás se puede considerar un malgasto de recursos pero es algo que suele hacer frecuentemente la pregunta es por qué he almacenado este contenido dentro de una variable si luego la variable realmente solo la uso para lanzar una alerta se diría que estoy malgastando una variable una variable sirve para otras cosas lo hago así lo hago extendido luego en dos o más líneas simplemente para que tengáis claro qué es lo que se está haciendo primero se captura el texto y luego se lanza en un alert para hacer algo más eficiente lo que haría probablemente es cortar este contenido y meterlo directamente dentro de la alerta es decir me saltaría directamente la asignación de la variable porque técnicamente puedo hacerlo lo que pasa es que tiendo en las clases a no hacerlo porque ese contenido al menos no hacerlo al principio ese contenido es más difícil de leer es una alerta que entonces está seleccionando un texto que entonces estás cogiendo su html técnicamente es lo mismo y de hecho si guardas y recargo veréis que funciona exactamente igual lo que pasa es que cuando estás aprendiendo cuanto más te separen y cuanto más te trocee en las cosas mejor suele ocurrir muchas veces en programación que aquello que es más eficiente es más difícilmente legible por tanto aunque sé que estoy digamos mal utilizando una variable en este caso lo voy a hacer así para que de cara a leerlo ahora que estáis aprendiendo podáis entender mejor qué es lo que hace cada una de las líneas de este como he dicho anteriormente el método de html al igual que el método text tiene dos funcionalidades o bien escribe si tiene algo dentro de html o bien lee por tanto en este caso voy a borrar este código y voy a hacer lo siguiente dentro de texto dentro de aquel elemento que tiene el líder llamado texto voy a poner html pero ahora voy a poner algo dentro de los paréntesis dentro del método html voy a poner algo como esto el texto que sustituye a la anterior lo que hago por tanto cuando pulsó el botón ahora es seleccionar aquel elemento que tiene el líder llamado texto y poner un texto html en el cual digo texto que sustituye a la anterior guardo y recargo y comprobamos ahora cuando pulsó el botón pulsar lo que hace es aquel elemento que tenga el iii de texto y atención le da igual lo que tenga dentro el elemento llamado texto porque lo que va a hacer es sustituirlo es borrar todo lo que hubiera anteriormente y poner únicamente aquello que yo haya especificado dentro del parámetro del método html poder escribir dentro de un día es algo que es bastante útil pero muchas veces nos encontraremos que queremos no ya sobre escribir lo que había dentro del dip sino añadir algo de texto al dib así que para ello en lugar de usar el método html usaremos su método hermano llamado up en aprendizaje o añadir up en lo que hace realmente es simplemente al decirle pulsa me texto que sustituye la anterior no sustituye sino texto que se añade al anterior recordamos que si he usado una ñ debería poner la etiqueta meta charset es igual a 8 dentro de la cabeza por tanto fijaos como esto es un texto que estaba dentro del libro así que texto que se añade el anterior y se añade y se añade y se añade y se añade como ahora estoy usando de forma no estoy usando el método up en lo que ocurre es que en lugar de sustituir al texto anterior veo lo que tenías y le pongo además el texto que voy a poner a continuación sea cual sea el texto que haya dispuesto con html dentro de los parámetros de ese método insiste una vez más en que todo el rato estoy y voy a estar trabajando con un método de escritura más bien sencillo desglosado y probablemente poco eficiente en este caso estoy haciendo una cascada de llamadas a métodos y ahora luego lo haré muchísimo más y es que tengo un documento ready que llamada inicio de inicio se llama al texto con lo cual tengo un poco como una carrera del gato y el ratón voy de una parte a otra yendo de un método a otro de una función a otra y de una parte a otra esto lo estoy haciendo para que el texto esté separado en diferentes líneas y el texto sea lo más legible toda el posible lo más entendible posible más adelante cuando estemos aumentando la dificultad de nuestro aprendizaje lo que haremos es trabajar con métodos más comprimidos por ejemplo uno muy sencillo y muy entendible es simplemente eliminar espacios yo tengo que poner espacios no tengo que poner retornos de carro dentro de las funciones con lo cual vemos que solo con esto ya me habría ahorrado unas cuantas líneas pero puedo vivir mucho más allá que esto en lugar de crear aquí una función y llamarla cuando realmente esa función tiene un único comando puedo hacer una cosa que se llama una función anónima y local lo que haría de esta manera es aquí dentro de inicio pondría function no le pondría nombre porque por eso una función anónima y local function pero sí que le pondría la fe porque si no no está bien escrito le pongo el paréntesis y le pongo las llaves fijémonos que es como este function pero no le estoy poniendo un nombre no le estoy poniendo nombre porque la voy a ejecutar directamente y aquí dentro pondría esta función con lo cual podría eliminar esta línea porque ya no sirve para nada pero es más detesto una vez más es una llamada a una función que realmente solo está haciendo una cosa así que aquí otra vez en lugar del de texto podría poner function sin nombre una función anónima y local y corto y pego todo esto así que ya puedo eliminar la función de texto porque realmente no hace nada y esa línea que acabo de escribir ahí hace lo mismo que el código que tenía antes probablemente cuando alguna persona vea nuestro código o cuando vosotros mismos entréis a alguna web e inspecciones el código y digáis hoy a ver como descrito el código en esta página web veáis código escrito de esta manera y puede que se os salten un poco los plomos porque digáis para mí esto qué es esto no lo he visto yo vale simplemente quiero deciros en este vídeo que esto se puede hacer pero no lo voy a hacer por lo menos al principio de la formación porque esto que funciona exactamente igual insisto se guardó y recargo veremos cómo funciona exactamente igual pero esto es mucho más difícil de leer cuando estamos al principio de nuestra formación técnicamente si te fijas dice cuando el documento esté preparado y cuando sobre el botón hagas clic en ese caso sobre el texto añade ese texto técnicamente no es difícil de leer pero fijaos lo que ocurre aquí punto y coma llave paréntesis punto y coma llave paréntesis yo os digo que las probabilidades de equivocarse ahí son muy altas y las probabilidades de equivocarse y no saber dónde te has equivocado son más altas todavía porque tienes que saber que este paréntesis va con este que esta llave va con esta que el punto y coma es por el cierre del comando que este paréntesis viene de aquí de la función clic este punto y coma es por el comando que esto viene de aquí y que este paréntesis viene de aquí lo cual al principio puede ser un lío bastante grande así que desde un principio no os quiero ocultar que existe esta manera de escribir código pero una vez más por la filosofía esa de antes de correr aprende a andar no la voy a usar de momento así que voy a pulsar control z voy a dejar el código como estaba y vamos a seguir escribiendo de esta manera fijaos estoy usando seis líneas para escribir lo que se puede hacer en una sola línea pero prefiero hacerlo así a cambio de que el texto leyendo de arriba a abajo sea más legible ya cambio de que podáis entender mucho mejor se abre y donde se cierra cada paréntesis y cada llave vamos a trabajar con eventos de formulario eventos de campo de formulario donde básicamente los eventos que tenemos además pero los principales son dos que son focus y son blog así que creó un nuevo documento de texto index punto index 3.7 ml lo cargo dentro del editor dentro del navegador y bueno voy a copiar permitidme que copiar un poquito la estructura básica de la página html para perder el menor tiempo posible voy a borrar lo que sería la plantilla y voy a escribir lo siguiente voy a crear aquí dentro del body un campo input type es igual a texto y le voy a poner el y de lm así que dentro del inicio voy a poner algo como por ejemplo cuando sobre léeme haga focus que quiere decir focus focus quiere decir cuando entras dentro de un campo de formulario así que voy a ejecutar la función entrada y la función entrada va a ser de momento un alert khedira ha centrado permitirme hacer otra cosa permitirme ya de paso enseñaros un elemento llamado console punto log para mostraros el console punto lo que es muy importante que tengáis la consola mostrada así que en consumo el punto lo voy a poner algo como has entrado al campo de texto lo que hace el con soul love mirad atención es que en cuanto yo pincho en cuanto hago focus en el campo en lugar de sacar una leer molesto por aquí arriba en lugar de eso escribe algo aquí en la consola así que hago clic y fijaos que aquí abajo pone has entrado en el campo de texto está en la consola pero no es un mensaje de error simplemente es un mensaje de log es un mensaje de registro luego podríamos traducirlo como registro ya que estamos os diré que hay múltiples propiedades para los múltiples métodos para los por ejemplo en lugar de lo podría poner warning recuerdos ir a warning warm momento bien warning aquí estás warn vamos a verlo ahí y fíjate dice has entrado al campo de texto pero lo dice poniendo un símbolo amarillo con una admiración es como un warning en este caso me estoy lanzando yo a mí mismo un barrio y también disponemos de otros enseña los tres principales que es error entonces error pincho y aparece con un símbolo de error con letras roja has entrado al campo de texto vamos a ver hoy que hoy probablemente nos servirán para mucho pero cuando estemos dibujando nuestros programas en javascript es decir cuando estemos localizando dónde puede estar un error tanto el log como el warning como el error no serán de bastante utilidad hoy de momento ahora de momento voy a utilizar el log así que vemos que he hecho clic y me dice has entrado al campo de texto puedo poner otro comportamiento que diga cuando sobre lee me haga punto blur ejecutaré la función salido por tanto la función salido dirá con soul ha salido del campo de texto así que fijémonos en este caso como cuando entro cuando hago clic me dice has entrado al campo de texto y cuando pincho fuera para sacar el cursor me dice ha salido del campo de texto focus ha centrado blur ha salido esto nos puede servir para crear multitud de aplicaciones que validen elementos de formulario ya que por ejemplo podría hacer lo siguiente voy a quitarlos con soul punto log y voy a hacer lo siguiente aquí arriba del todo voy a poner bar nombre es igual a juan así que a continuación haré lo siguiente cuando ejecute entrado diré que aquel elemento que tenga el iii de lm le quiero aplicar un parámetro css donde diré que el background sera yellow será amarillo es decir en el momento en el que haga clic dentro del campo el fondo será amarillo ahora yo aquí puedo escribir algo y ahora voy a hacer lo siguiente en el momento en el que yo salga del campo lo que voy a hacer es validar qué es lo que hay ahí dentro y si lo que hay dentro es juan entonces pondré el fondo de color verde y si lo que hay dentro no es juan pondré el fondo de color rojo es decir un ejemplo muy primitivo si queréis pero para validar un campo de formulario por tanto dentro de salido atención que voy voy a decir bar contenido campo es igual a aquel elemento que está dentro de lm punto vale recordamos que para leer el valor de un campo de formulario se usa el método vale y ahora con una estructura de control de las que hemos visto anteriormente pongo lo siguiente si contenido campo es igual a nombre donde recordemos que el nombre es juan aquí lo tenemos aquí arriba en este caso voy a hacer lo siguiente voy a decirle que lm el background screen es verde como diciendo ok lo has conseguido si no recordamos que la estructura de control tiene un caso negativo que es el elx en cualquier otro caso digamos quiero que el fondo me lo pongas de color rojo así que vamos a verlo lo que tengo ahora es que cuando entro dentro del campo se pone de color amarillo amarillo precaución amarillo de no sé lo que vas a escribir pero vamos a ver qué escribes así que si yo como ‘juan y pulso fuera del campo para salir en ese caso válida y me lo pone de color verde porque es cierto que el contenido es juan pero si yo recargo y pongo vicente cuando salgo me lo pone de color rojo porque esperaba que yo hubiera puesto juan y no he puesto juan así que si pongo en juan me pone el fondo de color verde pero si no pongo juan me pone el fondo de color rojo un ejemplo un ejemplo probablemente sencillo de para qué nos sirve el focus y el blues pero el foco si él no nos sirven para muchas cosas combinada pues combinados por supuesto con otras herramientas de javascript es decir nos sirve para validar contraseñas para validar correos electrónicos para validar nombres de persona para validar cualquier elemento que esté dentro de un campo de un formulario voy a hacer otro ejemplo práctico de un focus y en este caso me voy a volver a mi carpeta de query me voy a hacer otro archivo llamado como me demandó en este caso pues lo voy a llamar [Música] válida no se valida contraseña variedad contraseña html no cargo copio la plantilla la pego y lanzó también válida contra escena contra [Música] el navegador borro evidentemente todo aquello que no quiero y ahora voy a hacer lo siguiente voy a decir imputada text y de contraseña ahora con un poquito de css voy a maquetar un día y de ayuda y voy a hacer lo siguiente tu contraseña debe tener entre 4 y 8 caracteres porque por lo que sea por la lógica de negocio de nuestra aplicación hemos decidido que así sea así que en este caso tengo esto así y voy a editar un poquito el estilo de este ejercicio para hacer lo siguiente así que aquí el elemento que tiene el iii de ayuda va a tener las siguientes características primero va a tener un wifi de 300 píxeles un hub de 200 píxeles vamos a verlo un border de un píxel solid great vamos a trabajar también con un padding de 10 píxeles y un borde radios de 0 píxeles 10 píxeles 10 píxeles 10 píxeles es decir va a tener un demasiado grande madre mía así que 100 píxeles y no le voy a decir nada de la altura guardamos recargamos ahí lo tenemos perfecto y ahora con un poquito de posicionado es decir con un poquito de posición relativa voy a poner top menos 10 píxeles left vamos a decir 90 píxeles por tanto ahora ese campo de ayuda vamos a verlo es relativa está mal escrito aquí está relativo era fijémonos como ese campo de ayuda aparece un poco sobre impreso verdad por tanto no voy a poner 110 píxeles lo cuadramos un poquito mejor 140 píxeles hay justo ahí lo quería bien yo no quiero que esa ayuda aparezca hasta que yo no ponga el ratón encima del campo de formulario por tanto voy a hacer lo siguiente al principio el campo de ayuda quiero que esté oculto punto hide por tanto recargo y comprobamos como el campo de ayuda al principio está oculto a continuación voy a hacer lo siguiente cuando sobre contraseña haga punto focus ejecutaré ayuda bueno ejecutaré técnicamente sí es cierto vale así que function ayuda y ayuda lo que hará simplemente es aquel elemento que tiene el de ayuda voy a decir face in quiero failing flow quiero que aparezca poco a poco es decir tengo el típico campo de formulario donde cuando hago clic aparece tu contraseña debe tener entre 4 y 8 caracteres claro cuidado porque cuando salgo del campo no desaparece así que probablemente tendré que decir que cuando sobre el campo contraseña haga blur voy a ejecutar otra función llamada válida y la función válida va a hacer lo siguiente en primer lugar lo que va a hacer es que si la ayuda aparece cuando hago focus la ayuda desaparece cuando hago blur comprobamos como pincho y sobresale me salgo y desaparece pincho sobresale me salgo y desaparece pero ahora además no solo voy a hacer esto sino que debo validar que realmente se cumpla la condición es decir cuando es algo debo validar que lo que haya escrito esté realmente entre 4 y 8 caracteres dentro de la validación lo que voy a hacer ahora por tanto es decir lo siguiente fijaos contenido el contenido que he puesto dentro del campo es contra escena punto vale recordamos que vale es el método con el cual puedo leer el contenido de un campo y ahora digo si contenido punto link la longitud del contenido el número de caracteres del contenido es menor que 4 en ese caso voy a poner contra escena css background pues por ejemplo red no se pone así sino que se pone así background red así que guardo recargo vamos a probarlo vamos a ver como si pongo y salgo se pone de color rojo pero si pongo 5 así claro cuidado porque en este caso ya está de color rojo así que voy a poner else y voy a poner contraseña es igual a verde en caso contrario es igual a ver fijémonos que pongo triple a menos que cuatro caracteres y aparece de color rojo pero si pongo cinco aparece de color verde así que gracias a la propiedad lens gracias a la propiedad de longitud de la cadena puedo averiguar cuántos caracteres tiene una carrera determinada y puedo utilizarlo para realizar validaciones es más cuidado porque fijaos qué pasa si pongo muchos caracteres me lo dice como verde y yo había puesto a la condición de que la contraseña debe tener entre 4 y 8 caracteres que está pasando en este caso pues que solo es validado que el ente es menor que 4 en este caso para arreglar esto vamos a hacer uso de esos operadores bolea nos tan horribles de aprender que parece que no va a salir para nada pero realmente sí que sirven que es que ponemos dos condiciones si contenido punto links es menor que 4 y es decir también que contenido punto links es mayor que 8 sí es cierto perdón ah no si es cierta alguna de estas afirmaciones en ese caso el fondo me lo pone rojo pero si no es cierta ninguna de esas afirmaciones en ese caso me lo pones de color verde vamos a verlo vamos a comprobar que pongo tres as el fondo se me pone de color rojo pongo 5 as y el fondo que se le pone de color verde pongo más de 8 as y el fondo se me pone de color rojo es decir hemos conseguido en este caso detectar qué es lo que hay dentro de un campo incluso realizar algunas validaciones lo cual para validar formularios veremos que nos irá tremendamente útil vamos a ver ahora que el método css está bien de hecho estamos viendo que le estamos sacando partido pero no siempre nos sirve por tanto me voy a hacer otro archivo dentro de esa carpeta me voy a hacer en este caso un index 4 punto html lo cargó en editor lo cargo en navegador me copió un poco verdad es esa estructura borro todo aquello que no forme parte de la plantilla me quedo con el estilo porque para este ejercicio que vamos a hacer ahora es importante y voy a escribir lo siguiente mirad en el body voy a poner un botón sobre el que voy a poner una leyenda cambia estilo y ahora por ejemplo voy a poner un dip connie de texto en el que voy a escribir algo como esto es un texto que estoy escribiendo realizar una prueba así que guardo y recargo y lo que me gustaría ahora sería que cuando pongo el botón cambia de estilo voy a darle un y d llamado pone estilo cuando pincha el botón cambia de estilo lo que quiere hacer es lo siguiente cuando sobre el botón pone estilo hago clic quiero ejecutar con estilo y la función con estilo va a hacer lo siguiente atención mirad me voy a decir sobre el texto quiero poner una propiedad css llamada background como por ejemplo rgb 255 200 200 es decir rojo clarito así comprobamos que el fondo se pone de color rojo clarito por ejemplo quiero poner otra propiedad css que sea el fondo family quiero que sea sans-serif quiero que sea sin remates sans fijémonos como al recargar al cambiar el estilo cambia la tipografía y cambia el fondo puedo poner tantas propiedades como quiera por ejemplo el fondo size lo quiero poner a 8 píxeles y por tanto puedo poner tantas propiedades css como quiera pero hay un problema el problema está en que en el momento en el que yo veo que estoy repitiendo demasiadas veces algo es el momento en el que veo que quizás se debería hacer de alguna manera mejor si quieres poner una propiedad css bueno puedes hacerlo perfectamente con el método css pero si quieres poner varias a la vez quizás te convenga más los métodos que vamos a aprender ahora lo que voy a hacer poner una clase css llamada estilizado y estilizado le voy a decir background es igual a rgb 255 200 como a 200 font family es igual a sans serif o sea lo mismo que antes y font-size es igual a 8 píxeles y por tanto dado que he puesto el estilo en css ahora enjoy query lo único que tengo que hacer es usar un método llamado haz class cuidado que la ce es mayúsculas y aquí muchas veces la gente se equivoca adk las estilizado es decir al texto le pongo una clase llamada estilizado estilizado evidentemente debe coincidir con el nombre de la clase que hayas creado en css así que ahora ha hecho con una sola línea lo que antes había hecho en tres por tanto si ahora pulso sobre cambio de estilo le aplica otra vez el estilo pero con una sola llamada definiendo las propiedades directamente dentro de fs s pero lo más divertido incluso es que el atc las se compagina con otra función otro método llamado remove class así que cuando sobre quita estilo haga clic ejecutar en la función quita estilo quita estilo será un botón que voy a crear a continuación quita he pasado aquí quita estilo quita estilo bien entonces la función quita estilo en lugar de decir atc las va a decir remove class así que veremos por tanto imaginaos que hubiera que tenido que poner tres líneas css por aquí y otras tres por aquí para quitar el estilo pues simplemente con esto lo que hago es que cambia de estilo le pone de estilo y quita estilo se lo quita puedo cargar y descargar dinámicamente clases usando jay query una cosa muy divertida o por lo menos a mí me hace mucha gracia es cuando usamos el ancla si el ritmo class por cierto se usa bastante nos vamos a elements nos vamos al body y nos fijamos que el botón no el texto vamos a verlo recargamos de nuevo es igual a texto y fijémonos como le doy a cambia estilo y aquí de repente por el class estilizado le doy aquí está el estilo y pone class nada cambia de estilo quita de estilo es decir ese efecto por supuesto se ve reflejado en pantalla pero también se ve reflejado en la inspección de elementos dentro del navegador especialmente si usamos un navegador con inspector como chrome un par de consideraciones a este ejercicio ya lo que estamos haciendo en general en primer lugar tener en cuenta yo siempre os digo que aquello que ponéis en castellano puede estar en minúsculas o mayúscula según como queráis pero aquello que está en inglés tenemos que ponerlo exactamente como yo lo pongo entonces sí pongo por ejemplo haz class y remezclas la hacer minúscula lo que me puedo encontrar es que cuando le doy a cambia de estilo me dice and if i’m not a function me da un error este puede ser un problema muy grande porque me dice andy fine simplemente porque dice que esta función no está definida yo igual esperaría de la consola que en lugar de decirme and find me dijera add class de esa manera yo sabría un poco mejor por dónde está el error en este caso yo sé por qué me ha pasado unas cuantas necesidad que el error está en la fe y por tanto tiene que ser mayúsculas porque si no no funciona otra cosa de la que os quiero hablar es que ahora mismo para estos ejemplos que es un ejemplo sobre todo con una base didáctica tenemos tanto el css como el javascript metido dentro de el mismo archivo html bueno más adelante evidentemente tendremos todo esto como archivos externos y cuando tengamos todo esto como archivos externos no pasa nada porque el programa lo reconocerá exactamente igual de bien una demostración me voy a la carpeta de jay query y me voy a hacer una carpeta llamada recursos y dentro de recursos me voy a hacer un documento nuevo de texto llamado estilo css y me voy a hacer también un documento de texto nuevo llamado código punto js el archivo con extensión j ese es un archivo pensado exclusivamente para contener javascript así que los dos los cargo en el navegador o al extremos y voy a hacer lo siguiente el estilo lo voy a pasar al estilo y el código lo voy a pasar al código de tal manera que ahora en el script le voy a decir que src es igual a recursos código punto j s es decir tengo que decir exactamente dónde está ahora ese código y por supuesto el style lo voy a sustituir por la etiqueta link es igual a esta del sit h ref es igual a recursos estilo punto css probablemente conforme vayamos avanzando los proyectos tendrán más esta forma tendrán más este aspecto pero tras haber hecho esto quiere que comprobéis que funciona exactamente igual de bien porque habiendo externalizado tanto el javascript como el css reconoce perfectamente el javascript donde están las clases css es decir no es obligatorio que estén dentro del mismo archivo yo lo estoy haciendo eso sí con motivos didácticos para que lo tengáis todo en un solo archivo y no vayamos todos los otros saltando de un archivo a otro

vamos a hacer un proyecto con javascript y con jay query llamado calculadora para hacer este proyecto por tanto fijaos en primer lugar voy a hacer un archivo llamado index html y me voy a cargar también la librería de square y la voy a sacar de una carpeta anterior y la voy a pegar dentro de esa carpeta tengo un archivo vacío index.html tengo un archivo de estudio tengo un archivo llamado index html y el archivo llamado jquery lo cargo tanto en el editor como en el navegador y empezamos a trabajar así que me hago de momento estructura típica a 0 volví y hago lo siguiente por una parte title calculadora por otra parte voy a hacer la etiqueta mientras charset es igual a usted 8 y ahora voy a hacer una etiqueta script que me va a cargar y el cuero y por otra parte una etiqueta script que es realmente con la que voy a estar trabajando dentro de esa etiqueta script diré que cuando documento punto 9 ejecutaré la función de inicio y la función de inicio va a tener algo de código bien dentro del body además voy a poner también una etiqueta de estilo style dentro del body voy a hacer un día con id calculadora el dip con y de calculadora tendrá las siguientes partes por una parte va a tener un día con y de pantalla calculadora si queréis voy a poner algo así como calculadora aquí o en pantalla y permitirme un poco estilizar calculadora tendrá un wifi de 300 píxeles un height de 500 píxeles un background rey box shadow 0 píxeles 10 píxeles 20 pixeles rgb 00.00 punto 3 si queréis lo voy a poner en líneas separadas para que veáis bien cada una de las propiedades aunque no quería poner el principio junto porque este ejercicio va a tener bastante código así que guardo recargo y tengo eso en la pantalla quizás un poco grande lo voy a poner de 200 x 300 píxeles y me gusta un poco más eso es una laguna dura mucho mejor voy a decir también por tanto que bordes reviews es igual 10 píxeles a ello traemos sonaría el cuerpo de la calculadora ahora voy a decir que calculadora pantalla tendrá las siguientes características wef es igual al 100% es igual a 30 píxeles padding 10 pixeles background voy a poner un rgb verde clarito 200 255 200 dejamos como tengo un verde clarito cuidado aquí parece que se me ha olvidado ponerle un padding de 20 píxeles ahora sí y quizás el wef le voy a decir pues vamos a ver los 80 píxeles este entramado ah claro 180 píxeles ahora si se ha quedado casi ajustado yo diría que si bien un pequeño borde radios de 4 píxeles para que la pantalla está un poco redondeada e incluso un truco que te que a mí me gusta mucho usar que es lo siguiente que es boxes a down the 0 píxeles 5 píxeles 10 píxeles rgb 000 0.3 in set la palabra in set lo que hace es que la sombra esté como por dentro es decir en lugar de ser como este elemento que sobresale de la pantalla parece como que la sombra se meta dentro del elemento lo que me queda por tanto a continuación es crear los botones de la calculadora así que para no complicarme mucho porque yo siempre suelo decir que no hay que hacer tablas para maquetar salvo en aquellas ocasiones donde realmente valga la pena hacer la tabla yo creo que en esta ocasión vale la pena hacer una tabla por tanto voy a poner un table y de botones y voy a hacer una tabla que va a tener pues las filas que haga falta y va a tener cuatro columnas vamos a verlo mirar 1 2 3 y 4 columnas y voy a hacer unas cuantas filas así que aquí por ejemplo pondré el momento que saca la calculadora de windows y vale perfecto 7 8 9 15 6 123 bien 7 8 9 y un espacio vacío que estoy dejando 456 1 2 3 vamos a ver qué aspecto tiene esto en ese aspecto entonces voy a hacer lo siguiente guys es de 100% y border dejadme poner esto de un píxel simplemente para comprobar que la tabla claro cuidado esto es lo que no quería que la tabla está dentro de la calculadora pero lo que es cerrar el dip de la pantalla el dip de pantalla lo había abierto pero no lo había cerrado lo tengo que cerrar para que los botones estén en la parte de abajo muy bien voy a hacer también lo siguiente width es igual al a 25% y así los botones tendrán exactamente la misma longitud piense hecho esto ya puedo esconder los bordes porque ya los estoy viendo y ahora dejadme estilizar un poco los botones haciendo lo siguiente calculadora y table rtve es decir la columna que está dentro de la fila que está entre la tabla que está dentro de calculadora para que nos entendamos y voy a decir lo siguiente background es igual a black vamos a verlo perfecto el color es igual a white bordes radios es igual a 50 píxeles height es igual a 50 píxeles y with es igual a 50 píxeles es decir lo que quiero es que los elementos de tabla se conviertan en estos pequeños botones por supuesto les voy a decir que text align centre les voy a decir incluso que font-size es igual a 24 píxeles fondo web es igual a mol y font family es igual a sans serie y de esa manera como veis me puedo maquetar unos botones muy divertidos de calculadora dejadme que ponga un par de veces entre la pantalla de los botones simplemente para que respire un poco más este espacio de aquí me estoy reservando como os podéis imaginar estos botones para poner más menos multiplicación división y así el de borrar el de memorizar el de lo que sea dentro de este dentro de esta calculadora porque estoy todavía trabajando con el estilo no estoy trabajando todavía con la programación lo que me gustaría es que los botones tuvieran un poquito más decorados claro que eso no lo puedo hacer si no es con un gradiente y recordáis que para los gradientes atención mirad recordad que me gusta usar una página como ultimate css3 gradients del editor porque me gusta hacer cosas así es decir si quiero que el botón tenga un aspecto como plastificado pues seleccionó por ejemplo ese gradiente me copió su código esto me ensucia bastante a ver esto me ensucia bastante el código porque me lo amplía bastante bueno que se va a hacer de más remedio así que guardo recargo y así los botones pues tienen un poco ese estilo le puedo ese puedo uno menos agresivo uno como éste por ejemplo oeste si quiero hacer que el botón sea mate así que copio con cuidado sabiendo desde dónde hasta donde tengo que copiar pego recargo tengo por allí un botón un poco más agradable voy a usar también pues algún tipo de grabado como éste para poner también un poco de degradado a la carcasa no me gustaría usar dos colores negros más que nada para que se distingan los botones bueno pues voy a usar s dónde estás copi lo pegó en calculadora cuidado con los colores copio recargo y un poco para que se me quede una calculadora un poco más bonita en calculadora voy a ponerle un borde de un píxel sol y grave para que remarque un poquito el borde de la calculadora y a los botones les voy a poner un pequeño boxeador box guión shadow de 0 píxeles 3 píxeles 6 píxeles rgb a 0.00 0.3 por ejemplo es decir para hacer como que los botones están un poco en relieve y lanzan sombrita sobre el fondo es por tanto como con css muchas veces podemos hacer más cosas de las que un principio puede aparecer aparte también pues voy a hacer que a ver la calculadora de windows más menos por partido me queda una fila de botones me queda el 0 la coma y eso a ver qué hago bueno pues me voy a crear una fila más claro es que esto me obligará por tanto esto que tiene el 0 claro el 0 no quiero que me ocupe dos espacios entonces esto se me va a salir y le voy a decir el estilo que está aquí que el estilo en altura no quiero especificar una altura sino que quiero que sea la propia tabla la que empuje así que ahora sí no sólo de relleno pero me da igual porque ahora lo que quiero hacer es ser olvidado cuál era el orden más o menos por partido así que esto es más menos y partido vamos a guardar vamos a ver que tenemos ya eso ahí incluso en la primera columna de arriba voy a decirle que eso será por ejemplo ce donde se sería borrar memoria y empezar otra vez otra vez desde cero tengo ya por tanto este estilo pero observo que a medida que empieza a hacer proyectos más o menos grandes y éste no es que sea especialmente grande pero igual hasta ahora es el más grande que hemos hecho pues el código se complica y de repente ya no es cómodo trabajar en una sola hoja html por eso es muy normal que he llegado a este momento nos hagamos una carpeta nueva llamada recursos o live librerías como queráis llamarla me hago un archivo nuevo y lo voy a llamar calculadora punto css lo cargo le vuelvo todo el estilo y al volcar de todo el estilo me vengo aquí y cambio el style por un link link wray es igual a esta el sit ese es el relleno h ref es igual a la calculadora punto css comprobamos siempre comprobamos que al recargar sigue funcionando correctamente lo que tenemos que hacer ahora es simplemente empezar la parte de la programación así que para la parte de la programación voy a hacer lo siguiente mirar voy a decir que cuando sobre un elemento usted haga clic quiero poner quiero poner el valor del tv dentro de la pantalla es decir si pulso el 9 quiero que en la pantalla ponga 9 si pongo x quiero que en la pantalla ponga x así que la función poner función poner va a hacer lo siguiente primero valor cuidado al valor es igual a una palabra reservada de javascript muy curiosa y muy graciosa que es gris y quiere decir que si he hecho clic sobre él 939 es este solo hecho clic se hace clic en este no me refiero a otro me refiero a este sobre el que estás trabajando eso quiere decir dis sobre this digo qué punto texto recordamos el texto el texto lo que hace es leer un valor y ahora dentro de aquel elemento que tiene la calculadora en pantalla quiero ap no quiero ir quiero añadir el elemento valor así que guardo y recargo y vamos a ver si funciona recordamos que ahora ya sería conveniente ir sacando la consola porque conforme se compliquen más el ejercicio las probabilidades de error pueden aumentar si pulso 6 aparecen 6 si pongo partido aparece partido si pongo 8 aparece 8 si pongo x es como lo que voy pulsando de los números va apareciendo correctamente en la pantalla por cierto que la pantalla está en modo arial es perdón en el modo también sin román no me gusta mucho de esa fuente llegado a ese punto incluso me gusta ir a google web es una librería de fuentes de google que no hace falta descargar sino que las puedes vincular directamente a google y digo por ejemplo en el categories quiero solo fuentes de tipo display y por ejemplo está quiero esta fuente así que quiero usar la mira me voy aquí abajo y digo una regla de importación y digo en calculadora pantalla no perdona primero aquí arriba del todo las importaciones de las fuentes y ahora en la letra le digo font family audio wife ahora ha calculado la pantalla font family audio wire audio white es la fuente que acabo de cargar de aquí por tanto guardo y recargo y fijaos como ahora las letras que aparecen son de la fuente que he cargado auto wire de google bien incluso con el tory todo eso verdad cuidado hay una cosa que no he puesto verdad que es el igual así que tengo que poner el igual para en un momento dado poder pulsar aquí y ver qué sale de ahí ver otro botón que no he configurado hasta ahora es el df así que voy a decir id borrar y ahora aquí voy a hacer lo siguiente para no confundir porque va a tener un comportamiento diferente cuando yo es un número que cuando pulse el acero es igual no hacen lo mismo así que digo clase número class esto no es un número bueno eso técnicamente actúa como número no lo ves pero actúa como tal pero esto es d bueno voy a poner una clase class borrar cuidado porque ahora no le digo te digo punto número cuando sobre un número haga clic poner pero ahora digo cuando sobre el elemento que tiene la clase borrar haga clic ejecutar la función borrar y la función borrar lo que va a hacer es calculadora pantalla punto html y nada pero no nada vacío sin nada dos comillas porque está vacío es leer pero yo no quiero leer yo quiero escribir pero quiero escribir nada así que mira como guardo y recargo y voy a escribiendo y si en un momento dado quiero pulsar a la cee se borra todo y vuelvo a empezar vale si queréis incluso podría poner un cero o vale podría poner cualquier otro carácter pero fijaos cómo poco a poco vamos empezando a darle código a los números y alarte claves borrar dentro de este ejercicio lo que quiero hacer ahora es evaluar la expresión que yo escriba aquí arriba es decir que me devuelva realmente el valor y eso lo voy a hacer con una función llamada eval dentro de javascript por cierto qué eval es de javascript y no de jquery por tanto hago lo siguiente esto es el elemento igual me estás aquí class y resolver así que digo cuando sobre resolver haga clic resuelve la función resuelve ahora lo siguiente la función resuelve lo que hace es bar lo que tengo que resolver una variable un poco larga es igual ah coge el texto que hay dentro de calculadora pantalla toma ese texto toma ese texto y mételo dentro de una variable ahora digo var resuelto es igual a igual lo que tengo que resolver es decir evalúa lo que tienes que resolver resuelve lo que hay ahí dentro y por último dentro de calculadora pantalla primero lee ese texto resuelve lo y ponle el resultado así que var calculadora pantalla punto text resuelto fijaos que en este caso estoy haciendo el doble uso del texto este texto se usa para leer el contenido aquí lo resuelvo y este que se usa para devolver con escribiendo el contenido de esos resuelto un pequeño ejemplo a ver si funciona igual no funciona le digo tres más tres le doy al igual y me 16 le digo 50 x 12 pero ahora tengo que decir que la próxima tecla que use verdad me tiene que borrar la pantalla o no depende como preciso como por de la calculadora pero 56 partido 5 es igual a 11.2 ahora pensemos que debería ocurrir cuando yo pulso la siguiente tecla normal en una calculadora es que puedes pulsar por ejemplo el número 8 fuera la siguiente operación pero lo que está ocurriendo aquí es que se escribe la siguiente el siguiente carácter bueno en este caso voy a recurrir atención mirad me voy a usar el típico tópico y clásico truco de los contadores así que voy a crear una variable por aquí arriba llamada borra me es igual a cero y digo vamos a ver si borra me dónde estás aquí un segundo uno aquí borra me es igual a 0 en este caso vale en este caso nada pero si no se borra me es igual a 1 en ese caso en calculadora pantalla con html nada pero fuera en el momento en el que resuelva le digo borra me es igual a 1 y aquí cada vez que haga esto digo borra me es igual a 0 vamos a verlo y ahora digo 6 por 5 ok 30 y escribo 16 fijaos cómo se borra el 30 y me pone un 6 porque porque he usado una variable a modo de contador llamada borra me que hace borra me borra me es igual a 0 con lo cual cada vez que yo toco una tecla yo digo si borra me es igual a cero no hagas nada borra me es igual a cero sí sí sí ahora mismo sí que lo es pues no hagas nada veis borra me es igual a cero yo no he dicho me es igual a uno todavía así que cuando llego aquí cuando toco una tecla borra me es igual a cero pues no hagas nada ahora cuando yo le doy a la tecla de igual resuelve y al final dice borra me es igual a 1 así que en ese caso la siguiente tecla que pulso me dice borra me es igual a cero no ya no es cero así que como ya no es cero no se ejecuta en este caso sino que se ejecuta en elx y se ejecuta eso de aquí que es calculadora pantalla html ponme nada y cuidado antes de hacer nada más borra me le digo que vuelva a ser cero porque si no me seguiría borrando la pantalla cada vez que acabo de hacer se llama un truco de contadores se llama usar contadores un contador como un interruptor encendido apagado para jugar con ese encendido y apagado para tomar decisiones entonces es un truco en cuanto a filosofía de programación no se considera un truco muy limpio pero es un truco muy eficaz como veis y muy sencillo de entender y por tanto es un truco que todo el mundo usa en la gran mayoría de programas en el mercado voy a hacer una mini introducción a un concepto llamado refactorización la refactorización lo que hace es que el código sea lo más limpio y lo mas mantenible posible uno de los principios de la refacturación es intentar que no haya cosas repetidas en el código así que en el momento en el que yo he escrito esta línea en mi cabeza hay algo que se me ha encendido porque hay algo que me he dicho yo juraría que esto lo escrito antes entonces esta línea realmente si os fijáis yo la he escrito antes es decir si borra me es igual a cero o mejor dicho si borra me no es igual a cero lo que hago es borrar pero si le doy a la función borrar también estoy usando un borrado debo evitar siempre que pueda el tener partes repetidas dentro del código porque eso hace que el código sea menos mantenible o más difícil mantenible es decir si llegó un día quisiera modificar esta función tendría que acordarme que también tengo que modificar está ya lo sé que ahora mismo no es muy complejo para el código que tenemos en la pantalla pero cuando hago los programas más complejos veréis que el código será tan largo que excederá lo que ves en la pantalla ya os he puesto el problema pero cuál es la solución la solución puede ser tan sencilla como hacer lo siguiente voy a hacer una función llamada borra me mira para que hacer una función llamada borra me si ya la tengo hecha se llama borrar así que aquí en lugar de decirle que quiero ejecutar esta línea le voy a decir que quiero directamente llamar a la función borrar acordaos que así se define una función y así se llama a una función de esta forma cuando ahora le dé por ejemplo algunos números y le dé a resolver el siguiente número que ponga me borrará la el contenido de la pantalla simplemente porque el llamado a la función borrar que a su vez llama al borrado es decir e insisto es una introducción muy sencilla y muy light a lo que es la refactorización por la reflector y zación lo que hace de la misma manera que antes hemos visto que había varios elementos css repetidos y la repetición no nos gusta al escribir código en este caso tampoco nos ha gustado borrar en dos líneas iguales y lo que he hecho es buscar una solución para que a partir de ahora sólo tenga que mantener esta línea lo que voy a hacer a continuación es comprimir todo este código al comprimir todo este código lo que quiero hacer es que el uso de líneas y el uso de recursos sea lo más eficiente posible curiosamente vamos a ver que muchas veces la eficiencia está reñida con la mantenibilidad o con la re factorización yo lo que quiero con un código que se ha mantenido es que cuando yo u otra persona abra este código dentro de un mes dentro de dos dentro de un año de un vistazo sepa que hace este programa y en un momento dado pueda mantenerlo o quizás yo el año que viene diré voy a la calculadora que hice y le voy a poner unas cuantas funciones más yo lo que quiero es un código y que esté lo suficientemente limpio para que me dé ánimos para que me den ganas de añadirle funciones no que sea un código tan complejo que diga mira acabó antes volviendo a empezar que entendiendo por qué hice lo que hice por tanto desde este punto de vista el código que tenemos ahora mismo en la pantalla no está mal es un código bastante mantenible pero es un código bastante poco eficiente está escrito en esto que os decía antes como javascript para niños cómo sería este código en un formato más comprimido menos mantenible pero más eficiente pues sería así primero me voy a todo este código me voy a pegar en una página aparte y lo voy a empezar a comprimir atención mirad me digo lo siguiente para empezar todo aquello donde veo valores lo voy a eliminar en lugar de usar un valor en lugar de usar un intermediario voy a quitar el intermediario ahora esto también es un valor me lo quito por tanto puedo eliminar esta línea hasta aquí se podría decir que estoy re factor izando que estoy eliminando un intermediario no deseado que no hace nada no tiene sentido que sólo gasta memoria aunque también estoy aumentando la complejidad de la lectura del código y ahora lo que haría es esto que a su vez es una variable lo pongo aquí como veis me he quitado unas cuantas variables que realmente me puedo quitar pero la lectura del código se ha complicado ahora hago lo siguiente digo resuelve es una función qué hace todo esto cuidado punto y coma ahora los necesito mucho porque voy a escribir en una sola línea ahora son muy importantes los puntos de coma así que la función resuelve ya me la puedo quitar la función borrar hace esto así que ya me puedo quitar la función borrar y la función poner cuidado porque aquí la cosa se complica hace esto primero el eve cuidado no tengo que colapsar todo ya que javascript irá muy mal con los retornos de carro y lo pongo allí y ya puedo eliminar la función poner convendría que evaluará si siguió funcionando correctamente bien en principio sigue funcionando correctamente y ahora por último si creéis que ya he acabado no he acabado porque lo que voy a hacer ahora es comprimir todo esto y me puedo cargar incluso la función de inicio y todo lo que hay en la función de inicio no pasó ahí y eso que tenéis en la pantalla es el código de la calculadora mucho más eficiente que gastan muchas menos líneas de código y por tanto al gastar menos líneas de código y al haber ahorrado unas cuantas variables intermedias primero gasto menos memoria como memoria intermedia porque gasto menos menos variables y segundo el archivo se descarga más rápidamente porque uso menos líneas de código sociales que no afecta al tamaño del archivo vamos a comprobar cómo la calculadora después de haber hecho esto sigue funcionando perfectamente soy uno de alterado la función del código solo he alternado la forma sólo alterado el cómo está dispuesto ahora este código que es más eficiente como podréis ver también es mucho menos mantenible será de repente ocurre un error y quiero ver dónde está el error me puedo peinar para encontrar el error porque es más me dirá está en la línea 9 y yo diré claro es que todos a la línea 9 porque son de allí realmente es una línea definitivamente grande así que esto existe este concepto existe y cuando sea que un software final hay veces que siendo el software final y teniendo claro que funciona correctamente y que no lo vais a tocar más teniendo claras esas premisas y quizás alguna otra podeis comprimirlo pero si no se da ese caso a veces es preferible que el software sea menos eficiente pero que sea mas mantenible que cuando lo leas puedas entender perfectamente por qué hiciste lo que hiciste y dónde puedes tocar para aumentar la funcionalidad de qué estoy hablando al aumentar la eficiencia es decir con esto que yo he hecho el software va a funcionar la calculadora va a funcionar diez veces más rápida cinco veces más rápida dos veces más rápida antes gastaba 500 casas ahora gasta 20 casas probablemente no en este software que he hecho qué es eso pues muy sencillo una calculadora la ganancia ha sido mínima en este caso concreto que es un ejemplo más didáctico que otra cosa simplemente os estoy hablando de la eficiencia a un nivel general a un nivel filosófico en este caso pues igual la calculadora cuando el dedo ya a igual en lugar de resolverse en 0000 dos segundos se resuelve en cero cero cero cero un segundo qué dices a ver me da igual para a 0 0002 vale perfectamente pero es un poco la filosofía de la deficiencia porque este ejercicio es sencillo pero más adelante haréis ejercicios mucho más complejos donde igual hacer una operación en lugar de 0.00 dos segundos son dos segundos y por mejorar la eficiencia pasar de dos segundos a un segundo pues eso ya se nota de cara al usuario lo que voy a hacer de momento como os decía es sobre todo por un motivo didáctico os voy a devolver el código como estaba ya que veis que es un código mucho más extendido menos eficiente en cuanto al uso de líneas e incluso en cuanto al uso de variables que nos podremos saltar pero también es cierto que es un código mucho más legible mucho más entendible y por tanto mucho más fácilmente mantenible voy a hablar ahora de otro concepto y de hecho de este otro concepto que voy a hablar no sólo voy a hablar sino que os voy a demostrar que es la encapsulación es el cápsula miento yo estaba aquí permitirme que permitidme que el código javascript lo dirige también a esta carpeta live por tanto va a ser calculadora punto j s y lo voy a hacer mirar es simplemente derivar este código traspasarlo a calculadora js así de paso también aligeramos un poquito el archivo index html así que en este script digo src calculadora punto js tengo por tanto un script que carga la librería otro script que carga el código de la calculadora y tengo un vínculo que carga el estilo de la calculadora pero hay una cosa que no me gusta y lo que no me gusta es que tengo aquí un dip calculadora donde yo tengo que poner todo esto qué quiere decir esto realmente esto lo que quiere decir es que si yo le digo al proyecto le digo mira copia texto copia de esto copia de esto y copia de todo esto y esto es muy limpio lo de copia de tres líneas en esa calculadora súper guay pero de copias de todo este código ya no es tan limpio ya no es tan fácil de implementar bien por eso voy a modificar un poco este código dejadme primero que lo comprima dejadme primero que lo comprima me va a dejar de funcionar por cierto pero estaba todo previsto para lo corto lo voy a comprimir no voy a comprimir todo en una sola línea esto hará que sea menos mantenible pero es obligatorio para lo que quiero hacer ya veréis bueno técnicamente podría hacer esto sin preocuparme mucho de los espacios estoy poniendo todo en una sola línea sabréis por qué es un poco de trabajo sabéis qué hay un truco que es el siguiente y apuestos enseñó el truco que no había caído en él el truco es el siguiente en buscar y reemplazar le digo reemplazar nueva línea con nada y ya está entonces nueva línea en editores de código es contra barra n entonces simplemente con ese código con ese truco ya lo tengo copio ya nada en el código le digo en el botón inicio en función de inicio sobre calculadora punto html y le pongo todo eso viaje arreglado incluso hay otra cosa no lo quiero hacer ahora bueno aventín y le voy a decir que contra barra te me lo conviene con nada contra barra te es quitar el tabulador y poner nada así que así lo voy a hacer más limpio todavía y aquí estás así mucho más limpio que hace esto es esto lo que hace es que cuando yo ahora recargo la calculadora bueno vamos a ver lo de calculadora vale será que no les guardado calculadora calculadora junto a html aquí está calculadora dice que no lo encuentra qué raro vamos a verlo vamos a verlo sí pero es que está aclaró muy bien muy bien efectivamente es el problema y es que el archivo js estaba efectivamente en la carpeta calculadora bien algo así por tanto y damos cuenta cómo el calculadora está vacío pero simplemente el archivo js le dice selecciona aquel que tenga el i de calculadora y meterle todo esto con lo cual a la persona a la que le quieras dar esta calculadora simplemente dile mira copia estas tres líneas de código y en aquel día que se llame calculadora te va a crear una calculadora el único problema es que quizás haya dejado de funcionar vaya pues nada funciona perfectamente bueno en los eventos generados dinámicamente en html hay veces que javascript falla pero como en este caso no ha fallado pues vamos a darlo por bueno y más adelante os ilustrar el problema y la solución a ese problema de generación dinámica bien que es lo que tenemos en la pantalla pues lo que tenemos en la pantalla es que hemos conseguido encapsular la calculadora para que a partir de ahora en el proyecto en el que la queráis insertar simplemente sabréis que tenéis que copiar estas tres líneas de código la librería jquery que igual ya la tendrás puesta para cualquier otro motivo la calculadora el código la calculadora el estilo y el deeb donde quieres que aparezca la calculadora y sólo con eso ya tendréis una calculadora hecha es decir lo que hemos hecho es encapsular el código dentro de estos otros archivos una pena que no se puede encapsular más para que sea reutilizable de la manera más fácil posible en los proyectos que hagáis a partir de ahora en el futuro

voy a hacer un ejercicio con ajax lo voy a hacer trabajando con un chat y por eso mira a la atención lo primero que voy a hacer es crear una carpeta chat voy a crear un archivo que va a hacer lo siguiente mirad en primer lugar un archivo vacío index.html y en segundo lugar para demostraros lo que hace realmente ajax voy a crear un archivo llamado calcula punto php importante en este caso además que vamos a trabajar también con jake fuera y por tanto copio la librería de jay query en esa carpeta así que tengo index.html tengo calcula punto php y tengo la librería por tanto ahora me puedo ir al editor de código a recargar muy bien seguro que lo estoy ejecutando cargo calcula punto j s no hace falta que calculé la librería y una cosa muy importante atención ahora es que os deis cuenta que como voy a usar php me he metido en la carpeta de sham no estoy en la carpeta de escritorio y por tanto voy a cargar esa página web voy a cargar ese sitio web desde localhost a chats no desde arrastrar el archivo directamente desde su ubicación hasta el navegador sino que he puesto localhost barra chat ahora dentro de index html voy a poner doc type html html godín y dentro del jefe voy a poner en primer lugar un script tal javascript y ahora voy a poner un script que será propiamente el mío así que digo que cuando el documento esté preparado ejecutaré la función de inicio y la función de inicio ahora lo siguiente lo que voy a hacer es decir vive de igual a receptor y voy a decir en receptor me cargas cloud cloud es el método más sencillo para usar ajax en jake query el archivo calcula punto php y calcula php es un archivo escrito con la sintaxis de php por supuesto va a decir eco 33 así de sencillo por tanto si ahora guardó y recargo vamos a ver el momento en que saque en inspeccionar elemento con solá tengo un error y me dice lo siguiente vamos a ver en la línea 7 document ready inicio aclaro esto es porque no he cargado correctamente la librería de jay query muy bien ahora sí que la cargado type text barra javascript ahora sí lo que veremos en la pantalla es es decir quiero que veáis en la pantalla cómo he creado un llamado receptor y le he dicho dentro del receptor carga me el resultado de calcular punto php y calcula php es un simple y sencillo script que simplemente dice eco 3 + 3 vamos a apoyarnos en esta base para ahora a continuación crear una pequeña sala de chat una vez vista la base de lo que es realmente ajax voy a hacer lo siguiente voy a hacer un deber y de chat él vive y de chat va a tener un día que a su vez será mensajes y un viva fidel redacta en los mensajes aparecerán los mensajes que la gente va poniendo y en redacta aparece esa parte del chat donde tú puedes escribir lo que vas a decir así que dentro de redacta voy a poner un input type text neymar mi mensaje perdón y de mi mensaje y un botón y b envía envía mensaje tengo esto por aquí y mensajes pues tendrán los mensajes que haya en la sala así que lo voy a estilizar un poquito para que lo veáis mejor y ahora digo chat tendrá un width de 200 píxeles como mucho un height de 400 píxeles y un border de un pixel solid grade es decir una cosa así ahora lo que serán los mensajes tendrá un width del 100% un hack de 370 píxeles y ya está a bajar un poquito más esto vale y por último bueno envía voy a poner y por último el input tendrá un wish del 60% y el button tendrá un wifi el 40 por ciento un poco para que quepan los 2 voy a decirle 35% para que quepan los dos uno al lado del otro así que yo voy a ir escribiendo aquí cosas y lo que quiero es que a medida que voy escribiendo aquí cosas se almacenen dentro del chat la cuestión del chat es que es una aplicación que es compartida entre varias personas y como es compartida entre varias personas inevitablemente tiene que haber una base de datos bajo que soporte los diferentes los diferentes mensajes de las diferentes personas así que voy a hacer lo siguiente cuando sobre el botón enviar haga clic ejecutaré la función envía mi mensaje y la función envía mi mensaje ahora lo siguiente la función envía mi mensaje tomara el valor de mi mensaje y lo enviara así que barro mi mensaje es igual a eso de ahí y ahora digo en un elemento llamado ajax que no existe pero que ahora voy a crear punto low guarda mensaje php y mensaje es igual a mi mensaje vamos a verlo me falta únicamente crear por aquí un vacío llamado ajax qué hace realmente envía envía toma el valor de lo que yo haya dicho y se lo envía a un script llamado guarda mensaje php para que lo guarde en la base de datos que me hace falta por tanto bueno pues como podéis imaginar me hace falta entrar en la base de datos me voy a crear una base de datos que es el código por si queréis ir copiando me voy a crear una nueva base de datos llamada chat cotejamiento tf8 en español me creo una tabla llamada chat va a tener cuatro columnas mirad va a tener el ide es inevitable el utc es el tiempo la ip y el mensaje dejadme momentín que diga y todo esto y marchar y que el primer campo ya sabéis será primario y auto incremental tras lo cual le voy a guardar y únicamente me queda en el chat darle privilegios creando un usuario nuevo con el nombre de chat servidor local y contraseña chat continuó y ahí lo tengo lo que tengo es una base de datos llamada chat que tiene una tabla llamada chat con un usuario llamado chat y una contraseña demanda chat muy sencillo de conectar vale por qué pues porque ahora voy a guardar el mensaje dentro de esa base de datos con el script que voy a desarrollar a continuación el que va a guardar el mensaje es evidentemente el archivo guarda mensaje php el archivo guarda mensaje php existe no lo tendré que crear así que me voy a crear el archivo guarda mensaje php por supuesto lo cargo dentro de aquí y hago lo siguiente atención todos a la pantalla me voy a copiar de la carpeta que use en su momento bueno en sql vamos a index.php y me voy a copiar la conexión a la base de datos por tanto guardo mensaje lo que hace es que se conecta a la base de datos que está en localhost se conecta con el usuario chat con la contraseña chat y con él a la base de datos chat echarse etc 8 no es obligatorio pero es bastante recomendable y ahora base de datos punto query insert into chat values null 234 recordáis que mi tabla tiene cuatro campos verdad bien pues el segundo es el leit el segundo en el que he enviado ese mensaje es la fecha digamos el tercero es la ip la ip desde la cual ha enviado ese mensaje no me acuerdo cómo se mira que los php que type así que de pipe y le digo remote address estés y por último el mensaje fijaos qué mensaje lo estoy enviando con una variable get llamada mensaje así que huguet mensaje os imagináis que funciona la primera estaría muy bien entonces recargo le digo o la envía bien parce error vamos a ver el parce error en php así me sobra está muy bien así que la envío recibió no dice nada si no dice nada me voy al localhost me voy a chat y mira dice con la y de 1 está utilice la ip y 171 soy yo mismo y mensaje hola interesante porque ahora digo adiós envía recargo la tabla y me dice adiós es decir comprobamos que mediante ajax y cuando digo mediante ajax quiere decir que cada vez que le doy a este botón no recargo la página se va a la base de datos acordaos que le acabo de pulsar varias veces mira poniendo mensajes además fijaos cómo van corriendo los segundos es decir ya he hecho una petición a jacques para que a medida que yo voy aquí enviando cosas aquí arriba perdón en la base de datos vayan apareciendo ahora mismo mi chat es un poco ciego porque si yo escribo algo y le doy a enviar se va directamente a la base de datos pero no aparece en la propia ventana de chat así que ahora me voy a ir a la página principal voy a decirle qué mensajes le pongo un borde de un píxel solid black algo así voy a hacerlo un poquito más bonito verdad voy a decirle background murray y margin d 10 píxeles así un poquito más bonito bien y with del 95% el 90% para que hay verdad porque queremos cultivar tonito el ieral épico que el background en lugar de ser gris tan duro que sea rgb 220 220 420 bien ahora sí me parece amarillento ahora si los mensajes aparezcan allí bien para esto por tanto lo que tengo que hacer es que cuando inicio ejecutó una función llamada carga mensajes y la función carga mensajes va a hacer lo siguiente cargar mensajes dice dentro de aquel elemento que tiene el y de mensajes punto load un archivo php llamado carga mensajes punto php ojo que éste hace referencia a guardar mensaje php pero éste hace referencia a carga mensajes punto php bien en este caso evidentemente y como os podéis imaginar tengo que crear un archivo nuevo llamado carga mensajes php carga mensajes php va a hacer lo siguiente me vengo aquí este es un delito me copió una estructura de control de conexión a base de datos mysql a ser posible con una devolución en forma de bucle while voy a comentar y digo select all from chat selecciona me todo lo que haya en chat y ahora digo echo fila mensaje punto br para que cada mensaje baje abajo del todo si todo va bien algo así bien vamos a ver a cuidado tengo que cambiar los datos de conexión en chad efectivamente no me conecto a crm sino que me conecto a cuidado que ahí me he cargado una milla y aquí me cargado otra así que guardo recargo bien y me dice hola adiós adiós adiós adiós es decir aquí puedo enviar mensajes aquí puedo cargar los atención miran reenviar bolita y ocurre una cosa mirando que os voy a decir le voy a enviar se ha enviado la masa de datos pero esto no lo sabe solo si le doy a recargar ahí pone bolita porque no lo sabe por una razón muy sencilla y es que esta función la función carga mensajes se ejecuta una sola vez al principio del código pero no se vuelve a ejecutar otra vez por donde cargan mensajes voy a usar un truco de javascript un truco que atención hay que usar con mucho cuidado que es hacer un bucle infinito cuando estuvimos hablando de los bucles infinitos estuvimos hablando de que son peligrosos son peligrosos cuando están descontrolados pero yo quiero hacer un bucle infinito que esté controlado entonces lo voy a hacer con un set time out una función de time out que se carga a sí misma entonces le digo carga me carga mensajes cada 1000 milisegundos porque si le pusieron número 1 me cargaría esa función 1000 veces cada segundo y eso quiere decir que estaría haciendo mil peticiones por segundo a la base de datos que pasa con una con una base de datos que pasa con un servidor de base de datos cuando le hago mil peticiones por segundo que se me cuelga que pasa en un hosting comercial cuando hago un ajax en mil peticiones por segundo que me penalizan que me llama la atención porque estoy siendo un mal uso de los recursos estoy abusando por eso le pongo un segundo pero no quiero que me refresque mil veces por segundo con que te vayas a la base de datos y preguntes cada segundo para un chat es suficiente entonces fijaos como guardo y recargo y digo hola dos envío y dentro de un segundo aparece la 2 pero no es porque al pinchar aquí haya enviado este contenido aquí arriba sino que al pinchar aquí lo he enviado a la base de datos y desde la base de datos me viene hasta este elemento de aquí arriba hasta el dif donde se cargan los mensajes sería bastante conveniente por lo menos para identificar a los usuarios que están hablando en el chat que pusiera algún tipo de identificador en este caso como identificador voy a poner la ip es decir 9 21 681 30 chat si yo ahora pongo hola veréis que en la base de datos tengo un campo que me actúa un poco como identificador de usuario así que ahora encarga mensajes le voy a decir que echo fila y p guión mayor que un poco con una flechita como decirme a esta ip ha dicho este mensaje permitirme que no voy a poner un ver porque tanto no me cabe veis cómo voy aguardando eso va actualizando bien y ahora lo que voy a hacer también es con css y decirle que los mensajes tengan un font family de sants sheriff y que tengan un fondo 6 de 8 píxeles para que los elementos en el chat no se vean pequeñitos si queréis luego lo hago un poco más grande pero en definitiva para que me quedan bastantes mensajes igual han pasado un poquito vamos a poner 10 píxeles vamos a poner una cosa así bien y por último en carga mensajes en lugar de poner un ver voy a poner un hr para que cada mensaje esté dividido con un pequeño separador bueno sigamos sigamos vamos a ver hay una cosa que no me funcionará ahora hay varias cosas que tengo que arreglar una vez que si pongo hola mundo envió y dice hola mundo y si pongo cómo estás envió y dice cómo estás aparte de que fijaos que se me empieza a salir si hay una cosa que es el scroll pero el scroll me puede dar un poco de problemas vamos a ver voy a poner mensajes overflow el scroll y es que se pone un scroll pero el scroll se me queda siempre ahí arriba bueno ahora vemos cómo arreglar esto no os preocupéis porque tiene solución pero antes quiero solucionar esto de los espacios entonces lo de los espacios es un problema muy típico de ajax y de los chats lo que voy a hacer es usar una función de javascript llamada url encoder y en code en codeur y al revés bien entonces digo 5 de kooning de mi mensaje vamos a verlo ahora hola mundo envió y me aparece hola mundo por tanto simplemente tenéis que poner en collioure y al mensaje para que no os de problema con los espacios y ahora por último nos quedará por solucionar el problema del scroll para que cada vez que escriba un mensaje o cada vez que recargue los mensajes se vaya a la parte de bajo del toro una manera de resolver el problema es en sql decidir qué quiero seleccionar cordero bai etc descendiente es decir que quiero seleccionar los últimos mensajes y que quiero decir limit por ejemplo 10 que sólo quiero seleccionar 10 mensajes de esa manera desaparecerá el scroll y desaparecerá si el scroll y fijaos como sí digo digo esto es un mensaje le voy a enviar y aparece aquí arriba esto es un mensaje lo único que tendría que hacer ahora sería darle la vuelta a los mensajes para que éstos aparecieran arriba y éstos aparecerán bajo digamos dar la vuelta ahora de momento lo que voy a hacer para lo que se lee de es qué voy a dar la vuelta por aquí voy a hacer un chat invertido donde si yo pongo esto es un texto y le doy aquí a enviar aparece esto es un texto este es un mensaje y así vemos por tanto como tenemos un chat donde a partir de ahí cualquier persona puede entrar en esa dirección y puede empezar a chatear dentro de lo cual pues varias personas pueden participar en una sola aplicación web por último en este proyecto de chat vamos a limpiar un poco el código y mirar a la atención voy a simplemente liberar esta carpeta y voy a crear una carpeta llamada archivos dentro de archivos atención mirada calcula lo voy a eliminar porque ya no me hace falta y voy a lanzar dentro de esa carpeta cargo mensajes guarda mensajes y jquery por tanto ahora está agradable error supongo por tanto ahora lo que voy a hacer es lo siguiente lo dudo archivos de carga mensajes cloud archivos barra guarda mensaje él jquery lo cargo desde archivos jquery bien vamos a verlo ahora además dentro de archivos bien aquí ya ha empezado a dar un error ahí está bien entre archivos voy a poner un archivo nuevo un documento llamado estilo css y un archivo llamado chad punto j s estos dos archivos los voy a cargar vamos a verlos y ahora todo este código lo pongo en chat js y le digo que esto es src archivos chat punto js y este estilo no voy a poner dentro d estilo punto css dónde quitar el style y lo sustituye sustituir por un link rey está el sit h ref es igual a archivos estilo css de esa manera como veréis el proyecto queda mucho más limpio la carpeta queda mucho más limpia porque lo que hay únicamente en el raíz es un archivo index.hr ml y todo lo demás está metido dentro de esa carpeta archivos punto buenos tiempos punto nada luego quizás para ser más puristas tendría que haber hecho una carpeta llamada php otra carpeta llamada j s demanda de estilos pero claro crear una carpeta llamada estilos para guardar un único archivo pues no me parece tampoco muy eficaz por eso prefiero en este caso que este proyecto es pequeño crear una carpeta llamada archivos y guardado todo ahí y cuando el proyecto sea más grande y tenga 50 archivos pst 50 archivos css y 50 archivos js pues ahí ya crear una carpeta específica para cada tipo de archivo antes que nada comprobamos que sigue funcionando bien muy bien alguien me ha pegado por ahí el escroto muy bien así que hola y en este caso hola y vemos como sigue funcionando vemos como tanto de una manera como de otra sigue funcionando correctamente el chat estando ahora el proyecto bastante más organizado a nivel de estructura de archivos y directorios

vamos a empezar a crear un blog antes de crear el blog lo que voy a hacer es analizar qué es lo que quiero obtener de esta aplicación voy a analizar un poco cómo funciona un blog en primer lugar siendo una aplicación web 2.0 tengo que tener muy claro que en el fondo va a haber una base de datos esta base de datos almacenará información ahora veremos que almacena exactamente esta base de datos un blog como muchas aplicaciones web hoy en día es una aplicación que tiene dos caras por una parte tiene una interfaz de usuario tiene lo que se llama un front-end tiene una parte vista por el usuario final y por otra parte tiene un back end tiene lo que se llama coloquialmente un panel de control las dos partes van a tirar de la base de edad pero curiosamente cada parte será un poco independiente por tanto tenemos una primera parte que va a tirar de la base de datos tenemos también una segunda parte panel de control que va a tirar también de la base de datos dentro de esta primera parte podremos sobre todo lo más importante leer entradas del blog evidentemente lo primero que hace un usuario es poder leer entradas del blog a partir de ahí tendremos más funciones tales como por ejemplo buscar entre las entradas o también podremos filtrar por categoría hay muchas más cosas que se pueden hacer dentro de un blog pero digamos que estas son las tres piezas esenciales cualquier cosa que hagamos finalmente lo que va a hacer es tirar de la base de datos va a extraer información de la base de datos curiosamente además esta flecha digamos que estaría incorrecta porque en la parte frontal del blog generalmente no vamos desde la parte frontal hasta la base de datos sino que la base de datos es la que introduce información dentro de la parte frontal también es cierto que puede haber una parte donde el usuario un usuario un lector pueda generar un comentario generar comentarios solo esta parte sólo la parte de generar comentarios tendría una cierta componente de escribir en la base de datos filtrar buscar leer en definitiva todo es leer pero generar comentarios es escribir un comentario dentro de la base de datos con todos los peligros en cuanto a seguridad web que esto conlleva ahora luego hablamos de ellos esto es lo que ocurriría digamos en el front end déjame que ponga un texto por aquí escapado front m que es lo que se conoce como la parte frontal de una aplicación web siendo la parte frontal la parte que al final ve un usuario plano de esta aplicación web a partir de ahí tenemos una segunda parte que es el back end o lo que se conoce como el panel de control dentro del panel de control hay muchas cosas que podemos hacer como por ejemplo podremos gestionar entradas cuando digo gestionar me refiero al pack crudo de crear entradas eliminar entradas actualizar entradas y buscar entre las entradas puedo crear puedo leer puede actualizar puedo eliminar también podré realizar acciones como gestionar comentarios en la parte de gestión de entradas evidentemente hablando de un blog suele servir para crear entradas sin embargo la parte de comentarios suele servir para gestionar los comentarios dentro del blog por supuesto ya que hablamos de gestión poder realizar otras operaciones tales como por ejemplo gestionar usuarios en definitiva todo va a tratar de lo mismo todo va a tratar de dadas entradas comentarios usuarios registros plugins plantillas lo que sea de poder realizar una operación de gestión siendo la gestión insisto un pack que comprende leer escribir modificar y eliminar y diré por tanto también que esta parte no sólo va a leer sino que también va a escribir mientras que en la parte frontal la lectura es lo más importante la escritura de vez en cuando puede ocurrir en la parte trasera lo que suele ocurrir sobre todo es escritura lo que hago es escribir el contenido bueno esto es un blog técnicamente esta estructura se cumple tanto en el blog como en la tienda online como en la red social como en muchos otros sitios hay una parte frontal con la que interactúa el usuario hay una parte posterior con la que interactúa el administrador y las dos inevitablemente van a trabajar con una base de datos centralizada que está en el medio de las dos una vez que tenemos claro qué es lo que queremos conseguir vamos a empezar a implementarlo por tanto en lugar voy a ir a el disco duro local ce me voy a ir a la carpeta de sham me voy a ir a http y voy a crear un nuevo proyecto llamado blog dentro de este proyecto vacío es la carpeta vacía llamada blog voy a crear por una parte un archivo llamado index php y por otra parte voy a crear una carpeta llamada admin así que este archivo corresponderá a la página principal del blog y admin corresponderá a una carpeta donde estará situado el panel de control es decir esto será el principio al menos al principio del front end y esto será el principio del back-end del panel de control además quieras que no sabemos que hay ciertas cosas que vamos a usar a lo largo de nuestro proyecto por tanto voy a crear otra carpeta que se llamará css seguro que voy a necesitar almacenar css en mi proyecto también voy a crear una carpeta llamada js también creará una carpeta llamada img y en muchos proyectos se crea una nueva carpeta llamada photo foto puede parecer lo mismo que img pero no lo es img son aquellas imágenes que forman parte de la propia aplicación del blog por ejemplo el fondo por ejemplo la cabecera el logotipo y foto forman parte del contenido que ponemos dentro del blog por ejemplo las entradas que introducimos dentro del blog o por ejemplo en una tienda online ing guardaría las imágenes de la plantilla de la tienda online mientras que foto guardaría las fotos de los productos que están dentro de la tienda online otra cosa que voy a poner es una carpeta llamada incluye por tanto la voy a llamar como ink para empezar a trabajar y una vez que tengo esta mínima estructura jerarquía de mi carpeta tal vez más adelante lo que haré es trabajar directamente con más carpetas pero ahora en principio lo que voy a hacer va a ser sencillamente empezar por aquí a trabajar así que como estoy trabajando la carpeta de ht docs voy a arrancar el control panel para asegurarme de que tanto apache como mysql están en verde están correctamente ejecutados en este caso lo están porque previamente los he instalado como servicios por tanto una vez que me ha asegurado arrancó un editor de texto por ejemplo head y por ejemplo sublime por ejemplo cualquier editor de adobe en definitiva cualquier editor de código voy a poner el código por aquí y ahora me voy a por supuesto lo voy a cargar dentro del editor como no lo tenemos y por otra parte voy a abrir un navegador web donde me iré a localhost blog ya que dentro de esa carpeta si aquí pongo hola voy a encontrar que hay olas es decir estoy trabajando con la misma carpeta bien a continuación voy a hacer una etiqueta docta y voy a crear la estructura mínima la estructura básica que debe tener cualquier página web por tanto voy a crear un gel voy a crear un móvil por otra parte dentro del head voy a poner el siguiente contenido por una parte voy a poner title y voy a poner blog este proyecto se llama blog obligatorio también una etiqueta meta charset es igual a usted 8 y con esto tendría ya suficiente como para poder empezar a trabajar dentro del body voy a poner un con y de igual a contenedor cierro el libro y dentro de este blog voy a poner un género una gente que también que tendrá la parte principal y un footer aquí voy a poner una etiqueta hace 1 donde pondremos el blog de cada uno quisiera el blog de josé vicente bardo recargo aquí tenemos etiqueta h1 puesta a continuación un h 2 es algo así como bueno voy a poner directamente jose vicente catalá y aquí en h2 blog oficial guardo recargo y me sobra un ace aquí tenemos tanto el uno como el h2 ahora en maine pondríamos por ejemplo una plantilla de un artículo del blog por tanto un artículo lo pondríamos con usando la etiqueta arctic el centro de arte y que vamos a poner algo como h 3 título del artículo una etiqueta a time fecha del artículo pues por ejemplo 0 01/01/2010 y 6 no lo sé a partir de aquí una etiqueta de parágrafo esto el contenido del artículo que vamos a leer y por encima de todo esto quizás algún ing ese mismo mes que cargaremos una imagen con alto contenido es decir tenemos por una parte un título tenemos un subtítulo y para cada uno de los artículos tenemos por una parte una imagen en este caso una imagen vacía no he cargado ninguna por otra parte un título del artículo por otra parte la fecha de publicación y por otra parte el contenido del artículo que vamos a leer más adelante también él [Música] título se convertirá en un hipervínculo se convertirá en un hipervínculo donde podremos leer el artículo completo php pero de momento no momento no hay artículo completo simplemente igual en la página oficial tendremos un resumen de todos los artículos y cuando pinchamos en el cabezal pues accederemos a leer el artículo completo al igual que funcionan la gran mayoría de blogs hoy en día esto es una plantilla de un artículo sabemos que finalmente tendremos x artículos dentro de un blog por ejemplo precisamente está para eso está para tener múltiples artículos y por último dentro del footer pues tendremos algo así como copyright 2015-2016 o el año que sea josé vicente carratalá además lo que quiere es que cuando abramos el blog ese año cambia automáticamente es decir que en lugar de ser estático coja la fecha actual del año en el que estemos ahora mismo lo que hemos creado por tanto es con html una estructura muy característica de un blog únicamente en html es decir lo que he hecho es crear únicamente el contenido una vez que ya tengo una mínima estructura me voy a crear una hoja de estilo vamos a crearla directamente externa por tanto link wray es igual a esta el sit y h red es igual a entrar dentro de la carpeta css y cargar estilo punto css por tanto en este caso lo que voy a hacer evidentemente es entrar dentro de esa carpeta voy a entrar dentro del css y voy a ir realmente a crear el archivo estilo punto css por tanto cargo este archivo evidentemente aquí dentro y voy a maquetar algo como lo siguiente dado que estoy en el estilo voy a especificar que quiero trabajar con zonas esto lo voy a hacer de la siguiente manera voy a crear una especie de separadores de libro voy a hacer lo siguiente estilos generales me creo un separador inicial me creo un separador final era por tanto digo body son estilos que se aplican a todo digo body para bing 0 píxeles margin 0px sales voy a decirle que background es igual algo limpio a rgb 220 220 220 y en principio hasta lo que tengo es que se me pone el fondo de color gris clarito a continuación vamos a ver muy bien a continuación voy a hacer algo como cambiar la fuente sencillo por tanto font family es igual a assange y así me cambia todo el texto a color y tipo de letra sin decoración ahora voy a decir que el contenedor tendrá una anchura del 80 por ciento quizás tendrá un fondo blanco tendrá un margin auto para centrarse en la pantalla con tener no contenedor muchos errores son por haber escrito incorrectamente las cosas y va a tener también un padding de 20 píxeles y también para que quede lo más limpio posible un box shadow de 0 píxeles 10 píxeles 20 píxeles rgb 000 0.4 es decir va a tener una sombra un poco arrojada un poco para que parezca este efecto de página en blanco sobre fondo un pelín más oscuro incluso podríamos poner el fondo un poco más claro porque tampoco me acaba de gustar que el fondo sea tan oscuro una cosa así que quede el fondo un pelín más gris que se note como el blog es una página en blanco que está por encima una vez que tengo estos estilos generales voy a trabajar medio de otro separador mirad y lo voy a llamar estilos cabecera este es un separador este es otro y ahora voy a hacer algo como que h1 por ejemplo tendrá un par de cero píxeles un margin de cero píxeles es más este estilo lo voy a aplicar tanto h1 como h2 y ahora lo que haré es algo tan sencillo como decir lo siguiente severo será text align center voy a hacer una maquetación pensando directamente en dispositivo móvil en tableta o teléfono y por otra parte por último prácticamente simplemente voy a decir que el h2 quiero que tenga un fondo size más pequeño quizás de 14 píxeles así que guardamos recargamos y vemos como tenemos el texto por ahí por último dentro del header quiero crear una marca quiero crear una línea que me separe el header del contenido así que lo que voy a hacer en este caso es colocar que en el header tendré un border botón de un píxel solid grave es decir un borde en la parte de abajo de un píxel sólido de color gris también lo que puedo hacer por tanto es poner en el header un párking botón de 20 píxeles es decir para que haya un poquito de espacio y también un margin bottom de 20 píxeles para que ese parador también empuje con respecto a la parte de abajo cuidado que margin-bottom lo escrito incorrectamente y por eso no funcionaba vemos como el parking lo que está haciendo es poner un margen un poco hacia arriba y el margen lo que está haciendo es poner un margen un poco hacia abajo a partir de ahí también podemos en lugar de gris pues poner un color tal como por ejemplo 220 como 220 como 220 para que esa separación este pero se note lo menos posible para que los elementos estén pero queden lo más estilizados posibles continuamos acabando un poco de estilo para los artículos incluso ahora luego quiero poner un contenido así de un contenido tangencial pero ahora voy a maquetar los artículos por tanto a lo siguiente estilos artículos y curiosamente en este proyecto estilos artículos quiero maquetar atención mirad en el principal quiero maquetar por una parte atención sexual y veo artículos una sección es una parte del contenido que contiene algo en este caso esta sección contiene artículos fijaos como los artículos están dentro de la sección y ahora voy a crear otra sección con el id tangencial es tangencial pues tangencial por ejemplo tendrá un artículo que se llamará buscador tendrá otro artículo que se llamará categorías tendrá otro artículo que se llamará últimos artículos en definitiva una serie de utilidades adicionales a nuestro blog pero cuidado no quiero que aparezcan aquí quiero que aparezcan aquí a la derecha por eso voy a hacer lo siguiente estilos artículos ahora digo él vive el sexual perdón que se llama artículos voy a decirle que tenga un wifi del 70 por ciento no se ve pero ahí está y si lo queréis ver mejor le puedo decir por the border right y le digo que es de un pixel solid rgb 220 220 220 es decir esta pequeña línea vamos a verlo border right un píxel solid vamos a poner un rey se lo estoy poniendo en h2 que hago yo poniéndose la noche 2 nosotros vamos a poner ahí viene aquí en artículos ahí está ese separador que se para por una parte de los artículos y por otra parte el contenido tangencial ahora estilo es tangencial es otra sección veis cómo este separador viene bastante bien para separar temáticamente los estilos css y ver claramente que hace cada bloque voy a poner tangencial por mirar sería mucho mejor que lo pusiera dentro de una etiqueta llamada a side ya que la etiqueta assaidi html5 sirve específicamente para eso sirve específicamente para poner el contenido tangencial ahora digo artículos cloud leaf y ahora en estilo tangencial digo aquello que es así tiene un wish del 25% tiene un flow drive y ya está fíjate como por tanto tengo aquí el buscador categorías y últimos artículos tengo aquí un copyright y tengo el copyright porque ya sabéis que siempre que me pongo a flotar tengo problemas de que los objetos me empiezan a salir así que sabemos que como siempre la solución consiste en poner un deber style clear dos puntos voz para conseguir para propiciar que la flotación sea correcta y que los elementos no se salgan del contenedor por tanto maquetado a grandes rasgos este blog por una parte tengo el artículo por otra parte tengo la fecha y el contenido vamos a maquetar un poquito más los artículos y con lo siguiente h3 quiero un padre de 0 píxeles quiero un martín de cero píxeles no me importa me importa cuidado esta h 3 esto no es un y de esto va sin almohadilla ahora si no me importa que el título se quede azul subrayado así que es mejor para la usabilidad de parte quiero hacer lo mismo con el time y con el parágrafo ahora voy a decir lo siguiente time p quiero que el front 6 o sea de 10 píxeles que sea más pequeño es igual de hecho demasiado pequeño pero bueno lo voy a dejar en 11 píxeles y con eso empezamos a trabajar y más adelante veremos si es muy grande o si es muy pequeño en cada uno de los artículos artículos arctic él quiero poner lo siguiente primero un padding de 10 pixeles segundo un border botón de un píxel sol y rgb 220 220 220 que sea pesado con los márgenes pero así vemos exactamente dónde acaba cada bloque y dónde empieza el siguiente de hecho este color gris clarito es el que quería haber puesto en el margen del asa aquí en el grave aquí estamos y punto y coma para que se quede estructurado y que se quede claro no es la bomba de encuentro diseño gráfico pero por lo menos es claro y ahora por último estilo scooter estilos pie de página copiamos y pegamos este bloque y vamos a hacer lo siguiente en estilos pie de página voy a decir algo como por ejemplo footer es text align centre y en principio no vamos a dejar así porque para el futuro tampoco quiero mucho más como mucho voy a decir un padding top de 20 píxeles y un pub link botón de 20 píxeles y nada más simplemente para que se quede un poco espacio que respire el footer y ya está tenemos por tanto por aquí la estructura tanto la estructura html como una serie de estilos mínimos en css para poder empezar a trabajar lo bueno de empezar con html css es que ahora en cuanto lleguemos a la base de datos al haber creado una maquetación por defecto sabemos un poco que necesitamos sabemos que para cada artículo necesitamos una imagen necesitamos un título necesitamos una fecha necesitamos un texto vale por tanto incluso puede ser que necesitáramos un autor ahora lo veremos en definitiva tenemos ya una idea de que le vamos a pedir de que le tenemos que pedir a la base de datos y una vez que ya tenemos mínimamente la parte gráfica marcada vamos ya a empezar con la base de datos yo me abro una nueva pestaña voy al panel de control de sadam me voy a la base de datos y voy a crear en este caso una nueva base de datos llamada blog a la que le pondré el cotejamiento en ute f8 español dentro del blog voy a crear las siguientes tablas es evidente que tiene que haber una tabla llamada de entradas es el núcleo del blog voy a poner de momento 10 campos no sé cuántos va a tener el blog esta es la gracia de ph media yo puedo crear 10 si me hacen falta pondremos si no me hacen falta tantos los que se queden en blanco se eliminan para una entrada sé que tengo un campo primario auto incremental siempre esto lo voy a hacer para prácticamente cada cada tabla y a partir de aquí voy a poner un tc para la fecha el título para el título del post el título de la entrada del blog el autor que será una clave foránea ahora hablamos de esto el texto del artículo la imagen del artículo la categoría a la que pertenece y en principio en principio creo que no necesito nada más tal vez más adelante me di cuenta de que necesito algo más pero no pasa nada porque más adelante puedo volver y puedo añadir más elementos y de vamos a ir pensando un poco en la deficiencia de 255 caracteres pero es probable que yo llegue a tener un 1 255 ceros en cuanto al número de entradas no lo creo no voy a poner dos porque eso querría decir que máximo tendría 100 entradas es que igual sí pongo no digo ya 4 pero por ejemplo 6 tendría millones de entradas tendría 9 millones de entradas incluso le pongo 10 y tendría un billón de entradas por tanto es simplemente lo que voy a hacer es dejarlo con un parámetro razonable a lo que quiero poner etc es un parámetro que se basa en el número de segundos que han pasado desde el jueves 1 de enero de 1970 por tanto dios que tiene ocho caracteres el utc pasarán muchos años hasta que tenga más por si acaso le voy a poner 20 caracteres título le voy a poner por ejemplo 255 caracteres autor de 255 texto ni siquiera le voy a poner todo en este 5 del texto y contexto lo que ocurre es que ese campo es mucho mayor de todas formas 2.550 caracteres quizás más adelante vuelva y lo modifique la ruta de la imagen no debería exceder 255 caracteres y la categoría con mucho 255 caracteres con lo cual he hecho esto tengo mi primera tabla dentro del blog creada llamada entradas voy a crear alguna entrada más por ejemplo autores donde además los autores también son los usuarios del blog quien puede publicar en este blog 10 cosas para empezar el campo primero es el id y ahora este es índice primario auto incremental el nombre en este caso es usuario password ya que cada usuario tendrá que lograr en el panel de control sobre los usuarios de esta aplicación podrán entrar el resto no el nombre real voy a poner apellidos que tenga uno que ponga uno que tenga dos que ponga dos y ya está en principio y podría poner cosas como por ejemplo el email el teléfono por si en un momento dado necesito enviarle un mail a ese usuario elides entero 20 caracteres 10 por ejemplo el usuario será un variar de 255 caracteres la contraseña de 255 el nombre de 255 no creo que nadie tenga un nombre que ocupe tantos caracteres pero por si acaso basta que yo diga que nadie lo tiene para que venga alguien y lo tenga así que por si acaso lo voy a tener y e-mail lo mismo 255 caracteres pulsamos finalizar guardar y ya tenemos nuestra tabla de autores usuarios en este caso es la misma vamos también a crear una tabla de categorías esto es muy sencillo simplemente lo que voy a hacer es poner una tabla y de una columna y ve primario auto incremental y lo que haré en este caso es simplemente poner nombre categoría y ya está y de 10 nombre categoría será un marcha que tendrá 255 caracteres voy a hacer una cosa por si acaso que es padre que es la categoría padre por si en algún momento hago categorías y subcategorías categorías que dependen de otras categorías simplemente ya lo tengo por tanto le doy a guardar vamos a ver lo tengo autores tengo categorías tengo entradas creo que más o menos tengo todo lo que me hace falta y yo una vez que tenemos esto suelo crear un campo adicional que es registros es un campo con registros para en cualquier momento tener un registro de quién ha entrado esa aplicación que ha hecho que ha visto que el navegador ha usado que ip tenía y un poco me sirve para en un momento dado la aplicación falla o alguien la ataca poder tener alguna pista de qué es lo que ha pasado así que voy a poner una idea técnicamente no haría falta porque el campo utc podría actuar de idea pero digamos que lo pongo así que yo quiero guardar cuando ha entrado cualquier persona quiero guardar su ip quiero guardar su navegador y quiero ver qué página estaba viendo en ese momento son los otros mínimos que puedo guardar así que esto es un campo de 10 esto es un campo también me ponerlo de 20 la ip es un campo de tipo marchar el carácter es el navegador 255 y la página que estaba viendo por si acaso le voy a poner también 255 caracteres así le voy a guardar y como veis ya tengo preparado una base de datos con los elementos mínimos para poder trabajar para poder compartir información dentro de esta aplicación web ahora lo que voy a hacer es lo que se llama una carga estática es decir voy a crear es un autor voy a crear un usuario voy a crear un par de entradas de muestra no he creado todavía el panel de control por tanto de momento lo voy a hacer manualmente así que me ido autores me voy a insertar y digo el usuario es jo casa con la contraseña dejó casa el nombre es josé vicente en los apellidos es carratalá sanchis y el email es info josé vicente carratalá puntocom tengo ya por tanto una autoría atención porque el líder para ese autor es el número uno a continuación voy a crear una nueva categoría iba a ser la categoría general y no va a tener ningún padre ya que es la categoría mayor por último voy a crear una entrada así que voy a decir lo siguiente en el tc cuál es el utc de ahora mismo no sé epoc convert es una página que tiene utilidades para convertir de un tc a fecha normal y vuelta y me dice que el utc de ahora mismo es este de aquí entonces ahora luego me lo pondrá automáticamente la aplicación por de momento lo pongo yo manualmente el título esta es la primera entrada del blog va a venga algo más sencillito primera entrada autor 1 en autor no pongo el nombre del autor pongo el código del autor ahora luego veremos por qué en texto lo que hago es poner esta es la primera entrada del blog que estoy creando en esta clase en imagen de momento no voy a poner nada y en categoría voy a poner 1 bien cuidado porque vamos a ver que la imagen requiere no sé es una apuesta incluso vamos a verlo no le he puesto nada me ha puesto nada en imagen básicamente en imagen se ve que me he dejado con un valor numérico no sé cuándo dudo esto creo yo creo que cuando dudó veo que si veo que imagen me lo ha dejado como entero e imagen no puede ser un entero imagen debe ser un marchar no pasa nada cuando detectó algún error de ese tipo me voy a estructurar la segunda pestaña me voy a imagen me voy a cambiar y dentro de aquí puedo cambiar el tipo de datos así que lo pongo como marchar y fijaos como ahora he modificado correctamente la estructura de esa tabla bueno voy a crear una segunda entrada etc a ver ahora ha cambiado un poco voy a crear un segundo artículo título segundo artículo autor número 1 texto este es el texto para el segundo artículo pues no sé y esperemos que se vea correctamente en la web simplemente para poner un poco de texto e imagen nada categoría 1 continuó ya no da error porque he modificado el campo entero con lo cual lo que he hecho es una carga estática de datos he metido un autor he metido una categoría he metido un par de entradas en registros no tiene sentido que ponga nada porque sólo tiene sentido que ponga cosas cuando realmente empiece a entrar dentro de la aplicación y una vez que hemos realizado una carga estática lo que tenemos que hacer ahora es llamar a los elementos de esa base de datos e introducirlos aquí dentro del contenido por eso me voy a ir a este index php y lo llamado precisamente php con la extensión php porque voy a poner contenido aquí dentro así que eliminó los artículos y me quedo solo con un artículo que va a ser un poco va a actuar un poco de plantilla este va a actuar de plantilla para ahora utilizar este artículo estático para devolver cosas de la base de datos ahí dentro así que cuidado me hace falta una cosa muy importante en la base de datos me hace falta crear privilegios crear un usuario con privilegios así que me voy a privilegios agregó un usuario y digo el usuario blog con la contraseña blog muy poco original lo estoy haciendo así evidentemente porque lo esté desarrollando en local esto no es nada seguro para subirlo a un servidor en producción le pondría una contraseña más segura bien en este caso lo que voy a hacer es que me voy a la plantilla de cualquier elemento desarrollado en bhp para conectar la base de datos así que por ejemplo en sql crm voy a cargar esto y voy a buscar una estructura de control que tenga un bucle while como por ejemplo ésta así que me vengo aquí y vamos a desgranar un poco lo que voy a hacer quito los comentarios para ahorrar líneas de código y digo me conecto en localhost con el usuario blog con la contraseña blog a la base de datos llamada blog pongo los datos en ute f8 y digo select all from entradas quiero que me selecciones todo lo que hay en entradas este eco es donde realmente voy a poner la plantilla por tanto aquí voy a poner esta plantilla pongo las sangrías lo más claro posible y ahora me voy a ir escapando para hacer cosas como por ejemplo lo siguiente en título del artículo voy a poner fila el título fila porque aquí he dicho fila aquí donde pone el contenido voy a poner fila no me acuerdo qué nombre dado creo que era texto pero lo voy a mirar en la base de datos y ya está y entradas y veo que es título autor texto muy bien y en fecha aquí donde pone fecha time voy a poner fila efe así que guardo recargo y fijaos cómo y pone según primera entrada segunda artículo bueno sería el segundo artículo voy a corregirlo desde aquí segundo artículo lo voy a cambiar directamente desde la base de datos vamos a ver lo que no lo veo segundo artículo pero simplemente esto también nos sirve para comprobar como lo que estamos haciendo aquí el segundo artículo está siendo extraído en tiempo real desde la base de datos técnicamente esto es lo más importante del ejercicio el con esta estructura de control simplemente una maquetación estática realizada en html y hacer que el contenido provenga directamente desde la base de datos me quedaría un poco la fecha no queda muy amigable probablemente el hecho de que ahí ponga la fecha en un tc internamente para la base de datos es muy bueno por una razón muy sencilla yo por ejemplo este bloque está mal ordenado el segundo artículo debería estar por encima del primero porque normalmente en un blog los artículos más recientes están más arriba entonces esto lo voy a hacer muy sencillamente si aquí pongo select el from entradas order by etc descendiente y me lo ordenas por el campo utc de mayor a menor y simplemente haciendo eso ahora aparece el segundo artículo arriba primera entrada abajo quiero decir con esto que para gestión de bases de datos la fecha en formato utc es mucho mejor para hacer cualquier tipo de operación que por ejemplo en este caso la fecha con año mes día hora minuto segundo pero de cara al ser humano esta fecha es horrible de cara al ser humano queremos verlo en una fecha un poco más humana por eso voy a hacer lo siguiente vamos a ver si me sale correctamente voy a decir qué fecha es grave y voy a decir año mes día d fila vamos a ver lo guardo y recargo y fijaos cómo el programa automáticamente traduce según la fórmula que yo le diga es decir y es año eme minúsculas es mes día es la letra d recordamos que hay una página fantástica que se llama pspv que es la documentación oficial de php y sale una tabla magnífica que te dice cada letra a que corresponde y en qué número de parámetros se mueve qué parámetros devuelve por tanto yo hay algunos que me sé de memoria y otros que no que consulto cada vez que los quiero usar entonces por ejemplo incluso voy a decir qué de m&m y voy a poner h y la tina minúscula s h mayúscula es ahora y latina del minuto s es segundo por tanto ahora fijados como guarde recargo y fijaos qué bien me dice a partir de esa fecha utc el año mes día hora minuto segundo ahora simplemente marchetto un poquito el contenido para que quede lo más bien posible lo último que me quedaría para complicar un poco la cosa sería poner el autor pero lo que voy a hacer es hacerlo en la siguiente parte porque puede ser más complejo de lo que en principio parece anteriormente en el diseño de la base de datos lo que he hecho es derivar a los autores y a las categorías a una página externa a una tabla externa por tanto yo ahora podría decir que creo por aquí vamos a verlo pues por aquí voy a crear un deber de clase autor y devuelvo la fila autor cuidado que se me ha ido un punto también podría crear un día de esta clase llamado categoría y la fila sería categoría cuando recargo y aquí lo tengo el problema está en que tanto en fila como en categoría aparece un número uno y un número uno esto quiere decir que por ejemplo en autor de esta entrada he puesto el número uno y yo sé qué autor con el líder el número uno es jose vicente catalá sanchis hay un problema y es que como le digo yo a mi página que ese uno se debe transformar en un nombre de autor por ejemplo o en un nombre de categoría bueno para eso existen unas cosas llamadas los lecciones los layout los join realmente las uniones de tabla me sirven para unir datos de dos tablas diferentes así que fijaos lo que voy a hacer voy a hacerme un poco de hueco se va a permitir y voy a decir selector from entradas lección autores aunque no sé vamos a verlo donde el autor para que te encuentre en el autor aquí está con autor es igual autores punto y d eso quiere decir ahora me puede dar error quizás bien eso puede eso quiere decir que ahora en lugar de llamar al autor puedo llamar al nombre porque lo que he hecho realmente si queréis lo vemos voy a hacerlo en una pestaña específica de sql lo que hago es una tabla crear una tabla como combinación del artículo y del autor eso es lo que hace leer yo en dos tablas y las une en una tabla gigantesca eso quiere decir por tanto que era por venir aquí y le digo que la fila es nombre y fijaos que pone jose vicente voy a hacer lo siguiente si la nombre cuidado con los dos puntos y fila apellidos simplemente para que cuando recargue ponga cuidado me falta o me sobra un punto vamos a verlo ahí me sobra un punto efectivamente hay otra hemos así que guardo recargo y pone nombre y apellido ahora que está un poquito con css para utilizarlo además más adelante podemos utilizar este autor para pinchando en el autor filtrar y sólo verlo los artículos de ese autor bien lo que voy a hacer ahora es lo mismo pero para la categoría cuidado he hecho un lección con los autores pero no con las categorías así que ahora digo lo siguiente lección esto está complicando categorías no me acuerdo y es que tengo memoria de texto entonces entradas categoría calorías y de dónde no me acuerdo categoría es igual a entradas punto y de fijaos que las peticiones que se cuelen se pueden llegar a hacer bastante largas por tanto para poder leerlas mejor lo que suele hacer la gente y no pasa nada porque tanto php como ese como lo permiten es dividirlas en varias líneas lección en autores este lección en categorías este order by útil desc de esa manera una línea muy larga la dividimos en cuatro líneas y podemos saber un poco mejor qué es lo que ocurre en cada una de ellas selecciona me de entradas y me lo juntas con la tabla autores y me lo juntas con la tabla categorías y me lo ordenadas por usted fe así que déjame ver en categorías nombre categoría y lo tenemos y la categoría no nombre categoría y si ahora guardo y recargo podremos ver vamos a verlo como en este caso lo he guardado dentro de la categoría general parece que el segundo artículo no tiene categoría no sé no me acuerdo deja de verlo parece que en entradas el segundo artículo categoría número uno vamos a verlo bien el primero tiene categoría general el segundo no tiene categoría ahora mismo no caigo porque pero ahora luego revisó el código en principio lo normal es que ocurriera esto es que aparezca la categoría bien una vez que tengo esto lo que voy a hacer es un poco estilizar porque tengo la clase autor y la clase categoría me voy por tanto a estilos artículos y digo autor coma categoría te voy a decir font-size de 11 píxeles vamos a verlo ahora para qué tanto el título como la categoría aparezcan más pequeños y ahora por último voy a cerrar esto y ahora por último voy a decirle que el autor es a ser red de momento a ninguna parte y ferrer en alguna parte también es el nombre de la categoría es decir de esa manera mirad pinchando en el nombre del artículo vamos al artículo extendido pinchando en el nombre del autor filtramos entradas sólo por ese autor y pinchando en la categoría solo visualizamos las cartel en las entradas que participen de esa categoría aunque no hayamos acabado con la parte frontal desde luego sí que tenemos lo más importante que es el haber extraído artículos desde la base de datos fijaos que si voy al segundo artículo no vaya a ninguna parte si voy a por autor no voy a ninguna parte si voy a por categoría no voy a ninguna parte pero me da igual de momento lo que quiero es poblar artículos desde la base de datos más adelante completaremos cada uno de estos enlaces lo que quiero ahora es trabajar un poquito con la con el panel de control por eso me voy a ir al panel de control recordamos que estoy en blog recordamos que tengo una carpeta llamada admin y recordamos que voy a empezar evidentemente como os podéis imaginar con un artículo llamado index punto php lo cargo y si ahora pongo admin pues empezaría a editar el panel de control panel de control y aquí podría gestionar usuarios gestionar entradas gestionar comentarios y todo pero cuidado esto no debe ser así esto no debe ocurrir no es posible que cualquier persona que esté viendo el blog de repente entré aquí a admin y pueda ya entrar en el panel de control así que lo primero que se suele hacer en cualquier panel de control de cualquier aplicación es crear un acceso autentificado con usuario y contraseña así que vamos a hacer eso voy a crear por tanto un dock type html html por aquí html por allá un boli por aquí ahora ya le voy a poner algo tan sencillo como un formulario que va a tener un input type text neymar usuario un input tait password me llamara no password y por supuesto un input de type submit cuando recargo y tengo esto tengo el clásico formulario el axón va a ser login punto php login punto php es un script que se encargará de ver si me deja entrar o no me deja entrar y voy a poner un método que va a ser igual a post para asegurarme que esta información la voy a enviar por post dejadme poner un pequeño estilo esta página realmente no tiene un estilo propio solo para ella con lo cual lo voy a poner interno y va a ser lo siguiente body va a ser background rgb 220 220 220 ahora voy a hacer lo siguiente bueno esto es esto y ahora voy a decir que el forma va a tener un wish de 200 píxeles un hype de 200 píxeles un padding de 20 píxeles un background blanco en margin auto y un top de 100 píxeles si hago esto veréis cómo aparece una caja una cajita como para el login si creéis lo pongo en líneas diferentes para que lo podáis leer mejor vamos a ponerlo aquí ya he cortado por donde no debía esto por aquí y esto por aquí bien ahora voy a decir lo siguiente input tendrá un wish del 100% un padding de 10 pixeles un margin top de 10 píxeles y un margin-bottom de 10 píxeles mira el top me lo voy a ahorrar ahora veréis por qué guardo recargo tengo ahí esto cuidado el wish lo voy a hacer del 95% para qué al 90% para que no se me salga de la pantalla otra cosa que voy a hacer es que al forn le voy a decir text align center y así los elementos me quedarán centrados por último lo que haré es usuario no voy a poner place holder en este caso lo voy a hacer con texto y contraseña el año va a salir mal simplemente porque no tengo la etiqueta meta charset es igual a efe 8 y aquí lo tenemos bien y por último quizás en el body podría poner algo así como font-family sanz sheriff y tengo por tanto maquetado un login o por lo menos el formulario del login ahora yo pondría un usuario pondría una contraseña le daría a enviar login php no existe todavía no voy a crear ahora pero lo que se tiene que validar es que el usuario y la contraseña que ponga realmente coinciden con ese usuario y con esa contraseña que tenemos ahí aquí la sangría se me ha ido por tanto aquí la llave tendría que estar a esta altura y aquí el input tendría que estar a esta altura ahora sí en cuanto a maquetación se ven mejor verdad para el programa da igual pero para nosotros para luego ver el código es mucho mejor es mucho más fácil bien a partir de ahora por tanto tengo que dibujar el login y por tanto mirad me voy a ir a admin me voy a crear un documento llamado login php por supuesto lo voy a cargar dentro del editor así que el login va a ser realmente un script ciego que va a hacer lo siguiente me voy a volver al index principal a cargar el index voy a cargar otra vez esta estructura de control que le pide algo a la base de datos y vamos a hacer lo siguiente cuidado porque la de carga doble no sé qué cerrado creo que cerrado el forma y ahora digo lo siguiente select el front autores e incluso puedo hacer lo siguiente select el forma autores fuera un usuario es igual algo más word es igual a algo el usuario es igual al usuario que he enviado y el password es igual al password que enviado dejadme resolver esto con contadores veréis contador es igual a cero contador es igual a 1 sí es cierto a ver si aquí nada de esto es cierto si no hay ningún autor que tenga este usuario y tenga esta contraseña nunca entraré aquí y si nunca entro aquí contador seguirá siendo cero por tanto ahora sí por supuesto algún autor que tenga este usuario de esta contraseña autor en ese caso contado en este caso será igual a uno por tanto ahora aquí abajo puedo hacer de momento algo sencillo que es un infeliz si contador es igual a 1 en ese caso echo el usuario que has puesto existe si no echo el usuario que has puesto no existe probemos lo yo vengo aquí y pongo esto y pongo esto envío y me dice el usuario que has puesto no existe pero recordemos que tengo en la base de datos un autor con usuario hijo carsa password o casa por tanto si todo va bien ahora pongo k’asa y pongo k’asa le doy a enviar y me dice el usuario que has puesto existe así que vemos como simplemente reutilizando la estructura de control que ya sabemos porque ha hecho un copia pega y voy a hacer muchos más copias y pega simplemente lo que hago es seleccionar método de autores donde el usuario sea igual a lo que me envía este por post desde el formulario con el name usuario y que el password sea igual a lo que me envía este por post desde el formulario con el name password simplemente lo que hago ahora es decir contador es igual a 1 y digo lo siguiente demás session start voy a arrancar una sesión voy a trabajar con variables de sesión voy a decir lo siguiente sesión y de usuario es igual fila y de ya esta hora diré algo como el usuario que has puesto existe y su vida y punto sesión de cuidado que he puesto dos dólares y no es conveniente vamos a verlo usuario o cars a tocarse y me dice que vamos a ver y su vida es este sesión y de usuario y de usuario si hay pongo y de usuario a que debo poner y de usuario por tanto volvemos carsa y me dice y sweet es la número uno lo que estoy haciendo por tanto es asumir que el usuario es correcto y darle una propiedad darle una galleta para que se la quede para toda la sesión para identificarlo evidentemente así que por último voy a hacer lo siguiente voy a buscar html directo es una etiqueta meta muy divertida que me sirve para cuando entré en la etiqueta irme a otra página así que me copió este ejemplo y hago lo siguiente mira seco esto eco esto que hago aquí lo que hago es lo siguiente si me he logrado correctamente me voy a escritorio punto php escritorio ahora así ya es el panel de control sí no me voy a index.php es decir vuelvo al principio vamos a probarlo y comprobamos como déjame volver atrás comprobamos como si pongo cualquier cosa le doy a enviar y se me devuelve veis como se me ha devuelto se me devuelve porque no es correcto en cambio si pongo un usuario y una contraseña correctos se me lleva hasta escritorio punto php que sí que claro que que no existe todavía pero ahora existirá lo que he conseguido por tanto simplemente reutilizando esa petición a la base de datos es crear un login crear un sistema al cual tú le pasas un usuario y contraseña se conecta a la base de datos mira así lo que has enviado es correcto y en el caso de que sea correcto te deja realmente entrar a la parte del panel de control de la aplicación ahora sí ya que nos hemos ganado acceso a el escritorio del panel de control lo que voy a hacer es crear este archivo realmente dentro de admin que se llama escritorio un tope hp lo cargo ahora escritorio veréis ya no está vacío y ahora voy a hacer una cosa mirad qué pasa si hay alguien bueno primero session start por descontado qué pasa si hay alguien que directamente mira es muy listo y se salta este login porque sabe que hay un escritorio y se me cuela directamente en el escritorio php y me empieza en maldades pues lo voy a hacer una pequeña protección y voy a decir lo siguiente no y set si no está puesto si no existe la variable de sesión y de usuarios así no existe es que nadie te la ha dado y si nadie te la da dos que te has colado aquí en ese caso usamos una instrucción que me encanta en php que se llama die que es muere vale muere es para la ejecución de este script muere tú no deberías estar aquí y por último voy a poner otro html direct vamos a verlo en login con lo cual le voy a decir que en 5 segundos me vuelva a index punto php por tanto index.php en este caso no me va a decir nada ojo para decir nada porque a mí no me dice nada porque sí que me había registrado había puesto usuario y contraseña correctos si queréis creo que tengo por aquí el firefox como me he registrado en chrome pero no me registrado en firefox desde firefox que voy a intentar colar pero voy a decir tú no deberías estar aquí y contamos cinco y en cinco segundos veréis como se me redirige a la parte principal momento vamos a verlo venga ya debería estar a perdón a persona no muy mal si le digo die todo lo que ocurra después del die ya no se ejecuta porque se ha muerto por tanto le tengo que poner el re direct antes del die así que lo fresco no debería estar aquí contamos 5 y ahora si volvemos un paso para atrás y me devuelve al panel de control simplemente los 5 segundos es para dar tiempo a la gente para que lea el cartel de tu nombre estar aquí adicionalmente si ocurre eso también se debería hacer algo así como guardar un registro en la base de datos como este usuario o está y ha intentado entrar sin pasar por el login como un poco avisando de que igual te pueden ser intentando atacar pero bueno de momento con esta mini protección ya tenemos suficiente y más adelante nos preocuparemos por proteger mejor el sistema una vez que tengo esto ahora voy a crear el html para el panel de control de octay para html html por aquí 0 por allá lo vi por aquí y dentro del body voy a hacer en primer lugar una etiqueta nada en otro lugar una etiqueta sexual en este caso no tiene nada que ver el diseño gráfico de la parte frontal de un blog con el diseño gráfico de panel de control para el panel de control me gusta un poco basarme en el diseño de wordpress que es un diseño bastante incluso prestashop ahora las versiones se basan en el diseño de wordpress que se basan en un menú de navegación a la izquierda y el contenido a la derecha en lugar del clásico menú arriba y contenido abajo por tanto dentro del nab voy a hacer lo siguiente voy a hacer un pull voy a hacer un link y voy a hacer una rev y digo entradas que es lo primero y lo más importante de momento vuelve a dejar sin tocar entradas sigo poniendo elementos entradas es para gestionar entradas categorías y comentarios usuarios y registros creo que con esto ya tenemos suficiente con esto ya tenemos como para empezar permitirme utilizar un poco lo voy a utilizar dentro no lo voy a utilizar fuera es igual sí h ref es igual a estilo css por tanto ahora me voy al blog me voy a la carpeta de admin me creó un archivo llamado estilo css no es el mismo estilo que el de la web normal es el estilo del panel de control y ahora voy a hacer algo como lo siguiente ya sabéis me hago estos separadores que vienen bastante bien estilo de la navegación que por ejemplo empieza aquí y acaba aquí y ahora digo nada es lista style type no padding pero píxeles martín 0 píxeles louis 20% height 100% background black black color huaycán no saber ahora todavía tengo eso por ahí voy a poner estilos generales estilos generales voy a poner algo así como por ejemplo que el body y el html tienen un wish del 100% un hype del 100% un padding de 0 píxeles un margen de 0 píxeles bien eso ya me gusta un poquito más pero el height yo quería que fuera más grande bueno la cosa en un error de control a como por error de consola porque falla al cargar escritorio no pasa nada es un error anterior kabul y él es esto en este caso le voy a decir también que nada tiene un height del 100% ahora sí ya tengo una barra izquierda que lo coge todo claro cuidado porque ahora tengo que poner nada es decir el agua que está dentro del dique está dentro del que está dentro del nap y le digo color in here it es decir hereda el color del que viene por detrás y le digo text decoration no no no quiero nada de decoración bien ahora además digo que font family sanz serie y ahora hago algo como lo siguiente nada un link va a tener un pareja de 10 píxeles no le quería decir ahora sí y le voy a poner por ejemplo también un mar no un border a ver cómo queda de un border botón un píxel sol white como separador entre los diferentes elementos y bueno más o menos ya la verdad es que me ha gustado cómo ha salido con lo cual para qué más ahora lo que quiero es que cuando pinchen entradas gestione entradas cuando pincha en categorías gestione categorías cuando pincha en comentarios gestiones comentarios es decir quiero que al pinchar en cada uno de estos pues simplemente pueda gestionar correctamente cada uno de los recursos del blog ahora viene una parte delicada tengo que explicar realmente dos conceptos a la vez uno cómo filtrar por elementos de menú y dos cómo crear una tabla donde se pueda crear eliminar dónde leer y actualizar así que por eso voy a dejarme la primera parte y simplemente me voy a centrar en dentro del main ser capaz de leer por eso vamos a verlo aquí me cojo una estructura de control php me la pego aquí y hago lo siguiente voy a empezar con selector from entradas y ahora me hago una tabla hago lo siguiente primero creó una tabla también no nos olvidemos de cerrar la tabla y dentro de cada una de las filas de la tabla voy a abrir pr y voy a poner una serie de tres tv tv fila fila título no me acuerdo de la estructura entradas así efe el título autor texto imagen y categoría guardamos recargamos y aquí la tenemos bien en este caso tengo que maquetar un poco más y le voy a decir estilo del bloque principal y digo el bloque principal bueno para empezar el mar le voy a decir flow left vamos a verlo ahí cuidado porque en este caso ya no me reconocen este elemento el sexo no me había llamado mail también es flow the left y ahora por tanto lo que voy a hacer si acaso es decirle aquí 100 píxeles cloud left y que flote todo lo que tenga que afrontar al menos me falta decirle que tendrá un wifi de pues no sé el 70 por ciento y ahí empieza a aparecer y ahora voy a poner algo como lo siguiente el table la tabla tendrá un wish del 100% vamos a verlo ayer es el problema vamos a poner 80% y bien y bueno voy a hacer un par de cosas voy a hacer algún truco no os digo que no de css a quien te voy a poner un tr p h voy a poner un table getting para que se sepa qué es lo que estoy pidiendo en cada celda entonces id 7 fecha autor no título autor texto imagen y categoría guardo recargo ahí tenemos la original y ahora voy a hacer un truco efe ss que es el siguiente béisbol tere tere realmente es main main table trv 2 puntos y en este caso quiere decir parte en inglés steven de spar y ven impar entonces voy a decir background rgb 220 420 420 y es un truco vamos a ver y ven y es un truco para que los elementos de la tabla en par impar de marketing con el fondo de un color por ejemplo para poder ver mejor qué es cada una de las celdas e incluso ‘lamentable’ ahora toco eso del odiel y ven el fonsal es de 10 píxeles para que puesto de un poquito más de espacio bien no era directamente even sino que era en sal o ibn entonces se ahora aguas y fijaos cómo bueno en este caso las dos me las ha marcado es realmente este ere es la fila la que tiene que marcarse y ahora sí la primera gris la segunda blanca la tercera gris y ahora veréis conforme vayamos escribiendo más como realmente veréis que hay más filas más celdas bien sigo ya puedo leer pero es muy importante es importantísimo que pueda escribir así que dentro del escritorio php voy a hacer lo siguiente me creo un th vacío me creo un té de vacío y ahora voy a hacer lo siguiente tr me creo un formulario es añadir entrada axel es igual a añadir punto php mesón es igual a post y ahora digo tv nada vais a poner por otro se lee desde los artículos no los pone la base de datos automáticamente así que nada voy a copiar esto es 1 2 3 4 5 6 7 y 8 así que digo input type neymar el título y flores esto vendría aquí bien esto lo voy a dejar así por qué autor de momento nada bueno lo voy a poner autor texto imagen y categoría así que esto es título autor texto imagen y categoría cuando recargo y si os fijáis veréis que aparece un elemento más de la tabla donde podéis poner más cosas claro empujan un poco te digo que no y por último un input type submit es decir para enviar esto a la base de datos vamos a verlo a pantalla completa y veréis como tenemos un formulario para empezar para listar elementos pero también un formulario para escribir el contenido de un nuevo post así que ahora lo que voy a hacer es cumplir la promesa de crear el script para vivir php por tanto me voy a admin me voy a crear un script llamado al abrir un tope hp lo cargo y básicamente a nadie va a hacer esto con objeto de esta información la tiró para atrás y digo selector de hecho el wild y además sirve para nada esto es insert into entradas values y ahora digo se puede poner enter mucho más cómodo para vosotros y digo no comer a la fecha gates es la fecha en formato etc el título el título es post el título el autor el post autor el texto es el post texto la imagen es el post imagen y la categoría es el post categoría después de haber hecho esto es muy recomendable que hagamos un eco meta refresh al escritorio php es decir así insertado el registro vuelve al escritorio así que voy a probarlo a ver si funciona bien la primera yo digo título tercera entrada autor un momento texto este es el de la tercera entrada está mal escrito me da igual imagen nada y categoría 10 envío me voy a escribir vale parece que algún problema ha habido vamos a verlo porque no ha escrito la entrada insert into entradas values estos de aquí vamos a examinar un poquito la estructura de la tarde vamos a ver qué requiere 1 2 3 4 5 6 y 7 campos y yo he puesto [Música] 1 2 3 4 5 6 7 campus en este caso seguimos investigando vemos qué etc el rey o bien título es título autor es autor vamos a verlo imagen y categoría a claro ya sé lo que falla y es que todos aquellos campos que son de tipo texto requieren la doble la comillas sencilla para sql y la comilla doble para php bien ahora sí vamos a probarlo y digo otra vez tercera de entrada autor 1 texto del texto imagen nada categoría 1 pero vamos a enviar y si nos fijamos ahora hay tres entradas así que por ejemplo cuarta entrada autor 1 texto este es otro texto imagen de momento nada ahora hablaremos de ello y categoría 1 le voy a enviar ya tengo cuatro artículos dentro de este panel de control esto en cuanto al panel de control pero si ahora entro dentro del blog comprobaremos podremos comprobar como no sólo se van poniendo en el panel de control sino que también se van poniendo dentro del propio blog es decir se presentando en el back end como en el front end en este caso para empezar con el autor no es ya que yo no sepa a qué autor pertenece ese número es que de cara a escribir el autor yo me vemos a ver los códigos de autor y esto es muy incómodo por eso lo que voy a hacer es algo mucho más sencillo entonces escritor yo me voy a ir al autor en el autor en lugar de poner un campo de tipo input voy a poner un campo de tipo select el select select y le voy a decir option value 1 josé vicente cara talado robson de esa manera ahora cuando recargo en un desplegable donde yo puedo seleccionar n autores bien yo ahora me vengo aquí y podría poner con el valor 2 pongo a juan garcía y fíjate como ahora al recargar yo puedo elegir entre con suficiente carratalá y juan garcía y de hecho cuando mande el autor por cierto que en el select tendría que poner name autor se mandaría realmente el y de uno si cojo suficiente carretera y se mandaría el elite 2 si cojo juan garcía esto es medio cómodo pero no del todo cómodo para empezar con garcía todavía no existe en la base de datos por tanto ahora eso quiere decir que tendría que venir autores e insertar un nuevo autor y decir que el usuario es juan con contraseña garcía y decir nombre juan contraseña garcía email juan ahorrarlo garcía puntocom yo continuó y ahora efectivamente existe un usuario con él y de número 2 que se llama juan garcía pero esto es poco eficiente porque yo he tenido que duplicar mi esfuerzo he tenido que hacer manualmente en sql dos elementos manualmente en el selectos elementos y cruzar los dedos para que coincidan que me puedo equivocar lo más práctico no es esto lo más práctico es que el valor del selecto provenga directamente de la base de datos cómo se hace esto es muy sencillo lo que hago yo ahora por tanto es hacerme otro código php no hace falta que vuelva a conectar a la base de datos porque ya he conectado arriba se puede hacer pero sería un malgasto de recursos digo selecto from autores y ahora aquí me cojo esta plantilla y digo select option value es igual a fila y d esto es fila el nombre y esto es fila apellidos con lo cual si ahora recargo quiero que veas como vaya parece jose vicente catalá sánchez y juan garcía pero no porque lo haya puesto yo manualmente sino porque lo está obteniendo de la base de datos esto qué quiere decir pues que señora me voy a la base de datos y en autores me creo un nuevo autor usuario jaime y contraseña usuario jaime lópez nombre de jaime apellidos lópez e mail jaime lópez puntocom y yo ahora recargo y quiero que veáis cómo solo por hacer eso automáticamente aparece jaime lópez aquí preparado para ser usado además como le he puesto por una parte el value y por otra parte el nombre y apellidos se inspecciona este elemento podréis comprobar como jose vicente es el número uno juana es el número 2 y jaime es el número 3 es decir le está poniendo automáticamente ley de que le toca porque en value le he puesto el ide de esa fila correspondiente dentro de la base de datos lo mismo como os podéis imaginar podría hacer con categoría así qué categoría lo que voy a hacer de nuevo es mirar copiar todo este select lo pego select categoría select all from categorías y digo fila y de nombre categoría y si ahora guardo y recargo vamos a ver que funcionado la primera fíjate como y pone general evidentemente como te puedes imaginar si voy a hablar por ejemplo de cosas de programación pues inserto un nuevo elemento le digo nombre categoría es igual a programación guardo recargo el panel de control y ahora podrás comprobar cómo está general y programación no le he puesto en el escritorio el meta charset arrastro pongo para que el acento se procesa de represente correctamente pero vamos a simplemente cuestión de poner esa etiqueta de compatibilidad html esto ha sido para escribir es decir lo que hemos hecho es poner el que al crear un nuevo elemento dentro del formulario es el nuevo elemento aparezca traducido con el nombre correcto en digamos en humano y que envíe el valor correcto pero ahora a continuación haremos la segunda mitad la segunda mitad es que aunque en la base de datos el autor ponga uno porque tiene que ponerlo cuando se nos presente en la pantalla pondrá autor y el nombre correcto del autor el autor lo que voy a hacer ahora es que el autor no aparezca con el número uno sino que una vez más voy a hacer de hecho yo creo que voy a hacer la misma petición cruzada que he hecho antes tanto para autor como para categoría así que igual incluso me la voy a copiar esta de aquí select el from entradas tal cual select el from entradas así que en autor no voy a poner autor directamente sino nombre apellidos y en categoría voy a poner nombre categoría porque para eso he hecho una petición cruzada donde a la tabla de entradas la he cruzado con autores y con categorías si ahora guardo y recargo podréis comprobar como aunque internamente en la tabla sigue poniendo que el autor es 1 y que la categoría es 1 aquí no había categoría todavía de cara de mostrar en una pantalla lo muestra un poco más en formato humano para redondear esta entrada para redondear este listado de entradas la fecha también la podríamos cambiar a un formato más humano por tanto igual que hemos hecho un poco al principio en los posts pues voy a poner el formato de beit y m de h es decir año mes día hora minuto segundo por tanto me voy a escritorio me voy a sustituir por toda esa cadena con la instrucción de muy polivalente y lo que hago por tanto al recargar es darnos cuenta como tengo ya la fecha escrita en formato humano podría maquetar un poquito más evidentemente pero otra cosa que quería hacer para acabar de maquetar un poquito este este este blog es que en el texto en lugar de poner un input voy a poner un text área por tanto en texto voy a poner text área y voy a poner por supuesto name es igual a texto y otra cosa que quería hacer otra cosa que quería hacer es que en este caso es aquí tenemos un texto más para escribir multilínea en este caso la fecha la estamos poniendo obligatoria para que sea la fecha del momento en el que escribimos el artículo pero si nos interesa esto y si quiero escribir un artículo y hacer como te lo escrito mañana o como que lo escribía ayer para eso os voy a decir que hay un campo muy divertido nos va a dar algún pequeño problema por days pero es el siguiente vamos a verlo dónde estás fecha no estás no estás te pongo yo entonces input type y esto es lo divertido de en lugar de texto pongo fecha neymar es igual la fecha en anadir les voy a decir que no me añadas el dato y si no añade m pero todo esto lo que me envíes por fecha por cierto que igual tengo que cambiar el tipo de datos en mysql moment y no la veréis estructura les voy a decir que el utc este tipo marchar ahora veréis por qué y vamos a probarlo así que guardo y recargo y quiero que veáis como bueno esto es un campo select este es un campo text área esto es un campo ahora trabajamos esto por cierto esto es un campo de categoría pero esto es un campo de fecha que me saca una selector de fechas muy interesante yo pongo por ejemplo fecha de mañana y digo quinta entrada este autor este es el texto de la quinta entrada imagen ahora trabajamos con eso general vale fijaos que en fecha en este caso en la quinta entrada me tiré por 1970 haya habido un problema vamos a ver cuál es el problema el problema es que si yo vengo aquí vamos a verlo me dice que yo hasta ahora estaba escribiendo los campos de utc pero ese campo de ahí este campo lo que hace el campo de html es devolverme la fecha en términos de año guión mes guión día así que yo lo que tengo que hacer es convertir esa fecha de año y un mes y un día era una fecha en formato utc pero una vez más la instrucción de el objeto de it be’ lo va a permitir porque yo entonces hago lo siguiente dejadme que me concentré y ahora digo vamos a ver de fecha y lo voy a poner vamos a ver si me deja lo pongo voy a poner algo envío bien no me ha puesto nada y lo que voy a hacer ahí lo tengo no me ha puesto fecha lo que voy a hacer es convertir el campo de fecha etc bien en lugar de usar el dt voy a hacer lo siguiente voy a hacer un gmt donde le digo que quiero formatear en y en lo que quiero formatear es el post-it efe vamos a verlo ahora un valor no he encontrado no pasa nada dónde está está aquí en voy a eliminar ese registro ok en la línea 49 no pasa nada [Música] bien creo por tanto una fecha a los 22 esta es otra entrada interesante dejadme que no ponga texto porque en este caso no me interesa le voy a enviar vamos a verlo me sigue poniendo 1970 por cierto que me pone en un en la fecha vamos a verlo examinó me pone 0 en el líder me pone 0 otra entrada interesante y lo que tengo que hacer bueno eso lo que estoy enviando creo que no creo que hay puede ser el problema el input type weithman fecha mein fecha dejadme borrar esta entrada y ahora guardamos esta es otra entrada y a 15 guardamos la entrada esta es otra entrada vamos a ver ahora cómo se ha cargado bien en este caso 2015 y lo que tendría que hacer es ya tengo 2015 cargado pero quiero convertir a gm de it en un es decir quiero convertir esa fecha en una época iunics vamos a hacerlo a continuación lo único que tenía que hacer era poner str to time dentro del fecha es decir creo en gm de le digo que me devuelva la información en formato 1 y a partir de ahí le digo que convierta en string time es decir que convierta una cadena en tiempo que es el post fecha de esa manera voy a borrar aquellas entradas que no valgan vamos a ello y por tanto ahora puedo venir aquí y me parece bueno y ahora digo que por ejemplo el día 16 esta es una entrada del día 16 autor josé vicente este es el texto de la entrada del día 16 imagen hablamos de ello y ya lo tenemos por aquí tenemos por tanto esta es la entrada del día 16 si lo vemos en el panel de control o si lo vemos mejor dicho en la parte frontal esta es una entrada del día 16 únicamente tengo que eliminar una entrada que es de aquí 2015 ya lo tenemos llegará por tanto el panel de control se me queda bastante más limpio que antes únicamente me quedaría como urgente por poner dentro de esa tabla la gestión de las imágenes en la gestión de las imágenes yo lo que puedo hacer es en lugar de poner un campo de texto subir una imagen cuidado porque al subir una imagen tengo que tener varios aspectos en cuenta a continuación por tanto especificamos que la imagen dentro del escritorio es un campo de tipo file por tanto en imagen en categoría name imagen aquí lo tenemos pues voy a hacer algo tan sencillo como input type text pregunta file y name imagen si simplemente por hacer esto recargo y veis como ese campo cambia al típico selector de cosas por ejemplo pues cara cargo una imagen que tenía por ahí en el escritorio pero sin embargo sólo eso no va a hacer que la imagen se suba solo eso no va a hacer que la imagen se cargue me hacen falta dos cosas más en primer lugar me hace falta que el propio formulario tenga una cosa que es en type es multi parte forma data creo que no lo escrito bien con lo cual voy a pedir cómo viene la llamada así que en html forma file en esta página que la conozco aquí está el hentai de multipark for data ahí está me estaba confundiendo un guión en lugar de ser guión en la barra multiparte formato esto es lo primero que necesitamos para realmente añadir elementos al formulario lo que hacemos ahora desde el punto de vista de php una vez que en el formulario tenemos electa multiparte form data es hacer lo siguiente me voy a ir a anadir php y aquí donde pone imagen lo que voy a hacer es decir lo siguiente por una parte dejo esto tal cual está que es post imagen por otra parte voy a decir que me aplaude dan file donde esta función tiene por una parte como parámetro uno el nombre de la imagen temporal al subirla y como parámetro 2 el nombre del directorio donde vas a guardar esa imagen así que usó una variable de servidor un poco especial que es files y dentro de files pongo imagen y una segunda dimensión para la matriz que estén name cmp recordar que todo aquello que está en inglés es que no podemos cambiarlo ahora esto lo voy a mover a la carpeta foto punto files imagen quito el tema y pongo el name correcto vamos a ver si funciona correctamente me voy a admin pongo usuario y contraseña y lo que voy a hacer ahora va a ser simplemente decir que en el día 22 creó una entrada texto selecciono archivo seleccionó una imagen y los hubo si todo ha ido bien y no se se ha ido bien pero vamos a comprobarlo si todo ha ido bien me voy a localhost entro dentro de php my admin me voy a la base de datos blog me voy a entradas por una parte compruebo si es cierto que ha aparecido texto a la imagen en principio no ha puesto nada no pasa nada primera parte no conseguida pero ahora veréis que lo solucionamos fácilmente segunda parte me voy a sam mmg ht docs me voy a blog me voy a foto bueno tampoco hemos subido correctamente esta parte así que vamos a voltear esta parte de aquí bien en esta imagen voy a decirle que quiero poner files imagen files imagen me voy a volver a hacerlo así que este es un contenido este es un título esta es una imagen y le doy a enviar blogger dice que no hay ningún archivo o ningún directorio lo que me dice en este caso es que no puede mover ahí está el té mp name vamos a moverlo vamos a verlo selecciona archivo ejercicio 1 ahora lo apuesto a que ya estaba correcto fijaos como ejercicio 1 lo ha puesto lo que ha fallado es esto ya ha fallado eso aclaró ya sé por qué sí que había funcionado así que había funcionado lo que pasa está en que en lugar de llevármelo a la foto me lo ha llevado a admin y dentro de admin probablemente me ha intentado crear una carpeta llamada foto lo que tengo que hacer es decirle estás en admin baja una carpeta sube a la carpeta foto y ahí ponlo bien vamos a probarlo por tanto ahora vuelvo a hacerlo una nueva fecha una nueva entrada un nuevo texto selecciona archivo info 1 le doy a enviar en principio no hay ningún error si no hay ningún error compruebo dos cosas lo primero es que al examinar aparece el nombre de la imagen que he cargado y lo segundo a ver si todo sale bien es que dentro de la carpeta foto aparece la imagen que subido ya tengo por tanto el blog a nivel de imágenes y fecha ha conseguido voy a implementar un botón de borrar y al implementar un botón de borrar lo que haremos es crear nuevas entradas para el blog pero ahora ya así subiendo para cada entrada una imagen nueva bien para esto lo que voy a hacer es crear un botón de borrar personalizado para cada una de las entradas continuamos creando un botón personalizado para borrar voy a ver atar esta redirección para que pueda volver a la página principal y ahora voy a aprovechar esta columna que está vacía el escritorio php para crear vamos a verlo aquí está un segundo que no lo veo aquí está para crear un botón de borrar borrar php creo un botón borrar cuidado porque lo que debo hacer es borrar php y de es igual a algo ese tiene que ser el líder del artículo con el que estoy trabajando quiero decir con esto que será guarde y recargo si queréis inspección el código voy a poner control y para que veáis que es borrar y de es igual a 1 y de es igual a 2 y de es igual a algo no lo está cogiendo fijaos que no lo está cogiendo si no lo está cogiendo ahora que algo que puede ser por él por los lecciones porque cada uno de estos tiene un y de cada una de las tablas tiene una idea cuando yo pido una idea como sabe el programa que me estoy refiriendo voy a hacer una prueba las páginas no responden esperar voy a hacer una prueba esto no me suele funcionar entradas punto y de local héctor tabla y columna recargo bien y en este caso me dice que entradas punto y de nos reconoce como ya os he dicho no me suele funcionar llegado a este punto tengo que poner una cosa que se llama alias mirad entradas punto y d y d total como todo lo que hago es decir aquello que está que se llama aire y que está dentro de entradas lo voy a llamar y de total y por tanto ahora aquí pongo y de total y así no confundo unos y dzeko no atrás porque lo que estaba pasando con toda probabilidad es que el programa no sabe a cuál de los tres y ves me estoy refiriendo por tanto guarda y recargo bien vamos a ver esperaba qué fuera uno pero dice que no ha devuelto ningún resultado vale entradas punto y de eso quiere decir que no ha cogido ninguna ahora sí que no ha cogido ningún resultado muy bien los ideas por lo menos está cogiendo ahora bien y ahora le digo y de total pues etc título nombre apellidos coma texto imagen como nombre categoría y así lo que hago es seleccionar sólo los campos que voy a querer usar si todo va bien ahora ya no fallara ahora veré los ideas correctamente y si miro el código fuente de la página veré como ahora cada botón y de uno cuidado hay dos que tienen el y de uno y eso no es bueno en la primera entrada está duplicado bueno porque 12 13 1 y así nos cuenta como ahora cada botón tiene el aire correcto si cada botón tiene el aire correcto ahora puedo crear en la administración un nuevo archivo un nuevo documento llamado borrar php y en borrar voy a copiar un poco el código de añadir y les voy a decir del it from entradas no de las entradas no delito fromme entradas bueno y de es igual agett y den vamos a verlo esto ya me hace falta espero no tener ningún error por si acaso tuviera algún error voy a bloquear ese eco y vamos a verlo cojo el que tiene el número 13 y lo borro no hay ningún error por tanto cuando vuelvo al escritorio el 13 ya no está bien ya puedo desbloquear esto viendo que no he cometido ningún error y por tanto ahora borro este y borró este y fijaos cómo estoy borrando los registros que hasta ahora había hecho ya llega el momento por tanto de hacernos un blog como realmente toca es decir quiero por ejemplo mañana poner el curso del programa número uno autor yo esta es una entrada para decirte qué voy a hacer un curso de java selecciono arribo no tengo internet si tengo internet de categoría general y ya tengo una entrada me voy ahora a editar por último el código d el index para decirle que el ing ahora si la imagen fila y margen si ahora me abro otra pestaña con el blog veremos como ahora bien cuidado img no foto ahí lo tenemos buen cuidado creo que está claro que voy a tener que retocar un poco el css verdad entonces le digo lo siguiente pss estilo css y le digo oh vamos a ver artículos aquí le digo artículos arctic el ing with 100 es decir ocupan el 100 por ciento de esa columna ya que tengo imagen tengo autor tengo categoría debería tener y esta es una entrada para decirte que voy a hacer un curso de java bien voy a ver si tengo html 5 luego me descargar una imagen de por ahí de internet html5 luego veo la imagen me la guardo en imágenes y creo otra entrada para el blog vaya he salido bien y digo noticia del día 14 curso de html5 autor yo el próximo mes estaré impartiendo un curso de html5 selecciono archivo el logotipo de html5 categoría programación le doy a enviar y si ahora ve al blog podremos comprobar como tengo una noticia que es curso de html5 y es la noticia que es curso del programa número uno si queréis ahora lo que puedo hacer es para creo que tan verdad tan grande que pueden hacer es algo como por ejemplo index y le digo lo siguiente wef 50 píxeles cloud left lo que hago es que las imágenes se queden a la izquierda de los contenidos y le digo también un martín raid de 20 píxeles un margin top de 20 pixeles un martín botón de 20 pixeles para que el texto se ha quedado ahí cuidado que flota y flota simplemente porque cuando acabo cada artículo debería poner ya sabéis que flotación es igual al problema de la flotación pero le pongo un clear boat siempre creo que las cosas se empiezan a montar es un síntoma inequívoco verdad de que hay algo que está pasando bien lo que voy a hacer ahora es por descargar por ejemplo wordpress logo y márgenes solo el logotipo más grande este de aquí me da imagen me lo guardo y ahora en el panel de control pongo algo como por ejemplo noticia del día 15 el curso de wordpress así que dentro de dos meses estaré impartiendo un curso de wordpress subo archivo su logotipo noticias programación le doy a enviar y si ahora miro el blog podréis comprobar cómo a medida que voy metiendo noticias pues tengo para cada noticia tanto el logotipo como el título como el autor como el texto como todo lo que haga falta únicamente nos queda por programar no digo que sean detalles porque al final son cosas importantes pero el núcleo del blog por lo menos ya lo tenemos que nos queda pues noticias por autor noticias por categoría lista de los últimos artículos y programar un buscador entre otras cosas que podemos hacer aparte de que el panel de control debemos hacer esto mismo que acabamos de hacer también para poder evitar la entrada podemos leer podemos añadir podemos borrar todavía no podemos editar y por supuesto hacer que esta misma tabla también está disponible para categorías comentarios usuarios y registros una parte importante para ir recogiendo información es la parte del registro dentro del portal por tanto aquí bajo de html de momento lo estoy escribiendo todo directamente dentro de esta página más adelante lo que haré es ir externalizando en archivos externos de momento se escribe todo la misma página lo voy a hacer lo siguiente voy a borrar o añadir realmente y voy a editar a copiar esta línea y la voy a pegar aquí no me hace falta volver a conectarme a la base de datos porque ya me conectado anteriormente así que le digo insert into registros los siguientes valores en primer lugar vamos a ver la estructura en primer lugar y de null bien en segundo lugar 1 2 3 4 5 en segundo lugar quiero ver el utc el utc es blade en tercer lugar quiero ver la ip la ip es una variable de servidor en el acuerdo de memoria php get ip que es reboteadores remote address es esta de aquí a continuación quiero ver el navegador php get browser y el browser hay ss no realmente ahí estamos quiero el you sergent y por último quiero la página que se está visitando así que php get current url no no no no está si estás si hago esto cuidado me faltan unas comillas si hago esto este trozo de código tan silencioso y tan inofensivo hace lo siguiente mirad yo me voy a 192 16 811 blog vamos a verlo 1 681 227 espera no quién soy yo bueno no es que quiero acceder a través de aquí pues quiero ver mi ip ipconfig soy 118 117 y sólo por hacer esto no ha ocurrido nada aquí en la parte de abajo pero sí movió la base de datos veréis que en registros ya pone que en este etc está ip con este navegador de aquí y con este sistema operativo que no lo veis pero yo os lo enseño con este navegador con este sistema operativo con este kit con este sub kit y con esta su versión de chrome he visto la página de blog esto por tanto permite que sea ahora os conecta jce a mí conectados a mi blog es conectar a esta misma dirección a medida que os vayáis conectando veré el rastro que vais dejando las páginas que veis que de momento sólo hay una página para ver e incluso el navegador el momento en el que os habéis conectado

Deja una respuesta

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