Curso Programación en C

pero que nos hace falta para poder trabajar con páginas web son dos piezas por una parte un navegador web y por otra parte un editor web un navegador web es un programa que generalmente tenemos ya instalado en el ordenador o que muchas veces podemos descargar y que nos ayuda a abrir una página web y navegar a través de ella en cualquier sistema operativo actual suele venir ya algún navegador como victimó instalado en el caso de windows por ejemplo viene aquí una pequeña de color azul que es internet sin embargo por razones que ahora luego os contaré vamos a intentar evitar usar internet para luego es lo cuento vemos en este caso que debemos tener todos esto al navegador que es en google chrome hay varias alternativas por ejemplo google chrome es un buen color para empezar por ejemplo mozilla firefox tan pelo es entonces voy a empezar este lugar diciendo que navegadores hay y recomendando los instalar todos los que podáis ahora veréis porque voy a abrir por tanto el navegador chrome en que lo tengo en la barra inferior de hecho podéis abrir cualquier navegador y los navegadores más famosos a día de hoy y en primer lugar porque viene integrado con windows sin explorer a continuación tengo micro lo que hago es buscar en una nueva ventana en internet el navegador chrome mientras tanto lo tengo aquí google.com internacional español barra chrome o simplemente poniendo chrome en en una cadera web o en un buscador en segundo lugar tengo otro también muy conocido que se llama firefox dries en la fundación mozilla en fila a punto o hereje estos dos a día de hoy son los más conocidos también tenemos un par de navegadores más como por ejemplo uno muy desconocido pero también muy lo encontré en la ópera puntocom y también por supuesto tenemos un navegador llamado safari que es de apple que es el navegador que viene por defecto en los sistemas relativos de mar estos son cuatro más internet explorer cinco navegadores más usados a las fuentes de internet cuál es de recomendar descargar evidentemente recomendar descargarlos todos todos los que podáis porque cuando hagamos un sitio web finalmente nos hinchar a utilizar esperar que recargar de nuevo esta página utilizar todos los navegadores web que puedan tener nuestros usuarios para en definitiva probar cómo se va a ver nuestra página entonces los navegadores web en los que van a navegar nuestros usuarios en el caso de safari os voy a contar que tenemos un pequeño problema ahora mismo y es que ya son unas cuantas versiones que safari está para windows safari ya hace unas cuantas versiones que sólo está práctica por tanto una cosa que puedo hacer es en un buscador buscar safari for windows y encontraremos alguna versión antigua por ejemplo fijaos safari 5.1 puntos 7 para windows encontraremos todavía alguna versión antigua que nos podemos cargar aunque lo ideal evidentemente es que tengamos alguna para en un momento dado poder probar en un safari actualizado como es nuestra web por tanto mi recomendación va a ser en la medida que podáis si queréis no ahora pero a lo largo del desarrollo de una web y lo que bajando e iros descargando iros instalando todos navegadores web que podáis para antes de lanzar mar ya anticiparon a los problemas que puedan existir y probar esa web en cualquier navegador que pueda existir en este caso además estoy ahora mismo en un pc estoy ahora mismo en un ordenador fijo tendríamos que tener en cuenta cada día más los navegadores móviles los navegadores de dispositivos móviles porque cada día hay más visitantes que páginas y dispositivos móviles y cada día hay menos visitantes porque los que entran por una parte no entran por la otra en ordenadores digamos pero más adelante en este curso evidentemente tendremos en cuenta no sólo ya los navegadores para móviles sino la creación de páginas web para dispositivos bien hemos dicho por tanto que la primera pieza que necesitamos es un navegador la segunda pieza es un editor la segunda pieza es algo con lo cual podemos editar código no hace falta ningún software particular ningún software específico para editar código html técnicamente podría texto mira que podría venir aquí crearme una carta voy a crear una carpeta me había carne de carpeta en el escritorio llamada jose vicente y dentro de esta carpeta voy a pinchar un nuevo documento de texto y voy a crear un documento de texto llamado index tengo un problema el problema es este problema será en sistemas operativos windows desde windows vista y no se da en otros sistemas operativos como el mac o como en linux el problema es que desde windows vista microsoft windows elige ocultarme las extensiones de archivo este archivo me está diciendo que es y text pero me está diciendo además que es un documento de texto es decir realmente es un archivo que se llama index punto txt en este curso va a ser muy importante que podamos llegar que podamos ver las extensiones de archivo por tanto tengo que hacer algo para conseguir que el sistema operativo no me engañe y me diga cuál es realmente la extensión lo que haré en cualquier sistema operativo es lo siguiente no me voy a organizar segundo me voy a opciones de carpeta y búsqueda y dentro de opciones de carpeta y búsqueda hacer es en la pestaña ver me voy a despertar a ocultar extensiones de archivo para archivos conocidos pero pronto aplicó y acepto pudo comprobar que el archivo que tenía en ese apretado aunque se parecía que estaba index realmente se llama index punto txt captó como he llegado a esa ventana pues me he ido a organizar en primer lugar he sacado un explorador de windows o un mi pc me he ido aquí a organiza medido a opciones de carpeta y búsqueda y dentro de la pestaña de espn esta opción que viene activada por defecto que es ocultar las excepciones de archivo para archivo conocido esto hay que hacerlo una vez en cada ordenador la buena noticia que una vez que lo hace será por ejemplo hago y vuelvo a encender la opción que he configurado por tanto ahora este archivo que tengo aquí ya no es un archivo index sino que es el chivo index punto tx por tanto ahora para hacer clic y cambiar la extensión txt por las letras html en algunos sistemas operativos como en windows me dice que al cambiar la extensión archivo puede quedar en utilizable así que estoy seguro de que deseo cambiar para elegir esto por tanto que acabo de hacer es no acabo de crear es una página web vacía evidentemente lo que ahora será añadirle algo de código como decía por tanto no es obligatorio trabajar un editor de código específico para nuestros proyectos por ejemplo el bloc de notas que existe dentro del propio sistema operativo windows o el editor de notas está en línea un poco también la distribución pero el micro bloc de notas podría servir para editar un archivo por tanto por ejemplo en este caso voy a sacar el bloc de notas le digo archivo abrir del escritorio me voy a la carpeta jose vicente abro en este caso el archivo index html y ya podría empezar a escribir aquí por ejemplo pondría esto es una página web y si ahora guardo archivo guardar y visualizo la atención me hago doble clic en el archivo index html y lo visualiza con un navegador web compruebo que el texto que he escrito es válido como página web por tanto no vemos de un programa concreto para evitar código podemos hacerlo con cualquier programa incluso con ningún programa con un bloc de notas que podríamos considerar que sería lo mínimo para editar código pero sin embargo aunque esto se puede hacer también recomiendo hacerlo intento un poco por regla general e intentó huir de programas que me ayudan demasiado de programas que hacen demasiadas cosas por ti porque me málaga duro a esos programas y cuando estoy en un entorno en el que no tengo ayudas a ver que dependan esas ayudas tampoco lo voy a hacer tan duro como abrir el bloc de notas y empezar a escribir código lo que suelo recomendar es un término intermedio es un editor de código que me ayude de alguna manera marc que de alguna manera el código que estoy escribiendo para comprobar si lo que estoy haciendo es más o menos correcto o no mis criterios para elegir editores de código son dos primero que el editor de código sea de software libre para que no os cueste dinero empezar a editar páginas web o bien no os cueste dinero o bien no tengáis que ir a crear ningún tipo de software y el segundo criterio que sólo elegir para elegir well es que sea multiplataforma es decir que entre el mismo editor en windows mac y linux para que si en algún momento te cambia el sistema operativo dentro de lo posible las mismas herramientas para editar de esta manera el editor que suelo recomendar es un editor llamado g entonces para encontrarlo simplemente tengo que poner edit el buscador y en primer lugar con toda probabilidad llegaré a esta página que es wiki jeje edit en segundo lugar tengo softonic sohanny que no me quiero ir al final al punto kg si dentro de esta página pincho en download pensó en descarga encontraré que por una parte me puedo bajar el que fue entrada compilarlo si sé hacerlo por otra parte me puedo bajar los archivos binarios para windows y por otra parte me puedo bajar los leds instalables para mac no pone nada de linux porque edit suele estar instalado en la gran mayoría de distribuciones de linux especialmente en aquellas que se basan en nombre por tanto dependiendo del sistema operativo en el que esté lo que haré en este caso por ejemplo si estoy en windows xp binarios windows elegí una versión en este caso voy a elegir la última a la 2 30 y dentro de la carpeta lo que voy a hacer es bajar el archivo exe que haya en este caso el eje para windows ocupa 23 hagas lo cual pues en unos pocos segundos quizás algún punto dependiendo del ancho de banda de la red en la que estemos tendremos el programa correcta más descarado en mi caso no me lo voy a descargar voy a cancelar la descarga porque ya lo tengo instalado en el sistema si vosotros no han instalado pues tenéis que bajarlo y posteriormente instalarlo una cosa que os voy a decir es que este programa es de completa confianza quiero decir sabemos lo que estamos descargando en la página como ya os digo es de confianza por tanto cuando lo tengáis descargado le puede dar a ser el siguiente siguiente siguiente tengo un miedo yo siempre recomiendo rise estos programas que no sean de confianza porque es el siguiente siguiente siguiente luego de instalar un montón de virus y cuando de cosas que nos han salido pero con este programa concretamente os podéis fiar de forma siempre recomiendo leer vale pero le puedes dar siguiente sin ningún problema aparte veréis que en ningún momento se expide licencias porque usa la licencia del software libre así que en un momento se han instalado para poder empezar a trabajar en mi caso como ya os digo ya lo tengo instalado para eso voy a buscarlo directamente en el menú inicio voy a abrirlo y para ver que este es el programa menos impresionante del mundo damos cuenta que prácticamente es un editor de textos para lo cual vale con este editor de textos vamos a estar trabajando dentro de este curso este es por tanto el programa que vamos a usar durante esa formación es edith y le vamos a dar para editar como os voy a decir de todas formas que este programa fantástico pero al principio no viene demasiado bien configurado y cosas que se podrían afinar por tanto vamos a editar la configuración de este programa para asegurar que su estado su configuración sea óptima para lo que queremos hacer me voy a ir al siguiente lugar si estoy en windows me voy a héctor y voy a encontrar que aquí abajo tengo preferencias esto es exactamente igual sostienen windows o si estoy en linux si estoy en mac voy a pinchar en el propio nombre del programa arriba a la izquierda donde ponen edit y pita edith me iré a preferencias entonces me voy a ir como os decía a editar preferencias si estáis en magno edit preferencias y me sale esta ventana así que antes de empezar a trabajar lo que me gustaría hacer es configurar edit una cosa que voy a hacer es entrar lugar dentro de esta pestaña a ver voy a mostrar números de pie porque probablemente en algún momento u otro comete un error y prueba delante cuando cometa un error el explorador me dirá tienes un error en la línea 54 defectos saber 4 línea 54 en segundo lugar me voy a ir a la segunda pestaña llamada editor donde veremos que el ancho del tabulador ahora mismo por defecto está a 88 me parece excesivo para editar código es muy incómodo con 8 vale por tanto lo que voy a hacer es cambiar el valor de tabulador de 8 artest y por último el tercer parámetro que voy a tratar es la sangría automática para que cada vez que yo haga un sangrado al pulsar enter se respetó sangrado en la línea justo inferior si ya tengo estas tres opciones marcadas voy a pulsar cerrar y ya puedo empezar a escribir código vamos a empezar por tanto nuestro proyecto de la siguiente manera corriendo el curso vamos a ir desarrollando un proyecto activo evidentemente vamos a ir desarrollando una web así que voy a hacer lo mismo que había hecho antes pues me habéis visto me voy a eliminar esta carpeta que había hecho antes porque la voy a volver a crear lo que tenemos que hacer es en el escritorio nos buscamos una zona vacía voy a pulsar un botón y voy a crear una nueva carpeta a esta carpeta voy a poner mi nombre cada uno debe poner su nombre y voy a hacer doble clic en carpeta para entrar dentro de ella ahora mismo está está vacía como hemos configurado previamente los nombres de extensión al ver las extensiones de archivo crear sin ningún problema archivos nuevos hacer esto en windows es real es sencillo no en mac no lo es tanto por tanto si estoy en un grupo simplemente voy a pulsar click en botón derecho nuevo documento de texto y voy a crear un archivo llamado index.html si estoy en mac una cosa que puedo hacer atención es darle a archivo guardar como y simplemente archivo que viene por defecto en gp me lo guardo en el escritorio en la carpeta jose ambiente y lo guardó como index.html es decir en jar de crear el archivo directamente en el explorador de windows lo puedo guardar desde edith le puedo guardar como archivo nuevo en here it y de esta manera finalmente tengo aquí un archivo index punto 7 ml cargado en el editor y tengo un archivo index.hr ml es el mismo en la carpeta web si lo habéis creado directamente en la carpeta viral si lo habéis creado directamente ahí en la carpeta y aquí tenéis documento no guardado no pasa nada porque también podemos pinchar el archivo los pasos hacia el interior de edit y nos aseguramos de que cargamos ahí dentro index html y de que definirá vamos a estar trabajando editando el archivo y ex punto html ahora voy a hacer lo siguiente vamos a ver a la hora de abrir ese archivo desde dos perspectivas en primer lugar lo quiero abrir el editor de código y en segundo lugar quiero hacer doble clic arriba con un navegador web de esta manera si lo he hecho de esta manera voy a hacer nuestras pestañas abiertas en el navegador web ahora estaré viendo este archivo desde las perspectivas no estaré viendo por una parte en la parte izquierda de la pantalla como edición de juego y por otra parte a la derecha de la pantalla lo estaré viendo como resultado en el navegador web ahora mismo el archivo está vacío y por tanto lo veo como página en blanco tanto el editor como el navegador es normal vamos a comprobar que estamos editando mismo archivo y si queréis antes de comprobarlo además de comprobarlo lo que voy a hacer simplemente es huir antanas en la pantalla cómo voy a hacer esto mirad es muy sencillo desde windows vista ocurre que se pinchó una ventana y la arrastró hasta la parte izquierda de la pantalla automáticamente pasa a ocuparme la mitad de izquierda y si una ventana y la arrastró hacia la mitad derecha prácticamente pasa a ocuparme la mitad derecha por tanto para perder el menor espacio posible lo que quiero que hagáis es simplemente hacer que el editor de códigos ocupe el 50% izquierdo del lector de códigos ocupe el 50% derecho además de la barra de tareas la barra de inicio ocupa su espacio y creedme necesitamos el mayor espacio posible para editar nuestros archivos lo que voy a hacer es propiedades y ocultar automáticamente la barra de tareas para que ese espacio sin automáticamente a nuestro espacio de trabajo ya sea edición de código o ya sea navegador web antes de continuar por tanto una primera comprobación la comprobación va a ser la siguiente mira dentro del archivo de código dentro de help algo tan sencillo como hola mundo voy a poner hola mundo y no puedo esperar que automáticamente este hola mundo apec pero del navegador web por eso lo que haré es el mundo el real disquete de guardar o bien le doy a archivo guardar o bien pulso la creación rápida de teclas que es control s una vez más sólo por haber guardado no puedo esperar que el rosado se vea en el navegador en el navegador tengo que recargar tengo que pulsar este botón de cargar página de nuevo tengo que pulsar ese botón o bien pulsar f5 o bien usar control r command r los que estéis en mac para recargar y por tanto ver ahí hola mundo señal de que estamos trabajando con el mismo archivo en dos perspectivas por parte en la perspectiva de cómo y por otra parte en la perspectiva desde el navegador web es decir una cosa es lo que estamos portando y otra cosa es cómo se como la gente va a ver la estamos programando empezamos por tanto a evitar código y lo que haremos ahora simplemente es escribir dentro de este archivo index html que he creado a por cierto una pregunta que soléis hacer es porque lo has llamado index html se podría haber llamado calabaza html longaniza html se podría haber llamado así es costumbre que cualquier navegador web o mejor dicho cualquier servidor web cuando entras en un sitio web y hay un montón de páginas la primera que te da es aquella que se llame index punto html es una convención vale por tanto dentro de un sitio web el puesto de páginas sobre mi punto l quien soy punto que ml que hago punto html todas esas se pueden llamar como queráis con algunas condiciones que luego os contaré como por ejemplo no poner espacios o no ponen acentos a la página principal de nuestro sitio web y vamos a asumir que trabajamos ahora con esa página principal debe adaptarse index.html dicho esto y teniendo en cuenta que ya estamos trabajando con esa página index.hu tml voy a borrar el texto que ha escrito hasta ese momento y voy a empezar a escribir una cosa que en html se llaman etiquetas dentro del lenguaje marcado la información está organizada en etiquetas una etiqueta es mucha cosa que esté dentro los caracteres menor que y björk una cosa que sólo yo para que lo veáis bien y lo veáis claro en vandal skin head it se puede ampliar el tamaño de la tipografía no lo hagáis vosotros son lo que sé yo entonces me voy a ir a editar me voy a ir a preferencias me voy a ir a tipografías y colores y en lugar de usar la fotografía había en su hijo normal voy a usar por ejemplo la tipografía que viene por defecto pero por ejemplo con un tamaño de 20 de esa manera obtener mejor el código que voy a escribiendo en pantalla inevitablemente a lo largo de las sesiones cree que volverá al tamaño original cuanto más vayamos avanzando más código ir escribiendo y por tanto llegado ese momento será incómodo trabajar con texto grande de volver a trabajar con texto pequeño pero hasta que ese momento llegue y para hacerlo más cómodo voy a trabajar si hemos dicho por tanto que las etiquetas son todo aquello que va entre el menor que y el mayor que vamos a empezar por una etiqueta que se escribe de la siguiente manera dentro del menor que porque voy a poner un signo de admiración aunque curiosamente las etiquetas colorean de color morado dependiendo del editor de código que estés usando si no es head y puede colorearse de otro color el color es lo de menos lo importante que se colorea y se colorea porque empieza a reconocer que eso ya es una etiqueta html así que después del símbolo de admiración cerrado voy a poner lo siguiente doc trip html esta es la primera etiqueta que vamos a usar es la etiqueta doc type y deberíais usarla al principio de cada proyecto es una etiqueta que informa al navegador de que todo lo que se va a encontrar a continuación va a estar escrito en lenguaje html y además al ser un 5 de html no hace falta poner docta http l 5 con que pongáis docta html ya es suficiente a partir de aquí los voy a decir aquí que está doctor es un poco una rareza porque es una de las pocas etiquetas en html que se abren pero no se cierran la gran mayoría de las etapas de html entre un 90 y un 95 por ciento se abren y se cierran que al fin esto os voy a hacer una demostración justo después de octay voy a poner una etiqueta que se llama hs y a continuación voy a poner una etiqueta de cierre html cuál es la diferencia entre las dos la diferencia es que la etiqueta original simplemente se nombra menor que el nombre de la etiqueta y mayor que en este caso html y la ética de cierre es exactamente igual que la etiqueta de apertura con la diferencia de que tiene una barra por tanto si esta es la etiqueta de apertura de html esta es la etiqueta de cierre de ml dentro de este lenguaje de marcado tenemos una cosa que se llama limpias y es que hay etiquetas que contienen a otras etiquetas qué quiere decir esto me voy a hacer un poco de hueco le voy a hacer un poco de espacio dentro de la etiqueta html la apertura y del cierre de espacios simplemente pulsando enter y a continuación voy a la el tabulador la tecla del color es la que está dos más a baja de escape hasta arriba de bloqueo eyeos q las puso una vez mira y me hago una sangría una sangría en este caso de tres caracteres porque antes he elegido que la quería de tres caracteres y aquí os voy a decir una cosa que os va a parecer broma no es broma y es que me voy a hacer una etiqueta llamada cabeza y otra etiqueta llamada cuerpo porque en ml existe el concepto de caixa y existe el concepto de cuerpo por supuesto evidentemente las estudios escribiendo en inglés algo que os comento más adelante es que html es un lenguaje bastante permisivo que te permite aunque te recomienda crear tus propias etiquetas pero evidentemente a menos que esto sea estrictamente necesario lo evitaremos vamos a crear vamos a escribir etiquetas estándares porque ya veremos más adelante que nos interesa os conviene cumplir todo lo que vemos los estándares la diferencia entre el head y el body todo aquello que esté en el gel va a ir directamente al navegador no va a ser en su gran mayoría visto por el ser humano sino que va a ser visto va a ser analizado por el navegador web y todo aquello que esté ex body va a estar destinado a ser visto por el ser humano por tanto jefe es para la máquina body es para el ser humano vamos a empezar a escribir algunas etiquetas una primera etiqueta impresa en el gel es la etiqueta title la etiqueta title nos permite ponerle un título a la web y como veis y como la gran mayoría de etiquetas se abren y se cierran esto quiere decir que me hago espacio dentro de head y dentro de g escribo una etiqueta apertura title y una etiqueta de cierre title las etiquetas que han aparecido hasta el momento las he escrito yo todas eso quiere decir que si manualmente escrito title manualmente he escrito menor que barra type y mayor que os voy a decir ya que estamos en este punto que edith no es el único editor con el que podéis editar código hay otros editores como por ejemplo brackets de adobe o como por ejemplo en netbeans que nos todavía más ayudas hay editores que yo escribo de tyc lo escribo el cierre automáticamente me escribe en la etiqueta de encierre decir escribiría tight y en cuanto script ya mayor que automáticamente me escribiría la etiqueta de cierre title por eso aunque yo no lo he hecho aunque yo estoy trabajando directamente con las etiquetas os voy a decir que existen editores que nos dan más ayudas que heavy no hay ningún problema por usar editores de código que hagas de hecho algunas ayudas de vez en cuando no nos vienen mal yo simplemente quiero es que os intentéis acostumbrar a este código con las menos ayudas posibles porque os voy a poner un ejemplo si tenéis carnet de conducir yo lo poner un poco el ejemplo de que las ayudas código son el profesor de la autoescuela que va a tu lado y de alguna manera tú vas tranquilo porque sabes que si cometes algún error el profesor te lo corregirá de esa manera un poco te confías pero qué pasa al día que te sacas el carnet de conducir y ya no está el profesor de autoescuela al lado pues que deseabas muy inseguro porque sabes que antes es como interior es el próximo a corregir para de repente no vale por tanto dentro de lo posible os recomiendo que tampoco os acostumbréis demasiado a la salud y que os acostumbréis a escribir tanto como podáis de los mismos bien como os decía dentro de title vamos a escribir el título de nuestra página cual es el título de nuestra página como no hemos puesto ninguno por defecto el título de nuestra página es index.html así que en mi caso voy a poner un título el título es el que queráis ahora si escribimos en el idioma que queráis entonces host vicente carratalá cada uno va a hacer su página ya con formador a un programador o y diseñador se me ha ido a la línea de abajo no pasa nada y ahora quiero que comprobéis lo siguiente si pulsó el botón de dar me voy al navegador y pulso recargar quiero que comprobéis uno que en el navegador no aparece nada en la navegadora está en blanco pero todos aquí arriba aparece el título que haya expuesto una vez más solo lo que está en bodh y es lo que verá el usuario lo que esté en title es lo que va al navegador otra cosa antes de continuar y dejadme que baje un poquito el tamaño de la letra vemos por también lo que hemos hecho hasta ahora es escribir con unas pie de sangrías vemos por tanto que para él quien está dentro de quien quien depende de quien hemos creado sangrías para comprobar que el bloque está dentro de html y que todo este bloque está dentro de la etiqueta head la cuestión es las sangrías en html son funcionales o son estéticas hay otros lenguajes de programación u otras plazas de marcado en los en las sangrías son funcionales no poner sangrías puede hacer que el programa o el código funcione p en html no ocurre así en las sangrías no son funcionales son meramente estéticas si yo hubiera escrito sin sangrías el código funcionaría exactamente igual de bien pero aún así os voy a recomendar trabajar con sangrías para que cuando le echemos un vistazo al cuerpo para que cuando leamos el código podamos ver mejor qué es cada cosa no ya en un ejemplo como éste éste de sencillito pero os aseguro que dentro de poco tiempo este ejemplo se va a complicar bastante y cuando se complique necesitaremos de un cazo saber quién está dentro de quién y quién depende de quién las reglas de html no las hago yo sino las pone un consorcio una organización que se llama w3c entonces voy a buscar lo siguiente voy a buscar w3c hallyday thor el w3c world wide web consortium es un consorcio que está formado por multitud de empresas prácticamente todas las grandes y tiene una útil que podéis encontrar en bali dator punto w 3 punto o hereje básicamente es un sitio web en el cual tú subes tu página tú subes tu código y te dices si está bien está mal y si está mal y esto es lo mejor te ayuda a corregir lo que está mal en este caso un segundo que parece que está quedando un poco en cargar aquí estamos en este caso lo que voy a hacer es subir el archivo que acaba de desarrollar para poder validar lo mirad hay tres maneras de ayudarlo por una parte puede validar mediante la upa l si tengo una url en este caso no la tengo yo tengo una url cuando tengo una página ya publicado en internet en nuestro caso ahora en este motor que ya no algún recurso los vamos publicada para lo mismo todavía no puedo ayudar mediante subir un archivo esto es lo que voy a hacer o puedo validar poniendo directamente código en la pantalla así que mira me voy a pinchar en validar por subida de archivo el programa me dice la página me dice seleccione el archivo que quiere subir así que pinchó seleccionar archivo me voy a escritorio selecciono página que he creado pulsó el botón check al pulsar el botón check lo que ha realizado es subir la página web validar la y decirme si pasa o no pasa y en este caso de en el momento en el que estoy viendo rojo es porque no la página como html5 si aprende más de los errores que de los aciertos y como he dicho esperaba que esta página a un error lo importante no es que me diga qué error stein lo importante es que me detalle cuál es y entonces tengo tipos de cosas dos tipos de notificaciones tengo advertencias y tengo errores las advertencias no son técnicamente errores son cosas que debería corregir pero tampoco se presenta en el estándar y luego abajo tengan cosas que sí que es un error mira tengo aquí error de validación un error la codificación de caracteres no ha sido década así que asumo y procedo usando windows 1252 que es eso vamos a ver los web las páginas web han sido inventadas no fueron inventadas en eeuu contra un poco de la creencia popular se inventaron en suiza por un investigador llamado tim berners-lee el cual ahora luego hablaremos un poco la cuestión es que aunque no se crean en eeuu quieras que no el mundo anglosajón pesa bastante el idioma inglés pesa bastante a la hora de definir la web por tanto la web requiere que tú le digas que aunque juego de caracteres vas a trabajar si no asume que trabajarás con el juego de caracteres inglés pero cuando pongas una ñ cuando pones un acento cuando pongan su vez ese día fallará porque el juego de caracteres inglés no está preparado para el juego de carácteres pero si el juego de carácter que podríamos encontrar en países de habla hispana creo que por ejemplo en alemania está la beta en francia está haciendo circos lejos en rusia directamente está el conjunto cirílico japón china corea y demás hablamos y necesitamos por tanto especificar con qué juego de caracteres exacto vamos a trabajar aprovecho también esto para deciros que yo no me lo sé todo de memoria yo lo pensé todas las citas evidentemente las que uso más frecuentemente se que me la sé pero os voy a decir que es imposible sabérselas todas y es posible saber si los parámetros de cada una de las etiquetas que es lo que hago cuando necesito buscar información me voy a google y busco que tengo atención html tf8 o html carácter inco ding lo que voy a hacer es localizar alguna página también dentro de mi blog de artículo específicamente para cómo resolver el tema de la acreditación y dentro de internet dentro de algún sitio web que voy a encontrar voy a poner la ética de codificación y voy a arreglar este error este error me dice no tienes una etiqueta de codificación de caracteres pues lo que voy a hacer es buscar la etiqueta de codificación de caracteres momentín que parece que me estaba dando internet y ahora en un momento aparecerá la página web ya tenemos aquí parece que empieza a cargar me voy a ir por ejemplo pues a esta primera de hecho es una fuente de referencia que suele usar bastante hay gente que se mete con esta página bueno lo hablamos de las ventajas y los inconvenientes que tiene pero en definitiva lo que quiero es algún intérprete ya sea documentación oficial o ya se ha documentado extraoficial en algún foro por el punto que me puedan decir cuál es la etiqueta que estoy buscando por eso digo que mi objetivo útil entonces no es aprenderme todo de memoria sino en cualquier momento saber dónde puedo encontrar la información que me falta por tanto he entrado dentro de esta página y observó cómo existen dos variaciones para la etiqueta de f-8 yo intento seguir la regla siempre que no me salten los estándares de ser más bajo posible es decir de escribir el menor único posible siempre por otras posiciones por tanto voy a copiar esta etiqueta mirad copio en sad y que está la bajó de title y es una etiqueta que simplemente dice meta y a continuación tiene una cosa nueva no habíamos visto hasta ahora que es charset es cual af8 es una etiqueta ml damos cuenta que tiene el color verde clarito propio de la etiqueta en él pero dentro antes de que acabe el cierre antes de poner el mayor que hay una cosa que está de color violeta llamada charset igual a otra que ya que está de color rosa o morado llamado efe jon 8 es que tenéis ahí es un atributo de la etiqueta html y todos los atributos en este caso el atributo charset son parejas por una parte charset es el nombre del atributo y por tanto tf8 en este caso es en el barco esto es una etiqueta meta que tiene un atributo llamado juego de caracteres que es igual a 13 8 lo que voy a hacer ahora simple y sencillamente va a ser guardar el código resultante me voy a ir al valor de la w3c y mirad voy a volver a seleccionar el mismo archivo y pulsar este botón que tenemos aquí abajo a la derecha en la pantalla llamado red great y con great lo que va a hacer es volver a subir el archivo html volver a examinarlo y comprobar si ahora pasamos o no pasamos fijaos que después de haber escrito esta etiqueta ahora el documento pasa como html5 seguimos teniendo un warning vamos a ver qué dice el warning y el warning nos dice que estamos usando una característica experimental que es html 5 suponía que haciendo el 5 se tenía que haber convertido en un estándar en abril este año pero todavía se considera simental de benestar yo creo a punto de lanzarlo como estándar final por tanto no es una advertencia podemos hacer nada durantes y que podríamos hacer algo podríamos bajar a html 4 pero pienso que no es una alternativa válida por tanto estando a punto de validar html5 prefiero contar con esa advertencia lo importante en este caso es que hayáis visto la filosofía de en cualquier momento desarrollar validar desarrollar crear y para poco intentar corregir todos los errores que podamos fijaos que dicho intentar no he dicho conseguir porque muchas veces no lo vamos a conseguir pero no pasa nada muchas veces en pro de que la página quede como nosotros queremos tendremos que romper alguna regla ahora bien que sean las menos reglas posibles dentro de lo que cabe lo que tenemos y por tanto en la pantalla es la estructura que debe tener un documento para crear una página web es decir esto que tengo en la pantalla podríais considerarlo algo así como una plantilla cualquier página web que crepes tiene que tener este elementos y a partir de ahí empezamos a desarrollar y empezar a desarrollar me voy a meter el link para que la recreación ha pasado y voy a poner algo tan sencillo como hola mundo el mismo hola mundo que tenía antes pero ahora escrito dentro de la etiqueta body y si ahora guardo y recargo comprobar que en el navegador aparece hola mundo algo que suele frustrar bastante a quien empieza a aprender a crear páginas web es que la gente dice ostras hemos escrito 12 líneas y no aparece ninguna de ellas en el navegador web todo aquel código que escribimos no tiene por qué verse en la pantalla tened en cuenta lo que siempre digo es que html es algo así como el esqueleto de la web y el esqueleto no tiene por qué verse pero aunque no se ve sujeta a nuestra web aprovecho también este momento para deciros que aunque todo el código no se vea mismo cuente en la pantalla sí que es tiene en cuenta que quiere decir esto mira voy a pulsar con botón derecho por allí en el medio en el navegador y voy a elegir una opción llamada el código fuente de la página se ve o el código fuente a la página de una nueva pestaña de navegación donde se ha transferido todo el código hemos espetó pero aunque ha transferido visto totalmente sólo se traduce al mundo esto es así y es deseable y veréis más adelante que aunque las etiquetas por moverse en el navegador realmente tienen mucha importancia bueno he escrito una web mínima o también a mínima que es una prueba en la que pone hola mundo pero ahora lo que quiero es escribir una web en la que pues haya contenido una además al uso y voy a empezar enseñando unas cuantas etiquetas estructurales una que proviene de html 4 y unas cuantas que son novedad en html 5 en primer lugar escribir una etiqueta ya está bieber esta etiqueta se abre y se cierra bill es la palabra breve para división dentro de un sitio web ya lo veréis voy a estar constantemente retirando divisiones esta etiqueta no es nueva proviene de html ejecuciones anteriores y antiguamente no había prácticamente manera de realizar divisiones con esta etiqueta pero sin embargo a partir de html5 aparecen nuevas etiquetas que podemos usar tres de ellas unas siguientes en primer lugar una etiqueta llamada no confundir con hair no es lo mismo head es una etiqueta que va navegador que le proporciona información al navegador heather es la que está para crear cabeceras de un sitio web una etiqueta que ya forma parte del estándar para html 5.1 es la etiqueta en la etiqueta principal la etiqueta que indica dónde vas a poner el contenido principal de un sitio web y por último tenemos otra etiqueta llamada footer el género estas tres por tanto son éticas estructurales y guardo y recargo veremos que no vemos a la talla no vemos empieza el header y donde acaba no vemos dónde empieza la etiqueta main los actos de momento pero más adelante veréis como sí que tiene mucha importancia poner estas etiquetas estas son las principales pero no son las únicas etiquetas estructurales con las que vamos a contar entonces dentro de heather me voy a hacer un poco de un poco más adelante veremos más etiquetas estructurales pero empezó a escribir algo de contrato algo que se pueda ver en pantalla ningún texto debería ir suelto señor pongo aquí ese texto está suelto es cierto que está dentro de heather pero no estoy especificando si es algún texto de párrafo si es un título o qué es ese texto así que vamos a empezar hablando de títulos hablando de titulares existe una etiqueta llamada h1h1 que abre y se cierra la h viene de jeringa titular y el 1 es el nivel de importancia hay seis niños es de importancia que van del 1 al 6 donde el 16 es el menos importante lo que os voy a recomendar es que siempre seréis con el h1 y dentro de la h1 voy a hacer algo que parece redundante que va a ser poner lo mismo que he puesto en el título si ahora guardo y el crítico podréis observar como por una parte si en el title pone su vigente carratalá aquí arriba pone josé vicente carratalá y podéis observar como si en h1 polis josé vicente carratalá aquí arriba en la página conejo subir de cara tala otra cosa puedo entender por qué la gente ha llegado a este punto me lo suele empezar a preguntar que crear es cambiar el estilo que me digáis no me gusta la letra porque no me gusta la tipografía porque no me gusta extender porque no me gusta ese tamaño o porque no me gusta ese color ese tipo de dudas no se resolverá ahora estamos en html en html pero nos preocupamos únicamente por la estructura no por el estilo y la presentación del estilo de presentación nos ocuparemos más adelante cuando os enseñe el lenguaje css el h1 por tanto es el titular de mayor importancia y os voy a recomendar que en un sitio web solo pongáis un solo h1 curiosamente esto que os acabo de decir no tiene nada que ver con el estándar según los estándares podéis poner tantos h unos como necesitéis esto tiene que ver con google google espera que nuestro sitio web haya un foulard h1 porque yo siempre digo que google es un poco pro quo’ es un poco tu ayúdame a mí y yo te ayudaré a ti entonces si pones un solo titular a h1 les indicando a google cuál es la base cual es el título más importante en tu web con lo cual cuando pase sabe cuál es la información de mayor importancia a la información de menor importancia si tú pones varias cosas con h1 google claro no sabrá exactamente cuál es la inflación de mayor importancia a que la encontrará que google siempre lo encuentra pero le costará puesto más haga sudar a google menos sólo va a curar contigo cuanto más más caro se lo des más cuidar vale por tanto podemos agrario sachero pero mi recomendación es que sólo pongamos uno ahora mira yo no puedo poner por ejemplo jose vicente que retrata como h1 y esperar que la gente conozca porque hay tan conocido entonces sólo recomendar poner un h 2 para completar el h1 donde aquí especificamos un poco de qué va por qué estáis creando si es una web auto folio personal poner un poco qué es lo que hacéis si es una web de empresa poner un poco que hace la empresa no lo sé ahora depende un poco qué página buena estáis haciendo imaginaos para la página web de madonna pues no pondría que poner madonna cantante y actriz porque todo el mundo lo sabe bastante pero no siempre pega toro pero si en este caso estoy haciendo mi página web y pienso que sólo componer josé vicente carratalá no todo el mundo me conoce pues tengo que poner una caché dos en el que ponga profesor por amador y diseñador guardo recargo observó como el segundo titular a la línea de bajo la letra es un poco más pequeña pero insisto que me da igual la letra porque abre más adelante que se puede cambiar lo que estáis viendo en la pantalla se llama una cosa que sea estilos por defecto quien decide que uno es negrita y es cursiva y esta infusión román y es así de grande y quien hace de que h 2 es un poco más pequeño lo decide el navegador web el navegador web cuando tú no especifica estos estilos te pone una cosa que se llama speed por defecto pero más adelante simplemente vamos a aceptar estos estilos por defecto y más adelante podemos crear nuestros propios estilos continuamos trabajando y en este caso vamos a seguir trabajando dentro de h2 mejor dicho dentro de heather a continuación justo de h2 y vamos a ver elementos llamados listas las listas son listas de elementos las que hacéis por ejemplo el word se extiende la sijin era en primer lugar voy a crear una etiqueta llamada l la etiqueta se abre y se cierra efe viene de un orden list un orden sin ordenar y list analista evidentemente así que él es lista o no ordenada la etiqueta huele quiere que dentro pongamos otra etiqueta llamada lee lee que se abre y se cierra es el elemento de lista así que voy a hacer lo siguiente y también voy a poner en esta lista a aquellas secciones que deberían ver el menú de navegación de mi página web por ejemplo voy a poner inicio he copiado y pegado y ahora voy a poner por ejemplo formación ahora voy a poner programación ahora voy a poner señor cambiar formación por cursos puedo poner otra actividad con tacto y por último voy a poner una descripción llamada pide tu curso muchas veces llegado a este punto la gente me pregunta porque has puesto etiquetas a veces arriba etiqueta abajo y el contenido en el medio y porque en este caso pone es etiqueta contenido y etiqueta y no has hecho ni retorno de que en sangría las dos fórmulas están perfectamente permitidas por tanto mirad si como aquí inició está tan admite esto como esto es perfectamente admisible lo único que pasa es que digo bueno si es una etiqueta light y tiene una sola palabra y luego el cierre pues parece que sí estará un poco más de espacio se ve mejor desperdició menos el espacio blanco en pantalla por tanto este caso el puesto así simplemente deciros que esto no tiene un efecto por el funcionamiento del código y ahora recargo veréis que aparece esto en pantalla el menú que he puesto aparece como una lista no ordenada la lista de bolets una lista de puntos a partir de lista no ordenada podemos hacer muy fácilmente una lista ordenada las listas por detrás son iguales las no ordenadas solo cambia que la etiqueta o el es el orden list lista por cada si guardo y recargo veréis que ahora en lugar de aparecer una vista de bits una lista de puntos aparece una lista con núcleos ordenados a veces es que nos interese utilizar listas no ordenadas habrá veces en las que nos interese usar listas ordenadas curiosamente en este caso para hacer un menú me interesa usar un l un menú de un menú de puntos yo sé que estaréis pensando porque muchas veces la gente hace que eso que tengo ahí en la pantalla no es un menú eso no se parece en nada a los menús que yo veo por ahí por internet pero creedme cuando os digo que cuando veamos css cuando el estilo web cogeremos ese menú y lo convertiremos en la botonera horizontal como las que habéis visto tantas veces en las páginas web así que ahora mismo no lo parece que ahora mismo diréis o por ejemplo círculos o efectivamente lo convertiremos en cualquier cosa gracias simplemente botones la gente llegado este gusto efe esto no es el menú que esperaba diseñar creaba algo más guay tranquilos que se convertirá en algo gráficamente igual ahora el proyecto se complica un poco inevitablemente porque yo básicamente en este menú de navegación he prometido que mi web va a tener unas cuantas secciones he prometido esto tengo que cumplir la presa y tengo que crear diferentes secciones de un sitio bus se compone de varias páginas web lo que tengo ahora es un sitio web que se compone de una única página web pero para cada uno de los enlaces de la web quiere tener una página diferente así que voy a hacer lo siguiente me voy a ir a crear nuevo archivo dentro de con el botoncito en blanco o bien con archivo nuevo o bien con combinación de teclas troll n o command en el si estamos en un pack tengo un documento no guardado así que me quería ir a archivo guardar como y en mi carpeta del escritorio me voy a guardar atención este archivo como he prometido una sección de ahora cursos me lo voy a guardar como cursos punto html pretensión aunque aquí arriba curso lo he escrito con la primera mayúsculas la página web va a ser todas en minúsculas pero esa no acaba aquí la atención que repito repito primero pinchó el botón de crear nuevo documento la contratación me voy a ir a guardar como vamos a guardar com bueno se me ha enganchado un poco voy a restaurar voy a continuación a programación así que mira pincho cuando canto nuevo lo guardo y lo a guardar el escritorio en jose vicente como canción programación sin acento todo minúsculas y sin acento por qué pues porque muchos servidores web no adaptan archivos con acento especialmente es el servidor web no está ubicado dentro de españa especialmente el web está fuera de la unión europea por tanto para evitar problemas qué problemas serían estos pues los problemas bien por ejemplo que nuestro equipo la pena web será correctamente pero cuando los hubiéramos interno no funcionará y que dijéramos pero funcionaba porque funciona cuando los de vale pues porque el ganador igual que acepta a los acentos pero en el servidor donde habían colocado igual no entonces eliminó el acento así el problema hago un archivo nuevo lo guardo estoy pensando control ese para guardarlo y tengo a continuación la palabra diseño la ñ es otra de esas cosas que nos puede causar problemas en internet por tanto usan cualquier estrategia para evitar la eñe entonces una estrategia suele ser cambiar la eñe por una u otra estrategia siguiendo digamos la rama de valenciano galán balear como queráis llamar suele ser poner en directo a solución siguiendo la rama el portugués o portugués de brasil suele poner ser poner diseño con nh lo que pongáis me da igual depende de vosotros en definitiva no podéis poner una yo lo que voy a hacer es poner diseño y y guardamos nuevo archivo guardo control ese y lo llamo contacto punto html todos deben acabar en html y por último tengo un enlace que tiene espacios tengo un pide tu uso y lleva espacios en el medio son tres patas que hacer en este caso una vez más vamos a guardar y aquí hay varias estrategias que podéis usar una de ellas exponer pide guión bajo tu curso punto html otra de ellas es pide guión curso punto html otra ellas es no pues nada es pide tu curso punto html y hay una costumbre bastante extendida en programación cuanto nombras por ejemplo variables que se ponen de varias espaldas que es usar una cosa que se llama el case camel que sería algo así una maleta de camello y es un chiste es como si es un camello dentro de una maleta pues se verían como las jorobas entonces si imagínatelo entonces existe poner varias varias para atrás pero la primera letra de cada de cada palabra ponerla en mayúscula para que visualmente localicemos mejor donde acaba cada palabra y dónde empieza la siguiente si os fijáis en este caso el pide tu curso sería como el cambio y la t y la ce son como las jorobas de camello que sobresalen del camello vale pues en definitiva podéis usar la nomenclatura que queráis las mayúsculas se aceptan dentro de que luego muchos navegadores no se extinguen en mayúsculas minúsculas pero es una buena manera de nombrar un archivo vale por tanto vamos a poner ahí pide tu curso y ya tenemos ya tenemos las páginas web sitio web creadas ojo porque aquí arriba en escribir me ha desaparecido la marca de index html tener en cuenta que cuando creó muchos archivos html mirar aparecen unas pequeñas flechitas que me permiten ir cambiando de archivo en archivo por tanto no os preocupéis porque en cualquier momento podéis localizar podéis volver a index.html ahora viene otra cosa difícil es enlazar la página principal a cada una de las páginas quiero que hagáis lo siguiente mirad de momento más adelante veremos más código pero de momento voy a entrar e incluso html y voy a decir yo soy la página de cursos lo voy a poner sin acentos yo soy en la página de programación en mi sueño yo soy la página de diseño lo voy a poner con ella aunque no se representará correctamente yo soy la página de contacto y yo soy la página de pide y pide tu curso sólo quiero que pongáis esto en cada una de las páginas y más adelante nos haremos más cuerpo como podéis imaginar lo que quiero ahora es que cada vez que yo haga clic en inicio vaya a la página de inicio cada vez que haz clic en cursos vaya a la página de cursos en definitiva lo que en internet café con un hiper enlace el enlace es una porción de texto oa veces imagen que cuando pinchas vas a otra parte bien cómo se hace esto editar luego lo vuelvo a dejar como estaba y voy a rodear inicio de una directa llamada para que lo veáis más claro lo voy a poner en varias líneas aunque desperdició espacio y voy a hacerlo sin estar allí pongo a los que peter vamos a verlo dentro del link pongo una etiqueta que se abre y una etiqueta que se cierra es la etiqueta anchor de ancla a día de hoy no tiene muchos parezca que tenga sentido pero recordáis los primeros de los de la web se seguía mucho el símil de navegar por la web o surfear por la web necesito navegas por la web cuando llegas a una página web que es el ancla de hilo de ancho veréis qué cosa más extraña pero mirad qué se va a hacer hay un parámetro muy interesante que es chávez hr este dice dónde es cuando pinchas en ese enlace entonces en el inicio voy a poner este red es igual a index.hu ml a 3 pero las semillas que muchas veces la gente está viendo hay que poner index efe ml entre comillas si ahora guardo y recargo en el sitio web comprobaréis como hola vemos como si hoy a la página principal inicio está de color azul o morado probablemente morado porque ya hemos visitado esa página y está como subrayado solo inicio porque los demás no lo están eso qué quiere decir que inicio ahora es el vínculo lo que voy a hacer a continuar es aplicar lo mismo al resto de enlaces así que mira me voy al código reestructuró un poco el código ser vagos copiado me copió esa etiqueta o la etiqueta de cierre y digo que cursos va a ir a cursos html hay que respetar totalmente el nombre del archivo que hemos creado con anterioridad fijaos como parece que no pero poco a poco la complejidad va subiendo voy a copiar esa etiqueta en cada uno de los enlaces voy a copiar la etiqueta de cierre en cada uno de los enlaces otra cosa que a la gente se le olvida es cerrar las etiquetas cuesta al principio pero os acostumbréis programación me lleva a programación con minúsculas y si es centro diseño me lleva a diseño html con n y con y contacto me lleva a contact punto no tiene tu curso lo he puesto en formato camel cave pib tu curso punto html fijaos que no hemos salido del menú no hemos salido del menú de navegación y ya estamos haciendo un archivo de texto bastante largo por tanto una vez más os recomiendo o bien trabajar así o bien trabajando todo en la misma línea esto está de moda para que podáis ver mucho mejor quién depende de quién porque esto a veces puede hacer difícil y el que tiene un link que tiene un app embargo estáis viendo que solo el menú de navegación ya casi me ocupa una pantalla entera dentro de mi pantalla entonces aunque lo he hecho así para que lo podáis ver bien para que podáis analizar cuál es la estructura final quiero ahorrar algo de espacio porque dados cuenta como me sobra un montón de página en blanco a la derecha y voy a ahorrar líneas simplemente pulsando suprimir y evitar tener altos de ley vais a ver como el menú entero únicamente en lugar de ocuparme pues que me está ocupando 15 líneas en algo para 5 líneas no os digo que lo hagáis yo os lo ofrezco a partir de aquí elegir cuando queréis trabajar pega mato como yo y cuando queréis trabajar en formato extendido en este caso quería enseñaros primero el ejemplo en formato extendido porque ahorita que lo estoy comprimiendo comprobaréis como respect ura se dificulta la lectura se dificulta porque para cada línea debéis tener en cuenta que tengo un link que luego tengo una que luego se cierra el a y luego este rallye es algo con lo que con el tiempo se acostumbrará y espero principio puede costar un poco de la costumbre continuamos por tanto voy a bajar una vez el tipo de letra voy a bajarlo para que aún así se vea bien no pasa por esto tengo aquí porque es un salto de línea y voluntad en la línea anterior esto es un inevitable si guardamos y ahora estamos en cada uno de los enlaces encontraremos que si pincho en cursos me dice yo la página de cursos pincho el botón hacia atrás es decir ir a la página anterior si pulso en programación yo soy la página de programación si pulso en diseño yo soy la página de edición si pulso en contacto yo soy la página de contacto y se impulsó en pide tu curso yo soy la página pide tu curso qué es lo que tenemos por tanto finalmente tenemos es que nuestro sitio web no está hecho de una sola página sino que está hecho en páginas web tantas páginas html como queráis vamos a abandonar un poco la cabecera y vamos a profundizar dentro de la etiqueta main dentro de la etiqueta principal dentro del principal iría el contenido puramente de la página principal de la página web podéis poner el contenido que queráis pero os voy a dar unas cuantas combinaciones de cosas que suelen quedar bien algo que suele quedar bastante bien es poner un banner inicial un banner destacado una imagen chula de qué haces y luego abajo unos cuantos de estos de texto en resumen desde que te desarrollas por tanto me voy a hacer un poco dentro de la también en la etiqueta y voy a hacer lo siguiente voy a hacer dos secciones hay una etiqueta específica dentro de html qué es sexo voy a crear varias secciones una sección para el banner principal y otra selección para él los destacados voy a crear una tercera sección para un pequeño blog y voy a crear una última etiqueta llamada a side para contenido tangencial con 3 x tangencial escondido reaccionado indirectamente con el contenido de la página web por ejemplo aunque no únicamente redes sociales claro he puesto tres secciones y las tres secciones son iguales entre sí como las voy a localizar como las voy a diferenciar más adelante es lo que voy a hacer es section me hago un espacio dentro de la apertura de sección al igual que he hecho antes dentro del mes y le pongo un y de un identificador pongo y de igual comillas comillas banner o lo mismo con los destacados e igual a destacados a blog de esta manera aunque tenga tres etiquetas iguales sección esto indica que no van a tener exactamente el mismo contenido he bajado de internet varios recursos multimedia he bajado por una parte varias imágenes en su mayoría está en formato p g que también puede haber alguna en formato jpg e incluso podría haber algunas en formato gif trias una imagen exportando además también me he bajado de internet un archivo mp3 un archivo de audio un archivo de música y también he bajado un archivo en app 4 un archivo de vídeo a continuación como podemos insertar multimedia dentro de html5 de manera nativa y sin hacer que recurrir a otros elementos sin tener que recurrir a plugins externos tal y como hacía falta hasta pues hace unos pocos años recurrir al uso de flash rebajado por tanto estos recursos tanto de imagen como de sonido a una carpeta para que ahora mismo por defecto es la carpeta de descargas lo que es incorporarlos lo que ve es añadirlos a mi carpeta de proyecto pero cuidado te das cuenta la cosa mirada en mi respetado de proyecto ya tengo seis archivos html el archivo index y las páginas que he creado creo que es conmigo en que si ahora copio y pego todos estos recursos multimedia dentro de esta etiqueta pues voy a sacar un poco la cartera y además es que estamos prácticamente al principio del curso si cada cosa que voy incluyendo en mi proyecto la web en la misma carpeta al real donde un montón de cosas en dentro de esa carpeta lo que vamos a por tanto es ordenar y para atrapar en lugar de copiar y pegar los archivos exactamente voy a crear una nueva carpeta y le vais el nombre que queráis imágenes si queréis no le pongáis afecto a la multimedia img foto como queráis llamarlo en mi caso lo último ya no lo contiene imágenes sino que también contiene el vídeo y contiene out hago doble clic y ahora sí o bien copio o bien muevo queráis voy a mover y ahora mismo todos los archivos que tenía en descargas han formado a para ser parte del proyecto para formar parte del proyecto pero lo han hecho dentro de una carpeta llamada multimedia es tocar a cada página funciona más rápido y más lento pero hará que yo traje más holgada cuando llame tanto a los recursos de imagen como los recursos de vídeo y audio lo que voy a hacer ahora por trato es insertar imágenes dentro de mi sitio web dentro index puntos mira voy a index html hemos dicho que hemos creado unas con el banner y ahora dentro de esta sección quiero incluir al menos un vale menos una imagen estas rectangulares que sirve un poco como de banner del sitio web pongo por tanto una etiqueta llamada img la ética e img es bastante curiosa porque es una de estas dos comentaba anteriormente de las que hay pocas que se abren y no se cierran por tanto pongo etiqueta img no hay etiqueta de cierre y empuje y pongo rcp guión igual igual y psc tengo que poner donde está este gen en qué lugar se encuentra esa imagen pues tenemos en cuenta qué imagen se encuentra dentro de una carpeta así como multimedia barra para decir que quiero entrar dentro de la carpeta multimedia y dentro de multimedia ya localizar el nombre de algún archivo como por ejemplo este de aquí voy a el caso piano 2 punto ng así que localizó el archivo lo que quiero importar a uno se habrán importar las imágenes y lo llamo piano 2 punto p que hay que poner exactamente el mismo nombre de carpeta que contiene los archivos y exactamente el mismo nombre de archivo con extensión png jpg gif ahora guardo y recargo comprobaréis como tengo la cabecera el subtítulo el menú de navegación y justo abajo tengo una imagen que representa al banner que he introducido dentro de la página web en principio sólo esto tenemos la imagen os voy a decir todas formas que esta página no valoraría si no pongo un atributo llamado alt alt es el texto alternativo el texto alternativo es algo que se tenía hace muchos años a la carga de una imagen fallaba de nuestros tiempos de internet a costos de descargar imágenes y se ponía un texto en lugar de la imagen a día de hoy ya no es obligatorio ya prácticamente no falla ninguna imagen pero sin embargo siguen siendo obligatorio según el estado por poner en la etiqueta al poner atributo alt así que el banner del sitio web lo que pongo dentro de las comillas ya es cosa vuestra pero hay que poner algo no lo esté en nuestro caso pero igual la imagen que ha salido ha salido de más grande o demasiado pequeña en mi caso no ha salido a un mal tamaño entonces en principio os diría que no podemos tocar el tamaño de la imagen porque eso debemos tocarlo encestó es y no estamos todavía en css pero también os digo que a veces puede resultar un poco molesto está trabajando en un proyecto con una imagen gigante que no te deja ver nada en este caso os voy a enseñar un truco es recomendable pero funciona que es estilizar con css digo estrechar con html voy a poner a continuación wef es igual a por ejemplo 200 píxeles lo que hago es especificar mediante un atributo para ese papel una trató de la imagen cuál va a ser la anchura de la imagen con la que estoy trabajando sólo es necesario que establezca la anchura la gran mayoría de navegadores hoy en día están preparados para que si tú solo estableces la anchura trabajan la altura proporcional a la anchura en este caso esta imagen si tuviera 200 píxeles de ancho tendría que decirle 100 pizzas de alto pero no es necesario porque si no específico nada efectivamente es automático también podría mirar pero no os lo recomiendo especificar otro parámetro a continuación llamado height jake por ejemplo sería igual a 200 píxeles en este caso con el escalado sendos píxeles lo que estimación es forzar la proporción de la imagen así que usarlo como queráis yo lo que voy a hacer es quitar el genk dos píxeles para dejar que el programa me escale la imagen y mal escale de manera proporcional ya tenemos por tanto una imagen ubicada dentro del banner vamos a trabajar ahora por ejemplo con destacados voy a poner dentro de destacados una zona multimedia dentro de esta zona multimedia quiero poner una parte un vídeo por otra parte una imagen así que lo primero que tenemos que hacer es comprobar que dentro de la carpeta muy media tendremos por una parte un archivo de vídeo en este caso yo tengo un archivo a dos partículas puntos de 4 y por otra parte un archivo del sonido en este caso llamado canción punto mp3 a continuación dentro de los pecados voy a crear elementos destacados una etiqueta que nos sirve también para estructurar es la etiqueta arctic el arctic el me servirá por ejemplo para crear artículos de un blog también me sirve para crear artículos destacados así que voy a crear art y que el que se abre y arctic el que se cierra negro de los destacados fijaos que creado desde dentro art y que voy a poner un título es porque hay tres puestos estado antes el h1 y el h 2 y ahora digamos que le tocaría el h 3 punto 3 programación por ejemplo y ha continuado de programación voy a insertar un vídeo cómo se inserta un vídeo dentro de html5 pues se trata de la siguiente manera en primer lugar pongo una etiqueta que se abre y se cierra llamada vídeo y ahora dentro del vídeo pongo cuál es la fuente del vídeo s er efe con ese relleno srp igual comillas comillas a dentro dentro de la carpeta multimedia y cargo el archivo partículas punto mp4 fijaos que por una parte cargo la etiqueta vídeo y por otra papel dentro de la etiqueta yo ahora le pondré a 2 metros una fuente si ahora guardo y recato comprobaré que me falta estoy cerca si ahora guardo y recargo comprobaréis como que al aparecer el vídeo pero en lugar de aparecer el vídeo solo aparece el primer fotograma del vídeo así que a continuación os voy a explicar un par de cosas más con respecto a la etiqueta en primer lugar os voy a decir que aunque parezca que no ha insertado el vídeo pero en lugar de ver el vídeo solo veo el fotograma inicial el primer fotograma si quiero reproducir el vídeo simplemente tengo que hacer lo siguiente mirad pincho con botón derecho en el vídeo y ccoo reproducir y fijaos como al reproducir se reproduce el vídeo pero no tiene controles así que si quiero parar el vídeo simplemente tengo que volver a pulsar botón derecho y pulsar pausa y con eso pausa el pib como veis es una manera bastante incómoda de trabajo el que cada vez le tenga que dar al botón derecho para ejecutar por eso os voy a decir que dentro de vídeo poner un parámetro anónimo llamado controls si como vídeo espacio controls comprobaréis como ‘la por supuesto recargar la página aparecen los clásicos y típicos controles de reproducción de vídeo y play el pausa puedo hacer scrubbing el tiempo el volumen e incluso un botón para pantalla completa hay un parámetro llamado free loud justo la contracción de control voy a poner parámetro perdón reload no hablamos de perro llamado a punto play si tú lo que quieres es que cuando se cargue la página automáticamente en el vídeo le das a otro y recargo fijaos como sin que yo le haya dicho nada me aparece el vídeo reproduciéndose un parámetro si queréis un poco contrario a auto play mirad a tensar la pantalla carlo siguiente si yo no activo pri load de hecho no hago nada yo recargo la página y el vídeo no carga hasta que yo no le dé play el vídeo no carga entonces quizás pero cuidado con esto me gustaría que mientras que yo entro en la página r voy dando a play que el vídeo vaya cargando por qué porque si le doy a play el vídeo empezará a descargar poco a poco pero quizás puede tardar un poco quizás se enganche dependiendo del ancho de banda que tengamos en este momento una opción miradme la solución es pongo aquí guardo recargo y no soy severa porque ya ha cargado entero pero compre load lo que ocurre es que cuando yo entro en la página sin que yo ejecute el vídeo el cargar bien cuidado porque esto puede ser bueno en algunas ocasiones y puede ser no tan bueno en otras si hacéis una página que esté orientada para pc para ordenador y a día de hoy creo que prácticamente todos estamos con las planas en el internet delgado no pasa nada porque les aplaudo porque que pues 3 se descarga usas un poco de ancho de banda y luego no por el vídeo pues no pasa nada porque no tienes táctica plana pero qué pasa si estás accediendo a la página web con el teléfono móvil a día de hoy yo no sé qué ocurrirá de dos tres o cinco años probablemente todos tendremos tarifa plana y tendremos una velocidad muy grande pero a día de hoy las tarifas de internet tienen límite de negage mensuales con lo cual en este caso estaría ocasionando un consumo ya pegas en el teléfono móvil que luego no se utiliza por eso yo sostengo que existe parámetro y os dejo en vuestras según nuestro criterio que tengáis cuidado el cuando convenido utilizarlo y que no no para que podemos usar además de auto que además de ese look loop me sirve para que cuando el vídeo llegue al final automáticamente en dulce por el principio yo recargo le doy a play pongo el vídeo al final y quiero que veáis que cuando el vídeo llega al final automáticamente va a empezar mismo va a empezar otra vez por el principio eso es look y por último dentro de esta etiqueta aparte de wifi que también podría utilizar tweets a leguas utilizado con la imagen pero hablaremos más adelante de eso fs ese otro parámetro del que quiero hablar es el source porque he tenido que introducir este dato de vídeo como un source y no como la imagen que lo ha introducido directamente en la etiqueta de imagen la razón de esto es porque a día de hoy tres formatos de vídeo y no uno solo que podemos insertar en internet no os lo voy a decir yo sino que voy a sacar una página de internet que ser w es schools html5 vídeo donde tiene la tabla comparativa que me parece aclara me parece práctica de que puedes y que no puedes usar mirad está esta tarta que nos presenta los tres formatos de vídeo admitidos para la web que son mp4 web m y el formato o jeje el formato mp4 es un formato que está sujeto a patentes la patente es hace de microsoft apple toshiba dell me acuerdo cuántas más y luego tenemos dos formatos abiertos que son web m y el formato og a continuación tenemos los cinco navegadores como os decía al principio más usados más famosa cría de hoy que son internet explorer chrome firefox safari y opera porque os he pasado un vídeo en formato mp4 de sencilla razón que a día de hoy todos los navegadores soportan el formato mp4 e incluso opera desde la versión 25 yo polar mente de más que sea que te diría yo por tanto web m el formato o jeje de hecho durante mucho tiempo el uso del formato g pero no me queda más remedio que aceptar que el formato que está ganando la batalla del internet es el formato mp4 antes se hacía por ejemplo que si quisieras hacer un vídeo que se viera en ópera antes del último pues se comprimía el vídeo tanto en mp4 como enoje y dentro de esa etiqueta source se ponían dos etiquetas toros por ejemplo mirad se ponía una etiqueta en formato mp4 y etiqueta el cg de tal forma que si tu navegador fallaba al la primera etiqueta iba a la segunda ojo esto y luego además tenía que el vídeo y convertirlo con un programa como éste de vídeos eso no se hace vale pero en este caso ya os digo que os he pasado un vídeo con un formato con un estándar cerrado cuando yo en principio pues suele huir siempre que puede sostenerse cerrados pero por esta razón por tanto todos los vídeos que pongáis si queréis que sean lo más compatibles posible puestos en formato mp4 ya que hablamos de esto hablamos de compatibilidad cuando hablamos de billy son mp4 estoy hablando de navegadores web que soporten correctamente el estándar de html5 porque el formato mp4 es html5 que pasa con navegadores anteriores todavía hay gente por ahí que tiene windows xp y que tiene internet explorer finger 6 perdón o intente explorer 7 con navegadores que no soportan html5 son básicamente interés de explorer 6 7 y 8 porque el 9 ya lo soportaba no hay mp4 que valga ahí sí tendríamos que recurrir a comprimir el vídeo en flash les digo que lo hagáis y que no lo hagáis lo que os digo es conocer a nuestro usuario cuando hagáis una web tener en cuenta para quien la vais a hacer si es para usuarios que corren el riesgo de tener sistemas operativos antiguos tendréis que comprimir el vídeo in flash si es para usuarios que además normal a día de hoy que tengan navegadores localizados podréis hacerlo en mp4 si hemos visto al vídeo el audio es exactamente igual sólo que cambia la etiqueta al vídeo por audio caos como en esta carpeta os he puesto un archivo llamado canción mp3 y lo que voy a hacer sencillamente es el código voy a crear la etiqueta ártica y dentro de arctic él voy a crear h 3 llamado por ejemplo música a continuación de la h 3 voy a crear una etiqueta simplemente llamada audio si antes hemos creado una estaca llamada vídeo ahora ha creado una llamada audio y dentro de esa etiqueta voy a crear una etiqueta source src donde voy a llamar a multimedia barra canción punto mp3 o exactamente como se me muestro nuestro archivo de audio cuidado mucho cuidado porque va a aparecer que he cometido algún error y sin embargo no lo he hecho mirad me guardo recargo y aunque la música no veo nada bajo de música esto es porque si ponéis una etiqueta audio y no le ponéis controls no aparece nada en la página por tanto en este caso lo que voy a hacer es poner audio controls al poner audio coptos igual que en vídeo fijaos como aparece un pequeño reproductor de música donde por supuesto tengo la tecla de play igual no se oye pero me está sonando la música por la auricular y hacer scrubbing y puedo controlar el volumen de la música por supuesto puedo aplicar los parámetros que hemos visto antes puedo aplicar autoplay y puedo aplicar loop si aplicó a play y loop aparte de control veremos como nada más entrar a la página la música empieza a sonar no sé si veis que las últimas versiones de los navegadores mirado tienen un altavoz hito aquí arriba cuando una página está emitido música a personal capacitó y además está en el loop es que cuando llegue al final volverá a empezar no tiene mucho ministerio es prácticamente que el vídeo pero en audio mi recomendación nunca pongáis música en auto play porque la gente le da mucha rabia y sobre todo mira de una cosa y es que esto que os voy a decir es lo que nunca tenéis que hacer hay una opción donde puedo poner audio y atención le quito trolls y le digo autoplay si yo hago eso tengo una paja que hay música y no puedo quitarla y por tanto efectivamente la gente odia era mi página y cuidado porque es la gente de mi página automáticamente la cerrará y para que crea de una página que la gente va a cerrar vale porque domina la atención se cargó si no lo es por lo menos mirar el altavoz hito es decir que está emitiendo música pero no encuentro ninguna parte donde pueda pararlo verdad por tanto esto en principio no lo hagáis a menos que tenga una buena razón para que se diga esto porque en internet tampoco se puede decir no hagas nunca pero sólo si existe una razón concreta y justificada para hacerlo al igual que pasa con él a tres formatos que compiten un poco por la hegemonía del audio en internet pero así como el del vídeo ha costado más años decidir quién es el ganador en audio estaba clarísimo que el ganador ibas a mp3 entonces sí pongo por aquí arriba 13 schools html5 audio veréis que al igual que pasa con el vídeo hay tres formatos peleando por el por el dominio que son el formato mp3 todo el mundo lo conoce el formato web mucha gente lo conoce pero pienso que no es nada recomendable y el formato eje al cual yo le tengo mucho cariño pero pues es compatible con algunos marcadores que tengo que niños porque es abierto en formato mp3 es cerrado pero cambió el formato mp3 primero que todo el mundo lo coge segundo que tantos cargadores y terceros no lo pone allí pero os lo digo yo al igual que el formato mp4 es un formato soportado por defecto el iphone niño s como en android global oh guau hay una cosa muy gráfica más de mucha gracia y es que el formato web creado por microsoft el único navegador que no reconoce es el navegador de microsoft que es asia bueno de todas formas nunca se me ocurriría poner un web en internet por la sencilla razón de que archivo de p3 es un archivo comprimido con pérdida de calidad es cierto que pierde algo de calidad de sonido pero es un archivo muy pequeño en cambio el archivo web es un archivo descomprimido que ocupa más o menos la 10 y 20 veces más que un archivo mp3 a veces puede ocupar más ten en cuenta que por ejemplo por decirlo rápidamente en un cd caben como unas canciones en descomprimido engrane de p3 en miles de presentaciones para que os hagáis a la idea de dónde puede llegar por tanto lo último que quiero en una página web es un archivo web que tarda muchísimo en descargarse cuando puedo tener una chapa p3 así que en definitiva sea como sea verdad el vídeo a día de hoy directamente por el formato mp4 y en audio apostado por el formato mp3 una etiqueta hemos visto hasta ahora así la etiqueta de parágrafo y la etiqueta de párrafo o parágrafo vamos a verla dentro del blog fijaos que me he dejado aquí una sección con y de blog y dentro del blog lo que voy a hacer si queréis voy a subir un poco para que se quede centrado en pantalla artificialmente pongo unos cuantos retos de carros al dentro del blog voy a poner otra vez art y que le voy a poner art dentro del blog pondré pequeños artículos que tendrán lo siguiente primero una imagen img src he dejado una imagen en este pack llamado html5 luego he dejado una y noche por aquí mirar imágenes barra html5 logo y la avería que recargar y vaya vaya no se ha cargado correctamente mira de cometido un error no lo he hecho pero me viene bien para ilustrarnos el error en el caso es que yo he llamado a la carpeta de imágenes que no existe porque yo generalmente sólo trabajar con carpetas llamadas imágenes he intentado cargar el ángel pero claro la carpeta no era imagen la carpeta era multimedia qué pasa cuando comete un error o en el nombre la carpeta o bien el nombre del archivo pues que el archivo larga y el archivo no carga fijaos cómo aparece un símbolo de imagen rota que me dice ahí no estás cargando algo simplemente viendo el error muchos errores de los que se le hizo de los que soléis tener son justo este son nombrar indirectamente la ruta de acceso archivo a iba a qué imagen más grande este han sido grande y tose en css la utilizaremos pero de momento todavía falta unas cuantas horas despegará css por eso lo que voy a hacer va a ser sin antes poner aquí por ejemplo with es igual a 100 píxeles guardo recargo y ahí la tengo otra cosa que hacer está por aquí abajo otra cosa que voy a hacer es recordar poner alt es igual a logotipo html tengo poca atención si no ponéis la etiqueta al tributo alt en alguna etiqueta imagen lo que pasará es que no validar a la página web en el validador por cierto hablando del validador hace ya rato que no validamos nuestro sitio web no os digo que cuando lo tenéis que validar eso lo digo los dejó en vuestras manos lo que os digo es que cada poco tiempo unas cuantas líneas de código mirad lo que haré es vuelvo al archivo protago el index pulsó el botón revalidar y compruebo cuando cerró de éste héctor y corrijo mira tengo dos errores vamos a leerlos a la vez no pasa cada uno podéis tener más o menos flores dependiendo de cuántas etiquetas os hayan olvidado entonces tengáis lo que tengáis simplemente tenéis que hacer es dejar aquí abajo y leer atención porque los símbolos amarillos de admiración son warnings son partencias y menos importantes pero los símbolos rojos son errores que error tengo me dice en la línea 19 volumen 39 veis por importante que nos dé línea porque me dice dónde en qué línea está el error me dice el valor de anchura tiene una p yo lo he hecho bien pero en el estándar no es correcto si yo quiero poner 200 píxeles simplemente tengo que poner 200 si yo quiero poner simplemente tengo que poner 100 revalidó revalidó y ahora fijaos como tengo 5 warnings pero ya pasa en color verde lo que ha ocurrido por tanto es que al poner la anchura me he dejado llevar por la sintaxis de css donde en css sí que te pide la unidad y no había que poner nada pero una vez más esta gracia del validador y es tú simplemente escribe de vez en cuando no te esperes demasiado válida y ccoo por los errores mucha gente evita hacer esto porque un poco le sale mal que haya algo que le diga errores es al contrario si es por tu bien y además no hay nadie que te está minando además los que dice qué errores tienes lo que dice cómo arreglar los muchas veces por tanto de vez en cuando ya veis poco a poco ir validando vamos a hablar ahora que tenemos aquí un elemento html5 me lo voy a centrar en pantalla porque no me gusta trabajar ahí abajo y así de paso os voy a enseñar un truco y el truco va a ser el siguiente mirad hay una pimienta hay una etiqueta que se llama br la cual va de abusar pero qué quiere decir retorno o retorno de carro la herramienta de ver un territorio de hecho lo voy a poner varias veces toda junta lo que hace es forzar varios retornos de carro y añadir espacios en blanco en la parte inferior de la página así que caos que estoy poniendo varias etiquetas br para forzar los saltos y aquí al final y por tanto poder trabajar cómodamente con los elementos centrados en pantalla vale simplemente aquí y aislado al final una serie una cadena de etiquetas br bar retorno retorno de carro de vuelta artículo en ese peso lo que haré poner por ejemplo h 4 porque h 4 pues porque antes he puesto a h3 en los títulos los destacados h 4 y pongo estamos en un curso d h 5 tengo por tanto el logotipo tengo por tanto el texto el título y hará falta el texto plato de gratis el blog cuando quiero crear un texto plano es decir un texto de párrafo lo que hago es usar la etiqueta precisamente de párrafo parágrafo ningún texto debe ir sin etiqueta de título o etiqueta de párrafo así que no en éste curso estamos aprendiendo a crear páginas web usando el lenguaje html5 recargo y tengo aquí ahí lo veis para empezar el logotipo para continuar un título y para acabar el texto de párrafo o parágrafo una vez más me da igual qué la tipografía times new roman me da igual que nos guste el color me da igual que nos guste que sea negrita una negrita porque es lo que más adelante cambiaremos usando css bien para acabar o por lo menos dejar esbozada esta página principal quiero que creéis pues uno o dos más artículos del blog para que el blog tenga unos pocos artículos así que me me vengo aquí a blog me voy a arctic él y voy a crear más artículos con el mismo esquema ing src al logo de php y me he dejado a la 1 según las imágenes ha bajado me he dejado por aquí un logotipo de php y digo multimedia y la imagen de ph para no fallar 18 es como habéis visto cojo todo lo copio y ahora vengo al código y lo pego ya estoy seguro que no me equivoco al poner el archivo a continuación un eje 4 a la digamos entre dos meses empieza el curso de php y a continuación con etiqueta del párrafo o parágrafo este curso de aspe ml 5 se complementa con la segunda parte donde aprendemos a programar en html5 y a usar bases de datos en mysql tengo ya por tanto dos artículos del blog el logotipo de php es demasiado grande pero ya sabéis que le puedo poner ejemplo un week de 100 píxeles para limitarlo y por último para completar la página principal tengo el fútbol pero el pie de página donde lo voy a poner un pequeño título 86 porque cree pues por ejemplo copyright 2014 josé vicente carratalá algo para que la página principal nos quede un poquito redonda nos quede una página que tenga todo lo que hemos aprendido hasta el momento y todo lo que hemos aprendido a estar junto ha sido a crear la estructura de la web que aunque parezca muy poco estética habréis delante que es correcta y es correcta para poder extender la evidente css vemos que una lista en orden la hemos creado un medio hemos aprendido a insertar imágenes hemos aprendido a desertar multimedia y hemos aprendido también a crear pues banners artículos imágenes y títulos continuaremos por tanto aprendiendo nuevos elementos de html a continuación a continuación vamos a hablar de dos pulsos más en html como son las tablas y son los formularios vamos a empezar con las tablas que es un recurso bastante controvertido en html básicamente estos ya sabéis usarlas al menos en procesadores de texto como word donde cuando quiere es crear una tabla tabla e insertar nueva tabla de tantas filas por tantas columnas la filosofía más o menos en html es la misma digo que es un elemento controvertido porque durante muchos años la manera de atención maquetar la manera de visitar páginas web usando tablas y esa manera de enseñar ya no la vamos a usar para la meta de maquetar tablas es trabajar con css pero sin embargo eso quiere decir que las tablas están desterradas del lenguaje html más bien al contrario vamos a trabajar con tablas aquello que realmente valga la pena trabajar con tablas habéis sido alguna vez algún aeropuerto ya habéis visto el panel de llegadas y salidas de los aviones esa información está marcada con columnas con tablas que es básicamente como el panel del metro del próximo metro cuando llega pero en grande es decir hay cosas que realmente merece la pena que está con filas y columnas no una web entera pero la información dentro de web así que esto es lo que vamos a hacer ahora me voy a ir a la página de cursos dentro de cursos ya lo que hacer es poner una tabla que diga nombre del próximo curso cuando empieza donde empieza cuántas horas son vale este tipo de información es el tipo de información que haríamos con tablas pero qué pasa si pincho en cursos pues que me voy a una página vacía de yo soy la página de cursos así otros que veis que yo ahora desde cero me voy a cursos html y me voy pone a escribir todo el contenido otra vez desde cero no porque yo soy vago y siempre que pueda lo voy a hacer es reutilizar nos puede hacer es copiar y pegar lo anterior la página de casos no estáis de acuerdo conmigo en que es igual el título será igual el menú será igual incluso la cabecera el título subtítulo y menú de navegación sean exactamente igual incluso el pie de página será igual que es lo único que cambiará la parte principal de la página web así que como ya os digo que soy vago y no me gusta hacer dos que es lo mismo mirad me voy a ir a index html lo voy a seleccionar todo puedo seleccionar todo bueno puedo ir por ejemplo al menú editar y puedo usar a seleccionar todo o puedo usar la tecla rápida que es control una vez que lo he seleccionado todo me voy a evitar a copiar yo lo he copiado todo me voy a cursos y le digo editar pegar pero lo mismo usando los atajos de teclado control c para copiar control para pegar si ahora guardo control ese y recargo en la página de cursos es que la página ya no está vacía sino que ahora mismo la página de cursos es un duplicado es un clon de la página principal bien es un duplicado pero ahora miran con mucho cuidado me cojo etiqueta en la etiqueta también es la etiqueta principal donde está el contenido principal de la página web y borró desde lo que hay justo a continuación de media hasta el final atención mira por un justo de spies de jane hasta justo antes del cierre y borró todo lo que hay en el medio y seguro que no he borrado ni la etiqueta de apertura de maine en la de cierre de mes y ahora si queréis un poco para hacer la gracia pongo yo soy la página de cursos así que ahora recargo y fijaos como yo soy la página de cursos pero es respetado tanto la cabecera de la página como el que página es más ahora puedo si pincho en inicio ir a la página inicial y si pinto cursos voy a la página cursos a oscar está como poco a poco vamos consiguiendo tener la navegación completa a través de las páginas de este sitio estoy por tanto dentro de la página 2 y dentro de esta página de cursos yo lo que quiero hacer es una tablita que me permite especificar qué curso os voy a dar próximamente mirad antes de hablar permite hablar de comentarios que son los comentarios los comentarios son un elemento un poco especial dentro del lenguaje de programación o dentro de cada lenguaje de marca porque no son técnicamente una parte del lenguaje sino que nos permiten poner en comento comentarios en formato humano para un ser humano en http lee los comentarios se ponen un poco diferentes de cualquier otro lenguaje de información a marcado que podáis conocer se ponen de la siguiente manera me toque admiración para arrancar el comentario un guión mayor que para cerrar el comentario y todo lo que pongáis a continuación voy a dibujar una tabla todo lo que pongáis a continuación se va a considerar comentario que es un comentario un comentario es una línea que no va a ser tenida en cuenta por el lenguaje de programación o por el lenguaje de marcado en lugar de eso es un comentario que te dejas para que lo leas tu mismo como ser humano más adelante o para que otro ser humano vea tu código cuando quiero que veáis cómo se ahora huir me he quitado lo de yo soy la página de cursos que veáis atención como yo recargo y tengo aquí yo su página de cursos pero en ningún momento estáis viendo el comentario porque el comentario está oculto ahora una cosa que suelo decir es que tener siempre mucho cuidado con los comentarios porque los comentarios aunque no se ven sí que se transmiten el coco esto quiere decir que si yo vengo a la página y botón derecho ver código fuente de la página veréis que sí así que tener cuidado de no poner insultos de poner contraseñas el material sept y blair el secreto más que más que un secreto realmente no es secreto se ponen de otras maneras de programación es un mensaje no visto pero tampoco es secreto porque ya habéis visto que botón derecho ver código fuente lo podéis ver bien estábamos diciendo que a continuación vamos a una tabla pero eso lo vamos a hacer en el vídeo siguiente las tablas yo diría que aumentan bastante el complejidad que hemos visto hasta ahora porque para crear una tabla la combinación de varias etiquetas antes de crear la tabla voy a crear un h 3 voy a poner listado o próximos cursos pongo h3 ahora una etiqueta de parra fotógrafo y digo a continuación indicó una lista de próximos cursos que voy a impartir y ahora voy a poner las siguientes etiquetas del pecho como voy a hacer yo incluso me voy a dibujar un espacio en el medio para que visualmente lo separé es mejor para empezar la tabla tiene una etiqueta apertura y una de cierre las tablas por defecto hace dos años que en html no se ven por defecto se ven así que os voy a recomendar que hagáis lo siguiente no voy a poner wifi es igual a 100% border está igual a 1 lo que voy a hacer es la tabla ya el 100 de toda la anchura de la pantalla del navegador mejor dicho y que tenga un borde de un píxel quedará muy feo pero así lo podréis ver y luego más adelante si queréis para estilizar lo quitamos una vez más estos dos parámetros a anchura y borde son parámetros más relacionados por prestige o la estructura así hasta que veamos estilo por lo menos podéis ver la tabla una tabla se basa en filas y columnas por tanto la siguiente etiqueta es tr tr se abre y se cierra r quiere decir table road o fila de tabla y ahora una vez que he dibujado una fila tengo que dibujar columnas que es la manera menos intuitiva que os podéis imaginar a dibujar filas y contras en código es aquí entonces las columnas se hacen con una etiqueta llamada be pd es table data de la tabla no sé a qué genio se le ocurrió esto podría haberle llamado table columna igual que la otra pero mira tv entonces voy a poner no perdonar tb no es tabla mejor para la segunda línea voy a poner th th es igual heavy en la tabla y ahora si empieza a diseñar mi tabla de curso pero sí p h a 0 th p h horas he estado por tanto una tabla que tiene una fila que tiene tres columnas una tabla que tiene un table row que tiene una fila que apreté tres columnas ph php h si ahora guardo el cargo podréis comprobar cómo aparece evidentemente primero ese 3 luego aparece el párrafo y luego aparece de momento el titular las cabeceras los títulos de las columnas de la tabla que voy a dibujar e insisto una vez más no me preguntéis porque el texto está centrado porque está negrito porque lo que sea porque el estilo por defecto de la tabla cuando lleguemos a css seremos capaces de modificar manualmente modificar a nuestra voluntad el estilo de esa tabla cada vez que tengo esto en pantalla una vez que tengo la primera fila que son los titulares de la tabla paso a la segunda fila cuidado aquí la cosa se complica cuando acaba el tr este ere que ha empezado aquí y ha acabado aquí me hago un estudio en blanco y pongo otro tr os voy a decir para simplificar aunque lo que os voy a decir no es del todo cierto no es al 100% cierto pero para simplificar diré que si la fila de arriba tenía tres columnas la de abajo debe tener tres columnas entonces ahora sí voy a poner una etiqueta llamada tv tve ahora si es table that y si arriba he puesto tres columnas abajo voy a poner tres conjuntos de haz que tu curso de html5 centro centro de formación número uno horas 35 horas si ahora guardo y recargo fijaos cómo aparece por ahí una primera fila de contenido en este caso ya lo veréis más conforme vaya escribiendo está clarísimo como este tipo de datos conviene escribirlos en formato de tabla miradme atención soy vago es como el guard de escribir una nueva fila voy a copiar la anterior la pegar dos o tres veces y simplemente la modificó curso de php en el centro de información número uno eso que sé ahora de 5 horas curso de java enterprise en el centro de formación número 2 pongamos 90 horas y así quiero que veáis como cursos wordpress por ejemplo en el centro de formación número 3 digamos 25 horas quiero que veáis como esta información es mucho más cómoda de maquetar y mucho más cómoda de presentar en una tabla cualquier información que sea susceptible de escribir en formato de líneas o en formato de columnas y dar bastantes cosas pero ellas una de las principales sería porque la anchura de las columnas no es igual mi respuesta sería que la anchura forma parte del estilo y eso se controla en css pero ciencia pero y si lo quiero tocar en html bueno pues igual que las imágenes se les puede asignar un with a las columnas también se les puede asignar por ejemplo imaginaros que tenga una tabla cuyo cuya anchura 100% le quiero dar a cada una de las columnas el 33 por ciento pues me voy aquí el pph y digo wifi es igual a 33 por ciento y ese wish 33 por ciento lo copió y lo pegó a una de las columnas técnicamente para ser exactos tenemos que poner 33.33 por ciento o algo así para que el margen de error no fuera demasiado grande otra cosa cuando en cualquier lenguaje de programación quiera disponer una décima sobre un punto no con coma pero bueno de momento me lo voy a dejar al 33% con número entero así que recargo y quiero que veáis ahí como al haber recargado las columnas de las tablas se me están poniendo el 33% ha disminuido un poco el zoom en la pantalla simplemente porque en las columnas se medía la siguiente línea vale porque todo lo que he hecho es hacer un poco de zoom para que crítica mente me quede mejor claro que en este caso podríamos decir que es un desperdicio en el espacio porque si las horas me den derecho a ocupar mucho menos que el centro para que tienen la misma importancia pues podría poner por ejemplo 40% al curso 40 por ciento al centro y 20 por ciento a las horas lo importante eso sí es que dentro de lo posible cada vez que hagáis una tabla os preocupéis de que la suma de las anchuras sea 100 vamos ahora con un elemento de html al que le tengo bastante cariño estos formularios que tengo bastante yo porque los formularios me permiten interactuar al usuario hasta ahora lo que hemos hecho para crear una web si os fijáis es una web donde yo hablo y la escucha yo escribo cosas y la gente los lee pero como la gente interactuar conmigo cómo puede la gente enviarme un mensaje cómo puede decir enviarme un comentario chas esto lo podemos hacer fundamentalmente fundamentalmente mediante los comentarios en los comentarios de los formularios que yo les tengo bastante cariño de los formularios pero la gente les tiene bastante odio vale por tanto cuando te enseñamos un formulario hay que diseñar con el mínimo número de elementos posibles para no agobiar a la gente para esto por tanto me he preparado un pre tácticas una de ellas es contacto y otra de ellas es otro curso vamos a hacer un formulario sencillo dentro de contacto y otro más extenso dentro de tu curso así que me voy por tanto a buscar la página web de contacto y cuidado porque la página web de contacto tiene otra vez el cartelito este sencillo de yo soy la página de contacto así que como ya sabéis que soy vago lo que voy a hacer es copiar editó selecciono todo edito copio todo el contenido de la página cursos punto html para contactos y le digo editar pegar y de evitar pegar he hecho explicar el contenido borro la tabla y modificó el h3 formulario de contacto la web ahora digo en 3 formulario de contacto y el texto si quieres en primer alguno mensaje puedes hacerlo usando el formulario a continuación guardo recargo me voy a contacto y dejaos como lo que he hecho en contacto una vez más es copiar y pegar esa plantilla y a continuación modificarla y llevarla a lo que yo ahora bajo del parágrafo crear un formulario el formulario la creación del formulario es ligeramente ácida alakrana está apta en cuanto a que debe existir una etiqueta llamada azul que abrace a todos los elementos del formulario que contenga a todos los elementos que va a un formulario la etiqueta forma solo en la apertura puede tener múltiples parámetros puede tener muchos parámetros pero los parámetros que me parte rescindibles después el método o bien o post o get a los explicó y otro es el axón que es quien va a procesar este formulario por ejemplo voy a llamar a un archivo que no existe llamado envía mail php y ahora os cuento qué son estos atributos hay dos maneras de enviar un formulario una vez con el método post y otras el método get siempre que podamos especialmente en html usaremos el método post el método post envía los elementos del formulario como cabeceras y por tanto aunque se pueden atrapar aunque se pueden piratear aunque se pueden hackear ya hablaremos de esto pero es una manera bastante más segura de enviar los datos que el método get el método get en lugar de enviarlos en crecerás lo que hace es enviarlos como parámetros de url eso quiere decir que más pirateables son más a tratables vale por tanto dentro de que nosotros tanto que con ser piratas informáticos pero dentro de tablets siempre que podamos usaremos el método post cuando se sale metro get en programación web y dura con php y con java es que se usan muchas veces parámetros de url hay veces conviene recatados nos evitaremos por último os diré este es el lenguaje correcto para diseñar formularios pero a procesar formularios a diferencia con el ct ml creamos un formulario a nivel gráfico a nivel de campos cjex radio dos desplegables y todo eso pero html que no es lenguaje de programación no es capaz de enviar correos html no es capaz de guardar nada en la de datos html no es capaz de generar un archivo con los contactos de un correo un lenguaje candidato para hacer eso por ejemplo sería la parte que es capaz de crear conceptos php que guardan cosas en bases de datos php de generar archivos pero php no diseñan formularios cuando no estoy diciendo que php sea mejor que html simplemente cada uno hace una cosa diferente vale por tanto de momento nos hacer es crear un horario que de momento no irá a ninguna parte pero más adelante incluso en una plantilla sencilla para que lo pongáis a funcionar sin reportes php como ese archivo php para que tome nosotros el formulario y haga más o menos lo que queráis con ellos como por ejemplo enviar un correo por tanto hoy de momento estoy entrando a un archivo envíame el punta php que no existe ni tiene por qué existir tampoco entonces dentro de forma de forma va a crear varios campos mira voy a empezar con martillos como son los siguientes input y poner name nombre de que no sirve para nada pero para más adelante es una costumbre que cada campo de un formulario tenga un nombre un mail mirad qué voy recargo y veo que aparece un cuadro y es un cuadro cualquiera es un cuadro en el que yo puedo empezar a escribir yo que estoy pidiendo en ese cuadro yo creo que la gente escriba su nombre pero donde eso estoy diciendo no puedo pretender que la gente se adivina activamente en html 4 lo que se hacía era dentro de campo link se escribía lo siguiente value de tu nombre mirada value jettou nombre recargo y poner tu nombre yo puedo podría borrar a tu nombre y escribir pero sabéis que está en la base de datos dime tu nombre juan me meto hambre jose dime tu nombre pero vamos a ver tanto la gorra alimento un hombre pues la gente no lo borraba por tanto os voy a recomendar ahora en el html5 el que en lugar de poner valían pongáis una cosa que se llama place holder place holder lo que hace otra vez exponer mi mente un hombre lo pone en gris esto es un poco lo de menos pero todo lo importante es que se preocupa de que cuando yo haga clic en este campo yo estoy por ejemplo jose vicente y fijaos como automáticamente estado dime tu nombre es más sí con jose vicente y ahora borro automáticamente vuelve a poner tu nombre esto antes me tocaba hacerlo con javascript el que cuando la gente empieza a ir ahora me de mente un hombre cuando alguien borre vuelven a poner dime tu nombre y era un rollo que no usamos javascript lo usaremos pero si tenemos algún html5 que nos ahorra ese código pues mejor que mejor vamos a temas campos para enviarle un correo me tendrás que decir tu nombre digo yo que también me tendrás que decir tu email así que imputó type de tipo text y le voy a decir neymar y kyle y place holder tú algo que no nos pasado hasta ahora es que fijaos que cuando escribo elementos en líneas diferentes aunque haya hecho un retorno de carro como no están separados por una etiqueta los elementos no se dibujan bajo sino que es producto a continuación pero antes hemos visto que tenemos una etiqueta específica para cuando queremos forzar un retorno de carro así que en este caso después de cada campo input quiero forzar un retorno de carro para asegurarme que los siguientes que hay bajo y no caen al lado fijémonos que pongo una etiqueta de r uy qué curioso debido al estilo por defecto micron para dibujar por el área un campo a pacheco realmente pegado a otro esto es algo que arreglaría más adelante trabajando con css pero el caso es que ahora no tengo ese s por eso un pequeño truco sucio si queréis pero eficaz al fin y al cabo es poner dos veces en lugar de entorno de carro pongo 2 bien un par de campos más para este primer formulario que estamos diseñando van a ser un campo un poco especial llamado text área text área este se abre y se cierra espirado name mensaje pero el cuidado porque así como el input se abre pero no se cierra el texto área se abre y se cierra y simplemente escribe text área ni mensaje se cierra y ya está lo que nos permite este un campo como éste no admite place holder pues os lo he puesto donde la gente me puede escribir texto multilínea escribir un mensaje más completo y por último para este ejercicio para esta página de contacto voy a poner un input type submit el input de tipo submit que quiere decir enviar este tipo de input pesic evidentemente para enviar un formulario si queréis ya que estamos no me cuesta mucho enseñaros otro troll del formulario llamado gris set es muy parecido a la p submit la ricet hacen lo siguiente atención yo escribo un formulario y si quiero enviar la información simplemente al botón enviar no os preocupéis me dice no se ha encontrado esta página web porque ya os johann que envía mail punto php realmente no existe el segundo botón el de restablecer me sirve para siguió rellenando un formulario y no me gusta lo que ha escrito y quiero volver a empezar quiero borrar los campos le doy el botón restablecer y los borra no tenéis que programar nada vosotros al mente sino que todo esto ya está pre programado dentro de html5 vemos por tanto que estos sencillos campos completamos nuestro primer formulario en html un formulario sencillo para una página de contacto un formulario de contacto pero de una página personal o empresarial a continuación vamos a esto que hemos hecho y extenderlo a ella como más completos y más complejos al texto área se le puede dar anchura y altura pero el texto área es un poco especial porque la anchura de la altura en html no se da con píxeles sino que será con caracteres de filas y caracteres de columna escribe la siguiente alta yo le pongo por ejemplo calls es igual a 10 lo cual equivale en ira a que le he dado 10 caracteres 1 2 3 4 5 6 7 8 9 y 10 y 1 más parece 11 si yo pongo 20 como era el doble de ancho si le pongo 40 es cuatro veces tanto calls son columnas y hay otro parámetro que es rose qué es el número de filas por ejemplo 10 y ahora de alto date cuenta cómo está acá 10 líneas 10 caracteres de alto por tanto en el que no se dice ya lo podemos utilizar con píxeles pero en html los campos de text área se especifican en el número de caracteres de columna y de fila que van a contener dentro vamos a trabajar con un fútbol ario algo más complejo y para eso me he dejado esta página llamada y de propuso preparada para ello así que una vez más como soy vago me voy a ir a contacto punto html voy a crear todo el código que existe dentro de contacto y lo voy a pegar dentro de epi de tu curso y de esa manera simplemente lo que voy a hacer es formulario modificar para pedir un curso nuevo formulario de contacto pues pide tu curso delante este formulario puedes hacerme llegar peticiones para próximos cursos voy a quitar el formulario anterior si queréis es cierto otro formulario pero dejadme que empieza desde cero y así volvéis a ver la estructura de un formulario desde cero pide tu curso y otra vez voy a crear una recta forma de apertura una etiqueta forma de cierre es decir que el action es de curso php y que el mejor siempre que podáis es post ahora voy a decir una serie de cosas a introducir me sentã de campos en primer lugar uno que conocíamos input type text mi nombre place holder dime tu nombre opcional como que focal todos los campos en principio son opcionales pues en html dejadme que vuelva a pesar contacto miradme en html hay una nueva cosa que es que el campo sea requerido en la que escribe un nombre escribí mail escribo un mensaje no quieres decirme tu nombre nombra picas pero si quieres que me ponga en contacto contigo me tendrás que decir tu email con lo cual el email aquí en input se puede poner un parámetro más que es rico ayer rico ayer lo que sé es que si yo intento enviar un formulario y no he puesto un email o no he puesto un campo el que sea le voy a enviar y me dice no hasta que no complete ese campo no puede ser nada vale eso es lo que hace la palabra ayer lo que os recomiendo es que podáis cuántos campos pero es mejor pero si tenéis que poner alguno que es el gator yo así lo podéis hacer aunque también veremos qué se puede hacer directamente con javascript bien sigamos pongo un par de veces y ahora otro input type text neiman email blake holder dime tu email opcional bien un par de campos que nos pueden resultar interesantes son los siguientes si te ha gustado el email que quiere suscribir al boletín noticias función p quieres suscribirte boletín de noticias hay atención cambio radio es pregunta de respuesta única neymar boletín y pongo sí br br y ahora pongo un input abajo name boletín con la respuesta no además cada uno de estos campos de tipo por radio debería tener un value se cree lo pongo así y lo veréis mejor estos campos son de tipo radio de nombre boletín valor es igual a sí o valor es igual a no qué hace esto lo que hace es que cuando ejecuto quieres el boletín o sí o no pero damos cuenta que es la pregunta de respuesta única si marcó una es porque mata otra y viceversa un par de campos más ya para acabar los formularios o es por ejemplo el siguiente auxiliares input type voy a poner en este caso así como indica el tipo de curso prefieres respuesta múltiple entonces name curso y por ejemplo voy a poner html 5 dejadme que copié y voy a poner el php por ejemplo java enterprise web 2.0 wordpress haciendo esto cuando esto en lugar de aparecer un icono circular aparece un icono rectangular y eso quiere decir que puedo marcar varios a la vez es decir este elemento de tipo box sería una pregunta de respuesta múltiple en lugar de una pregunta de respuesta única un campo muy divertido muy divertido es novedad en html5 cuando quieres recibir el curso pues hay un campo específico en html que es in type fitch fijaos como mirad pongo imputable aparece por ahí de 13 años pero lo divertido es que si pincho esta cita aparece un suscriptor de fecha completo y bueno luego podría poner qué tipo de curso prefieres y lo podría poner con check box pero para demostraros a nivel didáctico un campo de formulario más qué tipo de lo prefieres y mirad pongo un campo especial llamado select en igual tipo de curso y el sec tiene una opción tiene una etiqueta perdón llamada opción válido es igual a cero en el momento y ahora pongo online presencia esto es valor online es valor presencial fijaos que esto lo que hace selecciona un tipo de curso es que aparece en el clásico desplegable cuenta yo pincha aquí y se despliega ya sé que hemos agrega y sobre eso pone como un check box porque alguien puede marcar los dos porque no tiene por qué elegir uno u otro pero yo que sé para demostraros cómo funciona el select y por último óptimo para no enrollar los más con campos pues pongo input type submit este ya lo hemos visto antes para el momento dado enviar el formulario me falta un par de veces es que he puesto el sol emite demasiado pronto por tanto mediante este formulario lo que hemos hecho es añadir unos cuantos unos cuantos campos de control más insisto una vez que he hecho esto para mostraros unos cuantos campos los más importantes de diseño de formularios de html hay unos cuantos campos pero no se usan o no se usan tanto como estos cuando hagáis un formulario si pensáis que el que rellena el formulario puede no estar muy interesado en rellenar formularios no hay muchos campos para evitarlas de teléfono parte de una encuesta que cuanto menos pregunten mejor pues aquí básicamente es lo mismo nos queda dentro de este proyecto configurar por una parte lo que sería la galería de diseño donde voy a hacer un portafolio y nos quedaría también poner algo de contenido dentro de la parte de programación por tanto voy a empezar con diseño punto html vemos que ahora mismo lo estoy cargando tanto dentro del navegador web como dentro del editor de hecho puedo comprobar cómo nos hemos dejado previamente yo soy la página de diseño vacía así que lo que voy a hacer una vez más es abrir una de las otras páginas que ya tengo creadas como por ejemplo index.php o previamente hemos creado pide tu curso o hemos creado cursos por ejemplo cursos voy a voy a seleccionar voy a copiar todo el contenido he pulsado primero editar seleccionar todo luego editar copiar no cortar y luego me voy a diseño eliminó el texto de se demuestra de ello soy el contenido de diseño y pego el contenido de la tabla en este caso por tanto si ahora guardo y recargo vemos que en la página de diseño tenemos la tabla que hicimos anteriormente con los cursos pero recordamos que yo no quiero la tabla de lo que quiero aquí dentro de la página de diseño es maquetar una pequeña galería fotográfica poner contenido dentro de esta página de diseño voy a guardar voy a recargar va a ser realmente sencillo técnicamente no estamos haciendo esto para aprender prácticamente nada nuevo sino por una parte para poner en práctica lo que ya sabemos y por otra parte para prepararlo para futuras partes de maquetación en css así que en esta parte voy a poner en lugar de próximos cursos voy a cambiar el título h3 por galería de proyectos llamado portafolio llamado lo que quieras te digo a continuación el nuestro una en galería a folio de proyectos realizados guardamos recargamos hemos cambiado el título h3 hemos acotó a continuación te muestro una galería hemos cambiado tanto el h3 como el parágrafo he eliminado cualquier rastro del elemento anterior que hubiera anteriormente recordáis había una tabla con los cursos y ahora lo que voy a hacer sencillamente va a ser algo tan simple como poner una serie de imágenes tengo por tanto dentro de la galería de multimedia unas cuantas imágenes que me he bajado con proyectos por tanto voy a copiar su nombre y lo voy a pegar aquí imágenes barra el nombre de la imagen y no olvidemos cómo es muy importante poner un texto alternativo así que en cada una de las imágenes vamos a poner un texto alternativo con una pequeña descripción de la imagen vemos como no era imágenes era multimedia tenemos tener en cuenta debemos tener cuidado de que el nombre de la ruta sea exactamente el mismo que el que tenemos en la realidad si ya tenemos esto el resto va a ser realmente sencillo porque lo único que quiero es que repitamos este paso tantas veces como imágenes tengamos en la carpeta me voy a sacar en este caso la carpeta me la voy a poner a la derecha y voy a copiar esta etiqueta img me estoy dejando artificialmente dos espacios de separación para que simplemente veáis que cada una de estas líneas es una entrada del portafolio sencillamente lo que hago es sustituir el nombre de cada uno de los elementos de la carpeta el nombre de cada una de las imágenes de la carpeta en cada una de las líneas de html a partir de aquí me da igual cuántos elementos tengáis en el portafolio lo que os diría es que para luego ver cómo maquetar los pues no tengáis ni menos de dos ni más de veinte por ejemplo para no extender demasiado el portafolio fijaos cómo he puesto por tanto verá unas cuantas imágenes una debajo de la otra y ahora luego lo que haré es por tanto maquetar estas imágenes con css para que queden bien alineadas bien presentadas como un portafolio por columnas incluso fijaos lo que he hecho tengo seis imágenes bueno pues lo que he hecho simplemente duplicar esas líneas tengo de la 1 a la 6 pues luego he copiado y pegado otra vez para tener 12 imágenes así que tenemos 12 imágenes por aquí 11 y 12 y con estas 12 imágenes tenemos ya para trabajar un mínimo portafolio en la pantalla lo que voy a hacer en este caso va a ser actualizar un poco la estructura de la web para eso voy a explicar una complicación que nos pueden salir muchas veces con html yo por ejemplo tengo una página llamada programación si me voy a la estructura de mi proyecto comprobaré como efectivamente se llama programación pero curiosamente yo le quiero cambiar el nombre y quiero que se llame sobre mí tengo un problema la cambio y sobre mí quizás edito el documento index.html y evidentemente actualizo ya no existe la página programación html ahora se llama sobre mi html por tanto tengo que actualizar aquí llamar a la página sobre mi punto html y aquí cambiar la leyenda de programación y sobre mí pero como os decía hay un problema mirad yo voy a inicio y el inicio veo perfectamente que pone sobre mí pero si voy por ejemplo a cursos veo que pone programación si pone en diseño veo que pone programación solo cuando voy al inicio veo que pone sobre mí qué quiere decir esto pues esto lo que quiere decir es que una de las desventajas porque html no es perfecto aunque esto se puede arreglar con lenguajes de programación en el servidor con otros lenguajes que apoyan html pero si realizó un cambio y realizar cambios en la estructura de un proyecto es relativamente normal durante el diseño de una página web pues voy a tener que propagar esos cambios de momento de manera manual completamente a lo largo de las páginas eso quiere decir por tanto que si he modificado la página index.html lo que debo hacer ahora es cargar el resto de páginas voy a cargar contacto voy a cargar cursos ya la tenía cuidado con diseño porque el diseño sí que existe voy a cargar pide tu curso y voy a cargar sobre mí voy a cargar por tanto todas las páginas y voy a modificar todos los menús de navegación así que copio el de index html y lo voy pegando dentro del resto de menos me voy al curso voy pegando me voy a contacto voy pegando el nuevo menú me voy a pide tu curso voy pegando y en definitiva la actualización que he hecho la aplico sobre el resto de menús del resto de páginas del sitio web ahora lo que estoy haciendo es editar la página sobre mi punto html para editar la página de sobre mí una vez más al igual que he hecho en el resto de páginas anteriores voy a copiar el contenido de cualquier otra página por ejemplo estoy copiando el contenido de contacto punto html selecciono todo lo copio y a continuación voy a sobre mí y pego y lo único que tengo que hacer ahora una vez más es borrar el contenido específico he borrado el formulario y ahora digo sobre mí y ahora digo en esta página te cuento cosas sobre mí o te doy información sobre mí si ahora guardo y recargo ahora sí podré comprobar como en todas las páginas existe la sección sobre mí pero sí existe insisto no es porque se ha hecho automáticamente sino porque los cambios que hagamos tenemos que en primer lugar y reflejarlos desde la carpeta al código esto quiere decir que si cambiamos el nombre de un archivo o añadimos un nuevo archivo tenemos que actualizar los cambios dentro del código dentro de la lista que representa nuestro menú y luego además debemos propagar esos cambios al resto de archivos dentro del proyecto vamos ahora por tanto y vamos a verlo bien vamos ahora por tanto como os decía vamos a poner un poco de texto para poner un poco de imagen en este sobre me voy a poner tres artículos para ello estoy usando la etiqueta que he usado anteriormente llamada artículo así que dentro de arctic el lo que voy a hacer simplemente va a ser poner un poco de texto y un poco de imagen estoy recordando estoy recordando que en la página inicial otra cosa que nos falta es la etiqueta a zaira así que voy a poner contenido en sobre mí y luego acabo de poner contenido en la etiqueta asael así que mira me voy a artículo y dentro del artículo voy a poner en primer lugar una imagen y esa imagen va a ser entrar dentro de multimedia y seleccionar esta imagen la típica imagen de fotografía de mi fotografía de la empresa multimedia barra y el nombre texto alternativo igual mi nombre a continuación voy a poner algo de texto como no sé todavía qué texto poner lo que voy a hacer es poner título de la sección 1 y ahora mucha atención a la pantalla lo que quiero poner es algo de contenido de prueba un bloque de texto generalmente lo que suele hacer mucha gente creo que le muestro con anterioridad es buscarse un trozo de código un trozo de texto perdón plano de copiar y pegar y ya está yo como mucha otra gente solemos entrar en lips un puntocom y dentro del lip xoom.com solemos copiar el típico texto lorem ipsum que se pone de prueba en maquetación gráfica texto que parece latín las palabras de hecho están escritas en latín no quiere decir realmente nada tangible vale por tanto simplemente es un texto para rellenar es un texto para poner hasta que sepamos qué es lo que realmente queremos poner en esa página así que fijaos tengo una primera sección que tiene una imagen tiene un título y tiene un texto de prueba voy a copiar y pegar este artículo dos veces más en mi caso y simplemente en este caso voy a poner los logotipos de html5 y php que los tengo dentro de esa carpeta y los voy a pegar así que esto es título de la sección 2 esto es título de la sección 3 ahora si nos fijamos veremos como no me importa en este caso el tamaño de las imágenes tengo imagen título texto imagen título texto imagen título texto suficiente como para luego entrar dentro de esta página y maquetar fijaos que en cuanto a la estructura tengo una etiqueta arctic el y dentro de la etiqueta arctic el encuentro una imagen un título un texto dentro de la etiqueta arctic el encuentro una imagen un título un texto y dentro de la etiqueta arctic el encuentro una imagen un título y un texto es importante o es interesante al menos que tengan la misma estructura para luego poder maquetar los correctamente me deje dentro de la página de index html una etiqueta estructural no nueva en html 5 llamado llamada as air a said sirve para poner el contenido tangencial y que es contenido tangencial pues contenido tangencial es aquel que tiene que ver con el contenido que tenemos en nuestra página web pero no está relacionado directamente por ejemplo en este caso la etiqueta site no sólo se usa para esto que os voy a decir pero es un ejemplo dentro de la etiqueta side voy a poner los típicos enlaces a nuestras redes sociales por tanto voy a hacer lo siguiente y de paso os voy a enseñar un truco pongo a hr y ya sabéis que es una etiqueta de enlace hiperenlace a otra parte de momento no va a llevar a ninguna otra parte a ras cuento por qué y mira voy a poner lo siguiente en lugar de poner facebook que sí que vale que podría poner facebook fijaos ahí como pone en facebook y lo pone como enlazado en lugar de eso voy a poner una imagen pero eso quiere decir que me tendría que bajar el logotipo de facebook bueno podría hacerlo de hecho pero un truco que os voy a enseñar es el siguiente si ponéis www o mejor dicho http dos puntos barra barra www.facebook.com barra favicon punto y coma ya hablaremos de esto de que es el favicon punto y co lo que nos sale mirad es el logotipo de facebook aparece pequeñito pero allí está el favicon punto y co es una un icono es una imagen de icono para luego ponerla aquí arriba dentro de esa imagen de icono le puedo poner tantos fabricantes como quieran voy a poner por ejemplo el favicon de twitter twitter voy a poner el favicon de youtube voy a poner el favicon de linkedin y en definitiva cada uno de vosotros tiene que poner tantos favicon como redes sociales penséis estímase conveniente poner en vuestra web así que es facebook.com javi con punto y coma twitter.com fabri con punto y coma youtube.com javi con punto y coma y no todas las páginas del mundo tienen el favicon en la misma posición pero fijaos que la mayoría así en este caso la única que me está fallando es twitter vamos a ver si quizás sea allí parece que quería cargar parece que le está costando un poco de cargar bien en este caso lo que estoy haciendo es una técnica llamada hotline care lo que estoy haciendo es referenciar llamar a una imagen que no está haya aparecido el logotipo que no está realmente dentro de mi web qué pasa si un día por ejemplo facebook cambia el logotipo se cambia el logotipo y lo pone en la misma posición lo bueno es que mi página se actualizará automáticamente con el nuevo logotipo de twitter o de facebook o de quien sea la mala noticia es que si un día facebook decide que esa imagen en lugar de llamarse favicon punto y ccoo pase a llamarse favicon 2 punto y co pues desaparecerá desaparecerá porque ya no la está vinculando correctamente bueno otra alternativa evidentemente mirad uno digo evidentemente pero esta vez es no es tan evidente es nos vamos a google y en google imágenes porque google imágenes a veces es una fuente de información pongo social media’ icons entonces si en google ponéis socialmedia icons encontrareis que hay colecciones y colecciones y colecciones de botones de redes sociales preparados para descargar evidentemente abrir en un programa como photoshop para recortar y pegar no lo vamos a hacer de momento pero simplemente deciros que si no queréis más los logos oficiales y que los haremos personalizados y no queréis gastar demasiado tiempo diseñando los nosotros pues simplemente componer socialmedia icons tenéis ya en google imágenes un montón de ellos para descargar y para usar yo ahora mismo me he preocupado únicamente de poner los logotipos pero esto donde me lleva pues la respuesta es que ahora mismo no me lleva a ninguna parte y por qué digo que no me lleva a ninguna parte pues porque el h ref de las etiquetas a ahora mismo está vacío lo que tendremos que hacer por tanto es entrar a nuestras redes sociales para ver la dirección por ejemplo que os quiero decir con esto mi web mi página de perdón mi perfil de facebook en facebook.com barra carratalá porque me lo pide pronto entonces simplemente atención lo que hago es copiar y pegar en el hr y ya está medido a facebook he visto cuál es la url de mi perfil o de mi página copio la url y me la pego dentro de la red del código voy a hacerlo otra vez con twitter entro en twitter en twitter aunque le tengo cariño ahora mismo no me acuerdo de memoria de mi página pero no voy a abrir así que me voy a mi página de inicio bien y mi url de twitter es https dos puntos barra twitter.com jv carratalá pues me copió esa dirección me voy a twitter me voy a la etiqueta a que hace referencia a twitter y pego el enlace para que mirar para que cuando por ejemplo aquí en facebook me vaya a mi perfil de facebook o cuando en twitter me vaya a mi perfil de twitter ahora que estamos hablando de los botones de redes sociales hay una cosa que a la gente le suele interesar mirar y es que cuando por ejemplo yo pincha en el botón de facebook se me abra la ventana de facebook pero no se me abra en lugar de la que ya tenía porque pierdo mi blog sino que se me abra en una nueva pestaña o lo que antes se conocía cuando no habían pestañas en los navegadores como en una nueva ventana esto se hace atención a la pantalla poniendo un pequeño parámetro más target igual comillas comillas estoy por ahí arriba estoy en target a blanco atención que he puesto target y wal comillas comillas blank y he puesto un guión bajo antes de la palabra blanca lo vuelva a repetir me voy a la línea de twitter me hago un poco de espacio y pongo target es igual a comillas comillas black no blanco con nk target es igual a comillas comillas blank target es igual a comillas comillas blank esto que va a hacer por supuesto ahora recargo la página y al recargar la página comprobaréis como se pinchó en el botón de facebook tenía que recargar parece déjame ver sí bueno tengo que ver qué ha pasado ahí con el target blank porque parece que no lo ha pillado bien el error consistido en lo siguiente la propiedad de target blank es una propiedad del hipervínculo pero yo fíjate que he empezado a leer por aquí pero no me ha dado cuenta que he acabado el ad y me he metido en img por tanto le he puesto la propiedad a la etiqueta img y esa propiedad en la etiqueta img no hace nada de nada por tanto lo voy a quitar lo voy a cortar de img lo voy a pegar dentro de la etiqueta y ahora así sí vereis como si ahora guardo recargo para actualizar los cambios y mirad pincho en el botón de facebook comprobaréis como ahora se abre una nueva pestaña en lugar de quitarse el contenido de la pestaña anterior esto me permite en un momento dado visitar mis redes sociales sin tener que renunciar a la pestaña en la cual estaba navegando por la web por el blog o por lo que sea que estéis construyendo para cerrar esta primera parte de html dejadme a hablar una cosa que no me obsesiona particularmente es una cosa llamada meta etiquetas las meta de etiquetas se ponen dentro no de la cabecera sino de la cabeza acordémonos que al principio pusimos una etiqueta meta obligatoria para la codificación de caracteres efe 8 las metas etiquetas no son etiquetas son etiquetas que hablan de las etiquetas igual que el metalenguaje es lenguaje que habla del lenguaje las metas etiquetas son etiquetas que hablan de otras etiquetas entonces en este caso las meta de etiquetas nos permiten poner cosas como por ejemplo voy a poner tres clásicas hay un montón de media etiquetas pero voy a poner las tres más clásicas voy a poner la descripción voy a poner el autor y voy a poner las keywords mirad ahora estoy copiando de aquí no estoy copiando de la página dw 3 schools de hecho me voy a copiar las tres en bloque fijaos que ya estaba el metal char set y voy a copiar estas tres las podéis copiar de windows de 3 schools simplemente poniendo metatags o bien las podéis copiar de la página que acabo de pegar la fórmula es la siguiente meta para decir que esto es una meta de etiqueta se abre pero no se cierra no tiene etiqueta del cierre name para decir qué tipo de etiqueta es description yo siempre suelo decir que se hago está en inglés es que no se toca es que tiene que ser así no puedo poner descripción en castellano y ahora content es igual a josé vicente carro tala es un profesor programador y formador ubicado en valencia españa es decir la descripción es simplemente una pequeña frase quizás un párrafo quizás dos o tres frases seguidas nunca un texto más largo de un párrafo que describe con palabras llanas cuál es el contenido de tu web a continuación hay otra etiqueta llamada keywords que son las palabras claves por ejemplo carratalá como html5 php coma java enterprise coma valencia son una serie son un bloque de palabras clave separadas por comas a día de hoy las técnicas de posicionamiento limpias de posicionamiento natural dicen lo siguiente os digo algo que tiene validez a día de hoy puede tener dejar de poder dejar de tener validez en un futuro no vale la pena poner más de 10 etiquetas de keywords por una razón muy sencilla lo que va a hacer un buscador en este caso en principio parece que es lo que hace google es darle atención el 100% de importancia a la primera etiqueta que pongas el 50 por ciento de importancia a la segunda palabra que pongas el 25 por ciento de importancia a la tercera palabra que pongas el 12,5 por ciento a la siguiente palabra que pongas el 6 por ciento de importancia a la siguiente palabra que pongas quiere decir esto que a partir de la octava palabra no importa prácticamente apenas las palabras que pongas puedes poner palabras pero a google le va a dar igual qué es esta etiqueta realmente de keywords bueno esta etiqueta se considera un poco un reflejo de cómo se indexada hace años en la web hace años los buscadores si queréis diego google por decir el más actual y el mar el que tiene más cuota actualmente hace años los buscadores los motores de búsqueda no tenían potencia suficiente no tenían servidores suficientes como para indexar todo el código de tu página para leerse el código de tu página y procesarlo todo lo que hacían por tanto era buscar la etiqueta de keywords y confiar de buena fe en que las palabras clave que hubieras puesto realmente coincidirán con el contenido que habías puesto abajo diego de buena fe porque a veces no se cumplía la cuestión es que a día de hoy google o cualquier buscador ya tiene potencia suficiente y de sobra como para leer toda tu página web en el momento en que google ya puede leer toda tu página web deja de tener tanta importancia por eso no me obsesionan las keywords porque esto si se lo va a leer pero también se va a leer toda tu página web y para google te puedes imaginar que va a tener más importancia lo que realmente ponga en el body que lo que tú digas que va a tener vale el cuerpo una cosa que os digo es bueno tampoco nos cuesta nada poner esta etiqueta con lo cual ponerlo no me obsesiona pero bueno la pongo y hacer eso sí aseguraros eso sí que el contenido las metas etiquetas que pongáis en esa etiqueta perdón las palabras clave que pongáis en esa etiqueta realmente coinciden con lo que tengáis aquí abajo porque si no a google dirá porque en un sitio me dices una cosa y en otro sitio me dices otra lo que hará es desconfiar si son sinónimos puede ser que valide pero tenéis que tener en cuenta una cosa y es que cada vez efectivamente cada vez google es un ordenador más inteligente cada vez google cada vez piensa más como un ser humano pero a día de hoy no es un ser humano yo te diría que si por ejemplo me habláis de sinónimos de palabras inglesas porque al final hay que tener en cuenta que well es un motor de búsqueda norteamericano probablemente no habrá problemas pero sí vale nosotros me diréis bueno el español es un lenguaje muy importante es el segundo o el tercer lenguaje a nivel mundial por número de hablantes de promedio d de personas que lo usan es nuestra opinión como hispanoparlantes google puede tener otra opinión diferente por ejemplo sin ir más lejos para que os hagáis la idea en él en el texto por voz google tiene una aplicación que es texto por voz que tú hablas y te lo va convirtiendo a texto pues en el conversor de voz a texto de google en el inglés tú dices punto y coma y te ponía el punto de la coma le pone el punto de la coma en castellano hasta hace muy poco no te lo ponía ahora sí que le pone luego porque lo uso bastante pero hasta hace poco pues no consideraba o no se habían parado a programar que en castellano y fíjate que es el segundo tercer lenguaje mundial pues no lo hacía por tanto con los sinónimos puede ocurrir lo mismo que digan si el español es muy importante pero en nuestra lista de prioridades pues no hemos llegado todavía a ese punto no pasa nada es peligroso porque hay google diría porque me pones toda la página en castellano y las palabras clave en inglés en definitiva sería una concordancia entre las palabras una falta de concordancia entre el idioma y por tanto el google siempre que hay una falta de concordancia no le va a gustar por último por último voy a editar la etiqueta de autor donde en este caso pondría el nombre del autor de la página y fijaos una cosa estas etiquetas atención una vez más las haya copiado perdón a su copiado todavía las he puesto en index.html pero no están todavía en el resto de páginas web en mi sitio web no están en diseño no están en cursos no están en contacto no están en pide tu curso no están en sobre mí lo que tendría que hacer ahora es simplemente ir pegando estas etiquetas en el resto de páginas de mi sitio web no voy a discutir en este caso porque no es el momento de si debemos poner exactamente las mismas etiquetas las mismas palabras las mismas claves dentro de cada página de un sitio web o si debemos personalizar y adaptar las etiquetas para cada página del sitio web y digo que no es el momento porque eso es más una cuestión de seo de posicionamiento en buscadores que de programación html realmente y para resumirlo y para adelantarlo un poco os diré que las dos estrategias son válidas pero tienen efectos diferentes si todas las páginas les ponen exactamente las mismas etiquetas lo que hacen es que todas en conjunto empujan para posicionar unas ciertas etiquetas concretas pero si alguien te busca por ejemplo por cursos no te van a encontrar porque no tengo una etiqueta personalizada para la página de cursos creo palabras clave personalizadas para cada una de las páginas cada una de las páginas index hará más especializada mente cada una de las páginas indexadas solo por el contenido concreto que tiene con lo cual será más fácil que la gente llegue a encontrar esa página concreta en google pero una página hace menos fuerza que seis páginas a la vez con lo cual por eso digo que son dos estrategias si pones etiquetas específicas para cada página tienes que hacer más esfuerzo para que cada página se posicione si ponen las mismas etiquetas en todas las páginas hay que hacer menos esfuerzo pero posiciones el sitio web no una página concreta del sitio web así que cada estrategia tiene sentido según el tipo de página o según el sitio de otros según el tipo de sitio web que quieras posicionar vamos a empezar en una parte donde hablaremos de css css es el lenguaje hermano de html que sirve para estilizar hemos visto hasta ahora como hemos puesto el contenido de nuestras páginas en html las páginas han resultado estéticamente un poco horribles aunque el contenido y el marcaje que hemos hecho hasta ahora es perfecto es correcto css es un lenguaje que funciona sobre html que sirve para estilizar el contenido que hemos escrito en html cuando digo estilizar me estoy refiriendo a proporcionarle valores estéticos hablaremos de color hablaremos de anchuras de bordes de tamaños de todo este tipo de elementos en definitiva darle atributos visuales a la maquetación cruda que hemos hecho hasta ahora css es un lenguaje de estilizado que nos sirve para trabajar hablando en palabras llanas el diseño de la web aunque se puede hacer prácticamente lo que quieras con css no se va a hacer de la misma manera con el mismo tipo de interfaz que trabajamos programas de diseño gráfico como por ejemplo photoshop e illustrator en photoshop e illustrator tenemos una hoja en blanco y con el ratón podemos ir moviendo elementos podemos ir escalando elementos podemos cambiar los atributos visuales de una página sin tocar nada de parámetros nada de código prácticamente con css podemos hacer eso mismo pero desde el punto de vista del código quiero decir con esto que cuando yo muevo algo con el ratón en photoshop también puedo moverlo con css pero en css se mueve con parámetros y trabajar directamente con css no es la única manera de diseñar una página web es la que vamos a hacer en este caso porque nuestro objetivo ahora mismo es aprender css puro y duro’ muchas veces lo que se hace es empezar un diseño en photoshop crear el diseño en photoshop o crearlo en illustrator sacarte por ejemplo un png y a partir de ahí duplicar ese diseño ir volcando ese diseño poco a poco del gráfico acss eso lo que hace lo que te permite es que cuando empiezas a escribir css tienes una idea muy clara y una guía visual de qué es lo que quieres conseguir además de esto también hay programas con los que trabajas de una manera visual como por ejemplo el photoshop e illustrator y te permiten convertir el contenido visual que ha desarrollado en html no me fío demasiado porque tienden a meter código basura porque tienden a que el código que sacan no está demasiado limpio ahora puede ser una buena alternativa por supuesto se puede copiar y pegar el código y modificarlo para tus propios fines no es ya sólo que las últimas versiones de illustrator te permiten hacerlo es que photoshop desde hace un montón de años te permite dividir por sectores y luego guardar eso como html te lo convierte en tablas también es cierto pero es una buena manera de empezar yo de hecho voy a confesar que empecé así y luego ya poco a poco le fui derivando hacia programación pura y dura en definitiva lo que os voy a enseñar no es la única manera de trabajar con css pero es la manera que se considera digamos pura la manera que se considera trabajar con css a palo seko más adelante probablemente veremos cómo trabajar de otras maneras os voy a decir en primer lugar que hay tres maneras de incluir css en un archivo la primera manera se llama css en línea no es deseable de hecho penaliza para el posicionamiento consiste en que yo por ejemplo me voy a esta etiqueta a h1 me hago un poco de sitio dentro de la etiqueta h1 y le pongo un parámetro que en principio es html un atributo html pero que realmente se llama style es un estilo css y por ejemplo para hacer algo sencillo antes de empezar os a explicar cosas de css digo color dos puntos red no hace falta ni que lo copies porque todavía no os he explicado la sintaxis de css simplemente lo que quiero es que entendáis el ejemplo entonces si digo h 1 style es igual a color red es evidente que uno cuidado que estoy en cursos que cuando entré dentro de cursos en h uno va a estar de color rojo solo el h1 se llama un estilo en línea porque fijaos que lo he escrito en la línea particular en la que creo que afecte el estilo css en línea existe pero no se recomienda solo se recomienda para emergencias por tanto en este caso os lo acabo de enseñar pero lo voy a borrar no quiero estilo en línea me voy a ir a la página index.html y os voy a enseñar el segundo tipo de estilo que es el estilo con el que vamos a empezar trabajando que es el estilo interno el estilo interno consiste en que nos vamos dentro de la etiqueta head no dentro deje ver si no dentro de la etiqueta head y pongo una etiqueta de apertura style y una etiqueta de cierre style y ahora digo todo lo que escriba aquí dentro es css creo por tanto una etiqueta de apertura style una etiqueta del cierre style y todo lo que escriba ahí dentro lo haré con la sintaxis de css este es el segundo método de incluir css en un sitio web que consiste en almacenarlo todo en la cabecera didácticamente es el más bueno aunque a un nivel real no es el más práctico a un nivel real usaremos más adelante el tercer método de incluir css que es derivar lo a un archivo externo un archivo que sólo tendrá código css y un archivo que será compartido entre diferentes páginas web entre diferentes páginas html esa es la idea realmente del css las letras css vienen de cascading stylesheets hojas de estilo en cascada la idea de en cascada es que tú haces una hoja de estilo y luego va cayendo en cascada sobre el resto de hojas html de forma que haces un cambio y se aplica automáticamente sobre el resto de hojas html por tanto insiste una vez más en que vamos a empezar trabajando con css interno pero más adelante cambiaremos a css externo que es la tercera manera de trabajar con css dentro de la etiqueta estilo voy a escribir de la siguiente manera atención muy importante lo que voy a escribir el pseudo código no es código de verdad es un código de muestra en primer lugar escribiré un selector un selector es una pequeña línea una pequeña frase que me sirve para seleccionar qué parte quiero maquetar una vez que hemos descrito un selector de hecho me voy a volver a la página de inicio una vez que hemos escrito un selector pondré llave que se abre y llave que se cierra ojo no confundáis las llaves con los corchetes vale son llaves si me permitís voy a poner la tipografía más grande porque en este caso vamos a escribir poco código de momento las llaves están pulsando el botón al xerez que está a la derecha de la barra y luego dos o tres teclas más arriba tenéis aquí las llaves insisto no confundir con corcho y terminar estos son corchetes y esto que escrito en la pantalla son llaves a continuación todo lo que voy a hacer se va a escribir en atributo dos puntos valor punto y coma atributo dos puntos valor punto y coma atributo dos puntos valor punto y coma se tiene que escribir así css es un lenguaje de marcado permisivo como html no tan estricto como javascript o php pero aún así es un poco menos restrictivo que html si no pongo bien los dos puntos pero el punto y coma hay cosas que pueden no interpretar bien los dos puntos se puede copiar y pegar los dos puntos separan atributos de valor y el punto y coma separan parejas de llaves atributo y valor más cuestiones en css al igual que en html las sangrías son meramente estéticas las sangrías no son funcionales ahora yo os recomiendo poner sangrías para que cuando pongamos varios electores uno debajo del otro sepamos perfectamente dónde acaba uno y dónde empieza el siguiente a veces veréis escribir cssa así mirad a veces lo veréis así es código css desplegado a veces lo veréis así qué es código css comprimido cuál funciona mejor los dos funcionan perfectamente bien simplemente evidentemente este código fíjate que te pone todo en una línea y con este en el estado cinco líneas ahora bien al igual que ocurría en html este código es mucho más legible este código es bastante menos legible os voy a decir que cuando profundice jce no sólo vuestro conocimiento sino vuestra práctica en css quieras que no tendréis a esta manera de escribir pero ahora al principio por razones didácticas por claridad vamos a escribir código css desplegado será menos eficiente pero será mucho más claro a la lectura una de las cosas más fáciles que podemos hacer en css es trabajar con los colores mirad voy a borrar estas líneas que he escrito porque estas líneas que ha escrito como os he dicho son pseudo código y pseudo código quiere decir que no son código de verdad esto de arriba de hecho es un comentario escrito en css por tanto lo voy a borrar todo para empezar desde cero y ahora voy a escribir una etiqueta real voy a escribir un selector real voy a empezar escribiendo body recordad que la primera palabra que escriba se llama selector y con selector lo que quiero decir es que si aquí he puesto body mirad equivale a que todo lo que escriba a continuación se va a aplicar sobre la etiqueta body así que pongo body pongo llave de apertura llave de cierre bajo abajo para hacer un poco de sangría y voy a empezar con una de las instrucciones más sencillas de css que es color color me permite especificar el color que va a tener la fuente no el fondo ahora iremos al fondo si no la fuente hay varias maneras de escribir los colores en css la más sencilla es simplemente poniendo el nombre del color por supuesto el nombre del color en inglés así que si pongo color red comprobaréis como la gran mayoría del texto los hipervínculos por ejemplo no porque llevan su propio código de color pero la gran mayoría del texto se vuelve de color rojo si por ejemplo pongo blue el texto se convertirá a azul si por ejemplo pongo pink el texto se convertirá en el color de rosa o se ponga green el texto se hará de color verde la cuestión es cómo se yo qué colores puedo poner y qué colores no puedo poner bueno hay una lista de 127 colores creo que son que la puede obtener buscando lo siguiente efe ss 3 color names nombres de colores de css3 entonces fijaos mi equivocado por poco hay una lista de 140 colores y aquí los tenéis todos en esta lista simplemente buscáis como os he dicho css3 color names y por ejemplo la primera página que sale fijaos ahí como tenéis los nombres de colores que podéis poner dentro de esa lista el nombre de color por tanto es una de las maneras es si queréis la manera más fácil de poner colores pero no es la única manera una manera antigua que no os recomiendo porque es bastante difícil de manejar es poner el código hexadecimal el código hexadecimal funciona poniendo una almohadilla la almohadilla se pone pulsando la tecla al xerez y el número 3 del teclado y a continuación tengo que poner 6 caracteres los primeros dos para el color rojo los segundos dos para el componente verde y los terceros dos para el componente azul en este caso al haber puesto efe efe efe eso corresponde al color blanco y podéis comprobar como el texto se vuelve de color blanco si pongo 000 000 fijaos cómo se vuelve de color negro si pongo efe efe 0000 que es mucho en el componente rojo nada en el componente verde nada en el componente azul podréis comprobar como el texto se vuelve de color rojo trabajando de esta forma es realmente difícil saber a qué color corresponde cada número o mejor dicho a qué número corresponde cada color mirad cómo muestra por qué no toca ahora mismo pro tocará más adelante como muestra voy a abrir un programa de edición de imágenes en este caso voy a abrir un programa de software libre que podemos encontrar tanto en windows como en mac como en linux que se llama el gimp y voy a usar el gimp para editar un poco la paleta de color y ver cómo transformar un color a hexadecimal en este caso tanto el gimp como photoshop como prácticamente cualquier otro programa de edición de imágenes cuando tú seleccionas un color te dice cuál es su correspondiente hexadecimal esto me va a servir también para demostraros cómo funciona el color hexadecimal el código de color hexadecimal y os voy a decir por tanto que no hay un número ilimitado de combinaciones de color vale que combinamos las componentes rojo verde y azul y tenemos un número yo creo bastante denso de colores pero no ese límite mirar voy a llenar una ventana única y voy a hacer lo siguiente si yo selecciono un color el color que quiera fijaos que tengo aquí siempre una cosa que se llama anotación html si por ejemplo he cogido este verde miradme como copio esa anotación html la pego dentro del código respetando la almohadilla eso sí y cuando vuelvo a esta página el color verde es exactamente el mismo color verde que había seleccionado en este selector de color ahora atención todos a la numeración mirando la pantalla cómo funciona esa anotación voy a empezar desde negro y voy a llegar hasta blanco con lo cual parece claro que en principio diría desde cero hasta el máximo fijaos cómo era 2003 58 y en lugar de poner 9 pongo 0 b c d efe y en lugar de poner g pasó a 11 12 13 14 15 16 18 y pasó a 1a 1b ese es el código hexadecimal en lugar de trabajar con el código decimal de 0 a 10 trabaja de 0 16 de 0 a 8 con números y de 9 hasta 16 con letras tiene su explicación de hecho en alguna ocasión he visto trucos los podéis encontrar por internet para transformar fácilmente reglas nuevo técnicas para saber a cada número que hexadecimal le corresponde pero os voy a decir que menos molestéis me os molestéis porque en telecinco y con css3 existen nuevas formas de seleccionar color la forma que más pienso que os va a agradar es cambiar el hexadecimal por simplemente rgb y a continuación tres componentes rojo verde azul red green blue con los números de fuerza de cada color por ejemplo 25 500 los números van de 0 a 255 es decir cada componente de color tiene 256 niveles de color 25 500 equivale a mucha fuerza en el rojo poca fuerza en el verde poca fuerza en el azul y si compro baix lo que acabo de hacer es cambiar el texto a color rojo por eso quiero deciros que existe el código hexadecimal pero en mi opinión os va a resultar mucho más sencillo trabajar con la mezcla de color rgb y por último en respuesta a la pregunta de cuántos colores diferentes puedo hacer con html o con css la respuesta es que no es un número ilimitado de colores fijaos que si mezclo de 0 a 256 3 canales el número no va a salir infinito esto va a ser igual a multiplicar mirad 256 por 256 por 256 que os digo ya queda 16 como de 7 millones de colores así que 16,7 millones de colores son la paleta de colores diferentes que podemos tener en html no son infinitos es cierto pero pienso que es un número suficientemente amplio como para trabajar en la web por lo menos para la mayoría de profesionales si le preguntas a un fotógrafo igual te dirá que para él son pocos porque un fotógrafo trabaja con color pero para el resto de mortales digamos que 16 como 7 millones de colores es un número suficiente como para poder realizar cosas el formato de color rgb es el que mejor recepción ha tenido por los diseñadores gráficos os voy a decir que ya que estoy hay un formato alternativo que es rgb a rgb y añade un cuarto canal alfa que es un canal de transparencia por tanto una cosa que os voy a decir atención es que cuando hago rgb rg&e van desde 0 hasta 255 y no admiten decimales pero cuando pongo alfa el cuarto parámetro va de 0 a 1 y evidentemente admite decimales por tanto si pongo rgb a 25 500 255 es rojo 0 es verde 0 es azul y 0.5 ya sabéis que en programación los decimales se ponen con punto y no con coma 0.5 es la transparencia si 0 es completamente transparente y uno es opaco 0.5 es con el 50% de transparencia y podréis comprobar en la pantalla que si recargo tengo un color rojo desvanecido un color rojo semi transparente cuando crearon el estándar de css3 y ampliaron los colores para que además de esa decimal tuvieran rgb le pusieron un segundo modo de color que es hs l hs l es yoo saturation y valió entonces you es el grado de la rueda de color moment in moment in moment in color wild la rueda de colores están aquí miranda ahí esta bonita la rueda de color esta es entonces el primer valor es el ángulo de 0 a 360 que estás en la rueda el segundo valor ese es la saturación y con esto ahora luego responde a la pregunta de fem y acá él saturation se mide en porcentaje voy a poner una saturación del 100% y el light nes que es la ele que es la tercera letra se mide también de 0 a 100 donde el 0 es nada delight mes es decir negro 100 es light next a tope es decir blanco voy a poner un 50% para poder ver el color que se lo pongo 0 vélez todo negro si lo pongo siempre todo blanco que ver un punto intermedio y fíjate cómo estoy atención aquí y me aparece rojo porque me aparece rojo mirad mirad me aparece rojo porque en la rueda de color el ángulo cero es rojo y estoy a tope de saturación de color diréis que va a salir si en lugar de poner ángulo cero pongo ángulo 180 pues si pongo 180 guardo recargo y fijaos cómo sale y en calma parece que me ha ido hacia el otro lado me he ido a azul medio asia si pongo 90 guardo recargo me voy a ver me parece que está un poco desfasado vale si pongo es que igual van radiales estoy pensando si pongo 270 vale vale fijaos que lo que voy haciendo es simplemente darle vueltas a la rueda de color una cosa que os digo es que conozco a poca gente que trabaje con el sistema hs l simplemente os lo enseño para demostrarlo pero veréis que es mucho más atractivo el sistema de color rgb un sistema de color que mucha gente ha echado en falta es el sistema fm greg acá con el sistema de color sus tractivo cmr acá el color no se expresa como combinación aditiva de rojo verde y azul sino que se expresa como combinación sus tractiva de cian magenta amarillo y negro mientras que en todos los medios audiovisuales el sistema de color que se usa es el rgb en todos los medios de color impresos el sistema de color que se usa es el fm agrega que sobre todo hay que tener en cuenta que hay mucha gente que proviene del diseño gráfico que están acostumbrados a trabajar en semi agrega acá así como yo me pones un color rgb y más o menos el que es a mí me pone un color en cm y acá y yo no sé lo que es pero hay mucha gente que viene de trabajar en diseño gráfico que controla perfectamente el sistema cmb acá la mala noticia que os voy a dar es que a día de hoy no existe el sistema de medir y acá en css3 la razón es porque css3 nunca va a ser para imprenta css3 siempre va a ser para una pantalla de ordenador o por una pantalla de teléfono móvil y las pantallas siempre van por rgb os digo esta razón pero también os digo que esta razón es un poco tontería porque no hubiera costado mucho pienso yo insertar un sistema de color film y acá y luego evidentemente internamente en el navegador hacer los cálculos de conversión para pasar fem y acá a rgb y por tanto eso abriría la puerta o por lo menos haría que la transición de diseñador gráfico a diseñador web fuera más sencilla porque por lo menos el sistema de color ya te lo conocería es bastante bien pero la realidad es que no vale yo soy el primero yo no uso cm y acá pero soy el primero que comprende que para los diseñadores gráficos hubiera sido algo bastante positivo vale por tanto los voy a hacer de momento es trabajar voy a potenciar bastante el sistema de color rgb voy a continuar dejadme continuar poniendo el color del texto en negro negro sería rgb 000 o bien poner black evidentemente y vamos a continuar trabajando con el color del fondo hemos empezado con el color del frente que suena muy fácil de empezar y para trabajar con el color del fondo simplemente pongo background como ya os he dicho si sabes inglés ya sabéis medio css porque en css todo ahora veréis es bastante lógico todo es bastante razonable si lo piensas en inglés así que si quiero cambiar el fondo simplemente pondré background el sistema de color del fondo es exactamente el mismo sistema de color del frente por tanto si habéis aprendido que poniendo red cambiamos el color de fondo a decorar del frente a rojo ahora ponemos red recargo y fijaos cómo queda horrible lo sean lo cambio pero como el color de fondo cambia a rojo evidentemente también funciona con green evidentemente también funciona con cualquier color que queráis poner incluso también por supuesto funciona con rgb 200 200 200 equivaldría a poner el color de fondo con un cierto tono gris ya que actualmente en diseño web se tiende a oír un poco del fondo blanco del fondo completamente blanco y lo que se hace es poner el fondo un poquito gris tampoco muy gris porque si no se pierde un poco la legibilidad pero desde luego un poquito gris una cosa muy divertida que podemos hacer es poner imágenes de fondo así que para poner imágenes de fondo yo simplemente lo que voy a hacer es en google voy a buscar algo como atención web background simples al poner web background simples lo que estoy haciendo es buscar fondos de pantalla que se repitan por ejemplo mirad voy a poner este mismo a ver si me permite bajarlo este no este no es repetible como se nota que no es repetible fijaos esta flor a vosotros parece que esta flor vuelve a aparecer por aquí parece que no luego ése no es repetible vamos a buscar uno que realmente sea repetible vamos a ver mira este de las hojas quizás sí que parece repetible entonces atención que voy me lo voy a bajar lo seleccionó me lo voy a bajar por supuesto a la carpeta multimedia que es la carpeta donde guardo las cosas me copió el nombre grand me me copió el nombre y ahora voy a poner lo siguiente ahora en el código web en lugar del color voy a poner url paréntesis paréntesis y pongo multimedia barra el nombre de la web es decir dentro del paréntesis tengo que poner la ruta exacta la ruta precisa hasta esa imagen guardo recargo y ahora comprobaréis como en el fondo de la página ya sé que de momento no queda muy elegante para luego buscamos un fondo algo más estético pero en el fondo de la página por lo menos quiero que lo veáis demostrado aparece esa imagen he buscado específicamente mirad las palabras simples simples en castellano querría decir sin costuras o repetible para que cuando acabe la imagen y se repita porque si yo no le digo nada cuando acabe la imagen se va a repetir no se note o se note lo menos posible la repetición hay un par de modificadores para css que hacen lo siguiente atención background guión repeat y yo puedo decirle lo siguiente por ejemplo puedo decirle no repito no yo repito lo que hace es que no repite el fondo cuando se acaba si le digo repetir en horizontal o repetir en vertical lo que hará es repetir el motivo o bien solo en equis o bien sólo en y simplemente quería demostrarnos lo pero lo que voy a hacer es quitar este background repito no repeat lo voy a quitar simplemente quería demostrarlo para ya lo usaremos en alguna otra ocasión para hacer que el fondo se repita para tener un fondo continuo varias cosas que os quiero decir en primer lugar una novedad en css 3 pero que os la voy a explicar y no os la voy a recomendar porque solo os la recomendaría en casos muy específicos imaginaos que tengo esto que tengo en la pantalla tengo un fondo por ejemplo floral y ahora en background voy a añadir rojo como url qué es lo que acabo de hacer pues lo que acabo de hacer un momento vamos a poner aquí va a crear un rgb 25 500 tengo que ponerlo con imagen me poner otra imagen vamos a ver voy a poner una imagen huépac round alfa mira a la atención o simplemente voy a esto miradme que os lo perdáis esto me lo paso aguín no estoy explicando lo que estoy haciendo ya lo sé porque lo explicaré más adelante me lo voy a convertir en transparente y por tanto esa imagen que tengo ahí es transparente voy a sentir una cierta transparencia colores invierto y ya está me la voy a exportar como fondo trans punto png también hablaremos más adelante de porque en png y no en jpg pero el caso es que ahora me copió esta url y bingo y digo fondo trans punto png si os fijáis cuando vuelvo lo que tengo es que me he puesto por una parte el fondo floral si lo veis encima he puesto con transparencia el fondo semi transparente esto qué quiere decir que con un background mezclando varias urls mezclando varias imágenes con comas podemos hacer separaciones por capas que quiero decir con capas pues mira yo ahora quiero pintar todo este conjunto de rojo no quiero perder los dibujos de las flores pero quiero hacer que sea rojizo entonces me iría a un programa de edición fotográfica me haría por ejemplo una nueva imagen la pintaría de color rojo y la transparencia de la capa por ejemplo la bajaría el 50% son rojo semi transparente me guardo esa textura como rojo punto png png es para guardar la transparencia y hablaremos diferencia y ahora vengo aquí y me copió esa línea pongo rojo png y fijaos que sigo teniendo las flores por el fondo pero por encima tengo un par de capas más es decir tengo una cierta capacidad no tan amplia como programas como photoshop pero tengo una cierta capacidad para montar cosas por capas siempre que trabaje con transparencia eso sí ahora os digo que eso es que esto existe es novedad en css3 pero no os recomiendo usarlo la razón por la que no recomiendo usar lo es porque cualquier pc cualquier mac mueve sin problemas páginas con capas pero cuando intentas ver en un dispositivo móvil una página con el fondo por capas se ralentiza bastante porque los móviles por lo que parece no están tan pensados al menos los de hoy en día para este tipo de cosas vale por tanto sólo usarlo si realmente tiene algún sentido si realmente no se puede resolver de otra manera y luego a continuación la siguiente pregunta sería cómo puedo cambiar el tamaño de esas flores para hacerlas más pequeñas o más grandes os voy a decir que hay una propiedad que se llama background size que es el tamaño de la fuente van crown 6 yo puedo trabajar la atención con píxeles con porcentaje o bien con palabras como cover mirad yo pongo 100 píxeles 100 píxeles lo que le estoy diciendo es que la primera componente es la x el horizontal la segunda componente es la y lo vertical eso quiere decir que ahora estas tres imágenes mirad cada bloque me ocupa 100 píxeles 100 píxeles allí en lugar de usar píxeles puede usar porcentaje por ejemplo 50% 50% ahora quiere decir que la anchura y la altura de la imagen estará al 50% de la anchura y la altura de la ventana también le puedo decir una fórmula que es cover como ver es cúbreme la página web entera es decir tira a lo alto aunque sobre a lo ancho abría había una palabra además de cover que ahora mismo no la recuerdo pero la voy a buscar en un momento mirad es aquí está cover y con time contener hace lo mismo pero en vertical con tener lo que hace es que la horizontalidad es el 100 por ciento de la imagen y si tiene que repetir por alto pues no pasa nada pues repite vale por tanto para resumir cover contain porcentaje o píxeles y antes de cerrar este vídeo os voy a decir que otra novedad dentro de css3 es background position mirad si pongo por ejemplo background size 100 pixeles 100 pixeles atención a mi pantalla veréis como la alineación es a la esquina superior izquierda veis como la primera baldosa está alineada a la esquina superior izquierda y pueden no coincidir a la derecha background position te permite especificar dónde se pone la primera baldosa con que se alinea por donde podría poner right top ride en horizontal top en vertical eso quiere decir que se alinea a la derecha arriba por tanto recargo y fijaos como la baldosa se ha alineado a la derecha arriba en horizontal existe left center y right y en vertical existe top middle y botón en el centro en vertical no es centre sino que es nivel por tanto en horizontal que sería el parámetro podemos poner left izquierda centre centro o right derecha y en vertical podemos poner top arriba medel en el medio botón en la parte baja digamos como os decía lo que voy a hacer ahora es buscar una imagen algo más o algo menos cantarina que las flores web background simples voy a buscar imágenes y voy a buscar una que sea agradable como esta que sea suave pues una por ejemplo cómo está fijaos que tiene como una textura de papel por tanto voy a esta por ejemplo voy a poner fondo repetible para que no sea un nombre tan largo de archivo y ahora voy a sustituir el código en lugar de poner todas las urls voy a poner no sé qué puesto al fondo es repetible creo que nuestro fondo repetible punto jpg punto jpg eliminó el resto de capas antes os las he demostrado pero no las quiero usar y fijaos ahora no sé si lo veréis como tengo el fondo de color como gris pero sobre todo es que se amplió un poco veréis que el fondo es tiene un tramado como de papel como de papiro no pues esta es la textura que quiero usar voy a continuación a trabajar con una cosa que se llama elementos geométricos si quieras que no eso me llevará a trabajar con con ideas y con clases miradme en la estructura html yo he creado un body he creado un día un dip que está vacío he creado a continuación un eje ver entonces dentro del dip la cuestión está en que llegará un momento en que yo tenga muchos dips necesito nombrar a cada día de una manera diferente necesito localizar necesito identificar a cada uno de los días hay dos técnicas principalmente aunque hay muchas más en realidad pero son dos técnicas llamadas los ires y las clases cuando un elemento se va a repetir una vez y sólo una vez se le pone un nivel pero cuando un elemento se va a repetir varias veces ahora veréis como es frecuente le pones una clase así que me voy a hacer un poco de espacio en este bip y voy a poner y de igual comillas comillas contenedor porque elegí puesto y de por qué contenedor solo va a haber uno en esta página web así que como solo va a haber uno le pongo un aire a continuación voy a localizarlo voy a seleccionarlo con css me escapo de las llaves que he hecho antes y pongo atención lo siguiente almohadilla contenedor esto es una cosa que voy a repetir varias veces a lo largo del curso fijaos que yo no estoy seleccionando la etiqueta no estoy seleccionando el tipo lo que estoy haciendo es seleccionar a través del id por tanto cuando seleccionó a través del bid lo que hago es poner una almohadilla almohadilla equivale a ive cuando creé una clase lo que haré es poner un punto punto equivale a clase ahora por el momento lo que he hecho es poner un id y por tanto he puesto y de igual a contenedor equivale a almohadilla contenedor en css si hubiera sido una clase en lugar de un id hubiera sido un punto entonces voy a poner ahora lo siguiente vamos a hablar de propiedades geométricas voy a hacer que el wish de este proyecto el wef del contenedor voy a hacer una página más bien vertical voy a hacer que sea de por ejemplo 600 píxeles iguales demasiado ancho voy a hacer 500 píxeles venga with es igual a 500 píxeles para ver lo mejor para verlo mejor voy a hacer lo siguiente background esto ya lo hemos visto antes es igual a white para ver bien lo que estoy haciendo quiero que el contenedor tenga el fondo blanco y podréis ver como si el contenedor tiene el fondo blanco ahora el contenedor aparece de color blanco mientras que el fondo aparece del color característico que le he puesto a la textura vamos a hablar a continuación de dos tipos de margen en css existen dos tipos de margen un margen e interior que se llama padding y un margen exterior que se llama margin fijaos en el borde de esta página os daréis cuenta de que el texto está plenamente pegado a ese borde fijaos allí el texto está pegado a ese borde y eso queda feo para añadir un poco de margen interior lo que voy a hacer es poner una nueva línea y poner padding con dos des es igual a un número de píxeles por ejemplo pongo 10 px esto me pone 10 puntos de margen tanto arriba como abajo como a la izquierda como la derecha si ahora guardo y recargo comprobaréis atención como ahora existe un cierto margen en los bordes del objeto una vez más insisto en que es un margen interior es un margen que va desde el borde de la caja hasta el interior del contenido en el como en muchas otras cosas en css me está aplicando ese valor tanto arriba como abajo como a la izquierda como a la derecha pero yo por ejemplo podría decir quiero más margen a la izquierda de la derecha y no quiero nada de margen arriba y abajo por tanto en padding como en muchas cosas de css se puede poner par inglés por ejemplo de 20 píxeles para dean wright por ejemplo de 20 píxeles palin top por ejemplo de 0 píxeles y padding botón por ejemplo también de 0 píxeles lo que estoy haciendo de esta manera acabo de recargar y acabo de refrescar es fijaos que he puesto margen a la izquierda ya la derecha y no lo he puesto ni arriba ni abajo el problema de esto es que he tenido que cuadruplicar la línea la he tenido que multiplicar por cuatro otro truco es el siguiente mirar escribo padding una sola vez padding y en lugar de introducirle un parámetro introduzco 40 píxeles 10 píxeles 20 píxeles 30 píxeles podréis comprobar que el primer parámetro se aplica a la parte de arriba el segundo parámetro se aplica a la derecha el tercer parámetro se aplica a la parte de abajo y el cuarto parámetro se aplica a la izquierda es decir va en sentido de las agujas del reloj perdón lo he hecho al revés en sentido inverso a las agujas del reloj poniendo los márgenes ahora por el momento lo que voy a hacer después de haber explicado estas variaciones es simplificarlo poniendo un padding común a los cuatro lados de la caja de 20 píxeles como os decía existe también un margin que me pone los márgenes desde la línea exterior de la caja hacia afuera funciona exactamente igual que el padding puedes poner pixeles puedes poner margin top margin botón margin left y margin right y puedes también poner cuatro parámetros a un margen pero en este caso os voy a decir un truco que consiste en poner margin auto margin auto lo que hace es centrar la página en la pantalla fijaos que martín auto lo que hace es que el margen sea automáticamente igual tanto a la izquierda como a la derecha guardo recargo y podréis observar que el cuerpo principal el contenedor de la página está centrado con el navegador web vamos hablar un poco de propiedades de texto por ejemplo voy a estilizar el texto h1 el texto de h1 vosotros no lo sabéis pero yo os lo digo tiene por defecto bastante margin y bastante parís así que lo primero que voy a hacer es poner margin es igual a 0 pixeles padding es igual a 0 píxeles el texto h 1 está empujando vosotros no lo habéis dicho que empuje pero es un estilo por defecto que lleva el navegador que llevan todos los navegadores ahora vamos a empezar si queréis un poco cogiendo el toro por los cuernos y vamos a cambiar la font family la familia de la fuente del texto muchos navegadores ponen como familia de fuente por defecto una familia de fuentes de tipo serif a las familias de fuentes de tipo serif a tipo sheriff son fuentes con decoraciones con remates con acabados pero yo ocurre que no quiero este tipo de fuentes así que pongo sans ion sheriff sans-serif es sin decoraciones sin remates podéis comprobar que se abra guardo y recargo sólo el h1 me aparece como fuente de palo puedo cambiar también a algunas fuentes estándares entre sistemas operativos como por ejemplo arial sansal y por efecto de poner arial como por ejemplo verdad pero la buena noticia es que en css3 se admite la carga de fuentes personalizadas para haceros una demostración voy a ir a una página web como por ejemplo da font en the font podemos encontrar muchas familias de fuentes a no olvidarme demasiado me voy a bajar estas dos primeras que son bastante chulas mira tengo lemon milk y tengo cynthia editó así que me las voy a bajar las dos atención mira me las bajo las dos pulso descargar pulso descargar se me han bajado dos archivos zip donde se me han bajado estos archivos zip con toda probabilidad se me han bajado en la carpeta de descargas así que voy a descomprimir los archivos zip y voy a comprobar que en la gran mayoría de ocasiones cuando descubrimos los archivos zip me aparece un archivo ttf un archivo truetype los archivos de efe son archivos de fuentes hay otros dos formatos pero el archivo el formato ttf es con diferencia el más común tendría que leer por supuesto el m el aviso de licencia para dar crédito fijaos que en este caso la fuente de mobbing en milk que está en ot efe es otra de las fuentes que puedo localizar y lo que voy a hacer es dentro de mi proyecto esto es muy importante no voy a dejar que las fuentes se queden en la carpeta de descargas sino que voy a copiar las fuentes mirad a la carpeta multimedia voy a copiar las dos fuentes que me he bajado a la carpeta multimedia esta es la mon milk y ésta es cynthia edito me da igual las fuentes que os hayáis bajado bajamos la que queráis no hace falta que os bajéis exactamente la mire yo lo que voy a hacer ahora es decirle a css que quiero usar esas fuentes ojo que no hace falta ni siquiera que instales las fuentes en el sistema operativo no hace falta en absoluto simplemente lo único que hace falta es que las copias a la carpeta del proyecto y ahora voy a copiar un código css tres fondos qué es el siguiente mirada me voy a copiar este código de aquí lo voy a pegar en mi web y voy a hacer font-family se llamará como yo quiera por ejemplo familia 1 y ahora la url evidentemente va a estar en multimedia barra como he llamado a esa fuente no me acuerdo lemon milk voy a primero la de ciencia de vito multimedia cynthia débito así que con este fondo face fijaos que no está dentro de h1 lo he puesto aparte y antes de uno ahora digo font family es igual a familia 1 y si ahora guardo y recargo mirada la atención veréis como la fuente tipográfica que estoy usando es justo la que me he descargado lo importante en este caso son dos cosas una que el nombre de familia que ponéis aquí sea el nombre de familia que habéis puesto ahí si arriba pongo longaniza abajo pongo longaniza y lo segundo importante es que evidentemente localizase correctamente al igual que que habéis tenido que poner correctamente la url de las imágenes que también pongáis correctamente la url de la fuente que vais a usar voy a probar ahora el formato efe el formato de f tenía problemas de compatibilidad entre navegadores no sé si últimamente cualquier nador ya soporta cualquier tipo de fuente dejadme probarlo así que cambió a lemon milk y tengo ahí lemon milk efectivamente parece que por lo menos chrome acepta ambos formatos así que bueno pero qué pasa si no quieren sustituir una por otra yo quiero cargar las dos pues si quiero cargar las dos mira la atención puedo poner dos reglas son seis familia 1 y familia 2 fijaos como en familia 1 he cargado de ciencia editó y en familia 2 he cargado lemon milk por tanto ahora podría hacer que el h1 fuera la familia 1 y el h2 fuera la familia 2 para que el h1 tenga la fuente ciencia edito el h2 tenga la fuente lemon milk cuidado cuando os bajáis una fuente muchas fuentes están hechas por norteamericanos y qué pasa con la ñ pues lo mismo que comentábamos antes que la ñ no la reconoce y con toda probabilidad los acentos tampoco vale por tanto en este caso pues tendríamos que tener cuidado con eso voy a cambiarla en la ñ por una n simplemente para que estéticamente quede bien pero lo que tendría que hacer es descargar me alguna fuente que tuviera el juego de caracteres completo para el idioma español resulta que en este caso el título es sensiblemente más pequeño que el subtítulo y esto evidentemente debería estar al revés entonces para conseguir esto me voy a h1 y le digo font-size tamaño de la fuente es igual a por ejemplo 48 píxeles cuidado x pena px font-size es igual a 48 píxeles con eso lo que he conseguido es aumentar o por lo menos definir el tamaño de la fuente voy a hacer lo mismo con el h 2 el h 2 voy a decirle que en font-size es igual a por ejemplo 10 píxeles de esa manera podréis ver cómo he conseguido manejar he conseguido cambiar la altura de la letra otra cosa que quiero cambiar es la negrita tanto h1 h2 por defecto vienen en negrita y eso quiere decir que en esta letra se ve demasiado gruesa para poner o quitar negrita se pone lo siguiente font wait el peso de la fuente si quieres que esté en negrita se pone bold se pone ahí negrita pero curiosamente en este caso yo ya la tengo en negrita yo lo que quiero es quitar la negrita por tanto font weight es igual a normal daos cuenta por tanto como ahora el texto h1 ya no es tan grueso es más fino y por lo menos en mi caso es más legible voy a quitar la negrita tanto de h1 como de h2 volviendo un poco al tema de cómo se diseña una página web sobre todo cómo se diseña a nivel visual si yo estuviera en un programa como photoshop illustrator ahora mismo y quisiera seleccionar ese texto y moverlo por ejemplo hacia la derecha imagínate que quiero simular como que esta línea hace como de subrayado de la otra simplemente pincharía arrastraría y ya está pero yo no estoy en un programa de ese tipo pero que estoy haciendo es escribir código directamente así que os voy a decir que existe el mismo concepto de mover es decir se puede hacer lo mismo que en photoshop pero hay que currárselo un poco más en este caso lo que hay que hacer es decirle al objeto en primer lugar lo siguiente me voy al h2 primero tengo que tener muy claro a quien quiero mover a quien quiero mover a laxe 2 luego me voy al selector de h2 y dentro de él escribo lo siguiente en primer lugar posición relativa que quiere decir posición relativa quiere decir te voy a mover existe posición relativa y otro muy común es posición absoluta posición absoluta que esté voy a mover independientemente todos los demás ahora luego lo usaremos para alguna otra cosa posición relativa este voy a mover pero con respecto a los demás no te escapes de los demás a continuación tenemos unos parámetros que son top left bottom y right yo lo primero que quiero es ver a darle como un empuje desde la izquierda lo quiero mover hacia la izquierda por tanto pongo left 30 píxeles guardo recargo y fijaos cómo se me ha ido 30 píxeles hacia la izquierda voy a ponerle 50 50 píxeles y ahora quiero que esté un poco más arriba porque quiero que esté más pegado al texto lo que hago atención mirad mirad me si yo le pongo 50 píxeles lo que voy a hacer es empujarlo hacia abajo pero yo no quiero empujarlo hacia abajo yo quiero empujarlo hacia arriba por tanto en estas medidas se admiten píxeles negativos lo que hago es top menos 10 píxeles para que en lugar de empujarlo hacia abajo 10 píxeles lo estire hacia arriba 10 píxeles beige por tanto como finalmente puedo mover los objetos más o menos donde quiera lo único es que en lugar de moverlos a ojo o en lugar de moverlos pinchando arrastrando los tengo que mover con precisión los tengo que mover con parámetros voy a maquetar el menú de navegación el menú de navegación ahora mismo es una lista que estéticamente es bastante horrible porque la gente está más acostumbrada a ver menús de navegación basados en botoneras horizontales una etiqueta que no hemos visto y que nos sirve tanto para html como para acs ese es una etiqueta llamada nada por tanto voy a seleccionar el menú de navegación y le voy a poner lo voy a rodear de una etiqueta llamada nada nada se abre no se cierra fijaos que he cogido el menú de navegación que tenía y le he puesto antes una etiqueta nada y después una etiqueta nada nada es de navigation y quiere decir que lo que hay adentro sea lo que sea es un menú de navegación no solo me sirve para el posicionamiento para que google sepa que eso que hay en su menú de navegación sino que también me sirve para css así que dentro de fs s voy a poner las siguientes reglas creo que está claro que la etiqueta él está dentro de la etiqueta nada siguiendo la jerarquía de padres e hijos digamos que la etiqueta no es el padre la etiqueta él es el hijo o la hija pues voy a hacer lo siguiente voy a escribir nada espacio cuando pongo nave espacio y lo que estoy haciendo es seleccionar el un pero no cualquier un sino en el que está dentro del nada por tanto el espacio en css quiere decir jerarquía padre e hijo y ahora teniendo claro que he seleccionado el pool le voy a decir list guión style type el tipo de lista es no 1 qué hace tipo de lista ninguno lo que hace es quitar los bullets quitar los puntitos os voy a decir que teóricamente en css una cosa que no he usado en muchos años hay lo siguiente pss list style type yo lo que he usado es este comando para eliminar las listas fijaos que tenemos circle tenemos square tenemos también ap roman entonces por aquí hay fijaos que hay todos estos tipos de listas hay listados en hebreo en griego en georgiano en katakana en latín en romano puntos cuadrados vale por ejemplo mirad pues voy a ponerlo en hebreo lista está el type en hebreo y fijaos no sé si lo veis pues como el listado de puntos pasados en hebreo si pongo por ejemplo román lower román lower latín mirad lower román y me sale en romano vv todo eso si cojo por ejemplo y la gana me sale la gana japonés vale me sale como ah y así básicamente son las grafías de a e instructiva por ahí lo podéis ver si ponéis ir a ghana en google os sale una tabla bastante sencilla de a que corresponde cada carácter vale por tanto veréis que el primero que ha aparecido es la a que os quejáis ahí el segundo que ha aparecido es la y que se vea y el tercero que ha aparecido es la u y así o sea que aparece en caracteres raros pero realmente están contando vocales lo único es que japonesas vocales no van como en castellano que es joe sino que van ahí web pero vamos más allá teniendo en cuenta eso no hay mucha más historia bueno pues lo que quiero no exponerlo en japonés sino lo que quiero es ponerlo en no vale ponerlo en ninguno simplemente os lo enseñado pues para que lo veáis y ahora al nab le voy a decir que margen es igual a 0 padding es igual a cero una vez más porque me quiero cargar ese estilo por defecto que tienen algunos elementos dentro de fs ya he maquetado el nap un ya empaquetado la etiqueta un pero ahora lo más interesante va a ser va a ser maquetar el lee los link son los elementos cada uno de los elementos de la lista que tengo aquí así que voy a hacer lo siguiente quiero nada espacio un espacio le quiero maquetar los espacios pero meditar perdón los lee que están dentro de los pool que están dentro de los nab no cualquier lee que me pueda encontrar por ahí sino sólo besos y ahora digo lo siguiente como son hipervínculos además perdona nada un link a quiero maquetar fijaos que parece complejo pero quiero maquetar los a que están dentro de los link que están dentro de los pool que estén dentro de los na’vi así que parece que está hablando en chino pero vale pero es que es así entonces a esto le quiero decir text guión decoration es igual a none que es text decoration igualan a un quítame el subrayado ese del hiper vínculo así que aparece por defecto hay otras cosas donde me gusta mucho el subrayado pero no en el menú de navegación cuando leemos de usabilidad ya hablaremos de en qué euros mismo gusta en inclusiones no luego el color el color aparece azul o morado porque es el color por defecto en el estilo por defecto del navegador para los hipervínculos pero no me gusta así que color no voy a poner de momento como black acordaos de en cada en cada línea punto y coma para acabar la familia de fuentes no la quiero de tipo times new roman la quiero de tipo por ejemplo área así que font family sans guión sheriff sin sheriff as sin remates sin decoraciones bueno aunque yo he puesto en el menú mayúsculas y minúsculas ocurre que estoy pensando que quiero que todos los elementos ponga todo mayúsculas pero claro no quiero tener que ahora venir aquí y cambiar la letra por tanto mirad hay una modificación que es texto transforma y tengo lo siguiente tengo a pair keys para ponerlo todo en mayúscula upper case todo mayúscula lower keys para ponerlo todo en minúscula incluso las mayúsculas me las ponen minúsculas tengo capitales capital y fe que es para poner mayúsculas si la letra lo soporta o versalitas mayúscula más grande la primera mayúsculas más pequeñas las segundas parece que este caso no lo soporta y por último normal para dejarlo como estaba voy a poner a pair keys quiero que todas las letras sean mayúsculas quiero también que la fuente esté en negrita así que font weight font weight es igual a bolt y quiero que la fuente sea más pequeña así que font-size es igual por ejemplo a 10 píxeles como veréis estoy interviniendo bastante sobre el estilo css de la lista y de los elementos de la lista pero todavía siguen pareciendo una lista todavía no parecen un menú de navegación qué voy a hacer en este caso mira voy a hacer lo siguiente en primer lugar background el fondo del botón es igual rgb 200 200 200 es decir el fondo del botón mirad lo he puesto gris claro el gris está muy pegado a la letra pero ya sabemos que existe un parámetro llamado padding el padding es el borde interior el margen interior unos botones se me pegan con otros no hay mucho problema los botones se pegan unos con otros porque hay un parámetro llamado line height line height por ejemplo 20 píxeles line height es la altura del interlineado y ya el parámetro mágico el parámetro que va a obrar gran parte de la magia en este caso es cloud 2 puntos led yo no quiero que cada botón se me ponga uno arriba del otro lo que quiero es que se pongan uno a la izquierda del otro le doy flow left pulso enter y fijaos como con suerte el menú se ha quedado en forma de botones lo que voy a hacer ahora es cambiar un poquito la forma del botón miradme lo que voy a hacer le voy a decir que el color lo quiero white porque el fondo lo quiero black quiero hacer unos botones negros contexto blanco así que quede elegante quiero poner menos para bing de 5 probablemente y quiero que haya un poquito de margen margin 2 píxeles así mirad habrá un poquito de margen entre botón y botón voy a poner margin right ahora yo pienso un poco lo que quiero digo bueno me gustaría que la anchura de los botones fuera un informe porque ahora mismo fijaos que la anchura de los botones esta es dinámica con respecto a lo que ocupa el texto por eso digo por ejemplo width es igual a 80 píxeles y así fuerzo a que la anchura sea la misma wheat por ejemplo 70 píxeles allí el problema es que pide tu curso se baja abajo igual le tengo que quitar la negrita para que no se baje abajo pues voy a bajar un poquito el tamaño de la fuente mirad quiero menos para bing en la parte superior por eso voy a hacer esto para bing voy a poner un píxel y ahora me gustaría que el texto estuviera centrado en el botón así que texto alain centre alineación del texto la quiero centrada lo único que tengo que hacer ahora es simplemente cambiar la anchura de los botones para intentar que me ocupen toda la botonera veo todavía veo todavía mucha amplitud vamos a inspeccionar un momento el elemento sí bueno no demasiado alto todavía pero me vale y ahora fijaos cuidado atención qué pasa si entro dentro de cursos fijaos que desaparece todo el css porque el css de momento al menos de momento únicamente sólo está en index.html si le pulso a inicio lo recupero por tanto no os preocupéis porque luego más adelante lo que vamos a hacer es sacar lo externo para que esté vinculado a todos los archivos del sitio web a cabo este menú de navegación quitando un poquito de la en heart porque me queda demasiado alta la línea quizás no tanto digamos 15 píxeles y una cosa mirad novedad en css 3 son los bordes redondeados yo por ejemplo en este diseño igual quiero que los bordes están redondeados así que simplemente se pone border por ejemplo 5 píxeles suele pongo por 25 píxeles daos cuenta perdón border radios fijaos ahí como lo que he hecho es redondear los bordes de los botones así parecen como pastillas los bordes tienen los siguientes parámetros mirad se le pueden poner cuatro parámetros aquí dentro donde le voy a poner cero píxeles 5 píxeles 10 píxeles 15 píxeles lo que va a hacer es que este es el primer borde 0 píxeles es el segundo 5 píxeles tercero 10 píxeles cuarto 15 píxeles es decir lo que hace es bordear diferentemente si os interesa cada una de las esquinas de cada una de las cajas vamos a hablar en este caso de pseudos electores que me sirven para hacer un poco de operaciones especiales sobre los selectores mirad voy a poner nada el lic dos puntos first child first child primer hijo quiere decir primera ocurrencia solo si hay varios y en este caso hay varios botones quiero que lo que voy a aplicar sólo aplique sólo a la primera de las ocurrencias entonces voy a decir border radios 15 píxeles 0 píxeles 0 píxeles 15 píxeles fijaos atención a la pantalla como solo aplica ese redondeo y cuidado first i’ll me lo está aplicando a todos no un link mentir un segundo no un link a fer style déjame que y lo vuelva a hacer bueno ahora veremos qué ha pasado ahí voy a probar el nab el lip a las child y voy a decirle aquí lo contrario 0 píxeles 15 píxeles 15 píxeles 0 píxeles en este caso está pasando del artza el y del fairchild voy a ver porque puede haber sido he estado inspeccionando el código y claro veo que en este caso particular no lo puedo aplicar porque fijaos que en las etiquetas a no tienen hermanas fijaos que las etiquetas li sí que tienen hermanas porque están unas al lado de las otras en cambio esta etiqueta a está metida dentro de la ley y es la única hija es la primera y a la vez la última por tanto usaremos el first y el last child en alguna otra ocasión pero no en esta pero por lo menos en esta sí que podemos utilizar un pseudo selector que es el h o ver el h o ver es qué pasa cuando pones el ratón encima de ese elemento así que yo por ejemplo lo que quiero es que cuando pongo el ratón encima del elemento el fondo cambie de negro a gris oscuro y fijaos cómo mirad hago esto irá os cuenta como cuando el ratón pasa dentro del botón el botón se vuelve de color gris eso lo he conseguido con el pnv un link a dos puntos a ver a ver es como cuando el ratón está por encima y le cambió una propiedad y además ahora otra cosa que voy a hacer voy a poner el fondo aquí de color negro pero negro con parámetros voy a poner una etiqueta que se llama transition transition todo quiero que transiciones un segundo hace lo siguiente mirar como cuando pongo cuando pongo el ratón encima de la etiqueta no cambia de repente sino que tarda un segundo en cambiar eso lo he conseguido veis como hay una pequeña animación eso lo he conseguido porque he puesto transition en un segundo el transition lo puedo poner también aquí arriba y así casi que mejor mirad en lugar de ponerlo en la h über lo he puesto en el propio nada en este caso tengo un cambio de estado con el hv evidentemente estoy cambiando de normal a con botón sobre con ratón sobre lo que hace el transition es detectar que cuando haya transiciones quiero que las transiciones se realicen poco a poco gradualmente durante el tiempo que digáis ahí me voy a ver un par de novedades nuevas de hecho estas propiedades nuevas las voy a poner sobre el contenedor y no sobre elementos nuevos no quiere decir que me voy a ir al contenedor atención me voy al contenedor me hago un espacio pulso enter y continúo poniéndole propiedades al contenedor le voy a poner las siguientes propiedades en primer lugar border el border me permite especificar el borde de un dip o de una caja y tiene los siguientes parámetros primero la anchura luego el tipo de borde y por último el color he puesto en este caso un borde de 4 píxeles dust esto es línea do y negro si ahora guardo y recargo mirad fijaos que mi web parece una postal vale porque tiene la típica trama de ésta tengo otro acabado que es daughter que es el lugar delineado es punteado también tiene su gracia tengo otra que es sólida qué es una línea sólida y otra que es double que es una línea doble si buscáis css border encontrareis muchos sitios de referencia donde os dicen todas y todos los tipos de borde que existen en css aunque los cuatro que más se usan son los cuatro que os he dicho hasta ahora voy a hacer por tanto un borde b dónde estás aquí con tenedor un borde de sólido 4 pixel sólido y de un color gris y yo rgb voy a probar 200 como 200.200 iguales demasiado oscuro bueno pues me dejara ir a continuación una novedad en css 3 voy a poner los verdes estos después del separador miradme y es una propiedad llamada box shadow sombra de caja se escribe box shadow y tiene los siguientes parámetros primer parámetro el desplazamiento en horizontal donde positivo es la sombra se desplaza hacia la derecha negativo es la sombra se desplaza hacia la izquierda el segundo parámetro es desplazamiento en vertical donde en positivo la sombra se desplaza hacia abajo en negativo y la sombra se desplaza hacia arriba el tercer parámetro es la dureza de la sombra donde 0 es una sombra perfilada y más valor es una sombra difuminada y por último el color de la sombra así que si he puesto una sombra de 10 píxeles 10 píxeles 5 píxeles black tengo una sombra que se desplaza 10 píxeles a la derecha 10 píxeles hacia abajo se difumina a 5 píxeles y es de color negro como veis es una especie de sombra que arroja la caja sobre el fondo en lugar de poner una sombra tan dura como esa voy a poner 0 píxeles 10 píxeles 15 píxeles rgb 000 0.3 es decir fijaos que queda mucho mejor una sombra que no se desplaza nada en x que se va hacia abajo 10 píxeles que se difumina a 15 píxeles osea que se difumina bastante y que tiene un color negro semi transparente un color negro 0 0 0 al 30% de transparencia 0.3 de la misma manera que existe sombra de tex de sombra de caja también existe sombra de texto pero os voy a decir que tengáis cuidado con las obras de texto mirad me voy a la h1 al título principal y digo text shadow en lugar de box ado pongo text shadow voy a subir el tamaño de la fuente y con los mismos parámetros voy a poner 0 píxeles 3 píxeles 6 píxeles rgb 000 0.3 y si hago así no sé si lo veréis no sé si se inserta en la pantalla pero el texto de título está proyectando una sombra está arrojando una sombra solo os recomiendo poner sombra de título sombra de texto en los títulos desde luego no en los textos de párrafo ya sé que queda muy bonito ya sé que queda muy apetecible pero eso dificulta la lectura por tanto es apto para títulos no es apto para texto de párrafo voy a maquetar sabiendo que vamos a maquetar con las instrucciones que ya conocemos una cosa que sí que voy a hacer antes de continuar es externalizar el css a un archivo externo cómo se hace esto cómo se hace esto para hacer esto lo que voy a hacer es dentro de mi carpeta de momento a la misma altura de momento a la misma altura que los archivos html voy a crear un nuevo archivo con el nombre que queráis con la extensión css estilo punto css ahora lo que haré es abro estilo css en el head it y le voy a pasar todo el css que he hecho sin contar con las etiquetas está el todo el css que he hecho se va a ir a estilo css evidentemente sí externalizado todo el css en un archivo externo ahora tengo que llamarlo tengo que llamarlo desde el archivo index me cargo borro las etiquetas style y pongo una etiqueta llamada link link wray es igual a style sit h ref es igual a estilo css con esa etiqueta link lo que estoy diciendo es el estilo no está adentro de este archivo sino que está en un archivo externo evidentemente la ventaja de esto va a ser que ahora más adelante podremos llamar a este mismo estilo desde varias páginas fijaos que he guardado y recargado y no ha habido ninguna diferencia simplemente ahora el estilo está metido dentro de un archivo externo este es por tanto el tercer tipo de inclusión de css que os decía al principio del bloque tenía por aquí un banner cuidado con el banner miradme cuidado con el banner porque manualmente le puse una anchura de 200 pero ahora ya no voy a hacer eso así que guardo recargo me da igual que el banner se me salga porque ahora en el estilo voy a hacer lo siguiente voy a traer el estilo un poco más cerca y hago lo siguiente creo que está claro que banner es una sección a la que le puse un id llamado banner porque le puse un ide pues para ahora poder localizarla poder seleccionarla con facilidad así que digo banner va a tener un width del 100% vas a ocupar toda la anchura de la página y sobre todo tengo un problema ahora mismo miradme con la imagen del banner y es que se me sale se me sale porque es muy grande pero digo banner img o lo que es lo mismo la imagen que está adentro de lady banner quiero que tenga un wifi del 100% esto quiere decir no te salgas esto quiere decir quédate en el 100% de la anchura de tu contenedor otra cosa que no me gusta es que además el banner está pegado al menú me gustaría que respirara un poquito me gustaría que hubiera un margen si me gustaría que hubiera un margen me voy a ir a banner y voy a decir margin top solo margen superior es igual a 10 píxeles y os daréis cuenta como ahí a cuidado no tiene margen por un problema de flotación siempre que acabe un menú de navegación y al acabar el menú de navegación haya elementos que floten y fijaos como hay elementos que flotan tengo que poner este truco div style cloud un momento no no no no no clear dos puntos y ahora sí esto que veis aquí que lo vais a copiar y pegar un montón de veces en un montón de proyectos sirve para que cuando algo esté flotando le digas deja de flotar y si ahora recargo fijaos que esa era la causa de que el margen no funcionará por tanto siempre que tengáis algo que flote acordaos como los as flotan como el menú flota flota a la izquierda al acabar de flotar hay que poner un día exactamente como ese y ese día básicamente lo que está diciendo es deja de flotar porque si no el programa asume que todo lo que viene después aunque caiga abajo sigue flotando y me da problemas me da problemas porque el css como habéis visto a veces puede dejar de funcionar tengo ahora mismo un banner estático quiero decir que molaría tener un banner que fuera corriendo tener varios banners y que fueran cambiándose con una animación o molaría tener un par de botones para ir cambiando banner siguiente manera anterior eso lo haremos próximamente pero todavía no hoy voy a maquetar estos destacados mira tengo un destacado de programación y un destacado de música así que que eran los destacados los destacados os recuerdo que eran dentro de y de destacados articles así que voy a hacer lo siguiente miradme destacados tiene una anchura del 100 por ciento y ahora destacados arctic él tiene una anchura del 40% por ejemplo intentan subir pero no pueden porque el vídeo es muy grande así que destacados arte que el vídeo coma coma destacados arctic el audio wifi 100% la coma es para un selector múltiple quiero seleccionar varias cosas a la vez cloud les quiero que flote a la izquierda ahora sí mira dos puntos de una cosa mirarme un momento tengo programación tengo música cada uno flota a una parte pero se me ha llevado el logotipo de html5 el logotipo de html5 es parte del blog pero es el problema cuando algo empieza a flotar y he dicho que los artículos floten el programa no sabe cuándo cuando tiene que dejar de flotar por eso cuando acaban los artículos antes de que empiece el blog voy a volver a poner esta etiqueta div style clear voz para decirle deja de flotar ahora si simplemente lo que tengo que hacer es quizás darle a los artículos un poquito de margen quizás cinco píxeles para que se separen entre sí vamos a ver 15 píxeles hay mejor damos cuenta por tanto como hasta ahora tengo una cabecera un subtítulo un medio de navegación un banner al 100% tengo dos destacados y tengo por tanto también ahí un blog un pequeño blog fíjate que el blog no me gusta mucho porque me gustaría que el texto no se quedará mirando miradme el texto no se quedará abajo de la imagen sino que se quedará a la izquierda de la imagen como es eso como hago que algo empiece a quedarse a la izquierda flotando las fluctuaciones son igual de necesarias que molestas son necesarias tenemos que tener cuidado cuando acabamos una flotación por tanto voy a hacer lo siguiente no es cierto que esa imagen mirada en el código es blog arctic el ing pues le dijo blog arctic el ing cloud left y mirad lo que ocurre lo que ocurre es que el texto flota a la izquierda lo que haré ahora también veis que se monta el texto esto pasa muchas veces lo que hago también es al finalizar cada artículo le pegó la etiqueta de deja de flotar ya ha explotado muy bien pues deja de flotar y ahora veréis como por tanto se me alinea la imagen a la izquierda y el texto justo a la derecha lo último que voy a hacer de estilo antes de dejarlos trabajando un poco es que en el body voy a decirle que font family es igual a sans sheriff para que todo el texto de párrafo me lo ponga sin remates y le voy a decir que el text align es igual a justify para que todo el texto me lo alinee forzado fijaos ahí como esta página bueno puede no estar acabada pero desde luego ya es otra cosa desde luego ya tiene cierta apariencia y ya por último lo que vamos a hacer va a ser propagar este css al resto de archivos como lo voy a hacer seguramente no funcionará la primera porque mira via index.html el link este que he creado lo pego debajo de cada una de las etiquetas que hemos ido creando a lo largo de las páginas pero sin embargo tengo un pequeño problema que es el siguiente mira guardo todas las páginas y veo que algunas cosas funcionan y otras no cursos sobre mi diseño alguna zona funcional y otras no miradme por ejemplo la tipografía funciona por ejemplo esta tipografía funciona el fondo funciona el color funciona pero el contenedor no funciona y el contenedor no ziona simplemente porque acordamos que al principio mira a esté vivo le he puesto y de es igual al contenedor pero ese vídeo no lo he puesto en diseño no lo he puesto en cursos no lo he puesto en contacto no lo he puesto impide tu curso y no lo he puesto en sobre mí con lo cual si lo pego ahora ir a esas cosas bien tengo ya el contenedor pero daos cuenta como no funciona el menú no funciona porque antes he puesto el menú dentro de una etiqueta nada y estilizado css en base a esa etiqueta nava por eso lo que tengo que hacer ahora es encapsular el resto de menús en una etiqueta nava es decir tengo que realizar todas aquellas modificaciones que haya hecho en la página principal tanto la apertura de enap como el cierre de nava pues lo tengo que propagar al resto de archivos ya sé que esto es incómodo ya sé que esto es poco eficiente y probablemente necesitaríamos una manera de automatizar más esto de la misma manera que el css está en un archivo externo pues que la cabecera y estas cosas estuvieran en un archivo externo también se puede hacer pero no con html porque html es un lenguaje de marcado puro y duro’ si ahora recargo la página comprobaréis que en la medida en la que duplique los menús veréis que aparece sin ningún problema aparece correctamente toda la maquetación en el resto de páginas del sitio web en primer lugar en la sesión que nos ocupa lo primero de lo que quiero hablar es de una cosa que en css que se llaman animaciones no confundir las animaciones con las transiciones de hecho antes de ver animaciones vamos a ver en un mismo archivo las transformaciones y luego lo que hacemos es animar aunque se puede animar cualquier cualquier cosa un ejercicio muy didáctico suele ser animar tres transformaciones pero aunque luego lo vamos a aplicar dentro de nuestro propio proyecto como tanto las transformaciones como las animaciones son algo de una complejidad moderada más bien media lo que voy a hacer es explicarlo primero en un archivo en blanco y luego lo aplicamos sobre el proyecto por tanto dentro del propio proyecto si quieres vamos a lanzar esto para que esté en la misma carpeta vamos a configurar se hace falta en este usuario las extensiones de archivo bueno a partir de aquí a partir de aquí lo que voy a hacer es crear un archivo aparte llamado por ejemplo transformaciones punto html es un archivo específicamente para aprender lo primero que tenemos que aprender en la sesión de hoy y a continuación una vez lo tengamos pues si hace falta lo que haremos es archivarlo bien lo voy a cargar tanto en el editor como por supuesto en el navegador vamos a cerrar por aquí esta ventana y ahora la vuelva a abrir y por tanto lo que voy a hacer en este caso va a ser abrirlo en los dos lugares comprobamos por tanto que si lanzamos cada uno de los dos a cada una de las partes de la ventana veremos el editor de código preparado para trabajar vamos a ocultar automáticamente la barra y así ganamos un poco más de espacio para cada uno de los programas una vez que tengo este archivo como siempre puedo comprobar que estoy trabajando realmente con el mismo archivo si pongo hola en la pantalla y simplemente aparece hola en el navegador también voy a configurar la tipografía para que sea un poquito más grande y podamos verla al menos al principio mejor que podemos ver la más grande en la pantalla a partir de aquí voy a crear la típica estructura casi que acabó antes si la creo en un momento en lugar de copiarla y pegarla hay veces que se tarda menos en copiar y veces que es nada menos de escribir y dentro del head simplemente voy a crear la etiqueta está el para el ejemplo que nos ocupa en la primera parte de esta sesión simplemente no me interesa el título y todo eso no voy a validar esta página como estándar simplemente me interesa aprender un par de cosas bien voy a crear un dip con él y de por ejemplo bloque por ponerle un nombre y ahora dentro donde efe ss lo que voy a hacer es especificar que el elemento bloque le voy a asignar por ejemplo un wifi de 100 píxeles un height de 100 píxeles y un background red ya que es simplemente lo que quiero es tener un día de color rojo de forma cuadrada 100% con el fondo rojo bueno hasta ahora hemos visto que tenemos alguna algunas características de fs s tales como por ejemplo la posición relativa en la posición absoluta y el left right el top y el botón nos sirvió anteriormente para el subtítulo y moverlo y posicionarlo bajo del título estas propiedades no son nuevas de css3 sino que existen desde css2 ahora como novedad en css3 encontramos las transformaciones y al hablar de las transformaciones inevitablemente tenemos también que hablar de las etiquetas de compatibilidad las etiquetas de compatibilidad entre navegadores no sé ahora mismo porque hay que realizar un seguimiento prácticamente semana a semana pero sé ahora mismo si las transformaciones ya son compatibles directamente con chrome vamos a probarlo voy a hacer lo siguiente voy a decirle que el bloque le pongo un transform 2 puntos translate y voy a decirle por ejemplo 100 píxeles 100 200 píxeles por ejemplo hago 100 píxeles así que pinchó estiro bueno en este caso vemos como no ha hecho falta etiqueta de compatibilidad pero probablemente en animación sí que hará falta esa etiqueta con lo cual lo acabaremos viendo bueno lo primero que he hecho es simplemente decir que quiero transformar a continuación especificado el tipo de transformación que voy a hacer que es un translate que es un desplazamiento y digo cuánto lo quiero desplazar primero en x en horizontal y luego en y teniendo en cuenta que en la web siempre la x crece hacia la derecha y la y crece hacia abajo por tanto 100 píxeles equivale a ir hacia la derecha pero 100 píxeles en este caso no equivale a ir hacia arriba sino a ir hacia abajo hay tres tipos de transformación principalmente hay un par más también está a sesgar y también esta matriz de transformación pero las tres principales son mover son rotar y son escalar así que voy a poner lo siguiente transformó rote y en rota voy a poner algo tan sencillo como por ejemplo 45 deja ver es gris vales de es grados así que recargo y observo un par de cosas lo primero es que efectivamente es rotado esté vivo 45 grados pero también observó algo bastante curioso y es que al rotar 45 grados parece que se me ha desactivado la traslación de 100 por 100 píxeles bueno vamos a seguir y ahora veremos que efectivamente así ha sido y cómo arreglarlo por último voy a poner una transformación llamada scale donde tengo que especificar cuál es el factor de escala en x y en y si pongo 11 lo que estoy haciendo es dejar el objeto en su escala original si pongo 0.5 0.5 lo que estoy haciendo es escalarlo a mitad de pequeño si pongo 22 lo que hago se escalarlo al doble de grande por tanto escala lo que hace es intervenir en el tamaño del objeto ahora bien como estamos viendo cada vez que pongo una nueva transformación lo que hace es anular al anterior por tanto las transformaciones si quiero juntarlas si quiero colapsar las no tengo que ponerlas dentro de tres líneas diferentes sino que te ponerlas dentro de la misma línea por tanto pondría transform translate translate 100 píxeles espacio ‘rotateq’ 45 grados espacio escala 2 con 2 y de esa forma comprobamos como ahora tengo un día que está desplazado 100 como 100 píxeles que está rotado 45 grados y que está escalado al doble en x y al doble en y dentro de este mismo archivo de transformaciones vamos también a aprender a animar y una cosa que voy a decir es que probablemente vamos a empezar aprendiendo a animar con las transformaciones pero eso no es porque son las transformaciones se pueden animar sino que prácticamente cualquier propiedad numérica dentro de css va a poder ser animada así que permíteme de momento que me encargue la transformación porque ahora la voy a recuperar y voy a poner lo siguiente voy a poner animation dos puntos el nombre de la animación donde el nombre se lo asignó el nombre me lo invento yo 99 y por ejemplo voy a poner 2 segundos ahora lo que tendría que hacer es especificar cuáles la animación move mueve es decir que hace la animación mueve mueve por tanto lo que voy a hacer va a ser simplemente lo siguiente digo aquí frames 99 y los frames 99 atención que se pone una arroba al principio van a tener lo siguiente por ejemplo transforma translate pero píxeles 0 píxeles y todo esto va a estar y eso es un poco lo extraño de la etiqueta aquí frames todo esto va a estar al 0% de la animación fijémonos como aquí frames lo que hace es simplemente en este caso el 0 por ciento lo que hace simplemente poner esta condición en el 0 por ciento de la animación y ahora por ejemplo en 100% le voy a decir que se mueva 100 píxeles vamos a ver que ha pasado hasta este momento lo voy a recargar y en principio no pasa nada si no pasa nada y debería estarse moviendo esta caja hacia la derecha si no pasa nada es simplemente por la sencilla razón de que todavía se requieren algunas etiquetas de compatibilidad en ciertos elementos avanzados como por ejemplo es la animación así que simplemente lo que voy a hacer es lo siguiente ahora mismo estoy trabajando en chrome y chrome se basa en el motor de renderizado web webkit por tanto lo que voy a hacer es poner el prefijo webkit dentro de animación por tanto dado que ahora mismo estoy con el navegador web chrome y el navegador web chrome se basa en el motor de renderizado web web kit simplemente lo que tengo que hacer es poner un prefijo metido dentro de guiones llamado webkit y he llamado a la animación con webkit lo que tengo que hacer es llamar a los que frames con webkit también y por tanto ahora comprobamos como al recargar la animación la animación se ejecuta así que lo que he hecho simplemente es cargar la animación y la definición de la animación con un prefijo que se pone entre guiones llamado webkit por tanto webkit animation mueve mueve y luego he definido a los que frames de 99 con webkit tienen de momento esta animación que hemos puesto en la pantalla ahora la pregunta sería esa etiqueta de compatibilidad para que navegadores me sirve y para que navegadores por supuesto no me sirve y que etiquetas de compatibilidad otras aparte de ésta existen bueno en este caso lo que voy a decir va a ser lo siguiente en cuanto a etiquetas de compatibilidad existen varias la etiqueta webkit nos cubre el navegador chrome nos cubre el navegador safari y la versión next de ópera el navegador llamado ópera next si queremos trabajar con ópera en versión antigua tendríamos que poner una etiqueta llamada a esta etiqueta nos da compatibilidad con ópera en versión clásica ópera clásico la etiqueta move nos da compatibilidad con los navegadores mozilla firefox y derivados en definitiva aquellos navegadores web que están basados en el motor de renderizado gecko que es el motor que lleva a firefox por defecto y la etiqueta ms nos sirve para el navegador internet explorer por último lo queríamos exponer una versión sin etiqueta de compatibilidad para dejar esta etiqueta preparada para cuando los navegadores se actualicen y ya no haga falta etiqueta de compatibilidad voy a decir que esto es un poco rollo porque para cada elemento que requiere compatibilidad tendríamos que poner cinco etiquetas cada vez ojo y si hemos quintuplicado a esta línea también tendríamos que quintuplicar el código que escribiremos aquí así que esto es un poco rollo de momento pero es lo que hay bueno de momento voy a eliminar todo esto porque de momento como hoy estoy trabajando en chrome voy a asumir que solo hoy necesito la etiqueta webkit y vamos a continuar trabajando dentro de los he frames de la animación 99 para comprobar como a partir de ahí podemos crear la animación que queramos en este caso he creado una animación que va desde el 0% hasta el 100% pero lo divertido de las animaciones css es que podemos crear tantos pasos intermedios como queramos voy a hacer una demostración que siempre hago que es la siguiente voy a crear varios pasos intermedios por tanto voy a poner por ejemplo 25 por ciento cincuenta por ciento 75% en 0% voy a estar en 0 0 en 25% voy a estar en 100 0 en 50% voy a estar en 100 100 luego voy a estar en 0,100 y por último en 100% voy a estar en 0 0 lo que he hecho es introducir una serie de parámetros mirad donde en 0% estaré aquí en el 25 de estaré aquí que es 100 0 en el 50% estaré aquí que es 100 coma 100 en el 65% estaré aquí que es cero como 100 y en el 100% estaría ahí es decir que voy a hacer pues lo que voy a hacer es simplemente una animación con lo cual el objeto va a hacer un cuadrado va a hacer una animación cuadrada fijaos que recargo y el rectángulo hace exactamente la animación que había previsto que es simplemente ese rectángulo porque va tan lenta la animación al revés perdón porque va tan rápida la animación quiero que vaya más lenta pues la animación va así de rápida simplemente porque aquí arriba he dicho que la animación 99 debe durar 2 segundos si por lo que sea le digo que dure 20 segundos podréis comprobar como esa misma animación tarda bastante más en ejecutarse tarda bastante más en completarse y comprobamos como finalmente tenemos la animación en la pantalla como he dicho la transformación no es la única propiedad que se puede animar prácticamente cualquier propiedad en css se puede animar para animar más propiedades simplemente tengo que hacer lo siguiente en este caso le voy a decir que en 0% por ejemplo el background sea red en 25 el background va a ser blue el 50% el background va a ser green en el 75% el background va a ser pink y al 100% el background por ejemplo va a volver a ser red va a volver a ser rojo nos fijaremos como de esa manera ahora guardo y recargo tendremos que el objeto no solo va a ir cambiando de posición sino que también a la vez va a ir cambiando de color por tanto cualquier propiedad es perfectamente animales no realmente no todas son animales pero la gran mayoría de ellas sí que lo son la única dificultad sobre todo estriba a la hora de animar en que estamos animando mediante parámetros y esta manera de animar pues evidentemente es mucho menos visual que animar con el ratón animar de otras maneras como podríamos hacerlo directamente con animación de ratón

a continuación por tanto vamos a aplicar esto que hemos aprendido y para ello vamos a crear un archivo nuevo dentro del archivo nuevo y vamos a guardarlo en la carpeta 3 en la carpeta proyecto 3 que es variables aquí dentro vamos a crear agenda en este caso 03 puntos porque es la tercera versión de este proyecto y ahora voy a seleccionar todo el código que tenía dentro de agenda 02 lo voy a copiar y a continuación lo voy a pegar dentro de agenda 03 puntos tras lo cual le doy a guardar a continuación voy aa compilar los ff agenda 03 puntos y ahí tenemos el compilado dentro de la carpeta proyecto 3 y por tanto ahora apuntó out y vemos como recordamos que lo que teníamos hasta ahora es la presentación de un menú y se nos pide que especificamos una opción bien pues a continuación lo que voy a hacer es indicarle al sistema que voy a crear una variable de tipo char que contendrá una opción vale por eso voy a llamar char opción en este caso estoy creando una instancia en la memoria a través de una variable llamada opción y le digo que será de tipo char recordemos que este es uno de estos casos donde la palabra opción en castellano bien escrita tiene un acento en lado y de hecho recordamos que f tiene el soporte para único de pero sin embargo mi recomendación es no usar este soporte único de iu por cuestiones de retrocompatibilidad y dejar la palabra sin acentuar ahora lo que voy a hacer es introducir dentro de este char dentro de este carácter una opción la opción evidentemente puede ser uno dos tres cuatro o cinco no es necesario en este caso especificar qué opción va a ser una matriz de caracteres va a ser un arreglo de caracteres porque realmente no lo va a hacer es decir si de momento le estamos permitiendo al usuario que ponga desde el 1 hasta el 5 es un caracter en todo caso vale por tanto no hace falta que lo introduzca como una matriz a continuación vamos a hablar de un tipo un poco especial de digamos de espacios reservados en memoria que se llaman las constantes una variable como por ejemplo la opción es una porción de la memoria que está destinada a cambiar a lo largo del tiempo por eso recibe el nombre de variable porque no solo puede variar sino que además se espera que varíe entonces en este caso lo que hacemos es reservar este espacio de memoria y que digamos llamarlo opción las variables son caras desde el punto de vista de uso de la memoria son caras teniendo en cuenta que reservan un espacio que puede cambiar y por tanto ese espacio es mayor que si reservamos un espacio de la memoria que no va a cambiar este espacio de la memoria que se define que realmente es una constante es lo que se llama una constante lo implementamos a través en este programa concreto en este lenguaje de programación en concreto lo especificamos a través de una directriz que incluimos dentro de la primera parte del programa que vamos a llamar con defile si habíamos utilizado antes una directiva que es incluye para incluir una librería de operaciones en este caso usamos otra que es -define para definir por ejemplo un elemento que no va a cambiar que es algo que no va a cambiar pues por ejemplo digamos y entonces ponemos pi 3.14 16 es decir que es un número que no va a cambiar para de un aparente constante no hace falta poner el signo igual por cierto esto aunque nos puede confundir al principio sino que sabemos que pi es un número que nunca va a cambiar porque es un número constante no es un número que varía cada semana de esta forma podríamos haber declarado el número pi utilizando una variable de tipo flow sí pero para que utilizar una variable si sabemos que ese número no va a variar ahora podríamos haberlo hecho sí que podríamos haberlo hecho utilizando una variable y qué es lo que ocurriría si en lugar de utilizar una constante hubiéramos declarado una variable pues lo que ocurriría es que estaríamos utilizando más memoria de la bebida y estaremos estaríamos reduciendo el rendimiento del programa cuanto pues probablemente unos pocos microsegundos en cada ciclo de ejecución es decir prácticamente nada perceptible pero precisamente si estamos aprendiendo a programar en fe en lugar de aprender a programar en otros programas pero otros lenguajes de programación quería decir es porque probablemente el rendimiento final de nuestras aplicaciones nos importa vale por eso es por lo que no estoy explicando esto por ser turista sino por una cuestión de que en un momento dado utilizar la herramienta incorrecta pues nos puede conllevar una serie de penalizaciones insisto en el rendimiento de nuestras aplicaciones para lejos algo que no queremos así que en definitiva cómo podemos aplicar esto a nuestro programa pues por ejemplo la opción es una variable porque yo cuando vaya ejecutando el programa pues una vez que realizar otra vez querré eliminar otra vez que rebuscar otra vez que reintroducir va a variar la opción que yo escoja si no vengo por aquí y pongo defile y yo vengo ahora a continuación y escribo nombre programa tengamos en cuenta que por una cuestión de normalización y por una cuestión de buenas prácticas se recomienda que el nombre de las variables esté en minúsculas y el nombre de las constantes esté en mayúsculas esto es porque más adelante cuando usamos variables y constantes en el programa no se distingue que es una y que es otra vale por tanto de esta forma lo que hacemos es indicarle al programa mediante el uso de mayúsculas o minúsculas que es una variable y que es una constante así que nombre programa voy a llamarlo programa haciendo y ahora a continuación recordemos que cada una de estas líneas no lleva a un igual y no lleva un punto y coma al final puedo definir tantas constantes como necesite be fine version voy a poner 1 punto cero be fine y autor voy a poner josé vicente carratalá de esta forma de esta forma ahora por ejemplo dentro de esto de aquí que estamos viendo que pues pone programa agenda a versión 1.0 1 pues voy a poner lo siguiente voy a poner print efe voy a decir que programa agenda lo cambio por porcentaje s recordamos qué porcentaje ese es el formato es el formateado para imprimir cadenas para imprimir strings a continuación lo que voy a hacer es imprimir en este caso otra cadena que va a ser versión y por tanto pongo aquí una coma y pongo nombre programa como versión tengamos en cuenta que en este caso automáticamente el lenguaje de programación va a entender que el nombre programa no debe introducir en la primera cadena por qué pues porque está el primero en orden aquí y el primero en orden aquí y en el segundo en orden debe introducir la segunda variable que en este caso es versión vamos a comprobarlo volvemos a ejecutar la compilación volvemos a ejecutar el programa y vemos como nos dice programa agenda versión 1.2 y ahora a continuación lo que voy a hacer es copiar y pegar esta línea y voy a imprimir por ejemplo estoy aquí voy a poner por strings y voy a introducir el autor de esta forma recopiló se ejecutó y comprobamos como dice programa agenda versión 1.2 o versión 1.3 o versión lo que sea por jose vicente catalá y vemos por tanto como ya tenemos en nuestro programa implantado el concepto de en primer lugar una variable aunque de momento no la estemos utilizando para nada ahora a continuación la utilizaremos evidentemente y el concepto de constante donde sabemos que una variable valga la redundancia va a variar mientras que una constante no va a variar en toda la ejecución del programa ahora llega un momento muy interesante que es el momento en el que vamos a hacer que nuestro programa acepte entrada por parte del usuario vamos a hacer un pequeño ejercicio de demostración y ahora lo aplicamos sobre el proyecto que estamos desarrollando en este curso así que voy a crear una nueva carpeta voy a llamarla proyecto 04 a continuación voy a crear un nuevo archivo lo voy a guardar dentro de la carpeta proyecto 04 y lo voy a guardar como entrada punto ce lo guardo voy a copiar parte del código del ejercicio anterior eliminando las partes que no necesite las constantes y prácticamente todo el código de el método principal y así me quedo con esta especie como vemos de plantilla para un proyecto fe y a continuación lo que voy a hacer es lo siguiente print efe un simple mensaje que nos diga selecciona una tecla y a continuación voy a poner char selección ya sabemos sin acento por la cuestión del único de iu ahora voy a igualar selección en lugar de igualarlo a un carácter por ejemplo una g digamos vale lo que voy a hacer es poner una instrucción llamada get char que char que está dentro de la librería de std y punto h así que a continuación lo que voy a hacer es demostrar si es cierto que el programa ha capturado lo que yo le he dicho vale para ello voy a poner un print efe y voy a decir la tecla que has seleccionado es voy a poner porcentaje char porcentaje f que es el formato para los caracteres recordemos que antes hemos puesto porcentaje s cuando no teníamos un carácter sino que teníamos una cadena de caracteres pero en este caso yo sé que voy a un solo carácter por tanto el formato es porcentaje si pongo una contra barra n para bajar la siguiente línea y a continuación dentro del formato voy a poner selección una vez que hemos hecho esto ya lo tenemos tenemos aquí el retorno cero vamos a aprobar este programa vamos a ejecutarlo así que me voy a ir a la carpeta inferior me voy a ir a proyecto 04 voy a poner jefe entrada punto c tenemos ahí el ejecutable y ahora a continuación vamos a ejecutar el ejecutables eligen una tecla voy a ponerla por ejemplo y me dice la tecla que ha seleccionado es o bien en este caso lo que podemos hacer es el poner centrar una tecla voy a poner contra barra n voy a poner dos puntos esto simplemente por una cuestión estética vale poner puesto en cosmética de que pues como tenía yo de que se vea correctamente vale que de cara al usuario se vea mejor así que recopiló ejecutó de nuevo selecciona una tecla baja la línea de abajo lo vemos mejor voy a escribir la tecla t y a continuación me dice la tecla que ha seleccionado es la tecla t esto es importante porque pues porque de esta forma con esta instrucción llamada agachar podemos comprobar que realmente es cierto que el sistema está declarando una variable y dentro de esa variable no está metiendo algo que yo digo en el código del programa sino que es el propio usuario de la aplicación ya ha compilado el que a través de que se puede comunicar con la aplicación por tanto hasta ahora nuestras aplicaciones digamos eran capaces de comunicarse con el usuario es decir la aplicación puede escribir algo en pantalla y el usuario lo ve pero ahora también nuestras aplicaciones van a ser capaces de aceptar input por parte del usuario a aceptar información por parte del usuario por supuesto introduciendo varias estrategias pero de entrada como mínimo pudiendo escribir un gadget pudiendo escribir un carácter en la pantalla antes de continuar con el ejercicio principal quiero hacer una pequeña pausa y quiero explicar un par de cosas que no es que esté dando por hecho todo el rato pero sí que estoy diciendo todo el rato que más adelante les explicaré y quizás empieza ya a ser un buen momento para explicarlas por ejemplo a lo largo de los ejercicios hasta ahora hemos hablado de los forma te adores y hemos dicho que al intt le corresponde a una y al flow le corresponde una f al string se le corresponde una s y al char le corresponde una fe pero la pregunta que te puede surgir es bueno cuantos cuantos forma tres de estos hay cuántos formatos de print efe hay pues lo que voy a hacer es abrir una nueva pestaña de un buscador y voy a buscar en este caso si for matters si lo buscamos en inglés probablemente lo vamos a encontrar con más facilidad que en castellano así que si voy por ejemplo la página de la wikipedia print formato string veremos que veremos que por aquí abajo hay una tabla es esa tabla de aquí que nos dice los diferentes tipos de forma te adores que existen en fe vemos que no hay muchos más de los que ya conocemos con lo cual estoy sacando esta tabla para nuestra tranquilidad tengamos para que no pensemos alguno pero sabemos ya cuatro forma te adores pero cuantos hay para aprender hay cuatro mil hay cuarenta mil pues no hay unos pocos vale en este caso podemos comprobar como él y sirve para números enteros podemos comprobar como en la fe sirve para números dobles interesante ya veremos más adelante de ello que el doble el double el número doble no es con una vez sino con una e tenemos también en el doble el double en notación exponencial tenemos también en formato hexadecimal tenemos en forma total vemos que la s ya la sabíamos que es para strings vemos que la fe la que vamos a utilizar es para carácteres tenemos la p para punteros más adelante hablaremos de esto es una de las partes más interesantes del curso y en definitiva en definitiva vemos como si tenemos curiosidad por saber cuántos tipos de formatos hay pues lo podemos averiguar rápidamente y pienso quiero espero que para nuestra tranquilidad veamos que no hay muchos no hay demasiados que aprender y aparte son fáciles de aprender otra de las cosas de las que quiero hablar antes de continuar el curso es que en todo momento estoy haciendo referencia a esta librería standard input output como una especie de librería mágica a la cual me refiero diciendo que no podemos hacer cosas si no la hemos importado entonces este concepto es un poco oscuro desde el punto de vista en el que no sabemos exactamente ahora mismo todavía qué es lo que tiene estándar input canal pues no sabemos cómo de importante o no importante es entonces podría estar trabajando sin estándar input output lo necesito realmente que es esa supuesta maravilla que es estándar o punto h bueno pues si saco otra ventana del buscador y a continuación pongo spv h encontraremos la propia página de la wikipedia por supuesto hay otras muchas páginas que también nos lo pueden contar pero encontramos la propia página de la wikipedia que nos dice que standard input output header es el archivo de cabecera que contiene definiciones de macros constantes hemos utilizado una constante por tanto no podríamos haber utilizado una constante si no hubiéramos utilizado pues como vemos está esta librería si empezamos a ver qué es qué funciones tiene este archivo veremos que habrá funciones que más adelante nos interesaran mucho es la que nos permite manipular archivos vemos que tenemos tenemos vamos a ver por aquí tenemos get up la acabamos de utilizar no podríamos haber utilizado que echar si no hubiéramos importado previamente estándar input output tenemos por supuesto print efe y sus variaciones que son efe print fs print y sn print efe no podríamos haber utilizado esta esta impresión a través de la pantalla si no hubiéramos importado previamente esta librería entonces en definitiva gracias a este listado podemos obtener pues eso un listado de funciones que nos aporta standard input output punto h una vez más para que nos quedemos tranquilos para que yo no diga simplemente es imprescindible que pongamos estándar input puntual y que nuestros diarios no pero por qué por qué es importante porque es imprescindible justificarlo vale pues si sacamos una sencilla lista de funciones que incluye estándar y muy puntual veremos que tanto para salida como para entrada pues ya vale la pena utilizar esta librería vale por tanto el estándar input output no es la librería mística ni una librería desconocida sino que simplemente tenemos que poner su nombre en un buscador y fácilmente vamos a encontrar la página de la wikipedia que nos dice que nos da un listado detallado de exactamente qué contiene esta librería y por qué es tan importante para desarrollar pues prácticamente cualquier programa en fin ahora a continuación vamos a aplicar lo que hemos estado aprendiendo dentro de dentro de lo que hemos hecho digamos antes de ello antes de ello voy a crear otro programa voy a llamarlo entrada voy a guardarlo esto lo guardo en proyecto 4 lo guardo como entrada 2.0 vale voy a copiar el código voy a pegarlo aquí y bueno hemos visto que gracias al código anterior podemos en este caso introducir pues un carácter pero la pregunta es y si yo quisiera introducir una palabra por ejemplo y si yo pongo char nombre es igual a richard y el nombre que has introducido reducido es dos puntos nombre voy a intentar ejecutar este programa entonces jefe entrada 2 ejecutamos seleccione una tecla debería decir introduce un nombre así que control ce para terminar la ejecución vuelvo a compilar vuelvo a ejecutar introduce un nombre pues jose vicente bien y nos dice el nombre que has introducido es jota por qué pues porque sabemos que la variable de tipo char es una variable que únicamente acepta un carácter y por tanto pues solo nos representa el primer carácter de todo aquello que he escrito y gracias que no ha dado error y gracias que no ha dado error y se ha quedado con el primer carácter porque podría haber dicho te he pedido un carácter y tú no has metido un carácter sino que has metido un conjunto de caracteres bien pues en este caso a continuación lo que voy a hacer es especificar que voy a utilizar otra función un poco más un poco más completa para no sólo un carácter sino algo más complejo es decir si vengo por aquí a nombre y le digo que esto ya no es una y como vemos aquí ya no es un carácter sino que es una matriz por ejemplo un arreglo voy a decir que tenga 100 caracteres voy a volver a compilar el código probablemente va a dar error y aquí tenemos el error y lo que nos dice es esto no me cuadra es decir tú me has dicho que esto iba a ser de tipo char bien vale hasta aquí bien se ha convertido en un arreglo de caracteres se ha convertido en un conjunto de caracteres sitúa este conjunto de máximo 100 caracteres le estás queriendo añadir le está escribiendo igualar un quetzal entonces el programa se queja porque dice esto no es posible es decir tú aquí me dices conjunto de 100 caracteres pero aquí me dices me permite es un principio que me vas a meter un carácter y no me cuadra las cosas no cuadran vale por tanto y echar está bien para cuando queremos introducir un carácter pero si queda pequeño para cuando queremos introducir cosas más grandes dentro de la librería estándar input-output punto y hay más cosas hay más más utilidades de las cuales podemos hacer uso así que voy a poner por aquí char nombre de momento realmente lo que estoy haciendo es reservar un arreglo de máximo 100 caracteres y ahora voy a utilizar una función scan efe se le echamos un vistazo de nuevo a standard imputan otros veremos que scan efe sigue formando parte de esa librería y dentro de scan efe lo que hago es poner el porcentaje s como nombre es khan efe scan viene de escanear como cuando utilizamos un escáner que metemos información dentro del ordenador como pues lo que hace es esto lo que hace es pedirle información al usuario escanear la entrada del usuario decir que va a estar en formato string podemos especificar incluso el formato en el cual vamos a introducir la información y la información que meta el usuario la va a introducir dentro del nombre así que ahora a continuación voy a volver a compilar sigo teniendo un error aquí el programa hablemos del así que compiló de nuevo y ahora nos dice que tengo otro error y nos dicen tú aquí estás metiendo un string de hecho está claro que esto es un string es un arreglo de caracteres pero sin embargo luego en el formateado específicas que vas a introducir un solo carácter y una vez más esto no cuadra vale no cuadra qué nombre lo esté declarando como string como cadena de caracteres pero luego en el formateado diga que supuestamente va a ser un carácter porque no es cierto vale como vemos por cierto y aprovecho este momento para decir que este error hubiera pasado completamente desapercibido en cualquier otro lenguaje de programación de un nivel superior pero en fe no en fe hay que tener mucho cuidado con estas cosas así que ahora simplemente lo que hago es que cambio la fe por una s cambió el carácter por un string vuelvo a compilar y ahora ejecutó y nos dice introduce un nombre el nombre es josé vicente y nos dice el nombre que has introducido es jose bueno en este caso cuidado con el espacio vale porque simplemente el sistema no está cogiendo el espacio como como un elemento es decir si era pong o si era vuelve a ejecutar jose vicente no pasa nada porque esto más adelante lo podemos arreglar voy a poner servicios de todo seguido el nombre que has introducido es josé vicente vale de momento vamos a vamos a quedarnos con esto y simplemente lo que queremos es por eso tener en cuenta aquí en contra barra en ella lo tengo simplemente lo que quiero de momento es saber que somos capaces de atrapar una entrada de texto y por tanto no estar atados no están restringidos a únicamente poder un solo carácter bien pues ahora lo que vamos a hacer es aplicar este conocimiento al proyecto que estamos desarrollando en el curso así que a continuación me vengo por aquí voy a crear un nuevo proyecto lo voy a guardar como lo voy a guardar dentro de escritorio dentro del proyecto 4 se va a llamar agenda 0 4 puntos y voy a copiar le el código que tenía en la última versión de la agenda así que me voy a agenda 3 selecciono todo el código copio me voy a agendar 4 lo pego y a continuación lo que voy a hacer es especificar que este char opción es igual a richard que yo haya explicado en último término el scan efe no quiere decir que siempre scan efe sea mejor porque fijémonos que en este programa lo que el usuario va a introducir es un carácter entre 1 y 5 para que utilizar un scan efe para meter un string para que utilizar un arreglo de caracteres cuando en este caso está claro que puedo resolver el problema con un carácter es decir explicado primero que echar y luego scan efe no para decir que uno es peor y otro es mejor sino para explicar qué es lo que hace cada uno y para que podamos elegir cuál es el que más nos conviene en cada momento así que por esto a continuación lo que voy a hacer es decir qué efe la opción que has seleccionado es la o es dos puntos porcentaje f ya sabemos qué porcentaje f es el formato para el char y la opción así que guardo voy a compilar y de esta forma voy a asegurarme que lo tengo todo correcto voy a hacer un client gfc agenda 4c ahora a continuación ejecuto y nos dice es seleccionar la opción listado de registros tiene por ejemplo la opción 1 pulso enter y me dice la opción que ha seleccionado es la 1 y de esta forma el programa a continuación sabe cómo operar desde el punto de vista en el cual está preparado para a continuación especificar qué es lo que va a ocurrir en el momento en el que haya seleccionado esa operación a continuación dentro de la siguiente parte de este curso vamos a explicar un par de herramientas que están presentes en cualquier lenguaje de programación y que de hecho dentro de dentro del lenguaje de programación se lo que voy a explicar a continuación no está incluido dentro de la librería estándar input output punto y yo como prácticamente cualquier cosa que hemos utilizado hasta ahora sino que son partes que pertenecen al núcleo del propio lenguaje de programación como son los operadores y cómo son las estructuras de control así que para eso voy a crear la carpeta proyecto 05 dentro de la carpeta proyecto 05 voy a crear un nuevo archivo voy a guardarlo dentro del proyecto 05 voy a llamarlo en este caso operadores operadores 0 1 punto y voy a copiar digamos lo que sería esta pequeña plantilla de un programa escrito en fe para digamos no tener que escribirlo desde el principio sino siempre partir desde esta pequeña plantilla de hecho incluso para próximas veces lo que puedo hacer es guardarme este archivo dentro de la propia carpeta como plantilla punto c ahí la tengo y así prácticamente la puedo recuperar para cualquier proyecto que haga a partir de ahora bien pues vuelvo a cargar operadores 0 1 puntos y los operadores en definitiva son operaciones que nos permiten combinar diferentes elementos en este caso por ejemplo voy a crear dos números número 1 que es de tipo entero que es igual al número entero 4 y número 2 que es igual al número 5 por ejemplo o al número 3 hasta aquí lo que he hecho es declarar dos variables de tipo entero y asignarles un valor de hecho técnicamente esto que he utilizado aquí ya es un operador lo había comentado anteriormente voy a hacer un clic aquí y simplemente este operador que tenía hasta ahora lo que hace es que asigna un valor a una variable bien pues vamos a ver una serie de operadores los más sencillos para empezar son los operadores aritméticos son como digo muy sencillos de utilizar porque básicamente contienen las operaciones matemáticas más conocidas que solemos utilizar así que el resultado es igual a número uno más número dos en este caso la cruz el signo más nos sirve para invocar al operador aritmético de suma así que habrá a continuación digo print s el resultado de la operación es porcentaje contra barra n y coma y voy a poner aquí a continuación el resultado así que si ahora compiló todo esto ya sabemos que cargo la nueva carpeta cargo proyecto 5 voy a ejecutar jefe esto es operadores 0 1 y ahora ejecutó y nos dice el resultado de la operación es 7 esto que he hecho parece una tontería pero realmente no lo es porque una de las formas de definir un programa informático es mediante el modelo de caja negra la caja negra es un programa informático que en un momento dado acepta una entrada realiza un cálculo y saca una salida queriendo decir que un programa informático en definitiva es una entidad que calcula cosas que transforma información y los operadores en este caso el operador aritmético de suma pues es una de las primeras demostraciones de que realmente con este lenguaje de programación puedo realizar estos cálculos bueno tengo ya por aquí el operador aritmético de suma vamos a continuación voy a guardar esto como vamos a ver aquí operadores 0 2 y voy a decir que en este caso voy a cambiar el signo manos por un guión el guión es el operador aritmético de resta así que compiló el número 2 y el resultado de la operación es 1 porque es cierto que 4 – 3 es igual a 1 teníamos la suma teníamos la resta vamos a continuación a por la multiplicación entonces creó el archivo operadores 03 12 y voy a reemplazar el guión por un asterisco el asterisco en fe como en muchos otros lenguajes de programación representa a la operación aritmética atracción matemática aritmética de multiplicar entonces ejecutó con pilot la versión 3 ejecutó y nos dice que el resultado de la operación es 12 que es 4 por 3 ya tenemos esto vamos a por la división que es la cuarta de las cuatro operaciones principales creó el archivo operadores 0 4 y la división entre como en muchos otros lenguajes de programación está representada por la barra no confundir con la contra barra que es esta de aquí sino con la barra que suele salir con mayúsculas 7 el teclado así que ahora a continuación con pilot la versión 4 ejecuto de nuevo y cuidado vale porque nos dice en este caso que que el número que nos sale es 1 cuando no es cierto 4 entre 3 a 1 y decimales pero hay un problema y es que nosotros hemos dicho que el número 1 es un entero el número 2 es un entero y el resultado es otro entero y sabemos que los enteros no llevan decimales así que lo que estamos haciendo en definitiva es machacar digamos el resultado yo voy a poner por aquí la palabra reservada float en este caso voy a volver a compilar pero hay un problema tenemos un error de compilación y es que hemos dicho que ahí lo que íbamos a sacar es un entero pero el resultado el 9 es un entero es un float así que pongo una f vuelvo a compilar y ahora vuelvo a ejecutar y ahora nos dice que el resultado de la operación es 1 vale es recomendable que pongamos flow tanto en el número 1 como en el número 2 vamos a recopilar vamos a ejecutar y ahora así si todos los números tienen el formato correcto es decir si tanto número 1 como número 2 son de tipo flow y el resultado también es de ypf load observamos como ahora el resultado de la operación es matemáticamente correcto técnicamente al dividir 4 entre 3 sale como a 1,333 periodo pero el momento que el programa por los propios datos que acepta el flow simplemente corta a partir del sexto decimal y ya está y digamos no nos saca más decimales hay otro otro tipo de operador matemático muy curioso que es el resto entero de la división atención que estoy aludiendo directamente a la palabra entero que quiere decir esto en este caso lo que voy a hacer es que manteniendo número uno como float y manteniendo número dos como float voy a decir que el resultado es porcentaje poner un porcentaje no implica que este número es el porcentaje de este sino implica que estoy invocando al resto entero de la división cual es el resto entre la visión pues 4 entre 3 cabe a 1 y sobra 1s y sobra uno es el resto entero de la división asiste a continuación voy a compilar bien vamos a ver y nos dice que en este caso para esta vamos a ver para ésta división nos da un error vamos a ver y flow resultado como entero vamos a ponerlo como entero y vamos a ponerlo como entero vale ahora re compilamos bien así y evidentemente esto ya no puede ser un entero sanz flotante quería decir ahora recopilamos ejecutamos y ahora si el resultado de la operación es 1 porque recordamos que voy a ponerlo por aquí 4 / 3 cada uno y sobra uno este y sobra uno abre por aquí unos asteriscos para remarcarlo es lo que es lo que estamos sacando ahora mismo y sobra uno es realmente el resultado de sacar el resto entero de la operación los operadores matemáticos son los más sencillos pero no son todos los que hay hay unos operadores muy divertidos realmente y muy útiles lo veremos más adelante que son los operadores de comparación para ello voy a hacer lo siguiente voy a crear un nuevo documento lo voy a guardar con el nombre de operadores 06 en este caso voy a copiar el código de operadores 05 bien y voy a hacer lo siguiente a continuación lo que voy a hacer es que voy a introducir en comparación es igual y voy a poner número uno doble igual voy a poner dos veces igual número dos las dos veces igual no tiene nada que ver con la una vez igual poner el operador una sola vez es el operador de asignación poner el operador igual dos veces es el operador de comparación mediante la comparación lo que estoy haciendo es preguntarle el sistema es cierto que el número uno es igual que el número dos vamos a verlo a continuación pongo por aquí comparación voy a hacer un clic voy a compilar operadores 06 puntos ejecutó y me dice el resultado de la comparación es 0 donde en este caso lo que va a hacer es poner 0 si es falso y 1 si es verdadero entonces lo que le estamos preguntando realmente al programa aquí es es cierto que número 14 es igual que número 2 que es 3 y el resultado en este caso ha sido falso si yo a continuación pongo aquí 4 digo estos 4 y estos 4 y le pregunto al programa es cierto que 4 es igual a 4 recopiló el programa ejecutó el programa y nos dice que el resultado de la operación es 1 donde recordamos que la forma que tiene de comunicarse el lenguaje de programación con nosotros es indicando que el 0 es falso y el 1 es verdadero hay otro tipo de comparación que es una comparación más estricta así que ahora a continuación me voy a guardar como me voy a operadores 7 y voy a decir que número uno es igual a cuatro es el agua arriesgado y voy a decir que echar número dos es 4 así que a continuación realizó una comparación esto probablemente va a dar error para 37 perdón y ahí lo tenemos lo que nos dice es no puedes comparar un dato contra otro simplemente lo que quiero apuntar en este caso es que hay una igualdad que es la triple igualdad que no funciona cuando de hecho vemos aquí que ni siquiera nos deja x type por tipo vamos a poner texto que no va a hacer nada realmente pero tenemos vale es básicamente la triple igualdad nos sirve para especificar que queremos también comparar el tipo de datos con los que estamos trabajando pero hay más comparadores voy a devolver esto como estaban hay más comparadores como por ejemplo el comparador de menor que mayor que menor o igual mayor o igual así que estoy diciendo es cierto que número uno es menor que número cuatro es cierto que 4 es menor que 3 lo cierto es que no es cierto vale así que en este caso voy a compilar operadores 7 voy a ejecutar y nos dice que no es cierto vale es falso sin embargo si yo pongo mayor que recopiló ejecutó y nos dirá que es verdadero porque sí que es cierto que 4 es mayor que 3 ahora es cierto que 4 es igual que 3 no ya sabemos que no es cierto pero es cierto que otra vez es cierto qué 4 es mayor o igual que 3 bueno pues en este caso vamos a ejecutar vamos a primero compilar evidentemente y luego ejecutar y vemos que es cierto porque cuando pongo mayor o igual lo que estoy haciendo es validar como cierta la expresión de que o bien es mayor o es igual en este caso no es cierto que es igual pero sí que es cierto que es mayor y por eso el resultado da 1 y por último voy a poner menor o igual recopiló ejecutó y nos dice que es cero porque en este caso no es cierto ni que 4 sea menor que 3 ni tampoco es cierto que sea mayor que 3 o igual que 3 quería efe bien vamos a por ello vamos a por ello a partir de aquí vamos a ver nuevos operadores que son los operadores lógicos dentro de f vamos a trabajar con los operadores lógicos y para ello voy a hacer una nueva versión de este proyecto operadores 08 puntos y voy a decir lo siguiente vamos a especificar en este caso que tenemos un número tres es igual a dos y el número cuatro es igual a seis por ejemplo así que yo ahora vengo y digo en comparación te voy a especificar qué número 1 es menor que 4 que voy a poner el operador lógico y andy que son 2 ampersand voy a poner número 3 es menor que número 4 y lo que estoy preguntando con esta expresión tan aparentemente compleja pero que sin embargo veremos que es muy útil en términos de permitirnos construir programas es es cierto que número uno es menor que número dos y que número tres es menor que número cuatro vamos a verlo vamos a compilar la versión 8 vamos a ejecutar y nos dice que no es cierto porque no es cierto pues no es cierto porque para que esta expresión sea cierta ésta sube expresión tendría que ser cierta y ésta tendría que ser cierta sí que es cierto que número 3 es menor que número 4 pero no es cierto que número 1 sea menor que número 2 con lo cual lo que ocurre es que para que esta expresión de cierta todo lo de aquí dentro debe dar cierto ahora bien hay otra hay otro operador lógico que es el que se pone con las dos barras verticales las dos barras verticales se ponen con la tecla al xerez y con el número 1 del teclado y ahora a continuación digo es cierto que el número 1 es menor que el número 2 y el número 13 es menor que el número 4 pues recopiló ejecutó y nos dice que es cierto porque no es cierto que el número 1 sea menor que el número 2 pero sí que es cierto que el número 3 es menor que el número 4 si bien el operador lógico andy exige que todo sea igual todo sea cierto para que la expresión global sea cierta el operador lógico ahora con que una de las expresiones sea cierta la expresión global es cierta esto veremos que parece un poco lioso pero realmente a la hora de la verdad realmente no lo es y hay otro operador un operador lógico que es el operador not el operador not la negación lo que hace es cambiar la igualdad vamos a verlo en otro siguiente ejercicio voy a guardar esto como operador extra 9 vale y a continuación lo que voy a hacer es lo siguiente una comparación más aparentemente sencilla ya teníamos la igualdad de número 1 preguntamos si es igual que número 2 así que compilamos y recordamos que no es igual pff ahora lo que voy a hacer es cambiar uno de los iguales por un signo de admiración y voy a decir ya atención a la frase que voy a utilizar porque es compleja pero es lógica es cierto que número uno no es igual a número dos o sea es cierto que 4 no es igual al número 3 pues es cierto entonces si número 4 no es igual a número 3 en este caso la comparación da verdadera es un poco pensarlo al revés así que vuelva a compilar operadores vuelvo a extraer y cómo podemos comprobar el resultado de la operación es 1 como podemos ver el operador lógico lo que nos permite es comprobar si algo es igual nos permite comprobar si algo no es igual o nos permite comprobar en definitiva la igualdad entre múltiples elementos con el operador o con el operador andy o con el operador

a continuación vamos a ver una de las cuestiones que más interesantes me parecen con respecto al trabajo con cualquier lenguaje de programación realmente que son las estructuras de control el flujo de la ejecución tiene un nombre bastante extraño pero sin embargo ahora veremos que son elementos muy útiles entonces voy a crear una carpeta llamada proyecto 06 proyecto voy a crear bueno voy a copiar esta plantilla voy a crear un nuevo archivo lo voy a guardar dentro de escritorio dentro de fe dentro del proyecto 06 como estructuras 0 1 punto pero guarda aquí bien y ahora a continuación pego la plantilla y voy a empezar a trabajar y voy a empezar a presentar las diferentes estructuras de control del flujo de la ejecución que tenemos dentro de este lenguaje de programación que básicamente por otra parte yo diría como ahora vamos a ver que son prácticamente las mismas estructuras de control que tenemos en cualquier otro lenguaje la primera estructura de control que vamos a encontrar se llama estructura de control condicional ya que realmente es la estructura de control que está dentro del grupo de las estructuras de control condicionales y básicamente lo que hace es no ejecutar del tirón todo el código que hayamos puesto dentro del programa como hemos hecho hasta ahora sino que permite decidir cuando ejecutamos unas partes y cuando ejecutamos otras voy a escribir lo siguiente voy a escribir if que en español sería algo así como si condicional a continuación un paréntesis que se abre y un paréntesis que se cierra y dentro de este paréntesis voy a poner la condición que se debe cumplir a continuación voy a poner una llave que se abre y otra que se cierra y lo que voy a hacer es incluso poner else en caso contrario y otra llave que se abre y llave que se cierra así que voy a poner un pequeño comentario voy a decir esto se ejecuta en el caso verdadero esto se ejecuta en el caso contrario en el caso falso digamos qué es el caso verdadero y el caso falso pues lo que sea verdadero lo que sea falso de hecho ya lo hemos empezado a ver anteriormente con las expresiones con las comparaciones con superadores bolea nos es lo que yo ponga dentro del if así que por ejemplo voy a poner int edad es igual a 42 lo que hago es crear una variable del tipo entero llamada edad a la cual le asignó el valor 42 y yo ahora utilizando las utilizando las expresiones julianas utilizando los operadores volea nos por ejemplo voy a decir si edad es igual a 40 en este caso voy a ejecutar el caso verdadero en este caso lo que haré sprint efe es cierta la afirmación y en caso contrario diré print efe la afirmación no es cierta recordamos poner punto y coma al final de cada una de las instrucciones así que ahora a continuación voy a meterme dentro del proyecto 06 voy a compilar este archivo y ahora ejecutó el programa voy a poner contra barra n para asegurar que siempre la aplicación acaba con un retorno de carro así que la vuelva a ejecutar y dice ah cuidado por supuesto la tengo que recopilar y luego la ejecutó ahora sí y dice la afirmación no es cierta este es un gran momento desde el punto de vista en el que acabamos de comprobar como no siempre ejecutamos la misma parte del código sino que podemos elegir cuando ejecutamos una parte del código y cuando ejecutamos otra en este caso hemos preguntado si la edad es cierta en el caso de que hubiera sido cierto hubiéramos ejecutado esta parte del código pero como no ha sido cierto hemos ejecutado esta parte del código de aquí vamos a ver vamos a profundizar más en el uso de él básicamente una última demostración voy a poner edad es igual a 42 en este caso vuelvo a compilar vuelvo a ejecutar y nos dice que en este caso la afirmación es cierta comprobamos cómo podemos ejecutar una pieza del código u otra pieza del código dependiendo de lo que vea aquí esta evaluación una de las cosas más divertidas de la estructura condicional if es que se puede anidar de hecho dentro de lo que se consideran buenas prácticas en la programación nuestra algo que de lo cual hablaremos mucho más adelante pero se considera una buena práctica no anidar es decir no hacer lo que yo voy a hacer a continuación sin embargo teniendo en cuenta y siendo consciente de esto mi objetivo ahora mismo es mostrar esto es decir mi objetivo ahora mismo es demostrar que se pueden anidar estructuras de control para ello voy a guardar esto como estructuras 0 2 puntos y a continuación voy a decir edad es igual a 42 y voy a decir si edad es menor que 20 en este caso print efe eres era una persona muy joven y a continuación voy a poner ya no eres una persona muy joven así que vamos a compilar quiero compilar estructuras 2 ejecutó y en este caso me dice ya no eres una persona muy joven es decir este programa está reconociendo dos rangos de ejecución si edad es menor que 20 ejecuta algo y si edad es mayor que 20 mayor o igual que 20 de hecho ejecuta otra cosa tengo digamos dos rangos de edad dos respuestas menor que 20 y mayor que 20 pero y si quiero por ejemplo cuatro rangos de edad pues la idea de la anidación es que yo me puedo meter dentro del if insisto una vez más lo voy a repetir miles de veces hace falta la importancia de anidar correctamente el código para saber qué código está dentro de qué otro código así que voy a poner otro y estoy poniendo otro y dentro del anterior con su el correspondiente de hecho puedo poner otra vez esto se ejecuta en el caso verdadero y esto se ejecuta en el caso falso y voy a decir si edad es menor que bien en ese caso lo que voy a hacer voy a copiar este printer fe de hecho es algo así como plantilla y ahora dentro de éste el para quitar este frente que ya no sirve dentro de dentro de este els puedo copiar y pegar de nuevo este if els en este caso con edades menor que 30 así que ahora voy a decir lo siguiente si that si es cierto qué edad es menor que 20 y además es cierto que edad es menor que 10 eso quiere decir que mi edad está entre 0 y 10 entonces voy a poner eres un niño si edad es menor que 20 pero no es cierto qué edad es menor que 10 eso quiere decir que mi edad está entre 10 y 20 y por tanto voy a poner eres un adolescente en caso contrario si edad no es menor que 20 pero era a veces menor que 30 si es falso que edad es menor que 20 pero es cierto que edad es menor que 30 eso quiere decir que mi edad está entre 20 y 30 y entonces voy a poner eres un joven y si edad no es menor que 20 y tampoco es cierto que es menor que 30 eso quiere decir que mi edad es de 30 en adelante y por tanto ya no eres tan joven vemos como he pasado de tener un caso cierto aún ni un caso falso a tener realmente cuatro casos y de hecho podría repetir esta animación tantas veces como me hiciera falta para cubrir todos los casos que fueran posibles una vez más recuerdo que según las reglas de buenas prácticas en programación en principio no está recomendado anidar pero sabiendo esto mi objetivo ahora mismo es demostrar que técnicamente es posible anidar así que ahora a continuación voy a volver a compilar estructuras 2 voy a ejecutar y en este caso como edad es igual al 42 me dice ya no eres tan joven pero si edad fuera igual a 2 recopiló y ejecutó me dice eres un niño si edad fuera igual a 12 recopiló y ejecutó me dice eres una adolescente y ciudad fuera igual a 22 en ese caso recopiló y ejecutó me dice eres un joven y si edad es igual a 52 pues evidentemente me dice ya no eres tan joven en definitiva queda demostrado que la estructura de control if en un momento dado nos puede dar mucho juego y de hecho como digo es una estructura de control muy ampliamente utilizada dentro de la programación precisamente porque nos permite controlar qué partes del código se van a ejecutar y qué otras partes del código no se van a ejecutar hay veces en las que cuando realizamos una validación la respuesta de esa validación no es verdadero o falso por ejemplo si yo digo es cierto que tienes menos de 30 años la respuesta es verdadero o falso pero si yo pregunto por ejemplo qué día de la semana del psoe la respuesta no es verdadero o falso es cierto que podría preguntar es cierto que es lunes es cierto que es martes es cierto que es miércoles es cierto que es jueves pero esa estructura realmente acabaría siendo ese tipo de peticiones acabarían siendo bastante ineficientes dentro de que existen otros lenguajes de programación como por ejemplo python del cual habló en otro curso no tienen estructura de control suites que es la que voy a presentar ahora porque consideran que realmente es una repetición de la estructura if pero el caso es que en fe que es donde estamos ahora mismo sí que hay esta estructura de control que voy a presentar a continuación que es la estructura de control switch así que a continuación voy a borrar este código y voy a decir que creó una variable llamada día de la semana y voy a decir que hoy por ejemplo es el día 4 no hoy es el día 5 de la semana así que a continuación lo que voy a hacer es que en lugar de poner una digamos una validación y voy a poner suites voy a poner suites voy a poner paréntesis un paréntesis que se abre otro que se cierra para introducir lo que voy a validar a continuación una llave que se abre y otra que se cierra y aquí dentro voy a evaluar día de la semana y no hace falta que como en el caso del if ponga un igual a algo no porque simplemente el switch lo que va a hacer es evaluar mediante diferentes casos lo que tenemos dentro de los paréntesis ahora un momento que es me apuesto doble sangría ahora a continuación voy a poner el caso así que en el caso 1 es decir en el caso de que el día sea el lunes voy a poner print efe fijémonos como en este caso brackets me está sangrando automáticamente lo cual es bueno lo cual es positivo voy a decir print efe hoy es lunes que es el peor día de la semana bien a continuación voy a poner diferentes casos caso caso caso caso caso voy a poner un poquito más despacio bien caso 234 6 7 y nos faltaría el día 2 ponga que es martes y es el peor día de la semana voy a poner conocéis el fortín es miércoles colegas voy a poner el caso 4 ya casi es viernes y ya casi estamos en el fin de semana voy a poner el sábado hoy es el mejor día de la semana y en el domingo voy a poner parece mentira que mañana ya sea lunes así que en este caso voy a ejecutar este código y he cometido por cierto un error de forma de forma voluntaria vamos a hacer lo siguiente vamos a ejecutar este código vamos primero a compilar lo estructuras 3 a continuación con pilot el código y dice ya casi estamos en el fin de semana que es el caso 5 es correcto pero a continuación dice hoy es el mejor día de la semana parece mentira que mañana sea lunes por cierto vamos a recordar poner el carácter de salto de carro bien así que voy a volver a ejecutar voy a volver a compilar y voy a volver a ejecutar y dice ya estamos casi ya casi estamos en el fin de semana esto es correcto pero hoy es el mejor día de la semana y parece mentira que mañana ya sea lunes cuando trabajamos con la estructura de control suites al acabar cada caso este es el error que he cometido voluntariamente hay que poner una instrucción break break quiere decir que una vez que ha cumplido su cometido en lugar de continuar ejecutando el resto de casos como de hecho habéis visto que ha hecho lo que quiero decir con break es ejecuta lo que tienes que ejecutar y salte vale y salte es finaliza la ejecución de este bucle así que pongo un break tengo que poner un break después de cada uno de los casos al finalizar cada uno de los casos ves que estoy sangrando para que se distinga correctamente que cada break con él pertenece a un caso y ahora a continuación perdón a continuación recopiló ejecuto y dice ya estamos casi en el fin de semana día de la semana es uno pues recopiló ejecutó hoy es lunes que es el peor día de la semana voy a poner día de la semana se iguala seis recopiló ejecutó hoy es el mejor día de la semana y bueno la estructura de control suites tiene o puede tener un pequeño problema que es que ocurre cuando le proporcionamos un caso que no es válido día de la semana es igual a 8 así que voy a recopilar voy a ejecutar y simplemente este programa no devuelve nada no devuelve nada porque el switch estaba preparado para tomar los casos desde el 1 hasta el 7 pero el switch no sabe qué hacer con cualquier caso que se salga de estos casos previstos por eso la estructura de control switch tiene un caso llamado default ponemos default dos puntos esto cambia un poco en cada lenguaje es decir prácticamente en cada lenguaje que tiene el switch hay un caso default como ponerlo es lo que sintácticamente varía pero aquí se pone el default dos puntos y luego print efe lo que has introducido no es un día válido de la semana contra barra n pongo un break aunque técnicamente no haría falta porque es el último caso pero bueno es una buena costumbre ponerlo así que ahora con pilot ahora ejecuto y dice lo que has introducido no es un día válido de la semana como se introduzca 8.543 recopiló ejecuto y dice lo que has introducido no es un día válido de la semana vemos por tanto como utilizando este código utilizando esta estructura de control switch somos capaces de realizar una ejecución condicional pero a la vez dar una serie de casos como válidos y si hace falta otros tantos como falsos ahora en principio tocaría y tocaría revisar las estructuras de control de tipo bucle pero sin embargo como tenemos el ejercicio del curso un poco abandonado lo que voy a hacer es aplicar esto que acabamos de aprender sobre el ejercicio del curso así que a continuación lo que voy a hacer es lo siguiente voy a abrir el ejercicio agenda vamos a ver cuál es la última carpeta no lo tengo tengo agenda 0 4 bien lo voy a guardar lo voy a guardar dentro del proyecto 06 no voy a guardar como agenda 06 ya sé que no existe agenda 05 pero un poco porque mantenga la numeración con respecto a las carpetas y ahora a continuación me dice la opción que has seleccionado es y la opción para esto es lo que teníamos hasta el momento bueno pues a continuación lo que voy a hacer es utilizar la estructura de control suites vamos a decidir qué hacemos en cada parte del programa así que ahora voy a decir switch cuidado escribirlo bien voy a poner switch voy a poner un par de llaves y voy a poner que lo que quiero evaluar dentro del switch es la opción la opción por cierto en el ejercicio teórico que hemos hecho era un número entero aquí va a ser un carácter pero no hay ningún problema es decir switch va a reconocer correctamente los caracteres que introduzcamos así que ahora voy a poner case 1 ahora sí que es importante que si lo que estoy cogiendo es un caracter por mucho que parezca un número realmente es un caracter así que lo tengo que poner entre comillas este es un paso importante y si lo olvidamos veremos que el programa dará error pongo 601 recordamos que el case 01 es un listado de registros y voy a poner print efe a continuación ofrezco un listado de registros y voy a poner ya sabéis el caso break una vez que tengo esto voy a repetir con el resto de casos ahora sangro correctamente voy a sangrar correctamente cada uno de los casos porque vemos como así se ve mucho mejor cuál es la estructura del programa así que case 2 que es 3 64 perdón que es 465 y ahora digo lo siguiente ahora vamos a introducir un registro ahora voy a decir vamos a eliminar un registro vamos a buscar buscamos entre los registros y actualizaremos los datos del programa por último por último voy a poner un print es un poco decorativo finalizando la ejecución del programa siempre pongo un contra barra n de hecho yo creo que me voy a dejar en este programa puesto también quizás en la plantilla un contra barra en el final para que el programa siempre acabe con un retorno de carro y voy a copiar estos contra barras en cada uno de los registros así que guardo con pilot gsf vamos a compilar la agenda donde estoy estoy en el proyecto 6 agenda 06 bien ejecutó el proyecto y dice selecciona una opción el listado de registros introducen un registro de eliminar un registro buscar un registro voy a por ejemplo la opción 1 pulso enter y dice la opción que ha seleccionado es 1 a continuación te ofrezco un listado de registros que evidentemente no funciona todavía y es como no funciona todavía se sale del programa finalizando la ejecución del programa si yo vuelvo a ejecutar el programa introduzco un registro y dice ahora vamos a introducir un registro se selecciona la opción 3 vamos a eliminar un registro selecciona la opción 4 buscamos entre los registros y selecciona la opción 5 y actualizaremos los datos del programa es bueno también ya sabemos que pongamos un caso default dónde voy a poner un print efe la opción que has seleccionado no es válida contra barra pm re compilamos ejecutamos voy a producción 6 y dice la opción que has seleccionado no es vale y de esta forma vemos como hemos introducido dentro de nuestro programa la estructura de control switch que en este caso es muy importante porque precisamente si he creado un programa si estoy creando un programa que te permite seleccionar qué es lo que quieres hacer pues evidentemente a continuación debe haber algún tipo de estructura de control condicional que nos permita hacer caso a esa elección y que nos permita no ejecutar todo el código que venga a continuación sino que en base a la selección que yo ya he hecho me permite ejecutar una parte del código u otra parte del código u otra parte del código u otra parte del código y así en todas y cada una de las veces a continuación y antes de ponernos a trabajar sobre las estructuras de control de bucle que ya sé que parece que se están haciendo un poco de rogar pero como veremos todo tiene sentido voy a hablar de un concepto muy importante que son los arrays son en definitiva las estructuras de datos que albergan algo más complejo que una variable así que voy a crear es un proyecto 07 dentro del proyecto 07 voy a crear un nuevo archivo lo voy a guardar y voy a voy a guardar esto dentro de proyectos 0 7 como arrays punto c porque lo pongo en inglés lo pongo en inglés porque en principio la traducción de array es bastante digamos compleja si le preguntamos a cualquier profesor de inglés nos dirá que en si el término array en inglés tiene bastantes traducciones en castellano de hecho de hecho no lo voy a hacer yo mismo sino que me voy a apoyar en google translate entonces voy a entrar dentro de google translate real y voy a hacer una traducción desde inglés hasta español voy a poner a raya entonces veo que el array tiene por ejemplo la traducción de matriz tiene también la traducción de arreglo tiene la traducción de una formación tiene la traducción de colección tiene la traducción de una el orden una ordenación si lo pongo por ejemplo an rey dice que la traducción es una matriz así que en definitiva el cómo se traduce en castellano en el contexto concreto de la programación informática evidentemente la palabra a wright durante años ha sido objeto de mucho debate entonces por eso muchas personas lo que hacen es directamente utilizar la palabra de inglés a utilizar el array voy a crear una raíz de datos yo suelo usar la palabra colección porque a lo largo de los años he utilizado a veces la palabra matriz y claro una matriz en matemáticas es otra cosa diferente vale entonces realmente lo que hace un array es mantener una colección de elementos aunque ahora a continuación no en este vídeo sino en el siguiente veremos que hay una cosa que se llama la el array multidimensional que entonces sí que se parece mucho más a una matriz vale entonces lo que quiero decir es que puede parecer pues de reto al confuso el que ello utilice indistintamente varios términos como array matriz colección arreglo pero todos los conceptos representan todas las palabras representan el mismo concepto vale que es una colección de objetos así que a continuación por ilustrar un poco el problema que voy a encontrar a continuación proponen aquí un momento clear voy a vivir por cierto ir al proyecto 7 proyecto 6 vale ahora lo que voy a hacer es decir que por ejemplo si tengo una agenda de teléfonos y quiero indicar que creo un teléfono pero claro ese teléfono 1 2 3 4 5 6 7 por ejemplo es un teléfono así que print efe voy a decir que el teléfono es porcentaje y el contra barra n y recordamos que es bueno que acabe el programa me lo voy a dejar prácticamente en la plantilla como frente en el teléfono es bien vamos a compilar esto se llama a rights que ha pasado aquí ha cuidado evidentemente lo que está ocurriendo en este caso es que vamos a ver es teléfono y claro tengo que definir como teléfono porque si no no se sabe que estoy imprimiendo así que compiló así que ejecutó y me dice el teléfono es un dos tres cuatro cinco seis siete el problema está en que si yo ahora intento introducir otro teléfono el teléfono es 7 6 5 4 3 2 1 lo que ocurre por cierto que esto está mal porque no puedo re declarar una misma variable lo más probable es que de error vale el error es la redefinición de un teléfono quito int ahora sí que va a funcionar pero claro si lo ejecutó lo que va a ocurrir es que dice que el teléfono es 3 4 5 6 7 pero luego dice el teléfono es 7 6 es decir eliminó este print efe dejo un solo print efe al final y lo que quiero ilustrar es el concepto de que esta reasignación lo que ha hecho es eliminar este dato de aquí es decir ese dato es una variable bueno pues lo que ocurre en este caso con esa variable es que esa variable puede variar pero pero al variar se elimina el contenido de la primera versión de la variable y esto me supone un problema porque yo lo que quiero de alguna forma es introducir nuevos teléfonos pero no quiero que se pierdan los antiguos porque entonces menuda agenda estoy estoy creando lo que quiero es que yo pueda introducir nuevos registros pero no se pierdan los anteriores esta es precisamente la solución que nos proponen los arrays evidentemente no es una buena solución antes de que los estás pensando poner teléfono 1 y teléfono 2 sin poner variables como yo quisiera sus funciones es posible pero no es escalable es decir no es una buena solución cuando yo introduzca y miles y miles y miles de números de teléfono por tanto sé que lo estarás pensando pero te aseguro que no es una buena opción desde el punto de vista de asegurar que luego la aplicación sea escalable lo que quiere decir que luego la aplicación pueda crecer de forma indefinida sin aumentar indefinidamente su complejidad vamos a ver por tanto los arrays aunque técnicamente los hemos visto ya antes cuando hemos creado una raíz de caracteres así que lo que voy a hacer en este caso lo que voy a hacer en este caso es decir que teléfono no va a ser directamente una asignación sino que va a ser un array de 10 elementos lo que hago es poner un corchete que se abre un corchete que se cierra y luego pongo dentro el número de espacios que reservo para este programa así que ahora a continuación lo que voy a hacer es lo siguiente lo que hago es que teléfono corchete registro cero o registro uno vamos a pasar por el cero es igual a uno dos tres cuatro cinco teléfono registro 1 en informática muchas veces los arreglos empiezan en cero no en 1 2 3 4 5 6 teléfono de 2 es igual a 34 567 definitiva vale voy poniendo y ahora lo que quiero es el teléfono es teléfono d teléfono así que compiló garra de los cerdos ejecutó y me dice el teléfono es un dos tres cuatro o cinco pero si yo ahora pido el teléfono de uno con pi lo ejecutó me dice el teléfono es 2 3 4 5 6 si era pongo el teléfono de 3 por ejemplo cuidado en este caso con pi lo ejecutó y me dice el teléfono es 0 el teléfono es cero porque no he definido todavía cuál es el índice 3 de la colección vale más peligroso todavía sería que pusiera teléfono de 30 por que compiló y básicamente nos da un error y el error es que si yo he reservado 10 espacios para esta matriz para este array para esta colección no es correcto que esté llamando a la posición 30 de la matriz porque no existe no hay posición 30 porque yo he especificado que iba a haber 10 posiciones vale así que claro lo que puedo hacer evidentemente es poner mil registros pero claro de esta forma y esto voy a compilar esto eso funcionará correctamente aunque da 0 porque no han omitido nada pero de esta forma lo que estaba ocurriendo es que pues esta aplicación gastará más memoria si reservo mil espacios que si reservo diez espacios y como ya he comentado anteriormente la gestión de la memoria es algo bastante importante cuando trabajamos en fe entonces la idea es que deberíamos reservar ni más ni menos que los espacios necesarios para que la aplicación funcione correctamente y esto es algo que es fácil de decir pero no es nada fácil de hacer en el sentido de que pues bueno como saber cuando una aplicación va a necesitar más datos o menos datos pues como digo es algo que no es nada fácil en definitiva de calibrar ya hemos empezado a ver los arrays las colecciones con lo cual pienso que habría arrojado un poquito más de luz acerca de cómo vamos a estructurar los datos en nuestros programas y acerca de que vamos a poder guardar multitud de piezas de información multitud de cantidad de información pero a la vez por ejemplo voy a abrir una hoja de cálculo si hemos guardado teléfonos pues vemos como tenemos un 2 3 4 5 tenemos 2 3 4 5 6 tenemos una serie de teléfonos en pantalla pero estamos guardando una única columna de datos y nosotros realmente si nos fijamos en el ejercicio lo que estamos haciendo es intentar guardar una agenda y claro una agenda si nos fijamos no tiene únicamente un dato que es el teléfono sino que una agenda voy a utilizar un poquito de esto una agenda por el color azul por ejemplo vale y esto voy a pintar de blanco esto es un poco irrelevante ahora pero de color blanco vale una agenda tiene nombre tiene dirección tiene no lo sé email por ejemplo verdad así que el nombre es josé vicente el nombre es juan el nombre es javier la idea es ver porque porque pongo todos los nombres con jota pues porque desde que hace muchos años empecé a impartir cursos dejaba pues por una simple cuestión pues pongo todos los nombres que empezaron por jota el final y dirección calle de jose vicente calle de juan calle de javier y el email es josé vicente gmail.com y juan gmail.com y javier email puntocom en este caso si nos fijamos tenemos una un arreglo que tiene dos dimensiones tenemos la dimensión vertical y tenemos la dimensión horizontal los programas de hoja de cálculo vienen muy bien para saber un determinado dato en qué posición en la dimensión número uno y en la dimensión número dos se va a encontrar así que en base a este concepto lo que voy a hacer es trasladarlo al lenguaje de programación para ilustrar que en este lenguaje de programación existen las matrices multidimensionales voy a llamar a esto array 3 y llegados a este punto voy a hacer un breve comentario de algo que no puedo desarrollar demasiado en este curso para no salirme demasiado del tema pero que dejó en una especie de marcador y es que debemos entender algo que explicaré más adelante y es que f es en cierta forma el lenguaje que se mete por encima del lenguaje ensamblador cuando llegue el momento cuando hable de ensamblador diré que el ensamblador existen las matrices unidimensionales pero no existen como tales las matrices multidimensionales por ejemplo en este caso las bidimensional esperemos que esto que estoy comentando ahora mismo tiene su adaptación tiene su sentido cuando convertimos código desde efe desde el lenguaje de programación fe hasta el lenguaje programación de ensamblador bien voy a esto es luego dado como 03 vale voy a crear ahora un programa llamado un pequeño programa llamado agenda así que voy a poner char quito esto por aquí vale voy a poner lo siguiente voy a poner char asterisco permitirme no explicar ahora mismo el asterisco porque esto nos llevaría mucha complejidad que ya llegará llegado el momento de momento voy a decir que todo aquello que tenga que ver con asteriscos tiene que ver con punteros y ya hablaremos de qué es esto de un puntero pero de momento voy a poner agenda y voy a decir que agenda va a tener 10 registros y luego va a tener cuatro registros esto es un array multidimensional y un array multidimensional básicamente nos va a permitir como vamos a ver meter varias dimensiones así que ahora vengo por aquí y digo agenda en su registro número uno dentro de la columna número uno va a ser el nombre jose vicente ahora voy a copiar esto de aquí para tardar menos en escribirlo ahora agenda el número 2 técnicamente esto debería ser el 0 esto el 1 esto el 2 y esto el 3 por qué en programación las matrices en prácticamente cualquier lenguaje de programación empiezan en el índice 0 no empiezan en el índice 1 y digo esto es josé vicente teléfono de jose vicente la calle jose vicente y esto es jose vicente arroba gmail.com esto qué quiere decir esto quiere decir que básicamente entendemos que el número uno o el número cero también podría ser no hay ningún problema podemos pasar lo que queramos el número cero todo el número cero corresponde a cosas de jose vicente ahora bien en el segundo índice la segunda dimensión el cero equivale al nombre el uno equivale al teléfono el dos equivale a la calle y el tres equivale al correo electrónico de esa forma por ejemplo ahora podemos crear nuevos registros entonces esto es 11 11 22 22 y este es juan este es el teléfono de juan esta es la calle de juan y esto es juan email puntocom ahora voy a poner jaime el teléfono es 3 4 5 6 7 la calle de jaime y jaime gmail.com lo que he hecho por tanto es definir una serie de voy a hacer un clic en aquí va a definir una serie de matrices multidimensionales y ahora viene lo más interesante ahora viene lo más divertido que es recuperar el contenido de estas de estos arreglos multidimensionales y digo que es divertido porque básicamente es igual que lo que ya sabemos es decir no nos va a suponer más quebraderos de cabeza voy a hacer un print de fe y voy a decir por ejemplo la calle de jose vicente es porcentaje s porque es un string contra barra n para bajar y ahora pongo agenda y voy a poner que la calle de josé vicente es 0 2 tengo 0 y tengo y vamos a comprobar si es cierto o no que compiló esto es arrays 3 ejecutó y me dice que la calle de jose vicente es es la calle de josé vicente la calle es la calle vamos a recopilar vamos a hoy vamos a ejecutar y me dice es la calle es la calle de jose vicente o el dato es la calle de jose vicente en definitiva lo que quiero demostrar con estas matrices multidimensionales es que no sólo podemos no sólo podemos guardar una pieza de datos que ya de por sí es bueno sino que podemos meter matrices de dos dimensiones lo que vendría a corresponder a digamos por ejemplo una hoja de cálculo trabajar con una tabla y trabajar con datos estructurados en tablas es algo muy común es algo tremendamente común en programación informática entonces ahora rápidamente rápidamente es decir voy a volver a recuperar la hoja de cálculo es decir que si una matriz de una dimensión es una columna por ejemplo si una matriz de dos dimensiones es una tabla que es una matriz de tres dimensiones pues una matriz de tres dimensiones y pondría digamos una dimensión por encima será la tercera dimensión la dimensión zeta yo lo suelo asociar a un palet de cajas digamos que esto es para mí una tercera dimensión una pared como estos para mí la mejor forma de visualizar lo que es una matriz de tres dimensiones como os digo es un palet de cajas donde tenemos una dimensión por aquí tenemos otra dimensión la segunda dimensión por aquí pero a continuación tenemos una tercera dimensión que es la altura de las cajas se pueden hacer matrices de tres dimensiones sí y de hecho muchas veces tiene bastante sentido vale tiene bastante razón de ser ahora se pueden hacer matrices de cuatro dimensiones pues sí se pueden hacer y de 5 y 16 y 17 y de las dimensiones que queramos ahora bien el único problema entre comillas por decir que si esto es un problema consiste en simplemente pues mencionar que el ser humano está muy acostumbrado a pensar en una dimensión está razonablemente acostumbrado a pensar en dos dimensiones que son tablas puede acostumbrarse a trabajar con tres dimensiones pero a la mayoría de la gente le suele explotar el cerebro cuando pensamos en cuatro dimensiones porque el espacio que conocemos no tiene cuatro dimensiones o como diríamos en la teoría de cuerdas o en la teoría de supercuerdas las cuartas quintas y sexta dimensiones no son visibles al ojo humano si es que acaso existen entonces simplemente decir que de momento lo mejor es que trabajemos con hasta tres dimensiones para que de alguna manera nuestro cerebro humano pueda procesar digamos cuál cada vez que veo una matriz de dos dimensiones pues internamente en mi cabeza hay una tabla vale por tanto trabajamos hasta tres dimensiones para que nuestro cerebro pueda un poco sobre todo al principio cuando vamos aprendiendo a procesar esa información pero simplemente que sepamos que a nivel de lenguaje de programación podemos trabajar podemos crear tantas dimensiones como sea necesario y el lenguaje de programación trabajará correctamente con ellas así que si conseguimos que nuestro cerebro sea capaz de concebir el trabajo con esas dimensiones simplemente que sepamos que el programa informático está preparado para ello sin ningún tipo de problema

llegados a este punto es cuando ya podemos mostrar lo que son las estructuras de control del flujo de la información de tipo bucle así que a continuación voy a arrancar el proyecto 08 vamos a meternos dentro del proyecto 8 bien y dentro del proyecto 8 lo que voy a hacer en primer lugar es copiar este bloque de código voy a crear un archivo voy a pegar el código lo voy a guardar dentro del proyecto 8 y lo voy a guardar como bucles entonces casi que antes voy a hacer una pequeña demostración de hecho ahora acabaré de copiar y pegar este este código y voy a presentar varias estructuras de control del flujo de la información siendo la primera de ellas en la estructura form la estructura for lo que hace es repetir varias veces una acción de hecho todas las estructuras de bucle realmente hacen esto mismo que es repetir varias veces una parte del código y teniendo en cuenta que en los programas informáticos hay multitud de ocasiones en las cuales repetimos múltiples veces algo pues las estructuras de control de bucles nos suelen venir nos pueden venir bastante bien así que a continuación lo que voy a hacer es poner tres condiciones para la estructura de control for que es el inicio int y es igual a cero esto quiere decir que creó una variable de tipo entero que se llama y que empieza siendo igual a cero la variable de finalización siempre que sea menor o igual que 31 y la variable de incremento y es igual a más y más 1 esto quiere decir que cada vez que pase por aquí lo que va a hacer es repetir a parte y sumarle un valor a esta variable llamada y muchas veces cuando trabajas a lo largo de diferentes lenguajes de programación ves que en el bucle inicial aparece la variable y la variable y básicamente se usa porque quiere decir y tirador operador básicamente va a ser un número que va a ir subiendo de valor o voy a poner print efe hoy es uno de los días del mes voy a poner contra barra n y vamos a ejecutar este código para ver exactamente qué es lo que hace así que el jefe c compilamos bucles ejecutamos bucles y como podemos ver lo que hace este bucle es repetir treinta y una veces de hecho puedo empezar en el día 1 del mes voy a volver a compilar y ejecutó y lo que hace es repetir algo repite algo 31 veces de hecho hay algo que podemos hacer y es que esta misma variable que hemos utilizado para definir cuando arranca el bucle cuando finaliza el bucle y cuántas veces suma o cuánto suma de litera d’or cada vez que se repite el bucle lo podemos meter aquí hoy es el día número porcentaje y del mes y aquí pongo la y este porcentaje y es el formateado ‘red el número entero y este y significa esta variable que es un número entero importante decir y dejar muy claro qué está allí puede ser cualquier cosa puede ser día puede ser una jota le puede poner por ejemplo aquí día y aquí pongo día y aquí pongo día y aquí pongo día siempre que aquí ponga también día vale ya podemos poner lo que queramos bueno pues sí ahora con pilot y ejecutó veremos que dice hoy es el día número 1 número 293 número 4 número 5 y así hasta el día 31 es decir esta instrucción esta estructura de control realmente no sólo repite este trozo de código sino que además puede adaptar la repetición para que en este caso vaya aumentando cada vez el iter ador a partir de aquí por ejemplo voy a ir variando puedo empezar en el día 5 y puedo acabar en el día 25 puedo personalizar cuando empiezo y cuando acabo vemos cómo empiezo en el 5 y acabo en el 25 en lugar de sumar un valor pues puedo sumar 2 y de esta forma cada vez que ejecutó en lugar de ir de uno en uno voy de dos en dos no tengo por qué ir creciendo puedo decrecer puedo empezar en el día 25 puedo acabar en el día 5 y en lugar de que cada vez que paso por aquí sume un valor al integrador lo que voy a hacer es bajar un valor así que compiló ejecuto y vamos a ver mientras que díaz sea mayor o igual que 5 cuidado porque si voy desde 25 hasta 5 no puedo decir menor que 5 tiene que ser mayor que 5 con pilot ejecutó y vemos como empiezo en el día 25 y acabo en el día 5 la idea la gracia de todo esto es que no tengo digamos por qué empezar en el día 1 acabar el día 31 e ir uno a uno es decir puedo ir sin ningún tipo de problema puedo ir avanzando tantos pasos como quiera ahora dentro de que hay varias estructuras de control de bucle ahora a continuación les voy a presentar vamos a ver para qué nos podría servir esto entonces ahora sí es cuando voy a guardar este ejercicio como bucles 0 2 puntos voy a parte del código de arrays vamos a ver copio y ahora a continuación ahora a continuación pegarlo aquí vale ahora tengo el registro 0 1 y 2 y podría tener muchos más de hecho es decir podría copiar esto pegarlo por supuesto 3 3 33 44 para dejar claro qué 5 era lo que voy a hacer es que voy a crear un bucle for para demostrar que una de las cosas que nos permite este bucle for es precisamente literal es precisamente ir uno a uno cuando tengan múltiples registros de algo el bucle for se puede utilizar para infinidad de cosas pero para mezclarlo un poco para volver un poco al ejercicio anterior para demostrar para que nos puede servir pues voy a hacer un ejercicio poco más aplicado entonces voy a poner el form int registro es igual a cero porque pues porque empezamos en el cero punto y coma registro es menor o igual que 5 porque porque ahora mismo estamos acabando en el 5 y es igual a + 1 y a continuación lo que voy a hacer es print effect y voy a poner el nombre dos puntos contra barras que recordamos que la tabulador y un teléfono teléfono ah perdón aquí me falta esto me falta una s el teléfono porcentaje s contra barra t la calle porcentaje s contra barra te corre porcentaje s contra barra n para saltar de línea y ahora pongo lo siguiente pongo ahora viene de un poco delicado pongo agenda y de cero y será cada uno de los registros 0 es el nombre agenda y de 1 agenda y de 2 y agenda y de 3 con esto recordamos que agenda y de uno se está metiendo aquí agenda aire perdón agenda y tercero quería decir que está metiendo aquí agenda y de uno se está metiendo aquí agenda y de dos se está metiendo aquí y agenda y de tres se está metiendo aquí y ahora con pilot bucles 2 puntos vamos a verlo y en este caso vamos a ver y nos dice que a ver así claro por supuesto me falta el trocito de código en el cual realmente declaró que es la agenda por eso este error vale así [Música] parece que el error está aquí aquino cuidado a 6 claras que registró entonces esto ya no puede ser y tiene que ser registro el registro es igual a 0 registro es menor o igual que cinco registro es igual al registro más uno y por tanto esto es registro registro registro y registro la idea es que si pongo y lo pongo en todas partes y si pongo un registro lo pongo en todas partes pero tengo que poner lo mismo en todas partes así que compiló ahora sí vamos a ejecutar y fijémonos que nos dice voy a hacer un clic para asegurar que ahora sí vale y nos dice que nos saca automáticamente como podemos ver nos saca el nombre la calle si queremos verlo un poco más claro porque está saliendo bien pero se ve un poquito confuso desde el punto de vista la maquetación voy a hacer contra barra n en cada momento y aquí voy a hacer dos contras barra n para saltar de registro con pilot ejecutó vale ya y fijémonos que tenemos pues nombre juan teléfono calle la calle de juan nombre jaime nombre jose vicente es decir compruebo como en este caso la estructura de control mejor me está sirviendo para sacar todos y cada uno de los registros correctamente bien pues ahora además en el siguiente ejercicio en el siguiente vídeo de la misma forma que hemos visto que antes con la estructura de control if se podían anidar estructuras ahora también vamos a anidar estructuras dentro del bucle foro dentro del bucle for por tanto vamos a ver cómo vamos a ver por aquí como yo realmente tengo el registro de cero registro de tal registro de lo que sea vale pues voy a hacer lo siguiente quinto campo me acabo de inventar la variable campo es igual a cero campo es menor o igual que 3 porque vemos que es hasta el máximo que llega punto y coma campo es igual a campo más 1 y ahora a continuación voy a poner print efe y voy a hacer lo siguiente voy a poner agenda agenda de esto será porcentaje s contra barra n voy a poner un guión el guión es un guión estético va a parecer un guión fito y aquí a continuación voy a poner agenda registro coma campo entonces qué ocurre de esta forma por cierto que aquí al final voy a poner un print fn para que baje es lo que ocurre de esta forma es que yo ahora recopiló ejecutó y fijémonos como haciendo un primer bucle for para repasar los registros y haciendo un segundo un segundo bucle for para repasar los campos pues automáticamente tengo toda la agenda de vuelta en la pantalla esto de devolver la agenda técnicamente si nos fijamos pues es muy parecido al ejercicio que estamos desarrollando de la agenda donde en un momento dado lo que vamos a querer sacar los listados vale además este modelo esta forma de trabajar tiene la ventaja de que yo por ejemplo ahora vengo por aquí me creo un cuarto campo el que realmente es el 5º el quinto campo va a ser que te diría yo déjeme los apellidos ale carratalá así que pero esto por aquí me dejó un poco la plantilla lo pego lo pego y esto va a ser uno de cuatro es garcía 2 de 4 es gómez tres de cuatro es lo que santiago 4 de 4 es lópez puesto no pues lópez y 5 pues no lo sé márquez así que fijémonos que por cierto la sangría se me ha ido un poco pero no pasaba mucho recordemos que entre la sangría es estética pero aún así pues viene bien ponerla para que luego en un momento dado de un vistazo podamos ver correctamente la estructura del programa pues si nos damos cuenta yo simplemente aquí actualizó el número 4 recopiló el programa haber cuidado así cuidado porque yo aquí le estoy diciendo que va a tener cuatro campos cuando realmente le metido un quinto campo tengo que declarar el quinto campo en la declaración de la agenda entonces con pilot ejecutó y fijémonos como automáticamente sin modificar prácticamente este código pues me ha puesto el nuevo campo en la pantalla esto qué quiere decir pues que de esta forma la aplicación puede crecer mucho mejor y puede crecer de una forma segura tal que si el día de mañana yo quiero simplemente ir metiendo más registros pues hay más campos y más piezas de información pues puedo hacerlo perfectamente porque sé que el programa no va a fallar si continuamos profundizando en el lenguaje veremos que ence específicamente existe una entidad llamada estructura que es algo así como una pequeña antecesora de la programación orientada a objetos utilizando clases en ce no tenemos un soporte nativo para programar con clases más adelante explicaré qué es esto de programar con clases y por tanto programar de forma orientada a objetos pero de momento lo que sí que puedo hacer es presentar esta característica que tiene efe que nos permite avanzar un poquito más en cuanto a cómo organizar nuestra información entonces en este ejercicio que tenemos ahora mismo actualmente hemos dicho y yo me lo he inventado realmente que el 0 es el nombre el 1 es el teléfono el 2 es la calle el 3 es el correo y el 4 son los apellidos o el apellido pero esto realmente es así porque yo digo que es así pero realmente en ninguna parte del programa pone que esto sea así y quieras que no no está prohibido trabajar de esta forma de hecho vemos que hemos hecho un ejercicio de esta forma ya ha funcionado perfectamente bien pero hay una estructura por encima llamada precisamente estructura que nos permite trabajar de una forma bastante mejor vamos a comprobarlo voy a crear una carpeta nueva va a ser proyecto 09 voy a meterme dentro de esa carpeta voy a copiar este código voy a guardar este proyecto dentro del proyecto 9 y voy a llamar a esto estructuras 0 1 punto efe luego el código anterior y voy a eliminar un momentín todo esto aunque luego probablemente lo voy a volver a copiar y yo a continuación lo que voy a hacer es definir una estructura así que para ello escribo en primer lugar la palabra reservada estruch vale estruch es una palabra que solo puede utilizar para definir estructuras de datos a continuación lo que voy a hacer es definir cómo se llama esta estructura teniendo en cuenta que es un poco la antecesora de la programación orientada a objetos la programación con clases en lugar de llamar la agenda lo que voy a hacer es llamar la agenda con la primera en mayúsculas y así de alguna forma diferenciamos lo que son las estructuras de lo que son las variables las variables las declaramos con minúsculas las estructuras las vamos a declarar con mayúsculas de hecho si por ejemplo quiero llamar a esto registro agenda pues puedo hacerlo mantengo la nomenclatura kamel que es mediante la cual escribo con mayor la primera letra de cada palabra pero la primera letra la escribo en mayúsculas a continuación voy a escribir una llave la llave de apertura y una llave de cierre y dentro de estas llaves lo que voy a hacer es escribir cada uno de los campos que necesito usar así que para por ejemplo voy a poner nombre y voy a decir que esto va a ser una matriz que va a contener hasta 50 caracteres claro que ocurría en el ejercicio anterior cuando yo por ejemplo he puesto aquí el apellido y como no me quedaba hueco lo he puesto en el número 4 haberlo puesto en el número 1 pues hubiera supuesto mover artificialmente todos los elementos de la matriz que hubiera sido problemático en el caso de que hubiera querido que el apellido apareciera a continuación del nombre pues las estructuras no hace falta porque realmente no viene ordenado con una matriz sino que viene ordenado con un nombre entonces pongo apellidos y declaro aquí pues por ejemplo correo teléfono dirección ya sabemos que teléfono y dirección lo estoy escribiendo sin acento por lo que he comentado del único de anteriormente dentro de este curso haciendo esto por tanto ya tengo definida no no un registro todavía de la agenda tengo una plantilla de cómo va a ser un registro de la agenda voy a compilar esto evidentemente no va a hacer nada de momento voy a compilar estructuras vamos a ver hay un print efe por aquí y vamos a verlo he escrito mal si lo que escrito mal es que las estructuras tienen llaves de apertura y de cierre parecen parecen estructuras de control pero no lo son por tanto tiene que acabar con un punto y coma vale haremos aquí como acaba con un punto de coma así que a continuación ahora sí lo que voy a hacer es compilar voy a ejecutar pero no ocurre nada evidentemente no ocurre nada por la sencilla cuestión de que yo realmente he creado una plantilla pero no he empezado a declarar registros dentro de esta plantilla así que a continuación lo que voy a hacer es decirle al sistema que voy a empezar a crear mis propios elementos dentro de esta estructura para esto para crear mis propios elementos voy a hacer lo siguiente voy a poner estruch para decir que voy a crear un elemento estructural ahora voy a poner registro agenda porque el elemento que voy a crear este tipo registro de agenda no es un entero no es un flotante no es un carácter es un registro agenda vale es el tipo de dato que voy a utilizar a continuación le pongo un nombre por ejemplo registro uno ahora a continuación lo que voy a hacer es utilizar una función llamada estruch osea str cp y voy a poner lo siguiente voy a poner dentro del registro 1 punto y atención nombre registro 1 porque lo acabo de crear y nombre porque es el nombre de la propiedad y entonces pongo jose vicente es una forma que puede parecer un poco más engorrosa de trabajar pero realmente no lo ves y ahora string copy apellidos pongo carratalá pero anteriormente el nombre en el ejercicio anterior el nombre era el 0 y los apellidos era el 4 es un poco arbitrario pero ahora no ahora el nombre realmente recibe el parámetro recibe el nombre de la propiedad recibe el nombre no es un número de una matriz no hace falta se ponga el correo el teléfono dirección una idea de cómo funciona puedo crear nuevos registros voy a crear un segundo registro dos registro dos registros dos el nombre es julio y la contraseña es lópez así que voy a voy a recopilar vamos a ver [Música] en este caso lo que nos está diciendo es que para poder utilizar el string copy tengo que incluir el header string punto h lo que me está diciendo el error es que esta función no está incluida en st así que no pasa nada lo que hago en este caso es que le hago caso al programa incluyó la cabecera llamada string punto h vale y ahora vuelvo a compilar ok ejecuto vale y de momento una vez más sigo sin tener nada sigo sin tener nada simplemente porque lo que he hecho en este caso es meter registros dentro de la memoria pero no estoy llamando a los registros ahora a continuación los voy a llevar así que vamos a devolver los registros y ahora por ejemplo lo que voy a hacer es algo tan sencillo como poner por ejemplo print efe el nombre del primer registro es y en este caso voy a poner porcentaje s porque es un string contra barra n y voy a poner registro 1 punto no me ve mos que poner registro 1 punto no me escuchó más claro desde el punto de vista de la programación que poner registro de campo y tener que acordarnos de que el número 0 era el nombre y el número 4 era el apellido vale y de la misma forma puedo hacer esto y puedo poner el apellido del primer registro es registro 1 punto apellido yo creo que se ve claramente que esta es una forma cuidado aquí mucho más clara de trabajar vamos a vamos a compilar vamos a ver entonces claro el registro apellidos no apellido tiene que coincidir evidentemente y por cierto que no he puesto el punto y coma así que compiló ejecutó y nos dice que efectivamente el nombre del primer registro es jose vicente y el apellido del primer registro es carratalá vale con lo cual comprobamos como en este caso no sólo hemos declarado una estructura sino que hemos poblado diferentes copias de la estructura y a partir de ahí podemos en cualquier momento recuperar el contenido de la estructura de una forma limpia y clara sabiendo pues que no recuperamos el índice cero si no recuperamos el nombre y no recuperamos el índice cuatro si no recuperamos los apellidos programar de esta forma pienso que es mucho más claro todavía además es que ocurre que parece que esto último que ha explicado esté reñido con lo que he explicado anteriormente de las colecciones de los arrays y la verdad es que no la verdad es que se pueden combinar las dos cosas y probablemente combinar las dos cosas va a ser bueno para nosotros entonces voy a desarrollar un nuevo ejercicio voy a crear un nuevo me voy a guardar como voy a guardarlo en escritorio en proyecto 9 como estructuras 0 2 y voy a copiar y pegar todo este código para decir lo siguiente lo que voy a decir a continuación en este caso es que tengo el registro agenda voy a eliminar un momento esto esta estructura es correcta pero ahora a continuación voy a decir que obstructor el registro agenda para definir que este elemento de la estructura es del tipo registro agenda se va a llamar agenda fijémonos como una estructura empieza con mayúsculas pero una variable o una colección empieza con minúsculas porque es por una cuestión de nomenclatura y voy a decir que esta agenda va a tener un máximo de 100 elementos y yo ahora por tanto lo que he hecho es crear aunque parece que creando una estructura realmente lo que he creado es una colección de 100 estructuras y esto quiere decir que yo ahora puedo venir por aquí y puedo decir str copy y voy a decir que dentro de agenda de cero o de uno de lo que queramos punto nombre como josé vicente ahora a continuación agenda 0 de apellidos voy a poner carratalá y ahora por ejemplo y ahora por ejemplo vamos a ver ahora aquí dentro para separar un poco con espacio puedo decir que el número 1 es juan lópez y el número 2 y el número 2 jaime martínez y de esta forma yo lo que estoy haciendo es crear diferentes estructuras dentro de una colección dentro de un array y estoy mezclando el concepto de array el concepto de colección para hacer una colección unidimensional y luego en lugar de utilizar una segunda dimensión estoy utilizando los elementos nombrados de una estructura de un estruch y de esta forma combino las dos herramientas y las combinó para bien las combinó para sacar lo mejor de cada una de ellas así que ahora puedo por ejemplo venir aquí y decir que pongo una estructura for for in y es igual a 0 y es menor que cuantos que fiel a una para que viejo y es igual hay más uno y ahora digo print efe el nombre el nombre qué es porcentaje string contra barra en coma agenda de y punto nombre esta es la novedad punto nombre es mucho más claro y ahora pongo a continuación otra por aquí abajo el apellido los apellidos es agenda punto y punto apellidos vemos que esto es mucho más claro todavía que lo que tenía en el ejercicio anterior pero que tenía en este registro de aquí entonces voy a compilar voy a ejecutar y veo que el nombre del primer registro es el segundo antes muy claro así que tengo que compilar el segundo ejercicio ahora lo ejecutó y me dice el nombre de jose vicente el apellido es carratalá juan lópez jaime martínez y así lo que va haciendo es simplemente empezar a empezar a empezar a empezar a lanzar y no acabar nunca vale y de esta forma lo que tengo como podemos ver es que mezclando matrices mezclando arrays mezclando estructuras y mezclando la estructura de control porque ya conocemos podemos empezar a generar un programa que pues va cumpliendo un cometido que en este caso ha sido devolvernos el contenido de una estructura que a su vez está metida dentro de un array cuando he explicado las estructuras de bucle he explicado de momento únicamente la estructura de control for pero hay otras dos estructuras que es interesante conocer así que voy a hacer un ejercicio teórico a continuación vamos a ver aquí voy a crear un archivo llamado bucles 03 perdón esto no esto no soy le voy a guardar esto lo voy a meter en bucles 0 3 porque en el proyecto anterior de un proyecto 8 teníamos hasta bucles 0 2 voy a copiar un poquito este código voy a vaciar lo que de momento no me sirve pasa algo por dejar el string cuando no lo voy a usar no pasa nada lo único que pasaría es que estaría cargando una librería que realmente no voy a usar con el consiguiente gasto de memoria pero bueno tampoco sería demasiado lo ha quitado más que nada por limpieza entonces a continuación vamos a ver que existe una estructura de control que el de bucle que en lugar del siguiente llamarse for se llama while entonces voy a decir que while y es igual igual y es menor que 10 voy a imprimir el programa está funcionando contra barra en esto evidentemente va a dar error porque estoy llamando a una variable que no ha sido declarada entonces si yo ahora intento compilar esto señora intento compilar bucles me dirá que y no ha sido declarado esto qué quiere decir pues esto quiere decir que en un bucle for yo declaro aquí dentro tanto el inicio como el final como el incremento pero en un bucle while yo únicamente declaró el final la declaración de la variable tiene que estar fuera tiene que estar justo antes y ahora esto que voy a hacer este programa que voy a hacer es un programa muy peligroso porque es la primera vez en este curso que hacemos un programa que ejecuta un bucle sin fin los bucles sin fin son peligrosos si no están controlados aunque también debo decir que hay muchos tipos de programas como por ejemplo los videojuegos que realmente internamente son bucles sin fin aunque por supuesto controlados no descontrolado como este programa que acabo de hacer entonces esto quiere decir que si yo ahora con pilot y ejecuto cuidado para este programa va a estar funcionando funcionando funcionando funcionando y nunca va a parar vale cuando digo que nunca va a parar quiero decir que es que nunca va a parar entonces yo ahora quiero retomar el control de mi ordenador y en principio parece que no puedo para retomar el control del ordenador ya estemos en windows mac linux tenemos que pulsar el control c para forzar que el programa se detenga vale porque ya os digo que más probablemente querré un bucle infinito pero ahora mismo no lo quiero ahora mismo ha sido un accidente entonces lo que tengo que hacer es primero comprender por qué ha ocurrido el bucle acuerdo del bucle porque y es igual a cero en este caso y es menor que 10 pero claro y siempre va a ser menor que 10 porque en ningún caso tengo el incremento entonces en este caso lo que voy a hacer es y es igual a más 1 cada vez que ejecutó este bucle while ahí le sumó un valor y esto lo que va a hacer es que cuando y sea igual o mayor que 10 va a terminar este bucle así que compiló ejecutó y vemos como ahora tengo un programa en un bucle while que sin embargo no es infinito para que sin embargo se queda quieto ahora bien voy a hacer una muestra voy a poner y es igual a 50 y voy a ejecutar este programa con pilot y ejecutó qué es lo que ocurre pues lo que ocurre es que este bucle nunca se llega a ejecutar por qué pues porque dice y es igual a 50 y dice mientras que iu sea menor que 10 pero y es menor que bien no es 50 luego es falso que sea menor que 10 luego esto de aquí nunca se llega a ejecutar y el programa finaliza vale el bucle while para su ejecución depende de que la expresión que ponga aquí realmente sea cierta existe otra estructura de control que vamos a ver a continuación que funciona un poco diferente a continuación por tanto lo que voy a hacer es introducir un siguiente archivo lo voy a guardar como no vamos a ver aquí en un proyecto 9 lo voy a guardar como bucles 0 4 puntos bien y voy a copiar el código anterior para presentar otro bucle que se llama the wild un bucle muy curioso porque hace lo siguiente ya ves igual p con el paréntesis y esta estructura de control es la única estructura de control que hay que finalizar con un punto y coma el resto de estructuras de control no finalizan con un punto y coma pero el de while sí así que print efe vengo por aquí y digo hola me estoy ejecutando punto y coma mientras que sea menor que 10 con el bucle while hemos visto que esto no debería haberse ejecutado nunca es más voy a decir y es igual hay más 1 con el wild por tanto veíamos que esto no se ejecutaba nunca porque no es cierto que y sea menor que bien pero sin embargo si embargo el bucle while es algo así como el bucle de dispara primero me pregunta después entonces lo que hace es que lo que hace es que dice hola me estoy ejecutando y luego se da cuenta de que no se tenía que haber ejecutado y no se vuelve a ejecutar esta es un poco la magia esto es un poco la gracia vale lo que hace el bucle de while es que se ejecuta una vez sí o sí y si luego se da cuenta de que no se tenía que haber ejecutado pues no se vuelve a ejecutar más pero en definitiva vale se ejecuta siempre que haga falta bueno pues a continuación llegará un momento un poco delicado diríamos que es el momento de empezar a fusionar los proyectos que hemos estado haciendo hasta ahora entonces de esta forma voy a crear un archivo nuevo lo voy a llamar agenda 09 porque está en la carpeta proyecto 09 me llamo agenda 09 punto c voy a copiar el código que tenía en la última versión que debe ser agenda 06 paso agenda hacer 9 de hecho le pongo aquí versión 6 sobre es el 9 verse en la que sea y ahora a continuación lo que voy a hacer por ejemplo es en el caso 4 no en el caso 1 voy a listar los registros esto qué quiere decir pues esto quiere decir que ahora a continuación me voy a ir a las estructuras y voy a copiar parte del código voy a copiar estoy aquí vamos a ver y lo voy a poner en la agenda 09 y ahora digo creo estructura y la y le pongo un par de registros haremos como el programa se va haciendo grande poco a poco ahora mensaje de bienvenida y ahora dentro de a continuación te ofrezco un listado de registros dentro de cada uno de estos casos lo que voy a hacer es empezar a escribir algo de código entonces nos vamos a estructuras 2 copio este bucle foro lo pego aquí dentro pongo correctamente la sangría y vemos como en la primera parte del programa lo que hemos hecho es definir una plantilla de estructura crear una colección de estructuras y poner tres estructuras de ejemplo poner tres registros de la agenda de ejemplo y lo que hará el programa es que volverá a lanzar lanzará estos registros solo cuando yo le pida la opción número uno del programa recordamos que la opción número uno era obtener un listado de los registros así que me vengo por aquí voy a hacer jefes de agenda 09 me dice que necesito incluir a usarlo para el string punto h como librería así que la incluyo compilamos de nuevo ok pero voy a ejecutar ejecutó cuidado ejecutó ahora bien y yo digo por ejemplo quiero el número dos quiero introducir un registro y el programa dice vale pues que ha seleccionado carlos no tengo nada programado así que simplemente finalizó el programa pero yo era vuelvo a ejecutar pide la opción número uno y me saca los registros que tengo en el programa la opción que has elegido es la número uno a continuación te ofrezco un listado de registros y el nombre es el apellido es el nombre es el apellido es el nombre es el apellido es sabemos como en definitiva y pues luego al final evidentemente finaliza nos saca un listado de los registros o sea tengo un programa voy a verlo ejecutar lo ejecutó me da un mensaje de bienvenida me pregunta una opción me ofrece un listado de registros elijo a la opción número 1 y me da los registros y como no le he dicho nada más de momento pues finaliza la ejecución del programa vemos que el programa poco a poco se va completando programa poco a poco se va complicando en cierta forma pero también se va completando en cuanto a funciones a continuación lo que voy a hacer es que dentro de este print efe voy a utilizar lo que hemos aprendido porque me molesta un poco que aparezcan registros que realmente están vacíos esto es porque yo he dicho que quiero ver los registros desde el 0 hasta el 10 pero sabemos que realmente solo hemos rellenado 3 el 0 el 1 y el 2 entonces voy a dentro del bucle for meter una estructura y la cuestión es esto se puede pues por supuesto que se puede antes hemos visto que dentro de una estructura for podríamos meter otra estructura for también anteriormente vimos que dentro de una estructura y podríamos meter otra estructura if pues dentro de la estructura for también se puede meter una estructura if y realmente dentro de cualquier estructura se puede meter cualquier otra estructura así que yo vengo aquí y digo si el nombre por ejemplo si el nombre no es igual acordémonos que teníamos el admiración igual quiere decir que no es igual a nada nada es comillas comillas en ese caso en este caso voy a poner esto mucho ungría para que se vea correctamente que esto está dentro del if en este caso lo que hace es que si el nombre no es nada imprime melo lo cual quiere decir que si el nombre es nada no me lo imprimas vale es un poco lógica booleana así que ahora con pilot ok vamos a verlo ah sí vale lo que dice es que esto es válido en otros lenguajes de programación pero en este lenguaje de programación no es válido tengo que utilizar el string com pero entonces el string compper es una fórmula que nos sirve vamos a ver un bentín es una fórmula que nos sirve para decir lo mismo pero de otra forma entonces voy a poner str cmp ese string compra y digo agenda un hombre coma y el cuidado aquí porque hacen falta dos sierras es decir aquí abro un paréntesis dos paréntesis entonces aquí cierro un paréntesis dos paréntesis esto es lo mismo es comparar dos cadenas es comparar si es cierto que algo es igual a algo entonces voy a poner una admiración vamos a verlo así ahora sí recordamos que esto quiere decir no para esto no quiere decir que lo que ponga aquí lo convierto en negativo vale entonces si agenda nombre con respecto a nada su comparación no es correcta su comparación no es cierta entonces me pones esto de aquí así que yo ahora ejecutó el programa quiero un listado de registros bien me ha hecho lo contrario vale entonces vamos a hacerlo así argumento pero con un hecho al revés vale voy a compilar ejecutó uno ahora sí vale a lo que ha hecho curiosamente esto debería dar falso pero bueno vale lo que sea entonces lo que tenemos aquí es que con éste hemos filtrado el hecho de que sólo aparezcan a aquellos registros que tengan un nombre y lo que hace es que omite lo que hace es que se carga todos aquellos registros que no tengan esa condición para de esa forma como podemos ver poco a poco por lo que estamos haciendo es definir un programa donde pues va a realizar una serie de acciones en cada una de las opciones

Deja una respuesta

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