Curso Desarollo Web PHP

lo primero que vamos a hacer es bajar un editor un entorno de trabajo con el cual podamos trabajar correctamente con html con css hay bares antes radiadas posibles lo importante en definitiva es el código no el programa que lo envuelva que haciendo todos los programas nos dejan trabajar con corriente por tanto hay dos programas que para empezar yo recomiendo el primero de ellos es un programa llamado here it a que efectivamente viene de linux que de ubuntu pero que aún así tiene una versión para windows es la que vamos a poder descargar si estamos trabajando en windows importante lo que voy a hacer es poner here it en google encontrare que si pulso sobre félix y busco head y aparece una ventana que dice projects puntocom punto genia y el problema es que no puedo entrar aquí porque esta página me permite descargar el programa para linux y ahora mismo al menos nuestro linux por tanto dentro de google lo que voy a hacer es poner help it for windows entonces a partir de ahí sí que encontraré la página edith barr a windows henning para windows que me va a permitir descargarlo e instalarlo en cualquier windows xp windows vista windows 7 por lo tanto hago clic descargo la última versión que vea en la lista de versiones disponibles a día de hoy la 230 descargó el programa vemos cómo ocupa en este caso 23 megas lo voy a descargar en el escritorio es una carpeta llamada html los cargo ahí y luego luego hay otro programa que puedo recomendar que es un programa que se llama note para los plus como el note paz de windows de toda la vida pero con dos signos más detrás así que mirar cuando note para los dos con dos signos más adelante me lleva evidentemente en este caso a la primera es un programa para windows a la página oficial a la página original y lo que voy a hacer es descargas en download en el segundo enlace dentro de la barra izquierda de color amarilla hacer clic en download no te pagaré instalador y descargara pero una vez que los dos programas estén descargados los voy a ejecutar los voy a instalar ya que serán los programas de los que estaremos usando para crear nuestro propio código en html lo que voy a hacer a continuación por tanto desinstalar estos dos programas que he copiado en el escritorio así que dentro de html voy a instalar primero ligerito que ya lo tengo instalado se van a ejecutar y lo que voy a hacer es seguir paso a paso el proceso del instalador prevé en cuenta que estamos instalando software libre por tanto no vais a tener ningún problema en aceptar la licencia del software libre tenemos la típica licencia con la que le vendes tu alma al desarrollador en donde en qué carpeta lo quieres instalar por defecto la va a instalar en la carpeta de archivos de programa del ordenador yo recomiendo que lo dejéis ahí recomiendo que respetes la carpeta de archivos de programa hay veces que nos conviene personalizarlo pero hay veces que no vamos a crear un menú de elementos en el menú de inicio de vigo siguiente para cuántos usuarios de este ordenador no quiero instalar a todos los usuarios incluso porque no miran que puedo crear un icono del escritorio y crear un icono de acceso rápido así que marque las dos paso a instalar ya y en unos pocos segundos tengo el zenit instalado a partir de la cual a continuación no abriré ahora en cuanto acabe esta instalación lo que voy a hacer es instalar el ejército es perdón instalar el note patrus plus para que veáis el proceso de instalación es exactamente igual e incluso en cuanto acabe los voy a abrir para que veáis que visualmente son iguales al final es un bloc de notas a lo cual podéis preguntar mira voy a instalando el 84 voy a ejecutar veréis que los pasos son algo que están en español muy parecidos a los anteriores lo que os podéis preguntar es si hace lo mismo que un no te par porque un uso este y no en lotes para por una razón muy sencilla voy a ejecutar ya que estoy para que estos lotes pan frescos y la ventaja que me va a dar y voy a abrir ahora el genérico la ventaja que me va a dar es que me va a colorear el código entonces siempre que digo esto de colorear la gente se piensa que es colorear en plan niños pero no pero en colorear el código base es muy importante para poder trabajar correctamente y poder diagnosticar cuando cometo algún fallo lo que hace el programa es que a medida que detecta el código que escrito lo colorea de verde de rosa del color que sea cada programa tiene su propio sistema de colores pero la cuestión es que es ver que si algo que debería haber estado coloreado no están coloreados que algún fallo que he cometido y por tanto de esa manera como cometemos fallos es inevitable de esa manera los podemos diagnosticar mucho mejor así que vamos a seleccionar uno de los dos editores yo por ejemplo voy a seleccionar el gel y lo que voy a hacer es lo siguiente grado voy a cerrarlo y lo voy a poner en pantalla completa y por defecto tengo un documento no guardado tengo un documento vacío para escribir así que voy a empezar trabajando con ese documento cuando instalamos here y seguramente no vemos la ventana de la izquierda la estaba viendo yo pero vosotros no sabéis cómo sacar esa ventana de la izquierda para sacar esa ventana de la izquierda tengo que ir al menú ver y entonces poder pulsar el el panel lateral es la tercera opción dentro de él como veis el menú ver si saco la barra lateral comprobaréis como parece una barra que tiene abajo atención tiene abajo dos pestañas probablemente estáis viendo de estas documentos si estáis viendo documentos bajar aquí abajo pulsado la segunda pestaña ahí abajo a la derecha y veréis que pone examinador de archivos y ahí y con eso vamos a empezar a trabajar vamos a escribir algo de código y a continuación nos personalizaremos un poco el editor a continuación lo que voy a hacer es escribir un primer documento html por tanto fijémonos que tengo un documento no guardado por eso lo que voy a hacer es ir a archivo guardar como lo que voy a hacer en este caso es atención mira en el escritorio voy a crear una carpeta llamada un solo html y dentro de esa carpeta le ha creado el escritorio de lo puedes crear en nuestros documentos donde queráis dentro de esa carpeta voy a guardar un documento con un nombre un poco especial lo puede ser porque el nombre index.hr l de tal forma que mira si no lo veis claro si no veis clara la ruta para porque vamos a dejar una ruta muy larga fijaos que a que la izquierda tenéis el acceso directo a lugares por ejemplo escritorio por tanto si no veis cómo llegar la ruta de escritorio pincháis escritorio ya la izquierda os hacéis la carpeta a la derecha y ahí ya lo guardas jce con este nombre que estoy poniendo en la pantalla y no con cualquier otro nombre sino que lo guardas con el nombre index.hr ml porque cada página que vamos a hacer es una página que tiene html tiene la extensión de este ml y por qué se tiene que llamar index nos vamos empezando a hablar de grosor de html y es que cuando haya varios archivos y el navegador web no sepa por cuál va a empezar para empezar por aquel que se llame interés por tanto no es obligatorio que todos vuestros archivos se llamen index puntos de pml lo que es obligatoria es que el primero el archivo por el que el usuario va a entrar a nuestra página se tiene que llamar index.hr l por tanto lo que voy a hacer es guardar y fijaos que parece que no ha hecho ningún cambio pero realmente sí que lo he hecho y es que aquí arriba ya no pone documento sin título sino que pone index.hr a continuación vamos a ver las bases de html html es un programa basado en etiquetas y las etiquetas son una cosa que tiene la siguiente forma atención las etiquetas en html valen cerradas entre llaves las llaves las llaves de etiqueta son el signo menor que y el signo mayor que estas dos son las llaves todo lo que vaya dentro de estas dos llaves html lo considera una etiqueta de html por tanto por ejemplo si le pongo etiqueta os habéis dado cuenta que el gen y tú lo ha puesto de color verde lo pone de color verde porque lo ha reconocido como una etiqueta html una etiqueta puede ser etiqueta otra etiqueta puede ser título otra etiqueta puede ser para la foto si yo pongo por ejemplo aquí para rato os daréis cuenta de que para graf aparece en color negro eso quiere decir que no es una etiqueta eso es contenido mientras que todo lo que aparezca de color verde van a ser en distintas las etiquetas no aparecen en el navegador nos sirven para indicarle al navegador que va a ser ese texto que se ha escrito otra cosa es que yo ahora estoy escribiendo etiquetas y 37 en las etiquetas en castellano el tema lo sabían no html y las etiquetas en inglés lo demás que ha hecho también es un lenguaje muy permisivo os deja hacer prácticamente lo que os dé la gana y aprovechar porque es el único caso en el que pasa esto en el resto de lenguajes de programación cometes un error pero cuando digo un error es en lugar de un punto poner una coma y ese punto que debería ser una coma hace que no funcione nada pero en html no html puedes hacer dentro de unos límites lo que te dé la gana entonces hay una serie de etiquetas estándar donde por ejemplo si quiero escribir un parágrafo no escribo la palabra parágrafo sino que escribo una palabra p y el programa sabe los navegadores amén cuando yo como una p es un parágrafo y cuando quiera poner un título en lugar de poner título la etiqueta es estándar es h1 por tanto veréis que en principio hay unas etiquetas estándar que deberíamos respetar pero que aún así si yo quisiera y como funcionar funcionaría podría crear la etiqueta al organizar fijaos que el programa ahora reconoce perfectamente organiza veis organiza entre llaves y considera una etiqueta html esta nueva etiqueta que creado yo para la web 2.0 en fin en principio usaremos siempre etiquetas estándar pero de vez en cuando podemos crear nuestras propias etiquetas y otra cosa que voy a decir es que por regla general las etiquetas de bhp en html se abren y se cierran las etiquetas encierran un contenido por tanto si yo quiero hacer por ejemplo un título empiezo poniendo a hacerlo y empiezo a escribir esto es un título pero abajo pongo pero esto es un texto así que yo aquí arriba en esta etiqueta arrancando un título se lo digo al c1 le estoy diciendo lo que va a venir a continuación es un título pero ojo esto es un título pero esto es un texto como le digo yo al ordenador cuando acaba cuando cierra una etiqueta es muy fácil si esta es la etiqueta que abre lo único que tengo que hacer es copiar la etiqueta la pegó al final y le pongo una barra esto se va a cumplir para prácticamente el 95% de las etiquetas html si una etiqueta abre la misma etiqueta con una barra cierra a lo cual podréis saber en ese caso que el programa va a interpretar esto es un título como un título pero esto es un texto ya no es un título porque aquí veis que se ha acabado la etiqueta del título por eso en html vamos a trabajar con etiquetas pro veréis que al final es muy fácil trabajar con ellas si trabajamos de manera ordenada ver antes de seguir esto ya sea una cuestión personal del xerez vamos a personalizar un par de cosas vamos a personalizar como vemos el código en la pantalla vamos a personalizar el ver correctamente los archivos también en la columna de la izquierda nos va a ser muy útil en here it y prácticamente en cualquier programa que usemos para editar código el ver los números de línea con los que estemos trabajando sobre todo porque muchos lenguajes de programación cuando cometemos un error lo digo si cometemos un error digo cuando cometamos un error porque lo vamos a cometer nos dirán has cometido un error y está en la línea 527 y tú dirás cuál es alguien a 527 cuando nos viene muy bien tener ese contador ese contador lo podemos sacar desde el menú editar en preferencias entonces si entramos en editar preferencias y vamos a activar las siguientes 200 opciones activar ajuste de texto activar creo que viene activado por defecto pero mostrar números de línea activado también que aparece que viene sin activar y antes de salir de esta ventana quiero que entréis en editor y en editor y activar la sangría automática que por defecto está desactivada para luego más adelante veréis que la sangría automática es terriblemente útil como ayuda a la programación otra cosa que voy a decir el problema de la sangría ingerir por defecto es que es una sangría brutal creo que el ancho del tabulador en el número 8 cuando lo studies por defecto bajarlo hasta el número 3 lo podéis bajar introduciendo directamente el número o bien haciendo clic mirar en estos deslizadores para bajarnos del número 3 entonces lo bajáis es el número 3 y con eso ya le dais a cerrar cuando cerrar en este caso en este programa para esta ventana equivale a aceptar guardar aplicar y cerrar por tanto pulso cerrar y a partir de ese momento podréis ver los números de línea y ahora luego cuando empezamos a hacer sangrías de sangría es correctamente representadas ya que de esta manera cada vez que hacer una sangría y pasos a la línea de bajo te respeta la sangría sino cada vez que pasábamos volvería al retorno del carro y tendríamos que ir haciendo sangrías en cada línea lo cual es horrible para trabajar y ahora a continuación mira voy a ir hasta la carpeta donde guardado el archivo mirada del centro de la pantalla voy a ir al escritorio voy a ir al curso html y la máquina html y me voy a dar cuenta que yo estoy viendo aquí el archivo llamado index html pero quizás vosotros cuando habéis instalado help it aunque estéis dentro de la carpeta que hayáis sido mirar a la atención atención de la pantalla a marcadores escritorio curso html ahora si no veréis nada y grace pero si yo tengo y el archivo bien eso es un fallo de help it sólo en windows linux cuando se instala y es que tiene la manía de que considera a los archivos de ml como binarios no son binarios por los considera binarios por tanto por aquí me dio en el vacío esta parte que está vacía pincho con botón derecho y hay un menú flotante que pone en filtro entonces el filtro que permite mostrar ocultos y mostrar binarios pues mirar los tengo yo los dos activados y quiero que los activen los dos quiero que mostréis ocultos y quiero que hemos tres escenarios y así que diréis próximo html me estaba oculto mi escenario eso ayer y le da igual por tanto mostraron puntos binarios y de esa manera si todo ha ido bien ahora sí deberéis estar viendo el archivo index.hu tml dentro de la carpeta si habéis entrado en la carpeta curso html lo que voy a hacer a continuación por tanto es primero eso sí que no faltó nunca guardar para aplicar los últimos cambios y guardarlos de manera permanente sobre el archivo y a continuación mirar lo que voy a hacer es lo siguiente voy a abrir un explorador de windows voy a ir al escritorio voy a venir al curso html y lo que voy a hacer es hacer doble click dentro del archivo index html porque bueno pues lo aquí lo que tengo es genio años trabajando con henning pero yo a la vez también cada cosa que haga quiero ver cómo queda en el navegador por tanto si tenéis un navegador web instalado que seguro que algunos tenéis lo que voy a hacer simplemente en este caso fijaos por el icono que los archivos de tve le están asociados a chrome a google chrome me da igual en los ordenadores están asociados a firefox a internet explorer oa lo que sea era de doble clic lo habréis con un navegador web si no está asociado a algún navegador web hay ordenadores en los que los html se asocian a editores de texto lo que podéis hacer y ya sabéis siempre es botón derecho a abrir con y seleccionar es con abrir con firefox abrir por internet explorer con cromo con lo que sea por tanto yo en mi caso mirada atención voy a hacer doble clic y lo que he hecho es abrirlo con el google chrome y por tanto en la gran mayoría de la formación voy a estar trabajando así como estáis viendo en la pantalla lo que estaría haciendo es abrir el código en la parte de la izquierda abrir el resultado en la parte de la derecha ya si en cualquier momento vamos a ver cómo es el código se transforma en resultado cuando os moleste si os molesta la pantalla lateral ya sabéis que para el lateral el botón f 9 la oculta y la muestra cuando os interese y ahora sí ya tenemos esto llega el momento de empezar a evaluar resultados en pantalla lo que hacemos ahora es analizar resultados y de esta manera comprobamos cómo tengo h1 aquí que se abre tengo a h1 aquí que se cierra y por tanto si aquí h1 recordamos que h1 es la abreviatura de heather one que es cabecera 1 título 1 y si aquí se abre y aquí se cierra quiero decir que todo lo que esté contenido entre estas 800 etiquetas es el título qué pasa con lo que esté fuera lo que esté fuera se apañen porque dices título es desde aquí hasta aquí todo lo que esté después o antes es otra cosa es texto plano que ya veremos más adelante que esto por tanto podéis comprobar que el resultado en pantalla es justo que yo decía que es todo lo que esté en h1 se considera como título y todo lo que esté fuera de h1 pero esto es un texto se considera un texto plano por defecto sin formato por tanto en todo momento lo que vamos a hacer es ir poco a poco y mostrar cómo van quedando las etiquetas en pantalla siguiente cuestión en html no importa que las etiquetas y los contenidos estén en una misma línea o estén en varias el programa le da igual de hecho veréis aquí que es un ejemplo mixto he hecho un ejemplo en que se abre una etiqueta y a continuación empieza un título y a continuación lo que ocurre es una etiqueta de cierre de título pues si os fijáis al programa le da igual que esto esté en varias líneas o que esté en una sola porque lo que voy a hacer en todo caso en definitiva es a continuación voy a pulsar suprimir voy a meterlo todo en la misma línea de la canción guardo recargo y el programa le da igual por tanto da igual completamente existen varias líneas a dar igual que esta misma línea mirada ahora lo que voy a hacer es bajar esto una línea bajar h1 otra línea veis que ha quedado un poco de forma de sándwich las etiquetas el contenido del medio y si guardo el html da igual a 6 aprender html no es importante es imprescindible porque html es el pilar de la web son los cimientos de cualquier página web y esto os lo voy a demostrar de manera fácil y rápida estando en google chrome igual que en muchos navegadores existe la posibilidad de pulsar control y ver el código fuente no es que puedas hacer mucho con ese código fuente más copiarlo en cargarlo y estudiarlo pero muchas veces conviene saber que eso se puede hacer pero es lo que quiero es enseñaros el código fuente de muchas de las páginas que pueden ser diarias esto que voy a hacer lo podéis hacer luego en casa con el número de páginas que queráis porque siempre es igual en las de las de google específicamente hay mucho javascript y hablaremos de ello y llegado el momento pero si pueden ser contraluz puesto control una etiqueta por el tight él está encerrada entre 22 llaves y mira tiene la barra para cerrar luego estoy contando no es banal esto es muy muy pero que muy importante luego hay otras cosas que ya estudiaremos el momento como por ejemplo escrito esto tienes estos javascript pero aún así veréis que por ejemplo hay pues por aquí etiquetas meta que se cierran de ayer sólo sabremos hay etiquetas por ejemplo en forma cuando yo quiero hacer un formulario a una etiqueta que se abre aquí forma que se cierra y fuera oeste este foro además parámetros y propiedades ahora veremos de ello pero en definitiva lo que os estoy comentando de las etiquetas sirve para cualquier cosa si yo aquí tengo una etiqueta para recordar p parágrafo aquí se cierra la etiqueta pero por tanto vamos a hacer esto youtube es el país que estamos el país y tenemos aquí otra vez etiquetas hay veces que el que escribe el código lo speed hemos ordenado con mas sangrías hay veces viene más desordenado pero al final fijaos que tenemos etiquetas y que tenemos por ejemplo antes teníamos en youtube title que se abre title que se cierra tenemos etiquetas cuando hacemos etiquetas se colorean con ser joven como código coloreado lo que no es etiqueta aparece en negro todo es lo mismo y me da igual qué página visitéis hemos llegado porque en todas vais a encontrar lo mismo podéis abrir la página muy graves incluso si la página está hecha en flash necesita un lanzador en html por tanto entrar en cualquier página hacer control o ver el código fuente y veréis que todas su base sus cimientos luego pueden tener otras tecnologías insertadas dentro pero sus cimientos siempre son html por tanto html como vamos a ver a continuación vamos a ver el blog de enrique dans y sigue por ejemplo html todo es html html es el lenguaje pilar de internet da igual en qué páginas trace si ponéis control con derecho ver el código fuente vais a ver que html es la base de todo el uruguay css para estilizar ya y javascript para hacerlo más interactivo y aunque no se ve por detrás hay de hp y de base de datos pero alimentar pero al final todo se transforma en html por tanto en html es al final los los cimientos en tu casa los cimientos son bonitos no se ven están bajo tierra pero si tu casa no tiene cimientos a la próxima barriada que haya en la tierra cederá y la casa se vendrá abajo por muy bonita que sea por tanto vais a ver que aprender html al principio al principio es un poco rollo porque si tienes tres visitas creemos transforma mental pero insisto es necesario aprender a ese pml para luego poder hacer cualquier otra cosa en internet lo que voy a hacer ahora es empezar a escribir porque esto ha sido un primer ejemplo para que tengamos la primera toma de contactos balance pnl voy a empezar a escribir un documento de verdad en html y un documento tiene tres partes así que voy a borrar todo lo que tenía hasta ahora de hecho para comprobar que estoy en el sitio correcto borro gramos y recargo el principio evidentemente de verdad volví a esa empresa para hacer todo el primer elemento imprescindible dentro de un documento html es la declaración con la declaración tú le dices al navegador web que se va a encontrar a continuación que tecnología es la que se va a encontrar la etiqueta de declaración es un poco rara porque se abre y se cierra a ella misma por tanto mirada en la pantalla voy a escribir lo siguiente de hecho vais a ver que se va a colorear de un color especial voy a abrir una llave ahora lo acercó voy a poner una un signo de admiración hecho yo creo que veréis y nueva lo acercó que se ha puesto de color morado como diciendo esta que es esta etiqueta es especial no es cualquier etiqueta a lo hace confundir y pongo doc type html y ahora me acerco para que lo veáis mejor en la pantalla tenéis que escribir en la primerísima línea eso que veis en minutos lo que tenéis que escribir es etiqueta admiración admiración cerrada docta la con y htv y ser vice etiqueta poner con el mayor que lo que le está diciendo al navegador es que lo que se va a encontrar a continuación es html y days bueno esto realmente escribir doble porque aquí pone html pero es que aquí arriba ya ponía html porque lo tengo que volver a decir pues porque si ponéis este top time le estáis diciendo que vais a escribir en html5 hay todavía en el mercado tres versiones html html 3 html 4 donde de html 4 hay tres variaciones la estricta la transicional y la estándar y luego html5 cuando en realidad tenemos como cinco o seis versiones por tanto es importante poder de html para decirle uno vamos a trabajar en html y dos vamos a trabajar en html 5 no conseguiréis volver a html 43 porque está en plena expansión y hay un montón de páginas hoy en día de hecho podéis entrar en un montón de las páginas que usáis a diario y veréis que en la primera línea por end of time html eso quiere decir que ya las han convertido a html5 si veis docta trump transicional o estricto o algo así cuatro puntos de que no sé cuántos que todavía está en la versión 4 vale pero las que escribáis vosotros que estén en la versión 5 ahora que ya le he dicho al sistema que lo que voy a hacer a continuación es html ahora sin escribir html por tanto ahora voy a jugar con las parejas de etiquetas voy a estar jugando con parejas de etiquetas el 90% del tiempo que pasa en html y lo que hago es crear la etiqueta maestra que se llama html por tanto alguna vitalidad etiqueta la llamo html y a continuación en la línea 3 mira lo escribo si a continuación lo voy a hacer grande escribo en la línea 2 html y en la línea 3 html por tanto lo que les condicional programas que todo lo que escriba en realidad es el de andrés es html y yo sé que me diréis pero insisto es que más vale asegurarse que dejas que esto es un poco repetitivo aquí los no vas a siempre así pero diréis index.html daute html etiquetas html cuando a veces mal como suscribir ese primero ninguna más vale pero son las necesarias para decirle al navegador de manera inconfundible que estamos trabajando por html ahora dentro de html voy a crear dos etiquetas más y a continuación vamos a introducir un concepto mirar dentro de la etiqueta html merece un poco de hueco voy a pasar un día fresco y pulsar enter y por tanto la apertura está en dos el cierre está en el 4 y ahora voy a poner esto es un documento hasta temer guardo recargo siempre es igual esto lo vais a hacer un montón de veces siempre que hago un cambio guardo de aquí recargo aunque más adelante os enseñaré un truque t con el cual la cuestión se recarga sólo vale pero será más adelante entonces veis html contiene un trozo de texto y básicamente el programa nos lo muestra en pantalla es fácil hasta ahora un documento html tiene dos partes por tanto en esta ocasión lo que voy a hacer y esto lo vais a ver también un montón es que dentro de la etiqueta no me escribe solo un texto puedo escribir más etiquetas por eso conviene el hueco y sin haber acabado html voy a escribir ser cabeza y bajo de ser voy a escribir se cierra la cabeza además esto no es obligatorio pero yo os lo recomiendo muchísimo se los recomiendo una barbaridad y es que si la etiqueta head está contenida dentro de html metes una sangría y de esa manera visualmente sabréis que la etiqueta el eje en la etiqueta que realmente está contenida dentro de html o esto que os estoy diciendo ahora mismo me trae de fuera si no le pongo sangría no pasa nada porque me entero te enterás ahora que el ejemplo es sencillo pero cuando la cosa se complique os puedo asegurar que me vosotros ni nadie se enterará por tanto es conveniente en html empezar a trabajar de la ordenada para que cuando una página tuya la abras dentro de tres o cuatro meses de un solo vistazo te acuerdes como hiciste cargo bien tenemos ya la cabeza y a continuación vamos a escribir el móvil el cuerpo y esto que tenéis aquí en la pantalla lo podéis grabar a fuego por mí como solo tatuajes en el brazo esto que tenéis en la pantalla es la estructura básica de un documento en html da igual lo que hagáis da igual que contenga da igual que tengo un blog una tienda online da igual que sea lo que sea porque siempre va a tener la estructura que estáis viendo en la pantalla se estructura siempre va a ser la semilla que va a devolver todos los demás más cosas porque escrito un gel y por qué escrito un boli el jebe veréis que las estándar están casi todas en inglés el cd contiene la cabeza y el body el cuerpo de londres américa número de página web que es el gen y que es el body su función son muy importantes el body te muestra información al usuario muestra información en pantalla el gel le da información al navegador no te la muestra en pantalla se la da por detrás al navegador se la da a escondidas al navegador un ejemplo muy claro un ejemplo muy clásico que todos conoceréis si yo estoy aquí y entra en una página por ejemplo pues lo que sé elpais.com que se ve igual porque aquí arriba poner el país el periódico global en español como como ha subido esa información desde aquí hasta allá por ejemplo el título de la página es una información que se pasa en la cabeza y que tú no ves que recoge el navegador y que dice esta información la tengo que meter aquí arriba y así como hay el título dentro de la cabeza hay un montón más de otras etiquetas que podemos usar para darle información al navegador y nos dárselo al usuario por tanto otra cosa muy importante es que la mayoría de ocasiones de ser graves voy a guardar voy a recargar ese carro si tu lo veo pero veremos muchas etiquetas por ejemplo mira destino una cosa más que veis todavía me voy a escribir twitter pitt alta y si ahora guardo breaks pone o la aquí pone ola pero aquí pone index.html si ahora guardo y recargo a donde está ahora de esa manera he convertido ola en una etiqueta de la cabeza y veréis que las etiquetas de la cabeza no se muestran en el navegador sino que en este caso se ve en la pestaña pero hay otros muchos casos prince y que era se ven porque son etiquetas que no están diseñadas para verse vale por tanto vamos a empezar no espíritu todavía en la cabeza sino vamos a empezar escribiendo dentro del cuerpo vamos a empezar escribiendo cosas que sí que se puedan ver dentro del navegador a continuación vamos a darle contenido a este documento html y para ello voy a trabajar ahora estar un buen tanto trabajando dentro del movimiento del cuerpo porque voy a trabajar aquello que ocurre dentro de la pantalla una vez entramos dentro del body no hay una única manera de proceder podemos proceder de muchas maneras podemos crear múltiples distribuciones de contenido en pantalla yo lo que voy a hacer es crear una distribución clásica y típica estos días que es la distribución del sándwich o la distribución de bocadillo esto es cabecera arriba de página bajo contenido al medio esta distribución ya lo veremos llegado la parte de usabilidad es la que hoy integra con diferencia no es la que imperaba hace 10 años no se la que habrá dentro de 10 años a día de hoy desde luego sí que es un estándar lo que aprendamos de aprovechar para decirlo en html no vale para toda la vida pero desde luego diez años tranquilamente vale sin modificar tanto lo bueno de aprender también html es que lo tienes para muchos años y estamos html5 cuando salgas 7.006 calculo que mínimo será en 2018 o 2020 y no será un cambio radical no creo que es un cambio radical que todo lo que se aprende cálculo 2018 2020 bueno dentro de móvil voy a hacer una etiqueta esta etiqueta 98.5 estatina genérica que ya existía antes del cuadro que es una etiqueta llamada vida dir te voy a enterrar también mira a brody encierro dir bieber es la abreviatura de división del inicio y tú dirás divide que pues divide lo que se divide lo que tiene la gana es una división en el ica y en una página web hay muchas divisiones por ejemplo el título puede ser la división en un artículo el texto puede ser otra visión la imagen pues otra división una división es una celda cuadrada o no las cosas por eso el link es un genérico en este caso mira la pantalla voy a realizar este modelo voy a dibujar voy a rallar un poco en la pantalla voy a crear una web donde tendré un bloque central donde esto es el día el momento conceptualmente insisto no lo vamos a ver gráficamente en pantalla lo voy a representar conceptualmente dentro de seguir habrá una cabecera qué voy a dibujar a continuación voy a programar la continuación perdón habrá un contenido y habrá un pie de página entonces voy a decir es un poco difícil pero al principio existe un nuevo no sabemos compréis a hacerlo pero al principio será muy difícil el tener un modelo en la pantalla y con tu mente visualizarlo cómo quedará pero esto es lo que yo voy a hacer en definitiva lo que yo voy a hacer a continuación es imaginación ha dibujado esto de color rojo en el visor y voy a programar para que al final aparezca eso en la pantalla en el navegador insisto todo eso aparece escribiendo código y al principio es difícil decir uno como sabes tú despidiendo eso luego sale el otro el tiempo te lo da al era percibido es difícil pero ya veréis que conforme me ha llevado de la formación sin ningún problema iréis integrando eso dentro de vuestra mente bien ya tengo el envoltorio exterior por tanto ahora necesito hacer los tres envoltorios interiores que son la cabecera el contenido de página así que el dibujo dentro del libro y ahora la cosa se empieza a complicar y por eso es importante que empecéis a trabajar con sangrías para en cualquier momento saber quién está dentro de quién dentro del disco y hacer una primera etiqueta llamada género pero esa no la hemos visto antes no no hay que confundir no es lo mismo género kg es parecido se escribe parecido pero no es lo mismo él es la cabeza es lo que va al navegador no lo que va a ti como usuario en cambio el jemer es la parte de arriba visual lo que contiene el título y el menú la cabecera vale por tanto se escribe para el vídeo pero no es igual tenemos por tanto la etiqueta de género y a continuación lo que voy a hacer es algo bastante frustrante y es que me haber de escribir algo de contenido dentro de esa etiqueta así que mira asociación te voy a hacer un poco de hueco dentro de heller y voy a poner el título de la página y además poner acepto verdad título y página creo que lleva acento y yo soy muy mala con los acentos pero pueden acentos para comprobar dos cosas una si yo guardo y recargo primero los acentos no se van a mostrar correctamente pero tranquilos y directamente hay una solución muy sencilla para esto y 2 yo he metido y aquí empieza la parte muy importante de html 3 yo metido título de la página en el header y mi mente está esperando encontrar ese encabezado más quitado con rectángulo con coro link de fondo y todo eso pero no html con heller lo que hace es marcar etiquetar ese título de la página pero con eso le estoy diciendo al navegador que ese elemento es un título no le estoy diciendo si está centrado si tiene tantos píxeles de ancho si la letra es más grande o más pequeña o si es arial o si estáis muy roma no me diréis sin html no puedo definir eso como lo defino por todo el fino con el lenguaje hermano que te ml que es css html es el que escribes es el contenido y css es como lo presentas estamos todavía en html pero ahora luego os haré una demostración de cómo las cosas cambian al pasar las de html css de momento voy a seguir escribiendo y atención a continuación de heather voy a escribir una etiqueta que se llama sexo por tanto escribo la sección y aquí voy a escribir qué van a hacer con que este es el contenido de la página vamos a ver la atención cuando y a partir de ahora mira ya tengo en la pantalla tengo lo siguiente la etiqueta fever voy a dibujar un poquito mirada la etiqueta fever desde ahí hasta ahí así la etiqueta section llega desde ahí tenía que pulsar el control para dibujar un rectángulo llega desde allí hasta ahí quien manda más jerez o sexo ninguna banda más son hermanas están al mismo nivel por tanto lo haremos multi caras el mismo nivel haremos etiquetas hermanas pero si os fijáis estoy realizando un rectángulo este rectángulo más adelante lo veréis nosotros directamente en nuestra mente y es que tanto el header como el sexo están dentro del dip a que sí y el dir a su vez estás dentro del podio así que vamos a hablar de relaciones entre etiquetas porque html todo es etiquetas hermanas en etiquetas madres etiquetas hijas en este caso el día que es con respecto del móvil el día es un hijo la etiqueta hija del body qué es el body del dip evidentemente la etiqueta móvil es la etiqueta madre del pib por motivos evidentes comprobaréis no sólo porque ellos lo diga sino porque os estoy dibujando en la pantalla que en html en otros lenguajes no ocurre así pero en html existe una estructura dentro del documento y esa estructura define quién contiene a quién o si alguien no contiene otra etiqueta sino que son hermanas y están al mismo nivel cuando dos etiquetas no se contengan entre ellas sino que estén a continuación se llaman hermanas cuando estén contenidas en el contenedor se llama la madre los contenidos se llaman los hijos de las hijas o como queráis llamarlo pero al final os iréis acostumbrando a crear este ml todo contiene todo por eso es importante una vez más lo digo y lo diré tantas veces como sea necesario poner sangrías porque con las sangrías aunque yo quite el dibujito de color rojo de la pantalla con que este es un pelín acostumbrado a ver html sabes quién depende de quién si no pones sangrías a la media hora que se escribe en un código no darás pieconbola por último para cerrar este vídeo voy a poner una etiqueta más la etiqueta tercera etiqueta estructural las importantes llamadas cutter qué es putter pie de página este es el pie de página cuarto recargo y si queréis el frustrante contenido en la pantalla es el que estáis viendo en el navegador espectacular el html es cierto espectacular pero hace algo mucho más importante que sea espectacular que es estructurar correctamente el contenido y tranquilos porque ya veréis más adelante que fs ese es el que le da añade el componente visual a nuestros proyectos a continuación vamos a ver que las etiquetas pueden tener propiedades y pueden tener parámetros por tanto lo podemos lo podemos comprobar en cualquier página de las que visitamos por ahí donde por ejemplo este vídeo va a tener parámetros contenidos dentro esto es un poco complejo esto es un poco complicado porque quiere decir que dentro de una etiqueta sin salir de la etiqueta dentro de ella me voy a hacer un hueco y voy a escribir más cosas por tanto antes ponía llave bin yáber ahora va a poner llave de espacio y dentro de ese espacio voy a meter cosas hay muchas propiedades hay muchos tipos de propiedades que podemos meter en html una propiedad que os quiero enseñar ahora como introducción introducción a css para qué fines tranquilos es la propiedad de estilo mediante los estilos podemos introducir una cosa que se llama más adelante lo queremos más más largo de los estilos en línea que decir estilos locales por tanto dentro de seguir las líneas voy a escribir lo siguiente style estilo los parámetros no son como las etiquetas que pueden nombrar los que te dé la gana nombra parámetros tienen que llamarse cómo se llaman libros originalmente por tanto si voy a aplicar un estilo no no puede poner estilo tengo poner estar ahí con y y todo eso igual comillas comillas y voy a poner lo siguiente insisto no os fijéis demasiado en la estructura porque las ganaremos más adelante en css pero yo por ejemplo quiero que la letra no sea times new roman sino que sea área conocéis la diferencia arial esta letra que es más de palo así es decorado emigrada con sheriff as pues voy a parar los siguientes expresamente lo mismo form your family dos puntos área y punto y coma no sido tres y ponerlo exactamente igual tenéis que poner lo que hay dentro de ese recuadro entre comillas dobles font family dos puntos área al caos bien porque tiene que estar en ese escrito exactamente igual que hay así como html es un lenguaje muy permisivo css es menos permisivo pues ese es un punto medio en css escribe ese estilo es algo más no funciona pero no funciona eso en php hoja las piezas que es una cosa más no funcionan nada por tanto evidentemente en esta formación como es normal iremos en dificultad creciente por lo fácil iremos subiendo hace difícil bueno el caso es que si ahora atención mira guardó y recargo mirandina a ver esto el cambio la letra ha pasado de ser arial a ser de ser times new roman a ser de tipo arial en este caso porque es roble letra por defecto extensión roma voy a escribir otra cosa veis pero una cosa más ninguno pero cuando soy yo cómo se llama eso así como nos separamos es lo que veremos más administración y si quiero que el fondo no sea blanco sino que sea amarillo pues voy a poner background dos puntos hielo y sí guardo atención lo voy a mostrar en pantalla de continuación hago zoom para que lo que hay es mejor y ahora el fondo es azul buenas noticias y malas noticias vais a ver pero tenemos aquí por tanto un día con un style hemos creado un estilo en línea vemos por tanto como tenemos dentro de un día hemos introducido un parámetro en este caso este se llama este parámetro es un estilo sin destino además de cualquier parte cualquier tipo de estilo css lo que he hecho en este caso no os mareéis de momento con ello porque más adelante ya veremos más a fondo css es el maquetar es dar estilo dar forma y utilizado css para poner la letra arial y para poner el fondo del programa y yo pero lo que me interesa con lo que me interesa que os quedéis ahora es que esta parte de style igual a lo que sea es un parámetro esto de aquí es una propiedad style es una propiedad y estoy aquí es el parámetro de la propiedad veréis por tanto que muchas veces a las etiquetas les podemos personalizar el comportamiento style será una de las más frecuentes y de clase serán otras dos muy muy frecuentes que usaremos para combinar html y css de momento lo voy a quitar para no marear porque simplemente esto es una demostración de que hay que tener la estructura css maqueta y dicho esto lo voy a borrar para centrarnos ahora solo y únicamente en html a continuación vamos a trabajar un poco con etiquetas de estilo y con etiquetas de títulos vamos a empezar viendo que hay seis niveles seis niveles de profundidad para poner títulos dentro de html las etiquetas de título empiezan por h y van del 1 al 6 h 1 es el título de mayor importancia h 2 es el siguiente de menor importancia h 384 h 5 y starace 6 3 no existe más dh6 no tú si quieres te lo puedes crear recordado que se pueden tener etiquetas personalizadas pero el estándar no cubre más de 6 porque esto es una cuestión una vez más de lógica y de usabilidad si tienes más de 6 niveles de complejidad en tu página su usuario se va a marear así que aunque aunque se pudiera poner más de 6 yo no pondría más de 6 porque eso tiene que que el usuario tendría que comprender 6 niveles de estructura si no comprende más de 3 o 4 ya se viene y me encuentro hecho que existen 6 en absoluto te obligan algo sabes al 6 bueno pues lo que voy a hacer ahora es título de la página enmarcarlo dentro de un título html por tanto lo que voy a hacer es mirar al canción de la pantalla es antes y después del futuro de páginas poner h1 y ver lo que ha pasado con esto para empezar lo que he escrito super incorrecto pero si yo recargo el problema es que funciona pero no debería funcionar no debería funcionar porque yo he escrito aquí el título pero no la de cerrado y si no lo han cerrado todo lo es el título problema doble cerrado pero se cierra este contenedor y al cerrar este contenedor automáticamente se cierran las etiquetas que hay dentro pero es una mala costumbre no debo la norma de a como la cierra el contenedor ya no hace falta que lo cierre yo no escribir correctamente cerrado a mano porque porque en este navegador la ha cerrado automáticamente pero en otro navegador igual de la tierra y entonces tendrías el peor problema que hay en las páginas web en internet que es que se vean diferentes en diferentes navegadores intentaremos luchar contra esto hay veces que se puede luchar con buenas costumbres hay veces que no y tendremos que recurrir a trucos pero siempre que está en nuestra mano tenemos que escribir correctamente para que se interprete correctamente por tanto dentro del título de la página voy a escribir hace 1 y cierre atención y nada esto es otro fallo me pasa a mí le pasa a un montón de alumnos míos por tanto os lo digo para que no os pase hay veces que escribiendo rápido y al último es que me pasas también se me olvida de hecho me acaba de pasar escribes h1 y dices una etiqueta de cierre h1 y la barra no ha olvidado la barra se pasa un montón de veces por tanto cuando os pase y tendrás no se cierren mirar las etiquetas y poner lo que falta en programación veréis que muchas veces un puntito una barra un espacio mal puesto o lo que sea te fastidia la programación y tú te pones a mirar el código y te puedes pasar horas y decir es que yo voy haciendo el código y no sé qué he hecho mal o la solución en ese caso es universal vas a la nevera la tomas algo cuando vuelves lo miras y la primera vez examina si está el error al es o si es muy tarde por la noche y mete a dormir y tranquilo en cuanto levantes de un vistazo y los hay miras en el último ve y ayer estaba llorar pero eso es un clásico ya lo veis escribo título de la página guardo recargo y aunque el resultado es el mismo ahora es mucho más correcto por tanto a crear el contenido con html de este proyecto nosotros y trabajando por tanto el h1 lo voy a quitar de título de la página y lo voy a poner con el nombre del proyecto y voy a hacer voy a hacer algo parecido como una tienda sitio que tenga de todo que tenga experiencia de hp y mysql y algo también de flash para los manes que irán corriendo esos tipos van a sentir la que quedan super guay tapando productos por tener lo que voy a decir es el lugar de la h1 voy a poner mi tienda de momento y acá que el título estoy yo siempre lo digo en todas las clases cuando me oiga es decir y más adelante cambiar el título quiere decir queremos llevar el proyecto pero es lo que os voy a decir es que lo que acabo de hacer ahora es mucho más importante de lo que parece que es poner en los títulos en h1 y aunque yo no soy especialmente fan del pse o sobre todo porque si os dais si veis un poco lo que hay por el mercado veréis que el ser o tal cual se conocía hasta ahora va a cambiar google ha estado publicando artículos las últimas semanas donde ha revelado que con el balón al ritmo de búsqueda las técnicas y trampas se o no sólo no van a puntuar sino que encima van a paralizar y lo que va a puntuar es el contenido verdadero y bueno luego os voy a decir que poner el h1 el título de la tienda perdón en h1 es una buena técnica ser lo era hasta ahora y lo seguirá siendo porque pensad ahora antes de seguir supongo que ya lo sabéis pero seo search engine optimization es preparar tu página para que sea óptimamente leída e indexada por un buscador pensado un momento cómo piensa un buscador buscador no es un ser humano cada día son más inteligentes pero todo ser humano y además tú entras como humano en una página y enseguida amazonas por la forma por una posición encuentras el título en todos los años el problema es que tú como un usuario cuando entras una página ves esto pero el buscador ve esto y entre toda esta maraña de etiquetas el buscador tiene que decidir cuál es la más importante cuál es por la que te va a interesar la convención que usa google personalmente también pero siempre que hablo de seo parece que indistintamente hable de google pero este como google tiene 95 por ciento de las búsquedas por eso al final prácticamente de boxeo y google con la misma que prefiero es lo mismo pero pues lo que hace google es localizar cuáles son los títulos de la página y ya que h1 es el título de más importancia asume que h1 lo que encuentre dentro de h1 es el título de tu página moraleja por siempre el título de tu página con h1 siempre que puedas porque yo estoy cansado de ver páginas que el logotipo de la página o el título de la página es arial o times new roman o peor aberrante es comic sans que yo la comic sans o después la letra hasta que parte de niños que yo siempre digo tienes nueva guardería por comic sans pero no tienes una valdría no pongas comillas estelar ridículo pues la cuestión está con el tema de los títulos en que hay veces que veo gente que ponen hay times new roman y lo ponen como una imagen el logotipo de la página parece como una imagen que ya aprenderemos de insertar imágenes 10 es aberrante porque si lo pones como una imagen el buscador no puede leer dentro de la imagen entre unos pocos años podrán pero a día de hoy todavía no luego para que la puesto con la imagen ponlo con texto y el buscador va a saber de gente que medición a hombres que las mujeres tienen una cosa que se llama el texto alternativo lo veremos el art es cierto pero pesa muchísimo más un título h un apunte esta alternación de una imagen por tanto h y aún así qué pasa si mí es mi página usa una tipografía especial veréis que en css 3 se pueden importar se pueden incorporar tipografías personalizados pero qué pasa si el logotipo de mi empresa no se puede reproducir porque es una combinación de letras bueno mal en ese caso meteremos al soluciones pero en ese caso meteremos una imagen y ya veremos trucos para intentar voltear ese problema pero siempre que podáis el título de la tienda o de la página que está haciendo a continuación voy a meterme dentro de la sección una tienda online la verdad es que es un muy buen ejemplo porque ilustra que todo que tiene una tienda online bueno ya hablaremos de usabilidad pero básicamente una tienda online tiene un banner con productos destacados y luego tiene unos productos del mes abajo y luego tiene un montón de productos cuando tiene una jerarquía os voy a decir que vivo bueno tengo dinero y tengo sesión como ahora como hago nuevas divisiones dentro de esta página podéis usar la etiqueta pib tantas veces como queráis tantas veces como nos dé la gana así que yo voy a hacer lo siguiente pongo dir y pongo dyn y aquí dentro del libro fernando de momento propongo valen de la promesa que este simple y sencillo para de la página por un animal pues ese panel esa frase se convertirá en un barrio animado que se podrá hacer clic y todo eso y ahora antes de cerrar este vídeo os voy a decir una cosa también muy importante puesto que es la base como es la base todo es muy importante yo puedo hacer aquí un día y el programa se lo ha tragado perfectamente y se lo tragara ve perfectamente y no es no cometió ningún fallo de escritura de html pero os adelanto que tengo un problema y mi problema es que tengo un día ya que tengo un tiempo y son iguales cuando yo vaya a decirle a un nodo es grande y el salto y a otro tú eres forma de recto tiene forma de manera como voy a poder identificarlos no voy a poder identificarlos así que os recordáis antes que estamos trabajando con parámetros en las etiquetas un parámetro muy importante miradme hacer un hueco lo veis escribir y ahora me fresco atención es en lugar de escribir style escribir la palabra reservada llamada al aire y de identificación que es igual entre comillas al nombre que a ti te dé la gana ojos al nombre que te dé la gana pero yo os recomiendo poner banner porque porque vamos a ser en poco pocos yo podría poner el banner manía o podría poner más a fotos o podría poner cualquier otra cosa el nombre lo que haya dentro de las comillas es lo que vosotros digáis pero siendo un poco cupos y volviendo al tema del seo y volviendo al tema de la indexación al final van as tienen muchas páginas y google está acostumbrado a leer para con lo cual si google en dir y de igual a padre sabe que lo que tienes ahí es un vano y sobre todo y lo más importante sabe que si lo que tienes ahí es un banner probablemente dentro gran productos destacados así que si es un banner le va a prestar especiales de atención y te va a indexar y lo que hay adentro del banner también contarán mucho para indexar por tanto por eso digo pero insisto yo siempre el 90% de las veces os voy a enseñar un seo limpio y es el pse o limpio es no hagas trucos no hagas trampas no digas mentiras del señor limpio es falsamente en un banner con dientes diriges un banner me van a escribir un artículo redactado correctamente redactado claramente no mientas no digas que es la tienda online y luego pongas dentro una página porno para atraer visitas siendo o al revés o digas que es una página porno y luego porque todo eso es lo que va a penalizar a partir de ahora el tema es hay que hacer un señor limpio y al final óxido limpio no es más que facilitarle a google la tarea porque cuanto más le facilite esa mugre en la tarea y más claro escribas de contenido de tu web más alto aparecen las búsquedas lo que vamos a hacer a continuación si estamos con el cursor dentro de este vídeo atención con el cursor aquí es hacerme un poco de hueco hacerme un poco de espacio y seguir más que tanto lo que quiero hacer ahora si estoy trabajando con una web o con una página que después del banner tiene unos artículos destacados es meter ahora un pack de tres o cuatro artículos números me da igual digo tres o cuatro porque es más o menos lo que da el ancho de sí de una página de la tienda online es decir vamos a fijarnos por ejemplo en el clásico en apple.com no porque yo sea especialmente vaquero pero porque la página de apple es una buena referencia en cuanto a programación diseño y mira lo que vamos a hacer ahora es cada uno de estos pequeños artículos que hay bajo que pueden ser artículos de novedades de la empresa pueden ser artículos de artículos destacados que puedes comprar pero en definitiva estos packs de información que hay aquí bajo digo 34 porque para lo que es el ancho de una página más o suelen caber sin metro 5 o 6 evidentemente el ancho se reduce y prácticamente no cabe nada no porque esté prohibido meter 5 o 6 vale incluso se puede meter dos se puede meter 3 1 y eso tiene sentido porque es una especie de segundo banner que no tenga sentido no quiere decir que esté completamente prohibido el diseño web no hay casi nada correctamente previo por tanto lo que voy a hacer ahora es tengo el buscar ahí es pulsar enter para hacerme un espacio ahí abajo y voy a crear una nueva etiqueta entonces para crear etiquetas de artículo yo podría usar la etiqueta omnipresente veíamos ayer que es la etiqueta de la etiqueta bien es como esta de aquí no tenía ayer un vil es la etiqueta para crear divisiones cada uno de estos cuatro artículos con el tres o cuatro nuevos ser podría ser una subdivisión porque no la cuestión es que el html5 hay una nueva etiqueta específicamente pensada para artículos que es la etiqueta artículo artículo ley y por tanto voy a escribir lo siguiente voy a exprimir una llave y voy a poner la palabra articket como artículo en valenciano voy a poner esta palabra y con esto lo que estoy haciendo es poner una etiqueta donde le digo al programa que voy a introducir un artículo voy a poner esa etiqueta voy a poner la de apertura y la de cierre por tanto mirar lo que hago el código nuevo que he puesto dentro de este ejercicio son estas dos líneas he puesto arctic art y que luego atención barra arctic el y todo lo que me está en medio de esas dos etiquetas va a ser realmente el contenido del artículo que voy a vender en esa parte de la página lo que he hecho ahora es hacerme sitio para una artículo recordad que prácticamente cada paso que tengo que hacer dos operaciones primero aquí le doy al botón del disquete y guardo guardo los cambios que he hecho y segundo porque haya guardado los cambios no quiere decir que automáticamente se actualice en el navegador por tanto mira tengo que ir ahora al navegador y pulsar este botón con el círculo para actualizar y para crear una manera pues veamos los resultados actualizados en pantalla bien pero no veréis ningún cambio hasta ahora no veréis ningún cambio con respecto a lo que estamos haciendo antes porque lo que he hecho es poner venta de artículo pero de repuesto contenido así que ahí dentro aunque no lo creáis hay una etiqueta pero está vacía hay una etiqueta que le está diciendo al navegador lo que haya dentro de la etiqueta es un artículo que se puede comprar que se puede ver es un paquete de información así que ahora me voy a meter dentro de arte que fui aquí ahora en ese punto entre el arte de apertura el de cierre y lo que voy a hacer es escribir algo de contenido así que esto es un artículo y ahora voy a hacer lo siguiente mirar a 0 sueco pero es hueco aquí y ponerlo siguiente título del artículo os voy a dar una sorpresa un punto desagradable y quiero que escribáis esto en la pantalla creo que es lo mismo que yo se abre arte y que se cierra arctic él y entre la apertura y el cierre voy a poner el primer artículo del artículo y esto es un artículo la cuestión es que título del artículo iv está un artículo lo he puesto en una línea diferente en la línea separada pero voy a llevar una pequeña sorpresa y ahora el siguiente vídeo explico cómo solucionarla y es que si yo actualizo me dice el título del artículo recordar que los dos centros son el mal algo lo arreglaremos el título del artículo es un artículo pero qué pasa aquí y es los dos textos aparecen juntos pero yo lo que he escrito aquí es un texto en cada línea tenía que se produjera un retorno de carro al en comprobar que usar en la ventana los dos textos juntos y a continuación vamos a ver que hace falta una etiqueta una sola etiqueta para conseguir que retorne el carro es decir que baje a la línea siguiente el texto que escribamos como hemos podido mayor yo he escrito título del artículo y abajo escrito esto es un artículo y los dos textos mirar aparecen uno detrás del otro en html para hacer un retorno de carro no basta con simplemente hacer un retorno de carro en el archivo original hay que poner una etiqueta un poco especial es una de las etiquetas que no se cierran y es una etiqueta llamada de r por tanto lo que voy a hacer después del título del artículo es escribir esta etiqueta que se abre por el ver y luego cierra y no hay una segunda etiqueta con barra simplemente ponemos esa que es ya de menor que ver y luego llave mayor qué como siempre una vez más para que me voy a acercar más es por esto barra br perdón menor que era mayor que y luego los verticales el cursor me deja hoy bien si ahora atención como siempre siempre tenemos que hacer esto que es guardar la continuación actualizar y ahora sí título del artículo salta a la línea y esto es un artículo por tanto lo que estoy haciendo de esta manera mediante esta etiqueta br es forzar un salto de línea al poner br le estoy diciendo al navegador cuando llegues aquí al final del título del artículo salta abajo salta a la siguiente vídeo lo voy a hacer ahora es empezar a meter títulos voy a empezar a meter títulos para indicarle primero al buscador o primero al navegador que es lo más importante y es lo menos importante y segundo para ir un poco en cierta manera maquetando el contenido ayer usamos un título que se haga un titulo h1 y este titulo h1 es el que consiguió hacer que mi tienda aparezca en formato de título mi tienda aparezca resaltado aparezca con letra más grande y en negrita una cosa que voy a decir atención todo esto es muy importante porque cuando yo marco un título este texto aparece más grande aparece en negrita incluso si os fijáis tiene más margen re normal porque no podría aparecer el letra arial y porque en lugar de ser un poco más grande porque no es mucho más grave esto es lo que se llama un estilo por defecto en el estándar html en ningún momento viene indicado que cuando yo hago un estilo h uno tenga que ser negrita más grande y con más margen sin embargo aún sin cumplir los los estándares de html los navegadores lo que hacen es que cuando se encuentra en un estilo h1 y tú no has dicho cómo tiene que estar ese estilo dicen bueno ya que tú no has dicho le pongo yo un estilo por defecto y eso se llaman los estilos por defecto pero yo sé que vosotros diréis bueno pero esto yo no quiero que la letra sea negrita o yo no creo yo no quiero que sea tan sin román libre o que sea real no os preocupéis porque más adelante con css vamos a poder controlar cómo se presentan lo que voy a hacer ahora por tanto es crear un segundo título con otro nivel diferente voy a crear un título para este artículo por tanto recordamos que yo decía que h1 es el de más importancia h2 tiene un poco menos de importancia h3 tiene un poco menos de importancia h 4 y así hasta h 6 lo que voy a hacer es atención el título del artículo y poner una etiqueta h 3 atención miran al set 3 lo que ellos en el título del artículo ahora así que se abre y se cierra mirada la pantalla he puesto h 3 y luego un cierre de h3 y le digo que el título del artículo no es un texto cualquiera es un título a lo que vosotros me diréis oye si arriba de este h 1 aquí ha expuesto h 3 donde está h 2 10 h 2 me lo reservo para el menú de la legación que pondré más adelante debajo del tiempo por eso he saltado directamente de h1 h 3 yo os pregunto lo siguiente refresco recordamos una cosa que decía ayer cuando google entre en tu página cogerá el título h1 ir a esto es lo más importante cogerá al título h 2 y este es el segundo más importante cogerá el h3 y dirá esto es lo tercero más importante y os pregunto para nosotros que es más importante el menú o el título de vuestros artículos que si toman una decisión por regla general yo considero que el menú de navegación es más importante en el título de los artículos pero es que igual estás haciendo una página donde no se cumple esa regla por rato yo lo que estoy haciendo ahora es un proyecto que siguen los estándares dentro de lo posible pero no quiere decir que siempre haya que hacerlo así depende del caso podéis cambiar las reglas y ahora mira atención yo ahora guardo siempre hago lo mismo guardo por el botón del disquete recargo y ahora el título del artículo tiene un formato de título pero atención mucha atención como es un h 3 es un título pero es más pequeño que h 16 hay una cierta frank y hay voy a continuar voy a continuar y voy a decir que no me gusta no me gusta que se quede texto sin formato este texto no tiene formato esto es un artículo es el texto del artículo por tanto lo que voy a hacer es igual que allá arriba le ha dado una etiqueta de h3 le voy a dar una etiqueta muy común html que es la etiqueta para la etiqueta p es la etiqueta de texto de párrafo o texto de parágrafo es texto normal es texto que no es un título por tanto voy a poner aquí una etiqueta pe y aquí una etiqueta de cierre pp veis las cuatro etiquetas que he puesto he puesto que el título h3 empieza aquí el título h3 termina aquí el texto del parágrafo empieza aquí y el texto de parágrafo finaliza aquí lo que estoy diciendo por tanto la atención es esto es un título esto es un texto pero esto al final les termine todos igual todos los etiquetas todo es se abre y se cierra ya está atención una vez más por último y cierro este vídeo guardo recargo y no veréis prácticamente ningún cambio salvo el pequeño margen por haber puesto un parágrafo el estilo por defecto de parágrafo es el mismo que si no he puesto parágrafo pero es importante parece que mencionada pero sí que lo he hecho es importante que pongáis que de final es que es cada parte de vuestra página web hemos puesto un título al artículo esto está bien pero fijémonos que panel de la página sigue sin tener título esto no está bien por tanto no puede ser que el artículo tenga título y el banner no tenga título por tanto lo que voy a hacer es poner también h3 en el barra voy a poner el h3 en el banner de la página veis canción he puesto h 3 el valor de la página de la misma manera que tenía h 3 en el centro del artículo a partir de ahí atención vosotros tenéis que elegir de lo que acabo de hacer ahora mismo es que el banner de la página tenga digamos entre comillas la misma importancia que el título del artículo estáis de acuerdo con esto no estés de acuerdo con esto lo podéis cambiar igual vosotros no cuando google entre en mi página yo no quiero que indexa con la misma importancia el banner que los artículos yo quiero que el banner lo index antes el banner sea más importante que los artículos por tanto de esta manera vosotros podéis jugar con las etiquetas h de esta manera si el bayern es h 3 por ejemplo puedes decir no pues quiero que el artículo sea h 4 para que google sepa que h 3 es más importante que h cuando yo también suelo hacer una cosa esto yo no lo recomiendo específicamente yo os digo que yo lo hago que es el pie de página es un título porque es importante pero es lo menos importante el pie de página es lo que está abajo de todo contiene la típica información de copyright de quién soy de nota legal de aviso de privacidad de cumplimiento de la ley de profundidad todos de la cual ya hablaremos por tanto yo lo que suele hacer es que el título h6 recordad que los títulos iban de h 186 h 1 el más importante hace 6 el menos importante el h 6 me lo reservo para él tiene página por tanto aquí abajo que pone en footer este es el primer página lo voy a marcar con un h 6 por tanto de la misma manera que he puesto h 1 puesto siempre desde el puesto 4 voy a poner h 6 en el pie de página y mirar atención voy a grabar siempre hago lo mismo siempre que acabo de hacer algo grabo aquí con el disquete recargo en el navegador todo el master va a ser igual todo el rato igual y ahora poner que este es el pie de página mirad qué qué título más frustrante verdad porque este es el pie de página pero casi que el título es más pequeño que el propio texto pero es que me da igual esto es el estilo por defecto del navegador luego más adelante en css y ya decidiré si el pie de página es grande es pequeño es blanco que es negro es que grita es subrayado es itálico pues lo que sea lo importante de html no es cómo sería visualmente es empezar a marcar la estructura correcta antes de meternos a hacer más cosas tengo un artículo voy a borrar incluso el de r9 retención borrador de r porque he borrado el br si el verde lo había puesto para forzar el salto de línea bueno esto es en ese santo día también se fuerza cada vez cambio en estilo que tengo aquí h4 y luego tengo aquí el estilo por defecto no tendría por qué pero el estilo por defecto hace que se salte la línea bien lo que voy a hacer ahora es que si tengo un título del artículo y tengo un artículo que comprar pues lo que voy a hacer es meter tres artículos más como la gama fácil posible es copiando y pegando así que mira voy a seleccionar este artículo lo voy a atención botón derecho copiar es importante importante que selecciones correctamente selecciones desde artículo hasta el artículo es decir selección eyes todo esto para asegurarnos que había seleccionado todo el artículo y ahora si copias y abajo mirada atención a la pantalla bajo pego perú y perro que he hecho copiar un artículo y pegarlo cuatro veces no tiene más misterio así terminada la atención para guardo siempre lo mismo guardo recargo y ahora tengo cuatro artículos dentro de mi páginas web están copiados y pegados más adelante lo que veis cada uno personalizarlos cada artículo decirle que es un producto diferente o una información diferente para lo importante es que para seguir trabajando tengáis por lo menos un título tengáis un banner y tengáis cuatro artículos compuestos de título texto título texto título texto título de texto y por último un pie de página a continuación vibra a continuación del h 1 voy a hacer un menú de navegación y lo voy a hacer con listas no logradas por tanto he puesto el cursor aquí he puesto el cursor en el h 1 después y voy a pulsar la tecla de retorno de carro para hacerle un hueco ahí hacerme un hueco después del h 1 y ahí voy a empezar a trabajar mira lo primero que voy a hacer son dos etiquetas que es la misma de apertura y el cierre que se llama nada nada de navigation he puesto nada app se abre y no se cierra esta etiqueta también es nueva de html5 lo que le estoy diciendo al programa con esta etiqueta es que lo que vaya dentro de esas dos etiquetas va a ser el menú de navegación por todos lo estoy diciendo a los buscadores para que sepan indexar correctamente mi página y vamos allá y ahora dentro de la app yo puedo poner lo que quiera una recomendación que os hago evidentemente es dentro de nada poner a hacer un menú con listas no ordenadas qué es lo que vamos a aprender ahora las listas no ordenadas ahora en cuanto os lo empiece a enseñar os parecerá la peor manera de hacer menús organización pero os aseguro que más adelante no nos va a dar sino qué ventajas sólo nos va a dar ventajas así que dentro de nada me voy a hacer un hueco le voy a hacer un hueco y voy a poner lo siguiente he hecho además una sangría para ordenarlo mejor voy a poner dos etiquetas más que se llaman las etiquetas arnau contiene dos recetas llamadas él es el acrónimo de un orden el list que es lista no ordenada al final como os decía en elecciones anteriores sabes inglés ya sabes la mitad html dentro de un lo que hago es decirle a html que voy a crear una lista pero las listas ordenadas veréis son un poquito más complejas de lo que ha visto hasta ahora porque tienen otra etiqueta dentro que es la etiqueta li es una lista que tenéis en la pantalla es una lista pero li es un elemento de la lista ahora me voy a hacer un hueco dentro de ese uno y voy a escribir lo siguiente mira voy a escribir una etiqueta que se llama libre de escribir a la más grande y voy a poner inicio lo que esto es esto tenía una etiqueta nada dentro del nap había creado una etiqueta azul pues lo que he hecho ahora es crear una etiqueta link atención esa etiqueta lee se tiene que abrir y se tiene que cerrar y esa etiqueta link es un elemento de la lista es decir q la etiqueta y lo que estoy diciendo es ojo voy a hacer una lista no ordenada voy a hacerlo no empezar a hacerlo pero con la etiqueta link le estoy diciendo esto ya es un elemento de la lista link evidentemente es acrónimo de lista realmente es el de liszt y de itero list hayter un ítem de la lista un elemento realista y con esa lista vamos a hacer el menú de la navegación por tanto veis ahí tengo un primer elemento de lista que es el inicio de los menos de la negación esos que estaban por arriba persona entregar el cierre de todo el inicio a continuación lo que quiero es que copie y pegue ese elemento y que pongáis de momento vamos a inventarnos las las secciones que tenga vuestra web que secciones tendrá vuestra web pues por ejemplo estamos fundando online productos quienes somos contacto las típicas secciones me da igual lo que pongáis ahora porque más adelante se puede modificar definitiva que voy a hacer pues lo que voy a hacer no si queréis para como siendo vago es copiar el link pegarlo y modificarlo vale cualquiera y pegar era éste me lo tenga ningún problema es lo más común del mundo mirado voy a hacer luego lo muestro en grande copio y pego y pongo inicio productos quienes somos y contacto y el resultado por tanto queda así queda snap que contiene al un árbol que contiene a los list y trabajarlo y ahora continuamos por supuesto después de haber escrito nuestra primera lista ordenada lo que voy a hacer es grabar voy a grabar en la pantalla y voy a actualizar el resultado en el navegador y que tengo tengo esto lo que tengo es una lista no ordenada avisan a los granadinos bullets tiene unos círculos que me indican los elementos que tengo en la pantalla una cosa antes de cerrar esta parte y antes de continuar con sus listas cuál es la diferencia entre una lista ordenada y una lista no ordenada lo que tenemos ahora en la pantalla es la lista no ordenada bueno pues la diferencia es muy sencilla atención todos miran de la pantalla las listas no ordenadas y las listas ordenadas se escriben igual la única diferencia es que cuando pones una lista no ordenada pones un y cuando quieres una lista ordenada ponerse él o él si yo quiero esta lista y la quiero cambiar de no ordenada a ordenada atención a la pantalla simplemente lo que hago es evitar ese es eeuu cambiarlo por un pop y ahora mirad en lugar de poner huele pone o l y simplemente simplemente guardo recargo y mirar ahora ya no aparecen bullets redondos ahora parece 1 2 3 y 4 por tanto las listas ordenadas son igual que las números de navas para hacer un menú de navegación de una página web que uso ordenadas o no ordenadas me da igual la costumbre que tiene todo el mundo es usar no ordenadas por tanto devolverlo a él pero se podría hacer perfectamente un menú de navegación con una lista ordenada no habría ningún problema ahora para continuar lo que voy a hacer es dejarlo así como veis en la pantalla que es con la lista un l no ordenada la lista huele a partir de ahí cada uno de los elementos de la lista para que los cuatro elementos la lista aparezcan con esos pequeños bullets los pequeños círculos lo que voy a hacer a continuación es explicarnos cómo hacer sus listas una su lista es una lista dentro de otra lista es que por ejemplo inicio es el inicio quienes somos esto que somos por productos que puedo tener un montón de productos así que dentro del menú de productos puedo tener que cuando cuando barton por encima de aparezcan pues no se ve el tipo de tienda que sea si fuera una tienda electrodomésticos pues productos del hogar televisiones lavadoras pero que se secciones definitiva por tanto si voy a hacer una lista dentro de productos lo primero que voy a hacer es meterme dentro de productos por tanto voy a poner el cursor aquí el primer curso hay que seguir productos y a continuación metro y el cursor veis la barra vertical una vez que tengo y el cursor voy a pulsar enter expulsado y fijaos cómo lee y se me queda aquí y el cierre de elígeme queda ahí abajo de hecho huevo y ahora lo que voy a hacer es crear una lista interior pero para hacer esa lista interior lo que voy a hacer es repetir el esquema que ya conocemos cuál es el esquema que ya conocemos el esquema que ya conocemos es primero por cul y luego por lee lo que sí os voy a recomendar es poner sangrías poner sangrías porque de saber a veréis claramente qué etiqueta está dentro del que etiqueta lo voy a escribir y ahora me acerco a la pantalla lo que voy a hacer aquí es poner dentro del esquema que ya conocemos azul y luego dentro del lic es como una lista dentro de otra lista y pongo link pues no sé si vendo electrónica mediante decisiones y luego viendo y lavadoras y luego vendo por ejemplo por último ordenadores y al final lo que tengo voy a trabajar voy a actualizar mirad lo que tengo es esto si no escrito este código que lo voy a poner en grande en la pantalla lo que tengo es una lista dentro de otra lista el código de escrito es este lo voy a comentar y sobre todo lo voy a marcar a marcar no es importante tenía productos dentro de productos el leaf está aquí el leaf está aquí he creado otra vez una lista no de nada y dentro de esa lista ordenada he vuelto a crear elementos link y ya está no tiene más misterio no tiene más misterio pero bueno pero fácil si queréis tampoco lo es tanto porque fijaos que empieza a ser un poco de rollo porque teníamos por aquí un link pero pero es que luego tenemos una más grande y el momento que dice soy sencillo empezando a liar con tanto li y con tanto huele mal y es normal al principio es completamente normal acceso un poco de bacalao con tanto gol y con tanto lee lo importante es ver voy a ponerlo en verde de este que está dentro de otro libro y según es una lista en verde dentro de otra lista ahora que ya hemos avanzado un poco nuestro proyecto de html voy a enseñar cómo se abre este proyecto en el segundo programa que instalamos ayer que es note paz plus plus el programa da notte paz plus tiene algunas ayudas que nos permiten para cambio y cosas que no tienen con respecto al gel que nos permiten ordenar un poco mejor la información los dos programas son editores de texto por tanto que yo haya empezado en un proyecto de head y no quiere decir que tenía que continuarlo en jérica porque al final lo que importa es lo que estoy escribiendo es el lenguaje ese lenguaje se puede abrir en cualquier programa por eso voy de momento voy a hacer una demostración no quiero que lo hagáis nosotros simplemente quiero que lo veáis en pantalla para que veáis diferencias voy a cerrar el evento voy a abrir el programa que se llama note plus estos lustros a gas no voy a cerrar sí y lo que voy a hacer ahora es archivo abril y voy a abrir el mismo archivo html que estaba abriendo en xerez así que me voy a master well me voy a archivos que tenía que tenía hasta ahora y esto es lo que pasa esto es lo que se ve él no te paran bruscos entonces fijaos pero de patos pues básicamente hace lo mismo que felipe te marca las etiquetas con color pero a cambio te da cositas si lo has adivinado correctamente si has puesto las sangrías correctamente y es que si marca es una etiqueta automáticamente te pone una línea roja y te marca la etiqueta debajo no te pone números arriba pero a cambio te ayuda un poco a saber que por ejemplo si esta es la etiqueta nadal donde acaba de etiquetar o se acaba ahí tenido a marcarlo y lo que es más esto a mí me gusta mucho lo que pasa es que a la gente le día bastante al principio y escribo el body que tiene pues te permite incluso plegarlo y es decir que tiene te permite pegarlo por ahí el xerez que tiene a esto es el género y esto es la sección y esto es el futuro por tanto es un programa que tiene algunas ayudas visuales para aguilarte a ordenar mejor la información dicho esto porque empiezo con gel los proyectos porque tiendo más a usar here it que a usar los palcos plus tiende a usar gel it por la sencilla razón de que los de patrick plus no tienen a la izquierda la ventana del navegador de archivos la ventana que te permite saber cuántos archivos tiene su proyecto y cargarlos automáticamente esa ventana hasta ahora no ha sido importante porque sólo teníamos un archivo en el proyecto pero a partir de ahora que vamos a empezar a traer más archivos veréis que sí que es importante hay solución como haber solución haberla hayla y es que bueno puedo revelarle un poquito de espacio a retomar plus plus puedo sacar un explorador de windows re clásico muy típico el rodador de windows puedo ir a la carpeta que estoy usando y decir bueno me la pongo aquí digamos reconstruyó como una especie de emperador de archivos atrás un poco cutre y por eso es por lo que aún teniéndolos de paz plus plus estas ayudas visuales nos sirve palabra pregunta por qué se llama no te paz plus realmente sean los demás tiene dos unos más pero se le llama diagonal blues plus por lo siguiente hay un lenguaje de programación que se llama hace su lenguaje para hacer aplicaciones para sistemas operativos libro lenguaje de programación que se llama c plus plus temas más que éste más más éste pero aumentado efe con más cosas por tanto este programa que es no te paz plus plus es como él no te paz de windows pero con más cosas para que por tanto número del plus plus es como un guiño para decir que es como él no te paz pero con más cosas otra cosa y esto que voy a decir afecta tanto anoche padres plus como el heavy veréis que tanto no te pagan los blues como de here it hay una pestaña que pone codificación y otra que por el lenguaje lo que me gusta de estos programas es que te permiten trabajar en múltiples lenguajes con el mismo programa te permite trabajar y al estar incluso hay tantos que están ordenados por el gran político ence dependiente trabajar con cesc con césar con temas más en h te permite trabajar con html el cce te permite trabajar con css por la jota te permite trabajar con java y con javascript como jnsp por la p te permite trabajar con php es decir es un programa que con un mismo programa nos va a permitir escribir en todos los lenguajes esperamos y nos va a detectar el lenguaje y nos va a marcar las reglas sintácticas del lenguaje lo mismo pasa como no te pagan plus plus y lo mismo pasa con head yo voy a abrir help it se estaba viendo estos head y recuperamos el último archivo abierto archivo index y fijaos que en ver el modo resaltado tenemos otra vez pues entonces tenemos césar temas más tenemos como ya tenemos un montón de lenguajes que incluyen por ejemplo spirit tenemos php tenemos javascript la pregunta es si yo sólo he dicho que lenguaje iba a usar como el programa detectado cómo tiene que marcar las etiquetas bueno os acordáis que el primer paso que vimos fue nombrar el archivo html guardar el archivo como it takes punto htv si yo avalo el archivo como el 2.7 m automáticamente el programa sabe que tiene que poner el estándar html vale si llega un momento el programa se equivocan como les puede pasar se lo podemos indicar manualmente a continuación voy a hacer un primer enlace y este primer enlace me va a llevar a google por ejemplo por tanto mirad a continuación de contacto voy a copiar contacto lo voy a pegar aquí abajo veréis lo duplica lo he cogido esta línea tiene duplicado aquí abajo y ahora en la segunda línea el lugar de contacto voy a poner atención mirada la pantalla voy a poner quiero ir a mujer creerán google como si quisiera ir a cualquier capacidad igual que cuestiones que aquí y ahora atención aquí ahora en este link final pone quiero ir a google dirás amor y ahora cuando mira mi pantalla y recargo quiero ir a google pero estoy yendo a google no estoy yendo a google esto es un texto esto todavía no es un híper enlace lo que voy a hacer a continuación es convertir ese texto en un enlace que me llegue que me lleve a google oa la página que sea lo que voy a hacer a continuación por tanto es habilitar es conseguir que sí que s quiero ir a google me lleve a google realmente por tanto voy a enmarcar este quiero ir a google con una de las etiquetas más importantes si queréis es la etiquetas en la cual no existiría internet podría no haber ninguna etiqueta más pero si no existiera ésta no habría nombre en internet que es la etiqueta a la etiqueta de anchor de ancla un ancla en internet es un sitio donde pinchas y te lleva a otra parte entonces mira lo que voy a hacer simplemente es enmarcar no voy a quitar las etiquetas link por supuesto os quiero conservar pero voy a enmarcar quiero ir a google entre dos etiquetas a nada en las trace una etiqueta de apertura y otra etiqueta de cierre y con eso le estoy diciendo al navegador que esté quiero ir a google es un ancla que cuando yo pulse en él pasará al un ancla es básicamente lo mismo que decir un hipervínculo y un enlace es lo mismo realmente no porque un ancla también puede ser un ancla interna pero de momento vamos a decir que es lo mismo queréis ver qué pasa de momento he puesto una una barra a después de la cual vamos a ver qué pasa de momento seguro que fracasará porque me falta algo aquí guardo recargo quiero ir a google no hace nada estoy a mitad de camino lo he hecho casi bien pero en falta una cosa que creéis que me falta pues es muy sencillo yo aquí le he puesto la etiqueta sí vale está muy bien he dicho que voy a ir a alguna parte pero lo he dicho dónde voy a ir te digo que quiero ir a google pero porque mira quiero ir a google el navegador no tiene que saber que la página de google es hp hay dos puntos www.google.com punto es o punto lo que sea por tanto lo que voy a hacer es escribir un parámetro dentro de esa etiqueta dentro de esa etiqueta me voy a hacer un poco de espacio ahora lo pongo en grande y voy a poner http dos puntos www.google.com voy a ponerlo en grande voy a acercarme y veréis que el resultado es este en la etiqueta he puesto lo siguiente después de la app todo un espacio y pongo el texto ese tal cual lo veis en la pantalla nos podéis dejar ni unas comillas ni un punto ni unos dos puntos tenéis que ponerlo igual y de esa manera nos y memorizarlos y no sin demonizar lo en cuanto a lo que es este este grupo en cuanto a lo que es espacio h red igual comillas no tenéis que memorizar y evidentemente esto esto evidentemente cada vez cambiará para poner lo que queráis y ahora guardo al revolver grande recargo y comprobaréis mira de la pantalla algo muy grande como ahora ese elemento está de esta subrayado- está de color morado antes de azul y sin pulso ahí voy a mover luego ya he hecho un primer hiper enlace a continuación voy a dar un paso muy importante ya que lo que voy a hacer es crear páginas interiores ahora mismo mi sitio web tiene una página que es index.html es la página de inicio pero claro necesito una página para enseñarte mis productos otra página para el formulario de contacto necesito más páginas y aquí es donde vamos a apreciar más gente que no te para el plus plus porque lo que voy a hacer es dentro de editor de textos pulsar sobre ver para el lateral voy a sacar el panel lateral si todo ha ido bien veré aquí que tengo mi archivo index html más sólido que la una pero lo que voy a hacer a continuación es crear nuevos archivos atención ver a todos la pantalla voy a crear un archivo nuevo botón derecho aquí pues aquí botón derecho por su archivo nuevo y pongo ahí por ejemplo las secciones que haya dispuesto igual que voy a poner productos punto html el nombre que queráis más punto html atención realmente el nombre que queráis no tenéis que poner un nombre compuesto a ser posible por una palabra con pocas letras si ponéis un nombre que tenga varias palabras que estén juntas no pongáis espacios no pongáis espacios tener en cuenta que estas páginas el título de la página lo va a procesar muchas veces un servidor que a veces no es español entonces no pongáis en es no pongáis acentos en el título vale fijaos en estos productos sin mayúsculas y minúsculas luego dentro del archivo podría hacer todas las mayúsculas minúsculas señas acentos que me dé la gana pero en el título del harén del archivo productos html intentó evitar a veces necesito poner una ñ lo que hago como en valenciano es poner en y oa veces una n verã igual el caso es evitar en el título del archivo dentro de otra cosa por el título del archivo intentar escribir una sola palabra sin espacio sin acentos y leyes sin caracteres extraños por supuesto sin barras sin dólares ni nada parecido ya tengo mi página de productos voy a continuar no hay acabado y ahora vuelvo a repetir el proceso una vez más en blanco pulso botón derecho archivo nuevo y ahora que tenía la página de quiénes somos mirad quiénes somos dos palabras peligro pues una vez dos para pongo quienes somos todo junto sin espacio lo pongo quieres lo que queráis voy a poner quienes junto a html y por último creó un archivo nuevo llamado contacto html y estas son las cuatro páginas que de momento tiene mi sitio web y ahora tengo tres páginas más creadas tengo la página de inicio ya tengo la página de productos tengo la página de quiénes somos y tengo la página de contacto pero cómo puedo ir a ellas estoy bloqueado pero veis productos quiero hacer clic y cargar lo que haya dentro de la página de productos quiero hacer clic e ir a otra página como lo voy a hacer bueno pues esto lo voy a hacer de la misma manera que he hecho un hipervínculo externo atención cojo productos y le pongo una etiqueta y esa etiqueta le pongo un hr es decir hago lo mismo que antes con la única diferencia cree que habrá en lugar de escribir http dos puntos barra y todo aquello lo que voy a hacer es esto voy a escribir directamente la dirección del archivo html pitido al que quiero acceder o sea no escribo mediante dos puntos www.la que es titular escritura chérrez esto es igual que antes pero ahora lo nuevo el parámetro es que escrito productos puntos html es importante que si el archivo termina en html cuando y no desde aquí se llame punto html que no lo habéis visto bien pues lo vuelvo a hacer ahora me voy a quienes somos no voy a volver a hacer ya quienes somos canción batalla importante le pongo una letra a y si le pongo una letra a le pongo una etiqueta de cierre y después ya es momento que lo escribo y luego lo grande le pongo un hr y pongo tienes punto html bien fijaos cómo escribir le pongo a hr igual a quienes punto html al final es lo mismo lo mismo en las tres o en todos aquellos hipervínculos que queráis crear y ahora por último ya si lo pongo grande en la pantalla voy a hacer la de contacto y voy a repetir una vez más porque todo el rato es lo mismo en contacto le pongo una adelante no os olvidéis de cerrarla por detrás y le digo hr contacto punto html y ya tengo las tres etiquetas correctamente creadas se acuerdo y recargo vamos a hacer la conformación le voy a recargar y noquear a productos tienen somos y contacto esta vehículo azul esta mi color azul porque le he puesto un hipervínculo la pregunta que nos puede surgir igual que con el título es en qué momento yo he dicho que sea azul y en qué momento del choque se han subrayado y si yo quisiera que fuera verde bueno esto es lo que se conoce como un estilo por defecto cuando yo no les digo cómo es utilizarlo el programa le aplicó un estilo por defecto donde aunque de forma extraoficial es un estándar el que los hipervínculos sean azules con el subrayado por bajo la gente lo reconoce fácilmente como hipervínculos por tanto tengo ya tres vínculos internos funcionando tengo uno dos y tres internos y ya sabéis que he creado un 4 externa hacia google qué pasará si voy así ahora hago clic en la página de productos se abra hago clic en productos mira voy a una página en blanco esto es malo esto es bueno eso está bien porque lo que he hecho es ir a una página que se llama productos que yo no he escrito ningún contenido escrito yo algo en productos y no escrito nada por tanto mirar lo que voy a hacer voy a hacer doble clic en la página de productos para que pase aquí voy a hacer doble clic en productos y pasar a una nueva pestaña así que hago doble clic aparece ahí en la nueva pestaña y digo esta es la página de productos voy a escribir texto a palo seko miradme primero y luego lo haces grabó siempre importante grabar y ahora si voy a la página de productos esta es la página de productos luego ya estoy consiguiendo desde unas páginas ir a otras no lo veis no vuelvo a repetir desde index quiero ir a la página de quiénes somos la página de quienes somos hasta aquí se llama quieres html así que el primer paso algo doble clic y al hacer doble clic la página se carga aquí lo veis tienes punto html y digo bienvenido a la página de quienes somos atención mirad mirad primero lo hacéis si yo ahora hago clic en quienes somos bienvenido a la página de quienes somos vale en un primer lugar lo que he hecho es crear varias páginas en mi sitio web y lo que estoy haciendo ahora gracias a los hipervínculos es hacer que desde la página inicial puede ir a cada una de esas nuevas páginas que he creado a continuación por tanto lo que voy a hacer es que cada una de las páginas contenga los enlaces la información suficiente para ir a cualquier otra parte de la página así que yo desde la página inicial puedo ir a productos pero llego a un callejón sin salida yo puedo ir a quienes somos pero llegó un callejón sin salida así que lo que voy a hacer es lo siguiente para empezar en la página inicial voy a crear un hipervínculo vamos a ver el inicio voy a crear una etiqueta a que me llena la página de index html mirad mirad el nuevo queréis os paso el código y lo podéis ver bien esto está bien pero me quedaba igual tengo inicio ahora como enlace que lleva a ella misma es un auto enlace pero esto sigue estando así bien lo que voy a hacer ahora era escoger la página principal como si fuera una plantilla por tanto voy a seleccionarlo todo todo lo soluciona todo una manera fácil de seleccionar es evitar seleccionar todo y lo copió y ahora te voy a contacto y lo pego me voy a productos y lo pegó y me voy a quienes somos y lo perro he pegado en esta página he pegado la primera página en todo el resto de páginas he cogido index lo he copiado todo y lo he pegado en el resto de páginas y ahora en productos me voy a ir aquí y voy a decir bienvenido a la página de productos en contacto voy a eliminar todo lo que está en la sección y voy a decir bienvenidos a la página de contacto ahora los paso el adjunto con el html para que lo tengáis para que lo podáis abrir y curiosear y esta es bienvenido a la página de quiénes somos guardo lo voy a probar horas paso al código y digo si voy a la página de productos bienvenido a la página de productos si voy a la página de quienes somos bienvenidos a la página de quienes somos si quiere ir a contacto bienvenido a la página de contacto y desde cualquier página puedo ir a cualquier otra página incluso puedo ir a la página principal por tanto es un copia-pega que nos permite crear una primera navegación dentro de la web que estamos creando lo primero que vamos a hacer para insertar multimedia dentro de nuestros proyectos es aprender a insertar imágenes hay varios tipos de archivos multimedia que podemos usar donde el primero de ellos es el archivo de imagen es el más sencillo el segundo de ellos es el archivo de vídeo y el tercero es el archivo de audio son los tres archivos básicos que podemos importar dentro del proyecto para eso lo que hemos hecho antes de empezar esta parte del ejercicio es trabajar con una carpeta que sea multimedia que tiene estos tres tipos de recursos por tanto dentro de multimedia al proyecto encontramos imágenes donde he seleccionado las imágenes por defecto de windows de windows 7 imágenes en vídeo he traído un vídeo en formato mp4 y en audio he traído un formato en un vídeo en un audio en formato o jeje y por tanto vamos a empezar por lo más sencillo que es importar imágenes es insertar imágenes dentro de html os voy a decir lo primero que os voy a decir es que existe una manera de insertar de incluir el contenido de la imagen dentro de un archivo html como existir existe pero es muy poco frecuente la manera que se usa en el 99% de las inserciones de imágenes no es meter la imagen dentro del html sino llamar a la imagen en su posición original esto quiere decir que el html no va a contener la imagen sino que el html va a llamar a la imagen original y eso es muy importante porque en todo caso en todo momento cuando mováis el archivo html por ejemplo del ordenador de la escuela a casa tenéis que llevaros no solo el archivo html sino también los archivos de imágenes porque si te llevas la html pero no tienes las imágenes cuando llegues a casa te faltarán las imágenes por tanto que tengáis en cuenta mucho más adelante veremos cómo es posible aunque no recomendable por regla general insertar la imagen realmente dentro del archivo html lo que vamos a hacer ahora de momento es llamarla así que lo que voy a hacer es abrir el archivo index html por tanto voy a hacer doble clic en el archivo index html si no estaba cargado ya lo voy a cargar dentro de la vista de código para empezar a trabajarlo y lo que voy a hacer porque recordamos que este archivo index html tenía cuatro artículos mirada que la derecha tenía título del artículo esto es un artículo título del artículo es un artículo y título del artículo del artículo veis tenemos aquí a la derecha cada uno de los cuatro artículos bien pues lo que quiero es que vayamos mirar aquí donde pone esto es un artículo con el título del artículo y luego pone este es un artículo y luego hay una etiqueta de cierre pues quiero que vayáis aquí y mirar pero que veréis aquí justo a este punto donde se cierra el segundo título de esto es un artículo y os hacéis un hueco pulsáis centre creáis un espacio en blanco y así ahí vamos a insertar algo a continuación vamos a insertar una imagen lo primero que vamos a hacer por tanto es insertar una imagen la imagen es lo más conociendo insertar lo que os voy a decir es que la imagen la inserción de imágenes existentes en términos de la versión un nuevo desde la versión 2 existe hace mucho tiempo y ahora lo veremos y en la inserción de vídeo y la inserción de audio existe desde hace menos tiempo es la novedad de html5 a lo cual me veis como que se ha rodeado si hace años que estoy viendo los vídeos o youtube por ejemplo no son vídeos en flash es otra cosa y cuando hablo de insertar vídeo en html5 habló de insertar vídeos de manera nativa sin usar plugins como flash pero vamos a empezar con las imágenes la imagen la etiqueta de imagen es una de esas etiquetas que os decía anteriormente que se abren transa cierra tienen distintas de apertura pero no tiene etiqueta del cierre por tanto lo que tenéis lo primero que tenéis que hacer en la pantalla es escribir una nueva etiqueta en orc y escribir la palabra ing por tanto mirar la etiqueta para meter imágenes en html es la etiqueta ing evidentemente acrónimo de motivo de email la imagen claro yo con esto no hago nada es decir mirando la pantalla he metido una imagen pero y que he metido una etiqueta de imagen no lo he dicho al programa no he dicho html qué imagen quiero meter por tanto os acordáis que a las etiquetas prácticamente a cualquiera le podemos meter en parámetros atributos y parámetros por tanto y mgm etiqueta de imagen que voy a cargar una imagen el atributo y el parámetro es qué imagen voy a cargar vale entonces lo que voy a hacer ahora es hacerme el sitio una vez más no voy a escribir algo lo acercó lo que voy a hacer es escribir las palabras src las letras src src quiere decir source source quiere decir fuente igual y comillas y dentro de ese src igual comillas lo que voy a hacer es escribir la ruta escribir donde está la imagen que quiero importar me he hecho un hueco dentro de img y escrito src igual comillas comillas lo que estoy haciendo y es a continuación te voy a decir dónde está la imagen que quiero importar ahora dentro de las comillas y con eso acabaré de este vídeo lo que voy a hacer es decir dónde está esa imagen atención mucha atención porque esto te voy a decir en el fondo es sencillo pero la primera futuro explican te puede resultar un poco difícil lo que tenéis que hacer ahora dentro de las comillas es especificar cuál es la ruta hacia el archivo que quieres importar cuál es la ruta donde está ese archivo dónde está ese archivo con respecto al archivo actual cuál es el archivo actual index.hu pml estamos trabajando en índices puntos html verdad bien pero ahora fijaros voy a sacar la ventana del panel lateral tengo aquí index.html donde están las imágenes las imágenes están en la carpeta multimedia las imágenes están al lado de index.html no están dentro de la carpeta multimedia pero un momento no hemos acabado si yo abro la carpeta multimedia las imágenes están allí no las imágenes están dentro de la carpeta de imágenes y ahora sí ahí están las imágenes luego lo que tengo que hacer yo no puedo llamar directamente a la imagen y crisantemos punto jpg porque no se encuentra en esa ruta lo que tengo que decirle a la imagen es primero entra dentro de la carpeta multimedia segundo entra dentro de la carpeta de imágenes y tercero coge una imagen esta es la filosofía para cómo se aplica eso es muy fácil mirar a la pantalla lo que hago dentro del source es decirle tal cual yo lo he dicho al cual yo he dicho el castellano ahora sólo voy a decir una html primero multimedia entra dentro de la carpeta multimedia barra con barra le estoy diciendo y ahora mismo dentro de otra carpeta imágenes entro dentro de imágenes barra carga la imagen que quiera ha seleccionado una imagen y cargada por ejemplo lleva a cargar el koala por qué así que pongo cual a punto jp here y ahora moment in a ver a todos a la pantalla ahora como grande lo voy a grabar lo voy a probar y veréis como ya tengo allí el cual ha insertado en una página html antes de cerrar y antes de ponerlo en grande una cosa ahora mismo estamos creando una página web en windows y windows es un sistema operativo bastante tolerante con las mayúsculas y las minúsculas quiero decir con esto que si por ejemplo en lugar de escribir koala con mayúsculas lo hubiera escrito con minúsculas hubiera funcionado fíjate kiko a la la primera estas mayúsculas esto es una mala costumbre que nos da windows el problema de esto es que desarrollamos nuestra página en este ordenador aún con errores funciona el día de mañana lo subimos a un servidor comercial y de repente no funciona y tú dices como es posible que mi ordenador funcionara y cuando lo subo a internet no funcione por la sencilla razón de que en tu ordenador con windows las mayúsculas y las minúsculas dan igual pero el día que lo subes a un servidor a internet si queda igual por tanto lo que funcionaba en tu ordenador no funciona en internet moraleja acostumbrados a escribir correctamente mayúsculas y minúsculas si el archivo koala la primera letra a la que están mayúsculas escribe las mayúsculas y así te aseguras que funcionará correctamente cuando los subas a lo que voy a hacer ahora es un truco de imágenes que no debe hacerse pero en cambio lo voy a hacer yo lo que estoy haciendo es llamar a una imagen que está en mi carpeta es una imagen que ocupa espacio en mi servidor que ocupa recursos de mi servidor más adelante hablaremos de servidores y ya hablaremos lo que cuesta contratar un servidor y el espacio la memoria que puedes poner en el social quilas cuando alquila su servidor es como cuando lo quieras un local comercial tool o alquiladas por metros y en esos metros puedes meter lo que te quepa dentro de esos metros vale pues cuando alquileres un servidor web para meter tu página web en internet ocurre lo mismo alquilar el servidor un trozo concreto el problema es que las imágenes ocupan espacio entonces hay un truco que se llama hot link pero insisto es un truco no es una técnica no es algo que debéis usar todos los días sino que yo os voy a enseñar que es posible que os lo pueden hacer a vosotros también y no lo vais a poder controlar prácticamente sí que se puede controlar pero cuesta bastante así que mira voy a hacer lo siguiente voy a ir a google voy a a abrir una voy a cargar una imagen en google en google imágenes google may es voy a poner playa o bits lo que sea playa y el programa se encuentra fotos no sé la primera me da igual la la foto que sea atención grande hago clic en la foto que se abre igual quiero ver la foto y veo aquí y sé ibiza punto una de apartamentos veo aquí una imagen que está en internet esta es la dirección de la imagen siempre que yo entré a esa dirección voy a poder ver esta imagen esta imagen está en mi servidor no esta imagen está en internet la imagen está en un servidor publicado en internet lo que os quiero decir es que es posible que yo haga lo siguiente si tenéis la imagen de aquí atención hago clic con botón derecho en la imagen uso una función que se llama copiar la url de la imagen en cada navegador se llama diferente copiar la url y copiar la dirección de la imagen da igual los tres que hacemos bueno es lo mismo vía atención voy a copiar la url de la imagen y a continuación voy a cambiar por la url que tenía hasta hace un momento voy por tanto a pegar y lo que he hecho directamente es como podéis ver cambiar la dirección que tenía por la dirección que he copiado de internet atención lo que hago ahora es guardar es recargar la página principal y fijaos que ahora en mi página principal está la página está la foto de la playa un momento ahora repasemos ahora recapitulemos si voy a ver para el lateral voy a multimedia imágenes está alguna playa por alguna parte no cómo es posible que yo en mi página web tenga una foto de la playa porque no le estoy cogido de mi carpeta sino que mi página web está en mi ordenador pero si está yendo a internet a esa imagen y vuelve dos cosas eso técnicamente como ser legal seguramente será legal pero muy lícito no lo es vale por tanto debemos evitarlo la tela de lo posible porque lo que estamos haciendo es usar un recurso de otra persona usar un recurso del servidor a menos evidentemente que tengamos permiso para hacer eso otro peligro otro peligro es que esta persona que tiene esta imagen en su servidor el día de mañana y cuando digo mañana puede ser mañana hoy mismo la puede quitar de su servidor y si la quita de su servidor dejará de estar en mi página web por tanto dependo realmente de esa persona así que mi objetivo ahora es enseñaros qué se puede pero no deciros que lo hagáis de manera continua sino que lo hagáis solo en casos puntuales y solo si no hay más remedio y tenéis el permiso de la persona a quien entre comillas le estáis quitando la imagen lo segundo que voy a deciros ya habéis pensado que si nosotros podéis hacerlo también pueden hacerlo con vuestra página la respuesta es que si en la mayoría de los casos cualquiera que entra en nuestra página puede ver la dirección de una imagen de tu página y vincularla a la suya y por tanto gastar tu espacio es como si tuvieras una estantería en trabajo comercial y hubiera aún aprovechado que viniera y pusiera cosas suyas en esa estantería tú dirías pues tocaba el culo de la calle pero no puede hacerlo en este caso vale tienes a alguien que está usando una estantería de los comerciales no puedes evitarlo sí que se puede pero es complejo lo que voy a hacer ahora es devolver la imagen original voy a quitar esta imagen por tanto la localizó y voy a quitar de aquí voy a poner multimedia barra imágenes barra o a la punto jpg atención todos a la pantalla yo le voy a guardar y voy a recargar último y el cual antes de explicarnos lo siguiente que os voy a decir que es cómo trabajar la anchura y la altura de una imagen os voy a decir voy a aprovechar para decir que debéis tener el cuidado esto es un error muy común nos va a pasar muchas veces al escribir la ruta a una imagen o la ruta lo que sea fijamos una cosa imágenes y el último puesto sin acento y ahora voy a poner imágenes con acento cuarto recargo se ve la imagen no ha fallado este incógnito dice que la imagen ha fallado porque cuando escribáis una ruta a una imagen a un vídeo aún lo que sea la ruta tiene que ser exacta muchas veces os vais a romper la cabeza contra la pared diciendo pero sitio he puesto la ruta bien porque no sale la imagen cuando no salga la imagen en la gran mayoría de los casos el 95% de los casos es porque has cometido algún error al escribir la ruta de la imagen fíjate un multimedia voy a cambiarla por una multimedia esa es por una y es suficiente para que el programa ya no entienda donde está la imagen y os muestre este icono de algo ha fallado vale por tanto tenerlo en cuenta siempre esa cuestión de que la ruta tiene que estar perfecta el que esté perfecta imagen no se vea eso nos pasa a todos muchas veces por tanto no os preocupéis bueno lo que voy a explicar en este vídeo lo que voy a contar en este vídeo es cómo trabajar con la anchura y la altura de la imagen porque si os fijáis mira la pantalla nos fijáis el cual ha salido gigante porque la imagen del cual han salido gigante cuando yo importa una imagen en un archivo html y yo no le digo las proporciones que tiene que tener esa imagen por defecto las proporciones son las originales si la imagen es grande el mondra grande si la imagen es pequeña la futura pequeña pero viene muy bien poder decirle html cuáles son las dimensiones que tú quieres para esa imagen lo que os voy a enseñar es un poco en contra de lo que os comentaba anteriormente de html fijaos que nos decía html es el contenido css es el estilo css es la apariencia lo que voy a hacer es fijáis realmente es modificar la apariencia del objeto mediante html esto no se recomienda ahora si os lo voy a enseñar para que de momento lo podréis podéis trabajar podéis manipular la apariencia de las imágenes cuando veamos css muy probablemente esto lo haremos usando css y no html pero hasta que ese momento llegue os voy a decir lo siguiente lo que voy a hacer es entrar dentro de la imagen dentro de la etiqueta de atenciones estoy entrando aquí en este punto dentro de la etiqueta de amonestación y creo en más parámetros agradecer a continuación es mostraros como no sólo podemos tener un parámetro podemos tener muchos parámetros un parámetro ha sido el src el source pero lo que voy a hacer ahora la atención toda esa pantalla es escribir lo siguiente inglés web igual comillas igual comillas el formato como veis en html siempre es el mismo atributo igual entre comillas parámetro antes era el src el servicio es el source con dos inglés ahora que es el wifi with en inglés anchura el otro que es el hide height en inglés altura y ahora evidentemente en esas comillas dentro de esas comillas voy a poner el parámetro voy a poner un ejemplo mira una cosa si no especificó una unidad de medida entenderá por defecto que esté hablando de píxeles pero yo no os recomiendo que dejéis que el naveghable entienda cosas que lo que os recomiendo es que digáis claramente que únicamente medida queréis usar por tanto atención mirad de la pantalla voy a poner height es igual a 300 píxeles 300 px y perdón px -hay es igual a 200 px entonces tras escribir esto will es igual a 300 px es igual a 200 px x evidentemente es la apreciación del píxel píxeles y si yo ahora evidentemente mira yo guardo y recargo la página veréis como ahora el cuadro ocupa no cualquier otro tamaño ocupa justo 300 píxeles x 200 píxeles la cantidad de píxeles que pongáis atención es la que queráis mirar si yo ahora en lugar de poner 300 por 200 pongo a mirar 100 por 300 100 de ancho por 3 metros de alto en la página web lo va a hacer sin ningún problema eso sí el término implemente estaba deformado para esta imagen pero lo que os quiero decir en definitiva es que vais a poder manejar las imágenes como chicles vais a poder estirarla se abre a lo ancho estudiarlas algo alto todo lo que queráis la cuestión es que la primera vez que yo he puesto 300 por 200 más o menos he acertado pero ahora que he puesto 100 por 300 evidentemente de formado esa imagen bueno una cosa que nos puede ayudar es a saber las proporciones originales de la imagen es saber la imagen cuántos píxeles tenían no lo podemos hacer con html pero desde luego sí que podemos sí que podemos esa carpeta y si yo puedo como por ejemplo koala gasto es igual tanto en windows como en cualquier linux o mac si yo cojo a la atención todos porque si no me lo dice abajo allí me dicen que la imagen es de 1024 x 768 esa es la proporción original por tanto si yo quiero reducir la proporción de la imagen de manera proporcional de manera que no reduzca que no altere sus proporciones simplemente tengo que hacer una regla de tres es decir si en la anchura lo reduzco tanto en altura no tengo que reducir tanto otro por eso por ejemplo si 1024 lo pagó por 2 512 así que digo por ejemplo al tren sur es igual a 512 y si yo cojo la imagen que era 768 y lombardo por 2 de matemáticas no estoy muy fluido así que voy a 768 y lo voy a partir por 2 me dice que es 384 pues sé que si en la altura pongo 384 cuando recargo y sé que estoy manteniendo las proporciones correctas del cual hay una división por dos a partir de ahí podemos hacer una regla de tres puedo poner cualquier tamaño de anchura que quiera y luego hacer una regla de tres para averiguar cuál es la estructura correcta a continuación vamos a insertar vídeo en nuestra página web hemos insertado una imagen vamos a ser capaces de insertar un vídeo por eso voy a ir al artículo 2 y dentro del texto del artículo mirad esto es un artículo estoy aquí tengo aquí el título del artículo es un artículo aquí he metido una imágenes directamente pues ahora me voy al segundo artículo y me voy a hacer un hueco por aquí ahí voy a meter un vídeo en este caso voy a hablar de cómo insertar vídeo en html5 html5 intenta resolver intenta solventar todas las carencias que tenía html 4 el html 4 no se podía insertar vídeo y audio gracias a flash gracias a entonces macromedia flash hoy enviado de flash pudimos tener vídeo en las webs html5 lo que ha hecho es ser capaz de insertar vídeo para que no esté es obligado a pasar por flash si quieren seguir insertando vídeo en flash no hay ningún problema en html5 en ningún momento te lo prohíbe pero te da la posibilidad de insertar vídeo directamente sin necesidad de plugins externos por tanto lo que voy a hacer es lo siguiente así como atención así como la etiqueta img se abre pero no se cierra la etiqueta de vídeo sí que se abre y se cierra cómo se llama la etiqueta de vídeo y os lo podréis imaginar se llama vidrio para abrir y vídeo para cerrar es fácil es sencillo vídeo la etiqueta que exporta vídeo se llama vídeo a continuación ahora sí pasa como con la imagen he puesto una etiqueta de vídeo le estoy diciendo html que en breve voy a importar vídeo pero todavía no he dicho que me voy a importar por tanto lo que voy a hacer a continuación mirar es decirle que vídeo voy a importar y para eso lo que voy a hacer dentro de la etiqueta vídeo me he hecho un hueco dentro de la etiqueta vídeo del divisor de la fuente donde está el vídeo src es igual a la fuente mira ha escrito esto puede parecer un poco complejo pero realmente no lo es dentro de vídeo escrito esta línea quesos es la fuente donde está ese vídeo así que mira evidentemente como con la imagen acordáis la imagen también tiene ese roce tienen shorts voy a decir dónde está en ese vídeo atención todo es una pantalla una vez más tengo que tener precisión a la hora de localizar el vídeo dónde está que la carpeta multimedia voy a ponerlo cambien así que dentro de la carpeta multimedia barra entró en la carpeta vídeo o en la carpeta donde hayáis almacenado el vídeo multimedia barras vídeo y ahora cargo el nombre del vídeo que os he pasado o en definitiva el nombre del vídeo que quiera descargar así que lo escribo con precisión no me puedo dejar ni un carácter no puedo confundir ni un carácter sintel guión 1024 young-soo round punto mp4 es decir el nombre que lleva aquí tal cual con todos los puntos con todas las comas lo escribo aquí he escrito el nombre tal cual escrito esta línea qué voy a hacer ahora mira cómo me feel mirada le voy a guardar voy a recargar veo que tengo un koala la imagen y si vengo aquí abajo lo que tengo un cuadrado negro parece como que el vídeo no se ha cargado bien pero sí que se ha cargado bien lo que ha hecho es cargar el vídeo pero no le he dicho que se ejecute no le he dicho que empieza a reproducirse y libre es bueno pero yo por lo menos quisiera ver el típico botón de play pero yo no he dicho que me lo muestren así que un truco que voy a hacer ahora a continuación voy a dar más parámetros pero si pulse el botón derecho y elijo play y veréis cómo se ejecuta el vídeo y le puedo dar botón derecho y pausar acá no te diréis de manera más terriblemente incómoda de meter un vídeo dentro de una web a continuación vamos a profundizar aplicando en parámetros ese vídeo para poder controlar su reproducción que muestre los controles y cualquier otro tipo de parámetros voy a explicar primero cómo poner controles de reproducción a un vídeo y a continuación lo que voy a hacer es explicar los diferentes formatos de vídeo que soporta una página web veréis nos hemos dado cuenta como cargamos el vídeo no se ve se ve de color negro claro desde el primer fotograma o sea que sí que se ve y si quiere reproducir lo tendría que poner botón derecho y darle a play por eso la verdad muy incómoda de trabajar por tanto hay un par de parámetros que os van a resultar de interés y es que si cojo el vídeo voy a la etiqueta vídeo y voy a poner el siguiente parámetro voy a poner controles es un parámetro muy célebres ábrase es un parámetro que pone control igual a controles lo pronunció en valenciano los centros de formación lo que le estoy diciendo aquí a la página web es que cuando yo vea ese vídeo quiero ver el típico botón de play el típico botón de pausa quiero elegir incluso un control de volumen entre los típicos controles de vídeo y para ello pero insisto no los he puesto en el sol los he puesto en controles y más cosas vamos a ejecutarlo en la pantalla yo ahora lo que hago es recargar por supuesto siempre recargar y veréis que si le he puesto control su atención mirando la pantalla veréis que ahora tengo aquí nuestros controles con play con pausa similares aquí fuera un poco de la pantalla incluso tengo un control de volumen es un poco tosco pero oye es un control insertado no has tenido que configurar nada está bastante bien mirad como atención mirar la pantalla miran cómo puedo hacer play puede ejecutar el vídeo puede hacer scrubbing puedo moverlo a cualquier posición es una manera mucho más cómoda de trabajar hay otra hay otro parámetro que os va a interesar bastante que es el auto play voy a hablar ahora de los parámetros a lograr de otros la atención mirar a continuación de control voy a poner lo siguiente voy a poner otra vez nos aparece poco raros parámetros porque se escribe así os lo prometo aunque play que es igual a auto plane y hasta es el estándar pero que se escribe así que hace autoplay hay veces que cuando tú cargas un vídeo en una web tú no quieres que tu visitante se meta y le tenga que dar a play tú quieres que en cuanto se cargue la página el vídeo comience a ejecutarse autoplay te permite hacer eso fijaos que si yo ahora a cargo la página atención y la de la pantalla no voy a tocar nada recargo y automáticamente el vídeo comienza estaba vuelve muy alto autoplay lo que hace es eso luego podríamos hablar de algunas consideraciones para otro play como por ejemplo el que no pongáis autoplay si es contenido para móviles porque el que tenga un móvil que elija si gasta su ancho de banda en ver el vídeo o no estos son los típicos consejos que vale para este año probablemente para mí o que vinieron porque probablemente al año que viene ya ya tarifas planas que no tengas que estar mirando cuántos megas de bajas pero bueno mientras haya que mirar esas megas pues mi recomendación es no lo pongáis al problema y evidentísima mente esto que os voy a decir espero que sea una perogrullada pero ni se os ocurra poner autoplay a dos vídeos a la vez en la web no ya por el problema de poner dos vídeos en auto play a la vez sean por el problema de poner dos audios a la vez porque si pones dos software pero dos vídeos se ejecutan perfectamente a la vez pero si pone estos audios graves y hay una maraña de audio ininteligible que molestará bastante a la gente y ahora por último dentro de este vídeo voy a explicar una cosa el vídeo que yo he insertado ese es el formato de mp4 es más para complementarlo voy a decir que el time es vídeo barra mp4 para decirle no sólo que estoy importando un vídeos no es más le digo en qué formato está etiqueta no es obligatoria pero es muy muy muy recomendable la cuestión es porque he tenido que poner el sol fuera de la etiqueta vídeo y no lo puedo poner ahora lo debo poner dentro de la etiqueta vídeo la explicación es muy sencilla a día de hoy cualquier navegador web a día de hoy desde hace muchos años soporta jpg jpg el típico formato de imagen a día de hoy cualquier navegador web soporta el formato png como el jpg pero con más calidad y soporta incluso el formato que está un poco en desuso el formato gif los bits animados las animaciones a la web y todo esto bien pero el vídeo todavía no hay un estándar en la web todavía no hay un único formato que se acepte entonces en todos los navegadores en este sentido en este caso estamos probando con el formato de 24 pero en este sentido yo os recomiendo que visitéis la página de w3c schools concretamente la referencia de html 5 a 7 media 5 vídeos donde tienen una tabla muy buena muy bien resumida de que navegadores soportan qué formatos hay tres formatos actuales soportados porque está mal html 5 el formato mp4 que es el que parece que lleva las de ganar el que se está imponiendo el formato bueno m y el formato o jeje el problema y este problema os lo digo porque lo he sufrido bastante en mis carnes es que no hay un formato que si eliges ese formato funcionando los navegadores no ninguno de ellos es mirar si cojo mp4 funciona en internet explorer 9 no en versiones anteriores pero no funciona en firefox si en chrome si en safari pero no en ópera bueno a ver otro formato el formato web m no funciona en internet explorer pero si en firefox sí en chrome no en safaris y en ópera es casi lo contrario o complementario si quiere decirlo así y el formato ogg es como el web de m no sí sí no sí por tanto que sepáis que si yo ahora he metido una un vídeo de mp4 se vería correctamente en internet explorer a partir de la versión 9 en crown y en safari pero no se vería en firefox y opera tendría probablemente que meter otra línea donde importara el mismo vídeo por ejemplo en formato o jeje o en formato webm por eso la etiqueta source está afuera para poder meter dos vídeos dos fuentes para el mismo archivo para que depende del navegador que tengas reproduzca un vídeo o reproduzca a otro o se debe decir llegado a este punto y esto que os voy a decir me duele mucho decirlo pero es que es lo que hay prácticamente cualquier navegador de firefox chrome safari opera hace bastantes versiones que soporta html5 vídeos pero internet explorer antes de la versión 9 no soporta html5 vídeos de hecho prácticamente las soportadas pm de 5 por tanto diréis y si usó internet explorer 8 o el 7 o incluso el 6 el que sea instalada por defecto con windows xp que formato de estos usos ninguno de éstos si usas internet explorer 6 7 u 8 tu única alternativa para meter vídeo es usar vídeo en formato flash veremos todas formas más adelante que existe la posibilidad de decirle a una página web que si soporta html5 lo detecta y ponga un vídeo en un formato html5 en el que cuatro por ejemplo y si no lo soporta que entonces ponga vídeo en plazo lo que voy a hacer a continuación por tanto es ya que voy a insertar audio es quitar el auto play del vídeo porque si no cuando inserte audio tendría a la vez varios sonidos machacar bien dentro del tercer artículo voy a poner una nueva etiqueta donde es muy fácil veréis si la etiqueta para poner video se llama vídeo la etiqueta para poner audio se llama audio así que voy a poner una etiqueta de apertura llamada audio y una etiqueta de cierre llamada audio veréis lastra imagen el funcionamiento de las etiquetas de audio es muy parecido al funcionamiento de las etiquetas de vídeo necesitan una fuente interna que me diga de dónde saco ese audio por tanto mirar los parámetros insisto lo vais a ver una continuación son muy parecidos a los d a los del vídeo dentro de esa etiqueta audio voy a poner una etiqueta solo de src y atención atención mirada a la pantalla ya sabéis que tengo que entrar en la carpeta multimedia tengo que entrar en este caso en la carpeta audio que quiero cargar un audio y quiero cargar un audio que se llama 08 02 puntos jeje pero 2.0 yo ahora atención mira voy a guardar voy a recargar y voy a ver que no veo nada podría estar aquí el audio debería estar ahí pero no está porque no está porque no lo he dicho una de dos cosas o le doy auto play o le doy controles qué pasa con el vídeo cuando no tendría nos mostrará controles sería una pantalla negra qué pasa con el audio cuando lo muestre controles que muestran nada porque la visión no se ve por tanto lo que voy a hacer insisto de igual manera que con el vídeo es poner control igual a control y ahora comprobaré como si ejecutó de nuevo la página mirar a brasil atención todos tengo ya una barrita abajo con los controles los controles son iguales que los de vídeo pero son para audio que me permiten hacer que si pulso play se ejecuta ese audio y puedo el volumen y puedo hacer es cómo puedo ir a cualquier parte del audio veis ya tengo un audio insertado y además de la misma manera que el vídeo puedo incluso no lo estoy recomendando simplemente estoy diciendo que se puede puedo activar autoplay de hecho más bien al contrario lo contra recomiendo vale porque no hay nada que me dé una rabia que entra en una página y que automáticamente entre una canción y que tenga que buscar a ver dónde puedo desactivar esa canción porque probablemente estaba escuchando música con los auriculares así que simplemente deciros que se puede hacer autor play es igual a out of live es igual que en un vídeo y ahora lo que voy a hacer es simplemente atención al mirar toda la pantalla ejecutó y comprobaréis como al recargar el audio se ha activado automáticamente y ahora permitidme por último deciros lo que no tenéis que hacer nunca existe la posibilidad de está la posibilidad de decir que yo quiero auto place y y control no qué creéis que hará esto si yo le digo autoplay igual así la canción se ejecutará pero se dio con trolls igualaron no se mostraran los controles con lo cual obligaría a mis usuarios a escuchar la canción de mi red infinita verdad no podrán pararla lo que sí que podrán hacer evidentemente es irse de mi página por eso no recomiendo hacerlo verdad he puesto autoplay igual auto play control sólo he quitado y ahora comprobaréis como ejecutó soy la canción pero no puedo quitarla no tengo nada que me permita hacerlo de color con hacer es cerrar el navegador vale así que que sepáis que se puede pero no os recomiendo hacerlo por último lo que voy a hacer es especificar en este audio e insertado la canción voy a especificar que el tipo es audio de barra o jeje que formatos de audio disponibles de la misma manera que en formatos de vídeos disponibles bueno para eso voy a volver a sacar la página de w3c schools puntocom donde he accedido a la página de html5 audio que tiene una tabla muy buena una tabla muy clara que te permite saber qué navegadores soportan que en formatos una vez más estamos en la misma tesitura el formato mp3 está soportado el trote explorer 9 en grown a partir de la versión 6 y en safari a partir de la versión 5 pero ni firefox mi ópera soporta de 23 qué formatos soportan firefox y opera pues por ejemplo el formato web ya lo conocéis el problema de formato web es que no nos recomiendo para internet porque ocupa un montón y el formato o jeje por tanto al final si quieres que tu audio sea compatible con todos los navegadores probablemente tendrás que guardar el audio en dos formatos diferentes en este caso para guardar audio en formatos diferentes mirad atención y por último voy a decir que lo único que hay que hacer no os preocupéis últimas misterio es copiar esta línea pegarla abajo y cambiar por ejemplo off por mp3 y audio o por audio mp3 simplemente añadir una nueva línea donde se especifique cada uno de los formatos y por supuestísimo en tu disco duro tiene que existir tienen que existir el archivo en formato y el formato mp3 de los dos formatos y luego llamarlo en los dos formatos lo único que os voy a decir es qué pasa si yo por ejemplo me meto con un navegador que no soporta el formato dos no pasa nada si no lo soporta pasará de ese formato y ejecutará automáticamente el formato siguiente el mp3 que pasa siempre con un navegador que sin que el soporte de formatos y no soporta el formato mp3 pues que ejecutará el formato pop y pasará automáticamente el mp3 lo bueno de poner varias fuentes es que el navegador x automáticamente ya detectar a qué formatos el que tiene que ejecutar y ahora por último ahora sí os voy a decir una cosa atención además de las etiquetas puedo poner un texto que diga atención un navegador no soporta audio audio de 20 ml 5 de la misma manera arriba en el vídeo mirada atención en el vídeo atención tu navegador no soporta vídeo html5 si yo ejecuto voy a quitar el auto play control semanas controles si yo atención ejecutó este vídeo hace ejecutó esta página en un navegador que sí que soporte así que soporte html5 me mostrará el vídeo me mostrará el audio no me muestra el mensaje de atención tu navegador no soporta vídeo veis no sólo es que cada navegador coge automáticamente el vídeo que corresponde sino que si soporta vídeo no te muestra ese mensaje pero si yo intento abrir esta página con internet explorer con una versión anterior abrir con internet explorer espero no tener la última vamos a verlo y me dice atención tu navegador no soporta vídeo html5 tu navegador no soporta html5 también es bueno no es obligatorio pero es bueno poner ese mensaje aquí al final atención ahora soporta vídeo html5 que sólo se mostrará si lo intentéis ejecutar en una persona antigua de internet espero verte además el vídeo igual que el audio soporta como las imágenes los parámetros de anchura y de altura cuando yo he importado este vídeo por defecto aparece al tamaño al que es el vídeo original entonces si el vídeo original es más grande que la pantalla digamos a sale de la pantalla al igual que las imágenes yo puedo especificar de manera manual cuál es la anchura y cuál es la altura que le quiero proporcionar a este vídeo para eso lo que voy a hacer es localizar la etiqueta donde escribí el vídeo fijémonos está aquí es vídeo control vamos a verlo vídeo control se iguala controls es lo que voy a hacer a continuación dentro del vídeo controles escribir simplemente en inglés igual que en la imagen wef igual comillas la altura es igual a lo que yo diga y el height es igual comillas a lo que yo diga recordar que igual que las imágenes es muy importante que pongáis un número y luego px que es la cantidad de píxeles queréis que tenga el vídeo pero a diferencia de las imágenes si ponéis una proporción que no corresponde con la imagen o con el vídeo el vídeo no se va a distorsionar recordáis por el cual a que si puse la imagen vertical el cual aparecía distorsionado aparecía como estirado como chicle con el vídeo nuevo va a abrir eso mira si yo pongo por aquí with aquí pongo 300 píxeles y en height pongo 200 píxeles y yo ahora recargo por supuesto guardo y recargo comprobaréis como el vídeo ahora tiene una proporción de 300 x 200 píxeles y si le doy a klein comprobaréis como el vídeo se ejecuta en esa proporción la cuestión es que si yo ahora por ejemplo vuelvo al vídeo y le digo quiero que tengas pues no sé 200 x 400 píxeles atención anchura 200 altura 400 píxeles qué proporción es esta y decir que es el doble de alto que ancho está estirado para arreglar pues si yo ahora guardo y recargo comprobaréis que el vídeo intenta tener 200 x 400 pero lo que es el vídeo original no queda estirado no se estira como chicle sino que mantiene sus proporciones evidentemente no me interesa hacer esto ya que entonces es reproductor de vídeo queda muy segregado queda muy fuera y por tanto el usuario puede no entender que este reproductor corresponde a este vídeo sin embargo que sepáis que hay similitudes como son la altura y la anchura y que hay diferencias como es el lado distorsión vamos a grabar un vídeo en el que vamos a explicar cómo se pueden ver las extensiones de los archivos en este caso las imágenes ya que windows por defecto tiene la manía pero mostrarnos las así que debe tener un archivo solamente de multimedia no voy a meter en imágenes y yo veo que en mi caso yo estoy viendo las extensiones de los archivos con los que estoy trabajando por ejemplo en este caso estoy viendo que este archivo en la extensión del jpg entonces como decía windows tiene la mala manía de que por defecto nos oculta las extensiones para los archivos y esto ya lo hace desde hace unas cuantas versiones por lo menos que yo recuerde desde windows lister por tanto lo que habrá hacer en este caso es aprender al menos para este sistema operativo que es windows 7 y windows 2 oculta las extensiones como podemos mostrarlas como podemos forzar a windows para que nos muestre las extensiones lo que vamos a hacer es localizar en un explorador de windows una carpeta donde tenemos imágenes donde vemos realmente cualquier tipo de archivo y aquí arriba en este menú de aquí arriba vamos a pulsar sobre organizar y vamos a pulsar sobre este menú que se llama opciones de carpeta y búsqueda así que hago clic sale esta ventana sale una ventana flotante como por verlo poder colocarlo le quiere a la pantalla y dentro de la pestaña ver tengo varias opciones hay varias opciones que están marcadas y desmarcada según el caso donde de momento yo lo primero que os voy a decir esque quitéis si habilita los windows hace poco estará marcada esta opción ocultar las extensiones de archivo para tipos de archivos conocidos no ocultar si lo tenéis en ocultar house que se impuso sobre ocultar pulso aceptar y comprobaréis como aparece ahora aparecen las imágenes pero no aparece su extensión con lo cual digo bien yo veo la imagen pero su lujo también es un bebé p es un tipo y por tanto lo puedo insertar una página web pues lo que hago es ir a organizar opciones de carpeta y búsqueda y en vez le digo no ocultar es decir me voy a ocultar juntar extensiones le digo aplicar le digo aceptar y vemos como ahora sí que veo las extensiones jpg aparte de esto ya que estamos con esto os diré qué opciones de carpeta y búsqueda hay otras opciones que a vuestro propio riesgo hacen los siguientes archivos y carpetas ocultos lo que hacemos por defecto es decirle mostrar archivos carpetas y unidades ocultos lo que viene por defecto es no mostrar archivos carpetas new deben genera de su puertos y abando maniático pero no me gusta que hayan cosas ocultas en el ordenador y que yo no las pueda ver así que me gusta ver todo aquello que está oculto porque el programa me oculta ciertas cosas porque el sistema operativo me oculta ciertas cosas porque esas cosas son necesarias para que el sistema operativo funcione todos lo hemos hecho alguna vez y el que no lo ha hecho no ha tenido juventud desocultar las cosas y de repente ver el disco duro de unos cuantos archivos que no sabes lo que son decir esto esto para que voy a limpiar y lo borras y luego lo que has bordados el archivo de arranque de windows con lo cual la siguiente vez ya no arranca windows vale pero queda es tan traumatizado que sólo recuerdas para siempre con lo cual en ese momento aprendes a la vez a mostrar los archivos ocultos ya que no has de borrar los archivos ocultos bien pero pasado eso digamos ya sabes que todo aclarar lo que no conozcas pues abandones y luego y luego también había por aquí también le había por aquí otra opción o la que van a encontrar es que había dos para archivos ocultos y esta ocultar archivos protegidos del sistema operativo que te pone recomendado recomendado por la misma opción que os acabo de decir hay archivos del sistema operativo mirar por ejemplo no los tengo ocultado sagrado acepto me voy al disco duro local ce y hay algunos archivos por aquí abajo vamos a hay algunos archivos como por ejemplo uno que se llama y perfil y otro que se llama page file y perfil es el espacio de memoria y claro te asusta es porque dice sin ocupa seis gigabytes y el archivo de paginación que se ocupa a 8 gigas lo primero que piensas es baixen borrarlos porque ocupan hoy 66 jira esos chicos son necesarios porque contienen el archivo de paginación contiene la memoria temporal de windows en este caso en windows 7 dado que windows no hace como linux que se reserva una partición específica para el archivo de intercambio al no tener esa partición va usando ese archivo como partición borrar esos dos no tiene mayor importancia lo máximo que te puede pasar es que ordenador se cuelgue y a la próxima vez que el que arranca los vuelve a generar y aquí no ha pasado nada pero hay otros que sí que así que importan por ejemplo fijaos que si voy a organizar opciones de carpeta de búsqueda y le digo que no quiero mostrar los archivos del sistema operativo ocultar sistema operativo fijaos como ahora no veo esos archivos de 6 y de 8 gigas porque de giro ocultarlos por tanto siempre que queráis controlar cómo se ve en vuestras carpetas como sede vuestro contenido dentro de esta carpeta dentro de este organizar vais a poder configurarlo a continuación vamos a aprender a hacer tablas dentro de html eso me ha abierto un archivo vacío en blanco que se llama tablas punto html voy a empezar a escribir de él como siempre tengo el mismo archivo abierto a la izquierda para poder trabajar su código y el mismo archivo a la derecha para ver el resultado para hacer tablas yo voy a necesitar varias etiquetas sin embargo vamos a ver qué hacer tablas al principio puede parecer difícil pero al final acaba resultando bastante fácil las primeras dos etiquetas que yo necesito realmente es la primera etiqueta que necesito solo que la voy a escribir tanto de apertura como de cierre es la etiqueta como ya os podéis imaginar la etiqueta table por tanto lo que voy a hacer atención es escribir table a continuación la etiqueta del cierre table lo que le estoy diciendo al programa lo que le estoy diciendo al archivo html es que entre la etiqueta de apertura y la etiqueta del cierre yo ahí voy a escribir una tabla además la etiqueta de tabla puede tener parámetros sobre estos los típicos parámetros que más adelante recomendaré a estilizar con css pero como de momento no sabemos css vamos a verlos con html por eso lo que voy a hacer es hacerme mira un poco de hueco dentro de table le ha metido el cursor ahí dentro y hay dos para hay muchos paralelos podemos usar las tablas pero yo creo que hay dos que son esenciales que es uno la anchura wild igual comillas y ahora voy a escribir una cosa nueva atención lo que voy a hacer es en lugar de usar píxeles yo quiero que esa tabla se ajuste al ancho de la página o se ajuste al 100% del ancho por tanto voy a escribir 100 % en lugar de escribir 100 píxeles balboa x píxeles vosotros diréis no podrías escribir el ancho en píxeles de la pantalla yo sí que podría el problema es que yo tengo un tamaño de pantalla tú tienes un tamaño de pantalla él tiene un tamaño de pantalla y cómo puedo saber yo cual es cada uno de vuestros tamaños yo le digo 100% y le digo hazte todo lo ancho que puedas independientemente de qué pantalla esté es decir se va a ajustar a cada una de las pantallas este es el primer parámetro y luego el segundo parámetro que considero imprescindible es un parámetro que al principio os va a molestar bastante pero veréis que nos va a servir para aprender bien a trabajar con tablas más adelante lo que haremos es el borde borde igual a un píxel i un pixel power de igual algunos ponéis de igual a uno el programa también lo entiende por tanto lo que he hecho es crear una tabla y decirle que quiero que su anchura sea del 100% y que su borde sea igual a 1 y ahora a continuación lo que haremos es empezado a dibujar filas y columnas dentro de esta tabla a continuación lo que voy a hacer es crear filas y columnas por tanto por tanto me voy a meter dentro del béisbol y voy a escribir lo siguiente la primera etiqueta que tengo que escribir a continuación este ere pr son los organismos de table robo es una fila de la tabla por tanto voy a escribir t r para decir ya tengo una tabla ahora dentro de esa tabla habrá una fila un table rojo una pequeña sangría he abierto una fila ahora la cierro y atención como veis verdad aquí tengo una tabla y dentro de esa tabla ha abierto una fila no puedo abrir una columna para definir una fila y luego tantas columnas como quiera y si quiero más filas abajo meteré más filas no os preocupéis no pasa nada ya tengo una fila de burro ahora voy a poner una columna yo tengo tb abro tb y cierro tb y de esta manera tan extraña esta verdad principio os va a resultar muy extraño lo que estoy haciendo es crear una tabla que tiene una fila y que tiene una columna y ahora iba a escribir lo siguiente grado aquí dentro dentro de esta etiqueta voy a escribir soy fila 1 columna 1 yo ahora guardo lo recargo y pone soy fila 1 columna lo que tengo atención tengo una tabla que tiene una fila y una columna luego realmente que tengo una bonita celda sin embargo lo que voy a hacer ahora es repetir esto era aquí esto es lo que al principio os va a resultar difícil y ahora soy fila 1 columna 2 voy a guardar voy a refrescar y vamos a comprobar cómo soy fila 1 columna 1 y soy fila 1 columna 2 luego vamos a fijarnos por última vez antes de tener este vídeo de lo que tenemos que hacer eso es lo que nos va a resultar un poco difícil al principio es contar cuántos te eres y cuántos tb estaremos recordar al principio éramos unas difícil de recordar pero con el tiempo os vais a acostumbrar tr es fila que es columna cuantos te eres tengo 1 buscarte eres cuántos hay 1 así que tengo una fila cuanto ustedes tengo dos ustedes columna luego tengo una fila y tengo dos columnas esa fila tiene dos columnas si yo ahora me voy al resultado visual compruebo como tengo una fila y tengo dos columnas a partir de ahí hacer una tabla no es más que jugar con estas filas y estas columnas es decir hacer tablas consisten básicamente en jugar con terres y jugar con tevez no hay más misterio a partir de aquí voy a proponer una serie de retos que voy a ir resolver lo tengo ahora mirémoslo en la pantalla tengo una fila y tengo una y dos columnas recordad contar en horizontal para saber el número de filas contar en vertical pasar el número de columnas ahora supongamos que quiero tener una fila y tres columnas es decir aquí en vertical en lugar de ver dos tiro que haría tres no pasa nada simplemente lo que tengo que hacer es terminar aquí abajo y escribir tv soy fila 1 columna 3 esto lo estoy escribiendo para y mentalmente luego poder diagnosticar correctamente dentro del resultado ahora grado habrás algo recargo por supuesto que tengo fila 1 columna 1 fila 1 columna 2 fila 1 columna 3 recordar una vez más no me voy a cansar de repetirlo tr es fila de ex columna así que sin mirar la vista en modo diseño simplemente lo que tengo que hacer es contar cuántos t eres y cuánto ustedes tengo cuántos terres tengo uno mira uno se abre uno sencilla no tengo unos cuantos ustedes tengo 1 2 y 3 esto equivale a tener por tanto una fila y tres columnas y ahora la pregunta es bueno y qué pasa si quiere tener más filas porque hemos visto cómo podemos aumentar el número de columnas hasta el infinito pero qué pasa con el número de filas no pasa nada simplemente lo que tengo que hacer es lo siguiente aquí acaba la fila vale pues arrancó otra fila r podéis copiar por cierto copio atención fila 2 columna 1 fila 2 columna 2 y fila dos columnas 3 voy a guardar voy a ver el resultado en la pista de diseño y fijaos tengo una tabla que tiene atención cuántos theres tengo uno y dos dos filas una fila y dos filas y tengo 1 2 y 3 una columna dos columnas tres columnas la pregunta que me sueles hacer llegado a este punto es si arriba había definido tres columnas porque tienes que volver a definir las en la siguiente línea porque tienes que definir las por tanto no sirve contener las llaves de arriba y que volverlas a poner abajo y otra cosa que os voy a decir y esto es un poco aunque hay una manera avanzada de eliminar este límite pero una cosa que os voy a decir es que si la fila de arriba tiene tres columnas la de abajo también tiene que tener tres columnas qué pasa si la de arriba tiene tres y la de abajo tiene dos atención contar la pantalla arriba tengo uno y 3 y ahora abajo tengo 1 y 2 lo que esperaríamos ver en la pantalla es que arriba tengo 3 y en el mismo espacio arriba tengo dos abajo tengo 2 pero no no pasa eso lo que pasa es que la última columna queda inhabilitada no se reparte proporcionalmente vale por tanto hasta nueva orden hasta que hablemos de tablas a miradas lo que tenemos que hacer es que tanto arriba como abajo como en todas las filas que hagamos fila 2 columna 3 tengamos el mismo número de filas y de columnas una pregunta muy típica de cuando estamos haciendo tablas es cómo puedo personalizar el formato de esa tabla por ejemplo y ahora me gustaría dentro de fila 2 columna 3 insertar otra tabla es decir allí hacer subdivisiones personalizadas pero aquellas subdivisiones afectan sólo a esta celda no quiero que afecten y en la de arriba llega al lado ni la diagonal sólo quiero que afecten a una celda determinada y por tanto esto lo vamos a conseguir con una cosa que se llama tablas a miradas con las tablas anidadas lo que hacemos ni más ni menos es escribir una tabla dentro de otra supongamos que yo ahora esta tabla solo esta celda perdón esta celda de aquí sólo está la quiero dividir en tres trozos esa vía y la voy a dividir en tres trozos cómo lo puedo hacer sin afectar a las demás pues bien atención mirad a la pantalla localizó fila 2 columna 3 localizó fila 2 columna 3 en el código a que si estoy aquí fila de los columna 3 hay fila 2 columna 3 verdad sr y él pone fin a 23 bien pues yo no me voy a ir y empiezo a escribir y lo que voy a hacer es básicamente poner table cómo y voy a escribir la misma estructura que tenía antes table dentro del table hayter y dentro del té verde del éter a internet y digo s 1 columna 1 vuelvo s 1 columna 2 segundo por una 3 atención entre ellos los recomiendo recuerdo que es muy importante estos parámetros que os he dicho que son border igual a 1 willis es igual al 100% vamos a ver que tengo con esto si yo ahora guardo y recargo fijaos lo que tengo aquí quiero haceros recordatorio de que lo que he hecho es poner border igual a 1 para tener un borde horrible pero que a la vez me sepa identificar correctamente qué es lo que estoy haciendo tengo una fila tengo una columna en una tabla de dos filas por dos columnas lo sigo teniendo no lo he perdido pero una de las celdas lo que he hecho es de repente meter otra tabla veis un borde dentro de otro está claro que he vendido una tabla dentro de otra tabla puedo hacerlo todas las veces que quiera nos recomiendo hacerlo todas la veces que quiera como mucho sólo dos o tres niveles de profundidad vale pero fijaos que en una de estas celdas en lugar de meter texto lo que es lo que es meter otra tabla y el número de celdas o de filas o de columnas que hay en una tabla es independiente del número que hay en la otra esto es por tanto lo que se llama una tabla al hígado hacer tablas en html no es tan flexible como por ejemplo hacer tablas en word o en cualquier programa de 18 en textos sin embargo con el truco de las tablas salidas podemos personalizar nos las tablas que queramos en este caso lo que voy a hacer es una tabla que en la primera fila tenga tres columnas y en la segunda fila tenga dos columnas pero que esas dos columnas lleven todo el espacio bien de hecho no voy a borrar la tabla anterior voy a hacer una tabla nueva por tanto podría abajo voy a escribir por ciento despide un comentario al siguiente vídeo explicar en qué son los comentarios nueva tabla quiero describir lo siguiente voy a escribir más lo hace igual voy a estrenar y ahora voy a escribir con sangre una tabla con dos filas recordar pr tablero’ fila y ahora lo que voy a hacer es escribir una columna en cada una de ellas recordado dv es igual a columna vamos a ver que tenemos hasta ahora yo ahora guardo recargo y lo que tengo voy a volar y adiós recargo y tengo ha fijado su atención will igual al 100 border igual a 1 y de esa manera ahora si tengo ahí la tabla de hecho si queréis incluso voy a poner mi rey te hacía br br es un retorno de carro y ayuda a bajar una línea bien lo que voy a hacer ahora es que aquí mira aquí aquí quiero tener dos particiones pero la de abajo quiero tener tres particiones cómo puedo hacer esto con html y tabla pura y dura’ no puedo pero se han ido tablas sí que puedo es decir si aquí alguna tabla mirada de dos por uno así que puedo y si aquí a una tabla mirada de 3 x 1 sí que puedo vamos a comprobarlo por tanto recordad él la solución son tablas anidadas voy a escribir lo que era la pantalla grande aquí ahora adentro una fila pr es fila de columnas cuántas columnas tenía que tener la primera tabla 2 la primera hemos dicho que tenía 2 1 y 2 y ahora copio esto no pego aquí y en la segunda voy a tener 3 fijaos mira esta de arriba tiene dos esta de arriba tiene tres guardo recargo voy a decir atención una vez más que el with lo puedo copiar ya que estamos que el with es igual al 100% y que el borde es igual a 1 guardó recargo y veréis como gracias a ese truco es como puedo tener arriba 22 columnas y abajo tres columnas evidentemente la séptima es hombre pero se nota un montón porque se ven las líneas de las tablas anidadas recordad que estoy poniendo esas líneas gruesas ahora que estamos aprendiendo para ver claramente cuántas tablas hay y qué está gastando entre unas dentro de otras ya sé que ahora estéticamente os parecerá horrible evidentemente más adelante le podemos decir que el borde sea igual a cero y esa verdad me oculta el borde y puedo tener tablas con las proporciones que quiera sin que se noten las divisiones por tanto al final tablas anidadas la pregunta eso sí ahora mismo mira atención a la pantalla es si ya este primer ejemplo era valioso este segundo ejemplo ya ni te cuento porque os ponéis a leer tablas y ejercicios no sé lo que pone ahí sin embargo os puedo asegurar que en unos pocos días lo sabréis y otra cosa que os voy a decir con las tablas al igual que con html es que si era html es importante escribir con sangrías con tablas es imprescindible escribir con sangrías porque es una buena manera para saber quién depende de quién y qué elementos están dentro de qué otros elementos lo que voy a hacer ahora es hablar de esta línea que he puesto aquí llamada nueva tabla esta línea es un comentario en html los comentarios como ya veréis son elementos comunes a prácticamente cualquier lenguaje de programación fijaros una cosa yo para arrancar un comentario lo voy a volver a construir si queréis lo que es como si fuera empezar una etiqueta he puesto menor que pero a continuación lo que he hecho es poner mayúsculas y dos niños con eso yo le estoy diciendo html que en ese momento empieza un comentario todo lo que esté a continuación se considera comentario y en here it al menos and hate queda marcado de color azul en otros editores puede ser de otro color pero definitiva importa que lo está marcando de un color diferente como diciendo esto es otra cosa cuando yo quiero cerrar un comentario pongo línea línea mayor que y todo lo que quede encerrado dentro de estos de estas dos llaves esto es un comentario se llama comentario en html el hecho es el único lenguaje que se escribe así en el resto de lenguajes de programación se expide o con dos barras o con barra asterisco pero ya llegaremos a él pero lo importante ahora en este vídeo no es ya como se escribe sino explicaros que es un comentario un comentario es un mensaje escondido en el código es un mensaje escrito en castellano escrito en inglés o escrito en el idioma que os dé la gana es un mensaje que el navegador no va a procesar no está pensado para salir por pantalla de hecho atención mirar todos a la pantalla no sale por pantalla yo hago grabar le doy ahí donde pone por aquí en alguna parte esto es un comentario no aparece para qué sirve cuando yo escribo porciones complejas de código y yo escribo muchas porciones complejas de código y digo si yo esto lo abro el mes que viene no me acordaré de que escribí porque hay veces que llegó a una solución después de cuatro horas de trabajo y digo ahora me acuerdo lo que es pues lo tengo en la cabeza la semana que viene no tendré ni idea de que escrito lo que vamos a poner un comentario pongo un comentario y me acuerdo de por qué escribí cada cosa y para qué hice cada cosa o quizás puede ser que yo escriba un trozo de código y se lo pase a otro programador para que lo siga trabajando y yo diga que me acuerdo pero si eso lo pasa esta persona vida este tío que ha escrito no también puede ser que vosotros como alumnos me enviáis ejercicios para corregir y hayáis hecho algo que digáis esto no sé yo como alumno pero profesor lo va a tener que digerir y escribir un comentario para decir y aquí he hecho esto por esta razón vale los comentarios no son html sino cualquier lenguaje de programación se escriben y dar pistas al ser humano ahora ya que estás hablando de comentarios voy a hablar de otra cosa html es el lenguaje más más fácil de piratear que existe yo aquí escrito un código en html aquí lo estáis viendo el resultado en la pantalla pero os voy a decir un truco zyncro esto funciona igual en prácticamente cualquier manejador y ahora pulso botón derecho e impulso sobre open source ver el código fuente de la página mirar canción cualquiera cualquier persona con su navegador puede ver el código que he escrito o controla efectivamente control un impulso control que también aparece el código fuente de la página que escrito lo que os quiero decir en definitiva es que los comentarios no aparecen en la página pero si aparecen si vemos el código fuente por tanto cuidado con los comentarios que ponéis no pongáis animaladas en el comentario porque cualquier persona lo puede ser quiere decir por ser un poco más concreto no estáis haciendo una web para un cliente y estáis el cálculo de ese cliente y os dé por poner comentarios de este es el cambio que me ha pedido este cliente que estoy harto de él porque lo puede leer vale así que los comentarios no se ven en pantalla pero sí que se pueden llegar a leer lo que vamos a hacer ahora es usar las tablas para maquetar un boletín de noticias para enviar por correo electrónico porque los boletines de noticias que se envían por correo electrónico de que recibí se inician a recibirse en hotmail y en yahoo todo esto no pueden estar más que dados con css ningún gestor de correo de correo electrónico soporta css por tanto lo que voy a hacer es un raro ejemplo de maquetación con tablas por regla general sé contras recomienda se te recomienda no se recomienda que marque tenéis que maquetas páginas web con tablas para maquetar páginas web ésta css sin embargo como los gestores de correo no soportan tablas ya no soportan css quería decir la opción que nos queda es maquetar con tablas por eso lo que voy a hacer a principio este ejercicio es seleccionarlo todo voy a borrarlo todo lo seleccionó atención mira a borró guardo recargo y reiniciado el archivo y lo primero que voy a hacer es pensar lo que quiero programar con tablas pueden ser por complejo así que antes de empezar a pensar en código voy a pensar lo que quiero lo primero que quiero hacer voy a dibujar esto es común y lo estoy pensando en la pantalla es una tabla que tenga que un bloque central un pequeño margen por aquí un pequeño margen por aquí esto que es pues esto yo creo que estoy viendo en la pantalla que es una tabla con una fila y una dos y tres columnas me parece y luego dentro de esta columna verde por ejemplo dentro de esta falda perdón voy a hacer una tabla anidada recordáis tablas anidadas que tenga una cabecera que tenga un cuerpo y que tengo un pie de página la cabecera es el nombre de la empresa el cuerpo es noticias del mes que rodea es tenemos este mes que te estoy enviando por correo y el pie de página es el típico el cine usted este correo porque se ha inscrito en nuestra base de datos y en cualquier momento puede hacer uso de los derechos de rectificación cancelación u oposición y modificación es decir lo típico de la ley de próximo de datos cualquier que recibís yo aquí yo creo que estoy viendo una fila y estoy viendo perdón una columna y estoy viendo tres filas una columna y tres filas y luego es más y ahora sí lo voy a pintar no azul blue york y luego podría hacer una tabla pero tuvieran noticias y esta tabla podría tener una columna de izquierda para las imágenes de las noticias y una serie de filas pues por ejemplo un producto uno pues este mail se hemos hecho no sé no sé cuántos productos esto es mi imagen y también hemos hecho no sé que no sé cuántos y tenemos este servicio nuevo 3 y cuatro días y todos los que queráis aquí vendría el título el título y aquí abajo el pie de página el súper prime página de se puede ver eso voy a quitar este boletín de noticias y lo primero y lo más importante que tenéis que hacer es antes de empezar a programar visualizar esto en pantalla visualizarlo como os dé la gana igual por mí lo podéis visualizar en en papel podéis dibujarlo en papel podéis dibujarlo en photoshop podéis si queréis hacer las tablas en word great one o podéis simplemente visualizarlo de memoria realizar lo que nuestros ojos o proyecten lo sobre proyecto y sobre la pantalla pero antes de empezar a pensar en tr este de ‘estable’ final lo importante es que visualmente tengáis clara una idea de lo que queréis conseguir en pantalla a continuación por tanto lo que voy a hacer es convertir mi proyecto en realidad es ese gráfico ese esquema hecho en la pantalla es convertirlo en realidad vamos a recuperar ese gráfico he capturado en pantalla lo tengo aquí y vemos que en rojo la tabla exterior vamos de fuera hacia adentro la tabla exterior es hablar de color rojo que tiene que que tiene una fila y tres columnas así que lo que voy a hacer ahora es convertir ese gráfico en realidad atención empiezo table recordad por lo menos ahora para estar aprendiendo y luego nos quitamos al final si queréis para principio ponerlos border igual a 1 porque has dicho antes que se ponían comillas orden igual comillas 1 y ahora no ponéis comillas pues mira esa mala costumbre que tengo y wii es igual a 100% ahora sí insisto fijaos que html es el lenguaje muy permisivo puedes cometer errores por ejemplo de las comillas y hp en derecha lo traga en este caso es un cava igual hay veces que como mucho falla una línea pero todo lo demás funciona en otros lenguajes de programación cambiar esas comillas o quitas las comillas y directamente no funciona nada por tanto aprovechamos que html es bastante relajado bien sigamos hemos dicho por tanto creo recordar que una fila tres columnas así que una fila que esté r sangría importante tr y he dicho tres columnas así que se ve dv y tv para escribir un poquito margen izquierdo el contenido el tiempo margen derecho y ya que estamos que veis incluso si lo pongo con sangría mejor que mejor para que veáis de una verdad más fluida a que pertenece cada sección del código guardo recargo y no hay ni trampa ni cartón una fila under tres columnas triste vez una fila tres columnas y empiezo a tener lo que quería y empieza a tener en rojo lo veis una fila tres columnas pero ahora tengo un problema vamos a profundizar un poco más en nuestro conocimiento y es que veis como tengo una tabla así pero esta está hablando quiero que las tres columnas tengan la misma anchura quiero que la columna central sea mucho más ancha porque es donde va a ir el contenido es la columna central y las columnas laterales sean más estrechas verdad bueno pues para eso os voy a decir que altere le puedo meter un parámetro qué es el wifi ya he metido en wifi ha hablado y persona la tabla y ahora pongo with es igual al 10% a la segunda columna le voy a decir que kuyt es igual al 80% y evidentemente por descarte y por matemática sencilla la tercera columna tendrá un 10% así 1080 más bien se puede hacer que sume menos del 100 por ciento más de 100 por ciento sí pero no esperéis que esto termine se comporta de manera lógica lo que pueda o lo que le rodea cada navegador si hago esto y evidentemente yo ahora cuarto y recargo comprobaréis por tanto como ahora la celda central tiene el 80 por ciento y las celdas laterales tienen cada una el 10 por ciento con lo cual ya tengo por tanto la primera tabla exterior sobre la que voy a trabajar escrito margen izquierdo de momento no voy a dejarlo bien dentro borraré pero este si sabéis cada cosa evidentemente al que corresponde lo que vamos a hacer a continuación por tanto ya que tenemos la primera tabla la tabla exterior digamos la que sería de color rojo vamos a repasar la tabla ahora voy a hacer la verde ya que ya tengo solucionado la roja ahora voy a hacer la verde la verde que tiene contado flechas verdes una dos y tres filas y una columna por tanto ahora dentro del contenido alguna tabla negada y digo me acercarme y digo aquí dentro alguna paintball temor ver estévez esto es una tabla de una fila y una columna y vivo esto es la cabecera o el título como queráis llamarlo título para copió esto y digo contenido y el pie de página y además voy a decir que quiero que tenga una anchura del 100% y que tenga un borde igual a 1 guardo recargo y veo la tabla anidada fijaos que dentro de hacerla grande dentro de esta celda he creado una nueva tabla dentro de una tabla de uno por tres y creando una tabla de 3 por 1 de esta manera puedo anidar todas las veces que haga falta hasta conseguir el diseño que tenga en la cabeza sea cual sea el diseño que tengo en la cabeza vamos a continuar una vez más vamos a acabar esta parte de tablas y ya empezamos a meter contenido y es que fijaos como dentro de la tabla verde tengo la tabla azul es el contenido de la que ya os veis contenido aquí miami todas las noticias de las noticias así que esta tabla que tiene dos columnas cuatro filas pues hala a darle caña contenido hacemos esto grande table facebook escribir cr es una fila y tiene dos columnas creo recordar a derecho una una columna dos columnas y aquí va una imagen y aquí va el texto descriptivo si yo ahora copio de este trozo de código y lo pegó cuatro veces digamos will es igual al 100% former es igual a 1 guardo recargo y tengo ahí el título el contenido y dentro del contenido una tabla con imagen texto descriptivo imagen de este objetivo y al final el pie de página esto es aviso con diferencia lo más difícil que hemos hecho hasta ahora lo más difícil no ya porque sea difícil conceptualmente porque si os fijáis todo este ejercicio todo este ejercicio únicamente tiene tres etiquetas table tener y tr el problema es que más o menos cuando haces una tabla te queda claro recuerdas cómo la hiciste pero en cuanto empieza a salir a tablas de momento ve desde los atrás yo aquí ya no soy esta tabla dentro de quién está o a quién pertenece ahí son dos cosas las que te van a salvar una hacer tablas y con los días y con hacerlas al final le acaba estudiando el truco y dos importantísimo las sangrías las sangrías son las que permiten saber quién está dentro de que por tanto es normal que ahora mismo tengáis un poco de parada mental viendo tres tablas anidadas pero sin embargo a los pocos días pasaron lo contrario que no se enamoran lista en todas las tablas que me costará quitarlos de ellas el agua caliente para separarlos de las tablas otra pregunta que nos podemos realizar en cuanto a las tablas es en este caso porque han salido las columnas desiguales y es más incluso porque en este caso que así la proporción se parece y todo el gráfico que yo había hecho la proporción entre gráficos e imágenes bueno ha sido casualidad la cuestión es que las celdas las columnas se distribuyen su anchura automáticamente automáticamente según la dimensión del texto que contengan dentro así que ahora mismo como tiene imagen y texto descriptivo imágenes más corto texto descriptivo es más largo tiene digamos otra proporción pero si le pongo atención si yo pongo imagen imagen imagen incluso hay una agenda imagen y más la imagen ahora veis qué imagen es más grande el texto es más grande que texto descriptivo lo que habéis lo contrario guardo recargo y ahora esta columna ocupa más que la obra por tanto las columnas lo que hacen es repartirse e intentar repartirse equitativamente el espacio en función del texto que contienen esto insisto puede ser muy molesto puede ser muy molesto porque incluso en programas ya los veremos de edición visual tú vas escribiendo y sea modificando la anchura a tiempo real y lo dispuesto que cachondeo es bueno para eso voy a aprovechar para enseñaros otra cosa para que para eso os recuerdo que dentro de las celdas podemos configurar la anchura igual que hemos configurado 1080 10 podemos configurar esta anchura pero de pasas voy a decir otra cosa mira cuando configurase la anchura de una columna sólo hace falta que la configurase en la primera fila mira a la pantalla en la primera fila yo voy a decir la imagen debe tener una anchura del 30 por ciento y el texto descriptivo debe tener una anchura del 70 por ciento si yo he hecho esto no hace falta que lo vuelva a repetir en cada una de las columnas que hay bajo con que lo ponga en la primera se hereda las demás se alinean y no hay ningún problema mirad lo hago así recargo y mirad como solo poniéndolo en la primera ahora aunque aquí hay más texto que aquí yo he forzado la anchura de columna que yo he querido y esto es de hecho lo que haréis en el 90% de las ocasiones que es no dejar que lo decida la ganador sino vosotros mismos ponerlo lo que voy a hacer ahora que ya tenemos el esqueleto del borde y noticias podemos pensar que no tenemos nada pero os puedo asegurar que lo que tenemos es bastante vamos a empezar a maquetar ese texto y para eso vamos a usar algunas etiquetas html que nos van a ayudar a estilizar lo primero que voy a hacer por tanto es quitar el margen izquierdo margen y verdad ya sabemos lo que hace la izquierda quedaría muy feo que no puede noticias ponga más reduciendo más que en derecho así que lo voy a quitar quito martín izquierdo quito margen de reus un poquito recargo ahí lo tenemos ahora en el título voy a poner el título de mi empresa pues pongo mi empresa y abajo pongo boletín de noticias de mayo 2012 guardo recargo sorpresa fría y es si yo he escrito un retorno de carro porque aquí aparece junto bueno recordamos que tenemos que poner una etiqueta br recordad que ya tenéis br para forzar ese saldo de línea a la pierde fuerza saltos cuando recargo fuerzo salto de línea muy bien ya lo tengo pero tengo otro problema y es que me gustaría que donde pone mi empresa aparecieran más grande apareciera más presente porque no puede ser es que mi empresa aparece que así difuminado aparece casi no se ve vamos a ver algunas etiquetas html hay una etiqueta html muy divertida qué es la letra p escribiendo esto lo que vamos a ver pongo una vez y la vez es de bolt en inglés que es negrita atención sin la vera sin haber empieza aquí y acaba aquí quiere decir que sólo ese trozo será negrita todo lo demás no recargo la guardo recargo yo creo que os habéis fijado como ahora mi empresa aparece en negrita veis como el tiempo de mi empresa es más negrita que este de aquí pero vosotros diréis a ver si funciona este ordenador mostró deiss sí pero es que ahora sí la letra valencianes negrita pero es que sigue siendo pequeña bueno hay otra etiqueta muy divertida kg más vieja fácil de vigo lo que hace es hacer el texto más grande y grande en inglés así que mira la guardo recargo o porque más grande la habéis visto y ya sé que diréis si es un poco más grande el prsc y lo quiero más grande qué hago como una etiqueta que se llama enrique tenis pues no tampoco hay un examen sino que hay un truco muy divertido mirada a la pantalla que es que si yo pongo varias etiquetas beef juntas entre sí aquí es doble por tanto lo que hago esto lo más grande veis cada vez más grande cuántas etiquetas byc podéis poner ni idea dijeron que ha puesto más de cuatro o cinco no os recomiendo hacer no sé realmente si existe un límite valen dos pases tampoco comprende finity va veis como en cierta manera lo que estamos haciendo es más guitar con html es dar estilo con las pnl esto es lo que no se recomienda porque para eso está css pero como estamos haciendo un boletín de noticias no tenemos otro remedio que hacerlo así bueno antes de cerrar este vídeo dejadme enseñaros otra etiqueta muy divertida y es que si la ve para etiquetarme es de bold es negrita la etiqueta y es de itálica o lo que también conocéis como cursiva la letra está un poquito ciudad y está por tanto que por ejemplo quiero poner boletín de noticias lo quiero poner cursiva después cojo donde ponemos noticias donde ponemos haciendo noticias en lugar de poner una vez pongo una y itálica si ya os dije primer día que si sabéis inglés medio lenguaje de programación recargo veis como ahora tiene noticias está en cursiva está acredita pero de momento vais a creer que estoy tomando el pelo pero no es así tracy yo no quiero hacer esta letra más grande sino más pequeña bueno pues si es grande que es pequeño es muy por tanto si en lugar de poner mira también es de hecho el escenario inglés la mejor porque hay un montón entonces el escenario y por supuesto si aquí hablo verdad aquí cierro sol al exterior guardo recargo y fijaos como la de atrás hecho más pequeña ni que decir tiene que si quiero que sea más pequeña todavía lo único que tengo que hacer es poner varios small ya sé que volviendo noticias ha salido con un carácter extraño por el acento pero no os preocupéis porque cuando veamos las metas etiquetas de la cabecera veremos cómo hacer que los acentos y las enseñas aparezcan correctamente vamos allá y bueno en este caso lo que voy a hacer incluso con el título es el lugar de usar etiquetas de marcado lo que voy a usar es títulos por ejemplo ya que mi empresa es el título más importante dentro de la maquetación lo voy a hacer es ponerlo con h1h1 y fijaos ahí que tengo mi empresa el único problema es que los títulos h1 generan un poco más de margen que los textos con estilo pero bueno en este caso da igual lo que vamos a hacer dentro del texto descriptivo es poner por ejemplo dentro de texto descriptivo voy a poner el título de la noticia texto de la noticia llegados a este punto yo os quiero enseñar una página donde cuando cualquier programador diseñador web quiere pero en un texto de prueba mientras el lip xoom.com que tienes el típico texto doblar el zoom que se pone de coña cuando lo usan este texto poner para la página de lips un punto com entonces en esta página lo que voy a hacer básicamente es copiar y pegar el texto de la noticia y por supuesto poder ver cuando recargo que tengo ahí claro tienes el título que es el texto de la noticia no lo sé por tanto lo que voy a hacer ahora es usar las etiquetas que acabamos de aprender para poner el título de la noticia voy a hacerlo grande en texto negrita por ejemplo más grande por ejemplo el texto principal hacerlo más pequeño incluso por qué no faltaba una palabra hacerlo más pequeño ponemos dos etiquetas small lo que queráis por ejemplo es la noticia más grande el título más pequeño y de esa manera mejoramos la legibilidad de este bloque mi noticias de hecho esto también se usa bastante para por ejemplo el pie de página el pie de página de 40 noticias suele poner con un texto bastante pequeño ya sabéis hay otra pequeña incluso porque no puedo poner tres mismos para hacer la letra más pequeña todavía guardo recargo ya tenemos incluso la letra más pequeña todavía veis como no es lo más recomendable pero se pueden quitar con html para en este caso crear una tapadera por último cuando ya tenemos yo creo bastante claro qué es lo que vamos a hacer con esa tabla lo que voy a hacer simplemente es eliminar los bordes eliminando los bordes eliminó los márgenes y queda el documento market a lo superchulo voy a eliminar los bordes vamos a ver me falta uno todos los bordes para cero y como veréis el resultado es un documento bastante bien me ha quedado donde se incluyen los márgenes pero no se ve no se aprecia que está hecho con tablas aunque realmente está hecho con tablas a continuación vamos a ver los campos del formulario que podemos introducir entonces un formulario html lo primero que voy a decir es que parecido a las tablas aunque no exactamente igual en los formularios se recomienda no es obligatorio sobre todo ya lo veremos el javascript pero se recomienda que todo aquello que escribamos esté dentro kinect y que está llamada forma por tanto dentro del formulario lo primero que voy a hacer es escribir su etiqueta llamada foro en inglés quiere decir formulario además hay dos parámetros que yo diría que no son recomendables sino que prácticamente son obligatorios para poner dentro de un formulario ya que si estos son parámetros formularios que realmente no hace nada uno es que el action y otro es el mejor la acción y el método os voy a dar una mala noticia de manera temporal y es que en html se hacen formularios pero html no procesa formularios y diréis vale ellos vídeos o cuál es la diferencia entre hacer formularios y procesar formales cuando entonces un formulario diseñarse el formulario que recoge la información pero html no puede procesar la información no puede decidir si la información le imprime solamente en una base de datos o te envía un correo con esa información o lo que sea eso lo hace un lenguaje en el lado del servidor como por ejemplo php pero a la vez php no hace formularios php procesa formularios por tanto en este punto vamos a ver cómo hacer un formulario cuando llegamos cuando lleguemos a la parte de programación en el servidor veremos como los datos de este formulario y hacer lo que nos dé la gana con ellos por tanto en esta parte de action porque esto lo explico porque en esta parte de jackson lo que haremos es especificar qué archivo va a procesar este formulario lo que voy a hacer de momento es inventar un archivo que no existe punto php por el nombre que creáis porque pongais lo que tengáis no existe más adelante evidentemente cuando lleguemos a programación en el servidor ya vemos que existe y luego y luego os voy a introducir un poco el concepto del método tiene esta clase empezaremos a ver por lo menos una pequeña demostración método es cómo vas a enviar la información hay dos métodos el método post escribe en mayúsculas y en mayúsculas que es uno de los dos y el método que podéis elegir entre post el método post es más seguro cuando no sepáis cómo enviar la información enviarla con post porque post envía la información en cabeceras ocultas dentro de la página lo cual quiere decir que técnicamente es más difícil que no imposible que la gente que la gente tome esas cabeceras que la gente de intercepta esas cabeceras y las truco y las cambio y a vosotros no os interesa que la gente pueda falsear los datos de un formulario el método que es más inseguro con el método que te es mucho más fácil truncar la información que se envía desde un formulario pero a la vez es mucho más flexible nos permite hacer muchas más cosas por tanto de momento dicho esto este pequeño resumen os voy a decir que siempre que podáis o mejor dicho si no sabéis por elegir es post elegir el método seguro y como veis tenemos ya un primer formulario que tiene una acción y un método post cuál es el resultado en pantalla del momento el resultado en material no es ninguno y cuándo recargo y de momento no tengo nada formulario luego tiene una representación visual en pantalla simplemente es un concepto es que la página está esperando por tu envíes un formulario lo envié a la dirección que hemos escrito dentro de esta línea el campo más típico y más tópico dentro de un formulario es el input de texto es un campo tu puedes escribir contenido por tanto lo que voy a hacer mirar es dentro del forma de introducir lo siguiente dentro de ese foro voy a escribir una etiqueta llamada input input pro gay input qué tipo de impulso lo tengo que decir dentro del parámetro voy a felicitar igual a text es un tipo es un tipo de texto y luego os voy a decir otra cosa esto nos importa ahora mismo pero más adelante constituirá una buena costumbre yo tengo un input de tipo texto pero cada imputado debe tener un identificador para saber qué es el nombre cual es el correo electrónico cuál es el teléfono este identificador en los input se llama name dentro del medio voy a poner por ejemplo nombre vamos a ver cómo se representa esto en pantalla ahora guardo ahora recargo y veis que ya tenéis un primer campo en la pantalla ese rectángulo es un campo en la pantalla si hago clic y empiezo a escribir ya es un campo de un formulario en el que pueda introducir mi propia información vamos a ver más campos voy a ver otro campo mira es muy parecido por eso os lo quiero enseñar lo voy a ver en este vídeo tres tipos de campo otro campo que os quiero enseñar eso es de tipo password su imagen es lo que hay input type es igual a fast words name es igual atención contraseña mil se nos ocurra contraseña o contraseña o contraseña o contraseña lo que queráis pero no pongáis en el dentro del mail ya que esa información que se envía en las cabeceras vamos a verlo cierro la etiqueta guardo recargo o tengo un campo al lado del otro recordad que si quiero que haya un salto de línea tendrá que introducir metí que está pero así te guardo más recargo y mira como si ahora escribo aquí contenido esto es un campo de texto esto es un campo de contraseña otra cosa que os voy a decir esto ya os lo imaginaréis dentro del mail yo elijo el nombre que me dé la gana le encontrasen a mi password contraseña lo que queráis pero dentro de type no puedes pedir lo que lo que quiera esto es un parámetro de html tex tex y password es password por tanto nos eso ocurre poner time igual a contraseña porque no funcionará y ahora por último por último dentro de este vídeo voy a poner un último control es un control sin el cual el formulario no funciona está diciendo un formulario mínimo tim wood igual a submit si tú pones submit el programa entiende automáticamente que es un botón de enviar guardo retardo sumido una vez tengo ya por tanto atención un campo donde puedo poner mi nombre dónde puedo poner mi contraseña y dónde puedo darle a enviar donde lo enviara lo enviara a un archivo llamado prod punto php para que lo procese evidentemente como propio punto php ahora mismo no existe me va a dar error verdad los preocupeis mira debe asumir lo envió y está error esta web no se ha encontrado no existe este archivo evidentemente cuando exista tenemos ya la posibilidad de juntar esto con el archivo que procese para aquí generar un formulario en el archivo pero punto php o como os dé la gana que se llame procesarlo y hacer lo que queráis con ello como miren elevadores está en inglés me aparece el botón submit como son mil web en castellano no queda muy bien que esto aparezca así quedaría mucho mejor en el botón pusiera enviar verdad bueno hay un valor hay un parámetro hay un atributo que vamos a poner dentro de html que es el value valor por tanto me voy a el botón submit y si yo quiero que no ponga su mix y lo que ponga a enviar voy a decir para liu es igual a la bolita guardo recargo y ahora pone o la bolita lo cual quiere decir evidentemente que no voy a poner la bolita sino que voy a poner enviar con enviar guardo recargo para traducir manualmente para que aunque el navegador esté en inglés en el botón siga poniendo enviar pero yo no os voy a decir otra cosa para qué más podemos usar válido os voy a enseñar una cosa y luego os la voy a enseñar mira aquí arriba se supone que pongo mi nombre y aquí abajo se supone que pongo la contraseña pero como no sé nadie me lo ha dicho así que lo técnicamente correcto sería antes de minutos es decir nombre y contraseña guardo recargo y lo tengo ahí pero no queda muy bonito no queda muy bonito me d’esquadra los campos tengo que recurrir a tablas o acss para cuadrarlos es un rollo hay una opción pero esto es lo que primero os voy a enseñar y luego os voy a desentrañar que me permite también poner valió a los tiempos mirar dentro de lynwood digo valió es igual nombre y en contraseña y aquí es donde te oro vamos a ver es igual a contraseña 4 recargo y empieza de problemas aquí parece que haya funcionado bien pero aquí desde luego no he puesto un valium pero claro como es un campo de contraseña y lo que es peor lo que es peor es que mucha gente no entiende mira en la pantalla que si yo he puesto aquí nombre no es para que ponga su nombre ya continuación tu nombre no yo lo que quiero es que borres y pongas tu nombre el problema si se hace es una aplicación que tenga un login la gente te llama y te dice es que no puedo entrar y mirar la tabla de registros la gente pone el nombre de dos puntos su nombre dices no es que tienes que borrar bueno vosotros me diréis que habéis visto por ahí formularios en internet que cuando pone aquí nombre verdad haces clic y automáticamente el nombre desaparece y podés poner tu nombre eso hasta hace poco se hacía con javascript de hecho se pueden seguir haciendo con javascript pero hay un parámetro específico en html5 que nos sirve para esto y el parámetro en lugar de llamarse value se llama place holder por tanto yo me voy a venir aquí era donde pone value lo voy a cambiar por place holder place holder place holder me da dos ventajas atención mira guardo por supuesto recargo la es cual del me da la ventaja primero de que veis ha puesto nombre si yo hago clic y empieza a escribir automáticamente el nombre se va y lo mismo con la contraseña y la segunda ventaja la encontráis precisamente en el campo de la contraseña y es que antes contraseña me lo ponía con caracteres de contraseña el place holder aunque lo pongas en un campo de contraseña te lo muestra y cuando empiezas a escribir ya te lo convierte en contraseña un hombre empiezo a escribir y desaparece contraseña empiezo a escribir y desaparecen y eso es muy bueno porque crece en html5 no tienes que programar el javascript para eso sí sabes javascript pues ayer pues bien pues lo haces y ya está pero si no ha fallado el javascript no tienes que aprender a decir solo para hacer una cosa como ésta por tanto el valium lo usaremos para el botón pero para los cambios de un formulario usaremos el place holder vamos a ver otros tipos de campo de formulario como en este caso pueden ser por ejemplo el text área por eso me voy a ir antes de enviar antes del botón enviar y lo que voy a hacer es básicamente mirar introducir los siguientes texto área text ya está ya estaba pero fijaos cómo está pensamos que todos los inputs que he usado hasta ahora eran etiquetas que se auto cerraban no tenían etiquetado en cierre en cambio el texto haría así que puede tener sin derechos y que tiene etiquetas de cierre vamos a comprobarlo guardo recargo y veo límite esta ley y por tanto puedo escribir hola esto es un área de texto y luego puedo evidentemente poner un br para que es alta en la línea de bajo más cosas y además os voy a decir qué en los últimos navegadores en las últimas versiones versiones de los navegadores encontrareis un pequeño deslizador unas pequeñas líneas diagonales aquí en la esquina inferior baja del área tex tex área esto quiere decir que será de texto si no te gusta la dimensión que tiene te lo puedes modificar simplemente pinchando y arrastramos pero claro que eso se pueda no quiere decir que yo lo recomiendo porque eso funciona así en navegadores nuevos pero qué pasa con los antiguos para eso dentro de text área os voy a decir los parámetros que scholes y rose kohl’s es igual a columnas y rose es igual a filas por tanto mira te voy a hacer un texto de 10 columnas y diez filas de guardo de cargo veis como he cambiado y si me pongo a escribir unos 3 4 5 6 7 8 9 y 10 11 12 y aquí en teoría 2 3 4 5 6 desde el puesto 9 y 10 ahí sí que ha cuadrado por tanto veis que lo que estoy haciendo es especificar cuántos caracteres entran de alto y de ancho dentro de las drogas por ejemplo dijera te quiero columnas recordar columnas horizontal filas vertical columnas en cuenta guardó recargo y ya tengo un campo todo lo grande que quiera lo veis y por supuesto puedo decir bueno pues lo cuadro para que tenga la misma anchura que los campos de arena 12 nov 16 cuadrando 17 vamos a ver igual con 17 con 17 casi ha entrado esto lo estoy haciendo no es la manera de maquetar formularios es una mera cutre y sencilla de ahora disponer de un formulario fácil y rápido en definitiva lo que quiero que veáis es que esto es un campo de texto donde puedo introducir incluso dos saltos de línea incluso números lo que quiera y por supuesto al texto también se le puede poner un place holder vía place holder igual que introduzcan aquí su texto guardo en algo al arse introduzca aquí su texto nombre contraseña y cuando empiezo a escribir desaparecen a continuación vamos a ver dos tipos de más de campo de formulario como son los campos del botón de radio también llamados campos de elección única y los campos de tipo check box también llamados campos de elección múltiple por eso lo que voy a hacer es antes del cambio in boots’ voy a escribir lo siguiente otra vez voy a escribir un input de tipo recordáis como en el botón de como en el campo text pero en lugar de escribir texto como escrito aquí arriba voy a escribir radio es un campo de selección múltiple en el medio voy a escribir por ejemplo sexo y en value voy a escribir por ejemplo hombre cierro la etiqueta y atención importante después tengo que poner una palabra porque mira si grabó recargo porque así me aparece el botón de radio y hombres y no pusiera este hombre al final sólo aparecería algodón de radio y vosotros medio de ice pero porque si has puesto aquí hombre value es el parámetro que vas a pasar pero estás conmigo por tanto por eso después aquí tenéis que poner hombre copia a vez más copio vuelvo a empezar mira otra vez atención a caer es igual a radio name es igual a sexo porque me estoy refiriendo al mismo grupo de preguntas value es igual a mujer y pongo mujer guardo recargo y fijaos tengo que hacer una elección que es un formulario hombre de mujer pues fijaos que los botones de radio o marco uno o marco el otro para eso se llaman de selección única si yo marco uno se desmarca el otro si tú lo que quieres hacer es una pregunta de elección múltiple no eliges un botón de radio eliges un botón de check box por tanto a continuación voy a decir dime tú no sabe por qué está aquí dime tus aficiones y ahora tercero la pantalla voy a hacer explotar un input de tipo check box es escribirlo exactamente igual male acciones barrio deporte por ejemplo y atención al igual que en el botón de radio tenéis que poner la palabra detrás imputa safe box medina aficiones valido deporte y a continuación deporte guardo para que lo podáis abrir desde la carpeta compartida vamos a ver cómo se ve esto parís deporte es un tic ya no es un botón de radio es un chef box es rectangular atención mira voy a volver a hacerlo ya puestos que estoy bajo voy a copiarlo y pegarlo deporte música cine excursionismo y otros drago recargo ahora arreglaremos con las metas y que estás en el tema de ese del acento y fijaos que en este formulario los campos de tipo radio son de respuesta única o marcas uno o marcas el otro pero los campos de tipo chic box son de respuesta múltiple a él y me puede gustar el deporte pero también me puede gustar la música pero le puede gustar el cine o me pueden gustar varios elementos a la vez en cualquier momento puedo marcar y desmarcar los que quiera por tanto cuando hagamos preguntas de selección única o de selección múltiple en un formulario tendremos que elegir entre los autores de radio o los botones de tipo check box un elemento muy curioso al menos en la respuesta única la respuesta única es obligatorio en la respuesta múltiple es opcional voy a poner aquí que el 1er tuvo un género eres hombre o mujer dime tu género hombre-mujer y ahora voy a poner otra pregunta a continuación ahora a continuación voy a poner eres mayor de edad y voy a poner si o no se podría hacer con un check box pero voy a hacerlo con motores de radio y voy a decir que este sí y este es no y esto es sí fíjate que los cuatro los cuatro tienen el grupo sexo y ahora vas a ver lo que pasa esto pasaría lo mismo si no tuvieran si no tuvieran gol yo guardo recargo me falta el ver guardo recargo eres hombre mujer vale soy hombre eres mayor de edad si he dejado de ese nombre para ser mayor de edad nos vuelvo a ese nombre pero ya no soy mayor de edad el problema es como decirle al programa como dice el navegador web que grupos de preguntas hay para eso está el nombre por tanto lo que va a hacer el navegador es entender que todos los que tengan el mismo name forman parte de la misma pregunta y ahora lo que voy a hacer es decir nuestro es edad y esto es el ave pues fíjate que de esta manera guardo recargo y ahora puedo decir que soy hombre y mayor de edad y tengo por tanto dos preguntas que se comportan de manera independiente ahora por último dentro de esta comunidad que tengo un formulario más o menos lo que voy a hacer es rellenarlo y enviarlo evidentemente y como lo estoy enviando a prop punto php con el método post ese producto php no existe voy a enviar pero lo que quiero que veáis de momento un momento aunque el archivo no exista es como en la ruta yo estoy llamando a prop ph pero no solamente la ruta acaba en pro punto php antes de dejar este tema para retomarlo mas adelante con php lo que voy a hacer es simplemente cambiar la dieta voy a guardar voy a recargar el formulario voy a enviarlo es urgente contraseña el texto generó mayor de edad deportes y aficiones le voy a enviar atención y fijaos que aunque parece que ha pasado lo mismo realmente no ha pasado lo mismo mira de allá arriba dentro del propio punto php se han enviado parámetros en la url tales como nombre es igual a jose vicente y contraseña es igual a esa que escrito sexo es igual a hombre y la desigual así aficiones es igual a deporte en aficiones es igual al deporte en lo que sea es la diferencia de enviar un formulario con get o enviar un formulario con post si tú ves el formulario con post lo que hayas puesto el formulario no lo ves no lo puedes tocar está oculto si haces un formulario con get lo que hayas puesto se pone automáticamente esto seguro que lo habéis visto un montón de veces navegando por páginas web se pone dentro de la url esto del get cuando digamos php os diré que es mucho más flexible nos permite hacer un montón más de cosas pero a veces más inseguro porque el formulario se puede tocar que por ejemplo de poder haberlo obligado a decir que si el formador anterior sólo será mayor de edad podría rellenar otros campos ya que puede tocarlo aquí podríamos los campos directamente escribiendo con un poco de maña en la url por eso lo dejo aquí ahora de momento diciendo que siempre que podáis si no sabéis que elegir por seguridad elegir post no quiere decir que postre a un gran que hable para que todo ese puede crear es más seguro que usar gueto vamos a ver otro control del formulario que es una lista desplegable o unos dados list no es el tipo de formulario más importante pero desde luego a menudo nuestro más me gusta sobre todo porque en pc no es tan importante pero entrepinares en móviles tabletas de teléfonos móviles sí que es muy importante porque sale bastante bien mira voy a poner por ejemplo la dime de qué país interés y ahora voy a escribir una etiqueta llamada select sobre el problema el problema es que el consell es por defecto almacenada señora guardo y recargo dime de qué país eres parece que ahí quiere haber un trono pero no lo hay por tanto ese es el hecho no hace nada por el otro br no hace nada si no le enganchamos opciones que tengo ya un drop down pero en falta de opciones para poner opciones lo que voy a hacer es que dentro de ese select voy a poner option y se cierra option y pondré pues por ejemplo de españa’ vamos a ver y luego voy a poner otras opciones como por ejemplo posterior soy de austria francia soy de los hospitales los países que sea este tipo desplegable de seleccionado que aparecer es así que lo que voy a hacer es guardar recargar y comprobar como ahora los países que he puesto aparecen en esa lista por tanto combinando el select con el option podemos hacer objetos de lista desplegable para nuestros formularios a continuación voy a volver al proyecto el primero al proyecto de mi tienda y voy a hablar sobre la cabeza de html concretamente voy a hablar sobre algunas no todas pero sobre etiquetas que nos podemos encontrar dentro de la cabeza la primera etiqueta que yo me voy a poder encontrar la etiqueta yo diría más importante de las de la cabecera es la etiqueta title la etiqueta título cuando yo he cargado mi tienda fijaos atención mirada la pantalla cómo se llama mi tienda se llama index.hu tm el hombre más feo verdad yo quería que se llamara a mi tienda para eso hay una etiqueta que voy a escribir dentro del gen que se va a llamar fácilmente title la intolerable titles a tierra y lo que hago es poner aquí dentro el nombre que quiero o el texto que quiero que aparezca arriba mi tienda dentro de la pestaña ahora aguarda ahora recargo y veréis como allá arriba pone mi tienda ya lo pone en index.html más cosas vamos a grabar más etiquetas metas y más etiquetas que podemos encontrar en definitiva dentro de la cabecera vamos a ver a continuación tres viñetas llamada meta se llaman meta porque no son etiquetas puramente celoso la mente de etiquetas son etiquetas que hablan de otras etiquetas es información que nunca vosotros vais a ver esa información que ve el buscador ve a que el buscador google digamos que yo sin derecha a la página para escribir una meta de etiqueta tengo que poner lo siguiente meta neil y el enorme content y el contenido esta estructura de hecho si me permitís la voy a copiar tres veces más hay muchos tipos de meta etiquetas yo os voy a contar las tres más importantes me parece la primera de ellas es la descripción descripción descripción tiene que estar escrito en inglés vale poner descripción ya estoy ayer escribió y en contenido lo que vamos a hacer es poner la descripción con una pequeña frase ni se les ocurre a poner un párrafo o dos porque el buscador va a obviar todo aquello que aparezca más allá de la décima palabra entonces encontré voy a poner mi tienda de productos en el escrito no está bien escrito porque me sobra tienda de productos de que productos esperados la cuestión de posicionamiento si vendes muchos productos bien pero si vendes productos de un sector específico tienda de zapatos no pongas productos con zapatos el objetivo de la descripción es que el buscador es que google te lo califica de que lo más rápido posible poner palabras que no aporten significado por ejemplo mil no es importante que sea me entienda si es mi pero es tienda probablemente los que viendo a los demás si fuera tu tienda igual las luego las dos palabras más importantes son tienda y zapatos y él ve bueno poner tienda zapatos indios norteamericanos una palabrita donde sí que voy a hablar el indio es en las siguientes y words las siguientes etiquetas meta que es una etiqueta llamada keywords qué es las palabras las palabras clave con las cuales se indexa lo que tenéis que hacer aquí en el contenido es poner una sucesión de entre 5 y 10 palabras que marquen bien y que definan bien tu negocio o tu página web o lo que sea tienda eres una ong o es no tiene que vender cosas si no eres por tienda que vendes zapatos cuál es tu radio de acción vendes zapatos a todo el mundo o vendes zapatos sólo en la zona de valència valencia- qué tipo de zapatos veintes vendes todo tipo de zapatos o estás especializado con zapatos deportivos deportivos si estás especializado si no dejas zapatos no pongáis y esto es algo que a mí me encanta explicar tenéis que sintetizar aprender a sintetizar aprender a hablar como hablan google no como leéis nosotros por tanto escoger entre 5 y 10 palabras aunque escojas 20 más allá de la décima prácticamente no tiene ninguna importancia a las palabras que elijas por tanto sintetiza y por las palabras más importantes las primeras es un consejo deseo más cosas ni se te ocurra hacer trampa la típica trampa y antigua trampa de si quiero que se me indique muy bien por zapatos pongo 10 veces zapatos esa trampa de hace años funcionaba actualmente no funciona y google amenaza con penalizar severamente esos intentos de engaño por tanto ser honestos a la hora de etiquetar vuestra página también google amenaza con penalizar severamente el que yo aquí en las keywords y en el contenido en la descripción ponga la tienda de zapatos y luego abajo ponga charcutería y pescadería si no hay una coincidencia google entenderá que estoy intentando engañar a alguien y por tanto me paralizará por tanto usar esto con buenos pies no intentes engañar entonces cambiar y luego otra etiqueta no totalmente etiqueta que a mí me gusta mucho es la etiqueta autor indicas quién ha hecho esa página y frente a esto es importante no la usa google todavía mucho pero es importante porque en un momento dado la puede usar para digamos y llevar muchas páginas web y pongo que soy el autor de ellas cuando alguien me busque en google que salgan las páginas no anterior programado al final no se usa al final si yo le hago la huelva a una empresa a mejorar el posicionamiento de esa empresa el autor en lugar de poner mi nombre tomó el nombre de la empresa aunque esa inversa no ha hecho la web pero estabilidad estoy ayudando un poquito tampoco crees que mucho no estoy ahí donde un poquito a mejorar el posterior el cuestionamiento de esa empresa vamos a aprender unas cuantas etiquetas más algunas de ellas de que las metas algunas otras otros tipos de típica pero yo creo que no puede pasar más tiempo sin aprender una etiqueta muy importante es aquella que nos permite codificar correctamente nuestras nuestras páginas web a qué me refiero con modificar las páginas web y muchos navegadores vienen preparados tienen predeterminados para trabajar con caracteres ingleses norteamericanos nada de ella es de acentos nada de caracteres extraños de hecho veréis que si yo he puesto aquí el título del artículo aparece un carácter extraño título del artículo que no me ayuda a que mi página se pueda ver bien dentro de españa y grande dentro de ninguna bueno pues voy a crear una nueva etiqueta meta que le va a permitir indicarle al navegador cómo debe codificar correctamente esta página por tanto voy a escribir lo siguiente atención voy a escribir muy estilosa tengo aquí y escribo meta http jong kuyt igual muestra puntos content es igual a este rollo que os voy a escribir ahora y el rollo es que el texto barra en html se forma té con el charset igual efe 808 es el juego de caracteres correcto para españa por acentos con es con interrogantes que se abren con exclamaciones que se abren de esta manera al poner eso o seré sincero cada vez que lo pongo lo que vamos copiarlo y pegarlo el último proyecto una primera forma de memoria si hago esto mira y ahora guardo yo ahora recargo y veréis como pone manera de la página con acento y poner título del artículo así que esa meta etiqueta tan tan ridícula y tan larga lo que hace es forzar a que la codificación de la página sea correcta para castellar por vale os diría que prácticamente en cualquier proyecto en castellano requiere una lista esa página al principio hay otras soluciones se pueden cambiar él el lenguaje del servidor se puede cambiar el lenguaje del documento pero ésta que os enseño es la mejor voy a dar tres etiquetas más que usaremos en breve pero que de momento no vamos a usar atención a continuación y insisto siempre dentro de la cabeza siempre dentro del gel no estamos en el body en ningún momento voy a introducir tres etiquetas más una que usaremos dentro de poco que es la etiqueta link para vincular archivos css externos que es un archivo css un archivo css es el que nos permitirá externalizar la presentación del zinc como se ve las cosas son rojas azules blancas verdes grandes pequeñas cursivas adquieren borde sombras quizás por tanto lo que voy a hacer es escribir una etiqueta que se llaman ling ling red es igual a esta el sí que estoy importando es una hoja de estilos una hoja que contiene estilos de tipo bueno técnicamente a día de hoy el único estilo que realmente se usa este es texto barra pss project por ponerlo tampoco pasa nada y dónde está h red es igual a mi estilo punto 3 es lo único que podéis elegir evidentemente es el nombre del archivo que vais a importar otra cosa esta etiqueta ahora mismo fallaría porque no tengo un archivo llamado mi estilo css cuando falló la etiqueta link simplemente no pasa nada no no hace nada no muestra nada en pantalla esta etiqueta nos ha servido para especificar qué pasa cuando el css está afuera de un archivo fuera pero qué pasa si el archivo está dentro pues en ese caso puso la etiqueta llamada style está el type igual texto barra css y esta es la del link no se cierra pero la de esta el sí por qué pues porque aquí dentro como ya veremos más adelante voy a hacer una pequeña demostración es donde pongo el estilo css no os habéis un problema por esto la cuestión de las tres es normal que no lo pilláis de momento el fondo family es igual a área cuándo recargo y fijaos ahora como solo el texto h1 es arial todo lo demás sigue siendo time sin román por qué pues porque esta etiqueta style lo que ha hecho es definir que el estilo h1 tiene la fuente en formato área por tanto estas son dos partes de una misma realidad link es cuando el css este externo esta ellos cuando el css este interno y cual os daremos a las dos hornos a bordo y por último una que veremos bastante más adelante es la etiqueta de script me sirve para meter scripts dentro de html scripts como que pues por ejemplo como javascript por tanto script type veis hamas field esta misma etiqueta nos sirve así tal cual para introducir texto dentro de esa etiqueta mirada atención qué hola hola eso es hamas bip al igual que también nos sirve para especificar si el javascript es externo externó por srf mi archivo punto j s si lo que quiero hacer es externalizar los javascript por tanto gracias a estas etiquetas que estáis viendo como con estilo es diferente trabajar dentro que trabajar fuera estilo fuera sling estilo dentro se está en con script la etiqueta es la misma estás dentro de si estás fuera lo único que cambia es que si estás dentro simplemente empiezas a escribir directamente si estás fuera dices dónde está el archivo con el que vas a trabajar el frame es una etiqueta y también es un recurso dentro de html que nos permite cargar una página dentro de otra así que mira voy a poner un título no voy a hacer ni el modding y el gel tenéis para ahorrar un poco y voy a poner este es el título la que la ponga dadme este es el título de mi padre restaurant uno normal y corriente pero ahora lo que voy a hacer es poner una etiqueta y frame que se abre y se cierra y ahora en y fred y ahora viene lo divertido voy a poner src esto antes de parámetros solos la fuente por ejemplo http dos puntos más elpais.com o la dirección que os dé la gana atención y ahora ward o incluso podría poner una línea en el caso de que el navegador no soporte frames su navegador no soporta que cada día hay más gente que sólo va a desactivarlo por seguridad guardo recargo y mira en mi página web está en el país usando parámetros además por supuesto voy a poder cambiar la apariencia por ejemplo le voy a decir que weed es igual al 100 por ciento y el hair es igual a 500 píxeles por ejemplo guardo recargo y una página de más grande como he podido insertar el país en mi página porque no lo he insertado lo que hago es meter un marco y este marco es como un agujero negro que me lleva a otra talla es un poco hiperespacio verdad esta parte de abajo es mi página y esta parte de la cual parece que sea mi página pero lo que realmente estoy haciendo es ver otra página si os fijáis tampoco es tan fácil que yo os engañe porque si os fijáis hay un borde con cierto relieve los de marcos delante con serio hasta darle relieve el marco mira un scroll horizontal y además por describe vertical y como lo es pero os digo más es que incluso ahora no pero cuando veamos ahí efe ss veremos que incluso podemos cambiar estas etiquetas y decirle que no wifi por ciento es igual a 400 píxeles pero css es lo que veremos a continuación y digo volver es igual a 0 píxeles all white y estará por el flow igual a libre mirad lo que hago guardo recargo y eliminó todo rastro salvo el scroll su único rastro que queda de que la página está insertada veis ha desaparecido el marco ha desaparecido el marco biselado que se prohíbe ya ha desaparecido también el scroll horizontal por tanto hay trucos para conseguir qué para conseguir que los marcos que ven mejor eran completamente integrados dentro de una página pero insisto una vez más y con esto cierro en que los marcos no se deben usar dentro de lo que podáis usarlos lo menos posible porque al final a día de hoy de socialmente dan más problemas que soluciones vamos a ver algunas etiquetas complementarias de html5 como son por ejemplo las etiquetas de micro marcado y para ello voy a crear un documento nuevo que se va a llamar voy a apartar como lo tengo en actual y lo voy a guardar como micro de etiquetas pero todos los que voy a enseñar su el mito de etiquetas pero la mayoría de ellas y por tanto cree un documento que se llama micro etiquetas en actual está en la carpeta actual no en la carpeta más que ss me entró etiquetas lo cargo tanto en un sitio como en otro y con ese archivo voy a empezar a trabajar voy a escribir un texto plano voy a quitar las etiquetas html simplemente para este bien texto plano y voy a decir hoy es 25/05/2011 y son las 3b 41 mi nombre es jose frente vivo en mi lado valencia comunidad soy diseñador formador y creativo multimedio ahora mismo estoy conmigo y compacto y este es el texto sobre el que voy a empezar a trabajar si yo ahora guardo y recargo tengo como podéis comprobar el resultado en pantalla voy a poner unos pequeños otros modelos otros de carro para que quede más o menos por maquillado igual y tenemos ya por tanto ahí como podéis ver el contenido maqueta que ponerle en ute efe evidentemente útil 8 para los acentos de las series pero de momento vamos a partir así la cuestión está en que lo que vamos a hacer al final es el trabajo sucio de educar a google y decirle que es cada cosa porque ahora mismo cualquier ser humano sabe que esto es una fecha y una hora una fecha completa esto es un nombre que además digo es que es mi nombre y ahora mismo estoy con nick o el contacto cualquier persona humana entiende que yo no soy ni ccoo ni soy paco sino que yo soy jose vicente y estoy con otras personas que son mi padre y vivo mislata cualquier persona entiende lo que es vivir por lo que es recibir en una zona cuando yo aquí pongo vivo en cualquier ser humano entiende que esto es donde vivo no donde estoy ahora mismo de paso si dónde vivo y tampoco es donde nací porque pongo vivo en puedo haber nacido en otra parte en definitiva hay una serie incluso soy diseñador formador y creativo multimedia en google lo sabe el señor soy diseñador y estoy diciendo que busco un diseñador o que conozca un diseñador sino que soy un diseñador en definitiva es una gran cantidad de información fácilmente interpretarle por cualquier ser humano difícilmente interpretarle por una máquina a continuación por lo tanto vamos a ver etiquetas que nos permiten añadir el significado semántico al texto y por tanto ayudar a los navegadores y sobre todo a los buscadores a que sepan e indexar y sepan incluso entender y categorizar la información que yo estoy introducción la primera etiqueta que voy a usar es address padres indican una dirección una medida de estas etiquetas entre las que está hablando son etiquetas de html5 novedad en telecinco una etiqueta por tanto es abres abre con dos veces y dos eres la etiqueta padres se abre y se cierra la etiqueta address no tiene significado no tiene el significado visual no tiene resultado visual evidentemente con css si quiero se la puedo dar pero por defecto no tiene representación visual si yo guardo y recargo comprobaréis en la pantalla como vivo en visar de valencia en este caso me la ha puesto en cursiva con un margen con css puedo desactivar esa representación pero lo de menos es si ha aparecido en cursiva o si ha forzado un salto de línea lo único realmente importante es que ahora le estoy diciendo al navegador que estas dos palabras forman realmente parte de una dirección geográfica si yo en cualquier momento él dijera al navegador quiero localizar la ubicación geográfica de esta persona no tengo que especificar la ubicación ya es el editor esa etiqueta la siguiente etiqueta es la etiqueta time la etiqueta time me ayuda a decir qué parte del contenido que parte del texto es una fecha lo primero que tengo que hacer es estar exponer la etiqueta time el hay un problema con la etiqueta time y es que el tiempo se puede poner de muchas maneras yo he puesto el día mes año hora minutos al puesto los segundos hay países que ponen primero el mes luego el diálogo el año hay costumbre también a veces de poner primero el año luego el mes luego el día yo espero que el navegador entienda el formato en el que yo he escrito no lo espero por tanto dentro de time hay un argumento que debemos poner que es the time y lo tengo que poner en este formato que os voy a decir y no en cualquier otro primero el año con cuatro dígitos york luego el mes con dos dígitos york luego el día con dos dígitos y el día eso se ve un 5 por ejemplo y ahora pongo una t de tiempo y digo que son por ejemplo bueno las 13 2 puntos 41 los puntos 0 eso es un tiempo correctamente formateado para html5 de tal forma que aquí puedo poner el tiempo en el formato que me dé la gana pero sí quiero que html5 el deporte correctamente dentro de la etiqueta time debo ponerlo de hbo formatearlo con este formato que tenéis aquí y no con cualquier otro año con cuatro dígitos guión mes dos dígitos guión día los dígitos de mayúsculas ahora dos puntos minutos dos puntos segundos de la misma manera guardó recargo y veréis que no hay significación visual porque insisto una vez más estamos trabajando con etiquetas semánticas no tienen el perfecto visual pero por detrás están informando al navegador ya el buscador de qué es cada elemento dentro del párrafo que yo he escrito lo primero que vamos a ver es la web semántica es el cómo mediante el uso de un elemento llamado micro datos podemos añadir prácticamente una etiqueta para todo aquello que google nos ha dejado preparado y vigo google en este caso ya que google lleva un poco la delantera en cuanto a los micro datos 3 voy a usar unos micro datos que puedo encontrar en data vocabulario punto o hereje voy a entrar dentro de la web data vocabulario y punto o hereje parece que ha dado un fallo pero si os fijáis es la página web correcta y dentro de esta página te dice bienvenido a el vocabulario de datos punto de rege te pregunta estás buscando por los webmasters docs de google entonces pincha ahí pero si estás buscando las especificaciones de microdatos para eventos para organizaciones para personas productos revisiones agregados migas de pan ofertas o agregados de ofertas entonces estás en el sitio correcto voy a hacer clic dentro de personas y dentro de persona en este caso google nos ofrece un añadido de microdatos preparados para introducir como son por ejemplo el nombre el nombre es el family name lo que en español se conoce como el apellido el nickname lo que en españa se conoce como el nombre la fotografía el título el título es el trabajo que tienes no necesariamente el título que tienes sino el trabajo que desarrollas el rol una vez más tu rol dentro de la empresa la url si tienes afiliación y es más incluso si el contacto del que estás hablando es un amigo si el contacto del que estás hablando es un contacto si el contacto es familiar y la dirección de esa persona de esta manera yo lo que voy a hacer al redactar un texto es poder especificar cada palabra que introduzco dentro de ese texto a qué concepto corresponde para que google la pueden dejar con mayor precisión de esta manera yo aquí le digo que es un name o un nick name y por otra parte google ya le está diciendo a su buscador nickname qué quiere decir ese concepto qué quiere decir para que un buen día yo por ejemplo me pueda meter en google y pueda decir quiero buscar páginas de personas que se llamen jose vicente y que en ningún caso me muestre una página de una persona que los llamamos un diente es decir que se va a indexar con mucha mayor profesión que hasta ahora los datos y por tanto al final evidentemente que nos tengan controlados por tanto yo lo que voy a hacer en primer lugar es escribir un texto ahora sacaré otra vez el dato que hablan y punto hereje y voy a empezar a escribiendo los siguientes voy a empezar diciendo hola me llamo en mayúsculas el amor josé vicente es un email carratalá es familia ahora luego pongo mi foto la tengo por ahí os acordáis título soy creativo y media habrá más oro informador igual es www 4 w junto con el inventado un nuevo tipo de web vamos a ver doy clase en la upv upv es un sitio al que estoy afiliado por ejemplo tengo un amigo que se llama conozco a una persona que se llama miguel y tengo un familiar que se llama de esta manera a mí mismo mislata voy a poner unos cuantos de heres por aquí y verme por aquí y así más seguro y el programa hace saltos de línea cuando yo reproduzco este texto en pantalla yo tengo aquí un texto y este texto dice bastante de mí de hecho dice mucho de mí pero este texto lo puedo entender cualquier humano pero no cualquier máquina si una máquina como por ejemplo google empieza lee los textos y se encuentra con foso vicente y se encuenta y se encuentra con pp o con miguel o con pedro dice entonces te llamas jose vicente y además pp te llamas millones o tiempo hasta enero cualquier ser humano dice el hombre lee en la primera línea dice me llamo la segunda dice tengo un amigo que con una persona que con este con estos micro datos lo que vamos a hacer es marcar el contenido de manera que le estamos diciendo a google cuál es la relación entre cada uno de los elementos como metemos micro marcado micro marcado por cierto no tiene relación visual pues yo lo que voy a hacer simplemente es escribir lo siguiente voy a decirle aquí donde poner foto vicente voy a crear un spam recordad que spam era como el de ir pero permito el dibise para meter una caja con texto es un bloque de texto el start marca un trocito de texto por tanto yo quiero marcar josé vicente para que meter un pin sólo para dos palabras meto un start si fuera para todo el bloque de texto sí que metería un día y ahora voy a hacer lo siguiente para html5 voy a poner y templo es igual a y me vuelvo a sacar la página de data vocabulario y digo mail sólo nos falta poner family game salvación de aparente fm y nivel por tanto este que es pues este es mini mail por tanto pongo aquí arriba nick mail y ahora copio y pego y y digo esto es mail fin y de esa manera se llegará cuarto y recargo voy a meter esto como una pestaña os daréis cuenta que visualmente no en cambio aunque si miro el código fuente sí que está reflejado ese spam por tanto es ésta no tiene prestación visual pero me está ofreciendo el gran papel de decirle a google que es cada elemento de él para que el gatillo jordan más aunque esto realmente va a ser más lo mismo realmente los microdatos no son más complejos de lo que ya habréis visto como he hecho el primero realmente ya sabéis hacer todos los demás simplemente por supuesto hay que mirar la tabla que os he puesto antes data vocabulari punto o hereje esto es mi title por tanto title horror raúl se identifica mucho mejor con lo que yo hago y formadores un stand detrás de cada uno y luego por supuesto puedo poner otra vez en web url insisto no me lo estoy inventando lo que estoy haciendo es en la pantalla de al lado mirar la tabla de la tabla para saber que tengo que poner mi clase en la upv esto es una afiliación por tanto afiliación tengo un amigo y lo que hago puedes poner aquí para que el programa sepa que si yo soy nickname josé vicente y name carratalá pp es un freno y yo soy el que arriba pone con nickname y neil y pp es una tercera persona que tiene una relación de amistad conmigo para que un día pueda entrar en google y puedas poner quiero saber quiénes son los amigos de jose origen de catalán y te muestren las páginas de tus amigos algo que a día de hoy no puede hacer aunque no entiende la diferencia entre una persona y el amigo de esa persona lo que hacemos mediante esos micro datos no es ni más ni menos que especificar qué es cada una de estas cosas y ahora dos preguntas la primera pregunta que nos podemos hacer es esto es realmente yo para que lo quiero para que voy a perder tiempo porque se pierde mucho tiempo poniendo micro datos desgraciadamente google no nos obliga a poner micro datos pero quieres que no sé que nos obliga en cuanto a que cuantos más micro datos tenga tu página mejor se va a indexar por tanto al final es la nueva manera de hacerse o pero que insisto luego saldrán trucos para mentir en los microdatos para la idea de google es que cuanto menos mientras mejor de posicionar y luego lo segundo que os voy a decir es que esto es un poco rollo de escribir estos micro datos son un poco rollos escribir si los tienes que escribir a mano pero no penséis en programación estática pensada de programación dinámica pensad que porque vosotros pensáis en facebook y decís por ejemplo en facebook imagínate que yo tuviera que poner a mano los micro datos de cada uno de los de los contactos de facebook no es así cuando una programación se vuelve crónica puedes hacer que automáticamente en cuando alguien se registre se pongan sus micro datos cuando haces un formulario en ese formulario tú pones nombre apellido donde vives todavía de nacimiento lo que puedes hacer es que todo eso que va a una base de datos cuando se presenta en pantalla automáticamente quede etiquetado como micro datos y por tanto de esa manera te cuesta un poquito de programar pero luego pueden automatizar bastante el proceso y de esa manera por ejemplo si haces una red social puedes hacer que la gente de esa red social esté mejor indexada con micro datos pero ojo los microdatos se usan esencialmente para personas pero es que recordar que hay más micro datos si me vuelvo a data boca angular y punto hereje por ejemplo tengo micro datos específicos para productos y para productos tengo micro datos como la marca como por ejemplo la marca acme bueno pues la categoría la descripción del producto el name la imagen del producto el review que sería una descripción el identificador de producto donde incluso vamos a poder poner un pescador como por ejemplo así isbn mps cada uno pc tiene españa no están muy extendidos lean es el más extendido bueno y detalles de oferta e incluso detalles de oferta podemos poner con micro datos para que pues para cuando en un futuro la gente en internet ponga buscó productos de tal tipo que estén rebajados al 20 por ciento o sea para encontrar directamente tu producto en la web es decir podemos pensar y tendremos razón en un principio que es un rollazo escribir micro datos pero tengamos en cuenta que los micro datos al final lo que están haciendo es dar más datos de nuestra página web a google para que llegado un momento y recordad que esto es lo decía hace unas cuantas sesiones cuando tú pones algo en google no te salgan diez mil resultados sino que te salga solo un resultado que es el que mejor se adapte a aquello que estabas buscando lo que vamos a hacer a continuación es trabajar con css recordad que css nos sirve para estilizar aquello que hagamos de html entendiendo es utilizar por darle propiedades visuales por darle propiedades estéticas por eso voy a crear un primer documento en este caso podría empezar pidiendo directamente código en html pero necesito una estructura en pantalla que tenga un gel y un botón y lo primero que voy a empezar diciendo es que hay tres tipos de css realmente el lenguaje es el mismo no os preocupéis vais a tener que aprender solo un lenguaje pero hay tres posiciones donde se puede poner el css interno perdón el css en línea se pone dentro del móvil dentro del body crece en línea es local de cada etiqueta y dentro del gel se puede poner dos tipos de css dentro del gel se puede poner css interno insertado en html css externó llama a un archivo externo estas son las tres maneras de insertar css dentro de un archivo html cada una de ellas porque estáis preguntando con el cual voy a usar según te convenga usarás una o usa la sota ahora lo que vamos a hacer es vamos a empezar trabajando con css interno que para empezar a hacer pss es la mejor opción por tanto como voy a empezar haciendo css interno corro esto borro esto y vamos a ver lo que hace falta para hacer css interno lo que hace falta es primero meterse dentro de la cabeza no en el móvil y en la cabeza voy a escribir una etiqueta style abro necesita style cierro etiqueta style importante el tipo va a ser de tipo texto css porque hay que especificar el tipo que hay más tipos de etiquetas de estilo y más tipos de estilo teóricamente si lo cierto es que al final no el estándar está abierto para usar cualquier otro tipo de destino la cuestión es que al final el estilo que existe y que se usa con html es el estilo css lo importante ahora es comprobar que todo lo que escribamos aquí dentro se va a considerar estilo css y habrá que escribirlo con las etiquetas de estilo css a continuación vamos a ver la sintaxis con la que tenemos que escribir dentro de fs s no es la misma en html no hay ahora ya etiquetas dentro del css sino que simplemente hay selectores usando las siguientes sintaxis lo que haré sin necesidad de abrir llaves ojo fijaos estoy entre estilo y estilo luego todo lo que esté aquí dentro será un estilo css lo que voy a hacer es escribir un selector ahora os explicaré a esos electores y entre dos llaves en css llaves se llama a estos dos elementos de aire a los elementos como una llave de piano digamos o como una llave en matemáticas y dentro de cada selector tendré propiedades más minutos atributo dos puntos parámetros con propiedad tengamos propiedad parámetro punto y coma propiedad 2 parámetro 2 estos peces así se escribe en francés y ahora ya estamos en css ya empezamos a dejar un poco atrás html y esto quiere decir que algunas reglas se mantienen otras cambian por ejemplo una regla que cambia es que tenemos que seguir ahora las reglas de sintaxis de manera mucho más estricta que en html porque hacer que fallemos en un solo parámetro en un solo selector en un solo punto y coma o en un punto y coma hace que no sólo falle esa línea como en html sino que falle todo el selector vale por tanto todavía no hemos llegado a javascript o php que son lenguajes mucho más estrictos pero hemos elevado un poco el nivel de complejidad en css todo css funciona como estáis viendo en la pantalla es emparejar propiedades y parámetros atención muy importante las propiedades de los parámetros se separan con dos puntos y las parejas de propiedad de parámetro se separan entre sí con punto y coma de hecho a esto os vais a acostumbrar mucho a partir de ahora a que cada instrucción se separa con punto y coma al final será algo intuitivo para vosotros ahora lo que voy a hacer es hablar de selectores que es un selector fijaos que el concepto está en que el estilo se escribe aquí arriba en el gen y el estilo llama a cada una de las etiquetas que hay en html la cuestión es cómo seleccionó yo una etiqueta con los electores con los electores yo indicó esa porción de código a que depp o a que articule joaquín section hace referencia vamos a ver a continuación en el siguiente vídeo que hay tres tipos básicos de selectores a continuación vamos a hablar de los selectores hay tres tipos de selectores básicos el primer tipo de selector básico es la propia etiqueta mira voy a escribir a continuación una etiqueta html que es un vídeo el típico y clásico de tengo un día ahora es un día de cierre y ahora escribe un texto este es un texto el problema de los días está que nos vamos a poner dips aprendí a poner dips y luego queremos estilizar y como localizó yo justo el dip que quiero estilizar si todo se llaman bien no tengo manera de seleccionar los tiempos para esto hay dos soluciones voy a poner otro día me podríais decir bueno usar tickets y se me da igual si al final tengo una periódico online o tengo una tienda online y tengo un montón de artículos como seleccionó el que yo quiero tendría el mismo problema entonces lo que voy a hacer es usar uno de estos dos modificadores veréis escribir cierro abril y le voy a poner un parámetro para poner un parámetro por tanto lo que hago es hacerme un espacio dentro del día en este caso no voy a poner como las imágenes el wifi el height por lo que sea sino que voy a poner una de dos cosas puedo poner una idea donde escribo y de igual comillas y lo que vayan las comillas es lo que os dé la gana lo que me dé la gana hay otro tipo de selector voy a escribir dentro de servir este es el segundo hay otro tipo de ese lector de modificador que es class es el tercero otra vez igual la palabra clase la tenés que ponerte al cual yo la he puesto pero lo que ponga dentro de las comillas nosotros lo elegís sin arriba lo que me dé pues este es otro más y gracias al vip y al class vamos a poder seleccionar con precisión ahora lo vais a poder comprobar cada uno de los días la pregunta más frecuente he llegado a este punto es cuál es la diferencia entre ir y clase cuando tengo que usar uno cuando tengo que usar otro la teoría dice y vamos a seguir la teoría para escribir el código base estándar posible que siempre que quieras identificar un elemento particular un elemento solo ese elemento no se va a repetir múltiples veces en tu página usadas y de idea es para un elemento siempre que quieras marcar un elemento del cual sabes que te vas a encontrar más elementos iguales marcarás class por ejemplo usarías y de para en un periódico digital digamos poner la noticia destacada del día la noticia destacada del día sólo es una eso sería y de pero en un periódico digital podrías tener noticias podrías poner en la primera plana podéis poner 10 noticias maquetadas de la misma manera si haber diez cosas iguales la teoría dice que no sería aire sino que serían clases para múltiples y de para único eso es la teoría la práctica dice que los puedes usar como te dé la gana la práctica dice que puedes usar clase en un solo objeto y el programa no se va a quejar y dice también la práctica que puedes usar y de él múltiples objetos y en ningún momento el programa te dice no sólo uno no te market o el resto no podés ir en múltiples y te las maquetas sin ningún problema por tanto vamos a empezar este ejercicio fijaos teniendo un día pelao teniendo un día con idea y teniendo un día con class y a continuación lo que vamos a hacer es ver cómo se ve esto ver cómo se formatea esto usando los electores de css a continuación por tanto vamos a seleccionar usando css fijaos que yo estoy yo aquí escrito una cosa que se llama pseudo código cuando yo escriba el pseudo código lo voy a hacer mucho a partir de ahora lo que vamos a escribir un código que representa la manera de escribir código pero que no es código real no hay ningún lector que se llame selector de ninguna propiedad que sea de propiedad bien lo que voy a hacer por tanto mira aquí a la pantalla es escribir el primer tipo de selector el selector más básico es la etiqueta y eso quiere decir que si yo quiero maquetar un vivo aquí simplemente pongo mi si yo quisiera maquetar el body allí pondría el body es decir pongo el nombre de la etiqueta que quiero es utilizar pero estamos en css en el html no hace falta poner el menor que el mayor que sólo hace falta poner el nombre de la etiqueta y ahora a continuación siguiendo las reglas de sintaxis que yo he marcado en la pantalla voy a empezar a escribir propiedades y la primera propiedad que voy a escribir es una propiedad muy sencilla css realmente en inglés es la propiedad bajo que hace para grau background marca el fondo marca las propiedades del fondo por tanto background dos puntos hay varias cosas que yo puedo contener en un fondo fundamentalmente puedo meter tres cosas puedes meter un color puedo meter una imagen o puedo meter un gradiente para este primer ejemplo voy a meter un color además hay varias maneras en las que yo puedo meter un color lava sencilla no os preocupéis es llamar al color por su nombre por su nombre pero en inglés evidentemente por tanto si quiero que el deeb tenga un fondo de color rojo pondré background dos puntos red y no os olvidéis del punto y coma al final técnicamente atención a la pantalla técnicamente no hace falta poner punto y coma en la última línea css antes de una llave esto es así en css y prácticamente en cualquier lenguaje de programación pero es buena costumbre es que os acostumbréis a aunque sea la última línea poner un punto y coma vamos a ver qué resultado tiene esto en pantalla así que ahora guardo recargo y allí va todo aquello que ese día se ha quedado se ha marcado con color rojo además como veis lo que estoy usando un selector que es un selector por etiqueta esto quiere decir que yo selecciona el día y ese día hace referencia tanto a este vídeo como a este vídeo como está bien diréis que éste tiene un nivel y este tiene una clase da igual siguen siendo vivo por eso veréis que en este caso es una primera muestra de cómo el c6 interno nos puede ayudar a ahorrar trabajo ya que este nivel me ayuda a especificar y me ayuda a formatear tres dips tres etiquetas html a ver por supuesto el css no solo podemos poner una propiedad en cada uno de los electores podemos poner tantas propiedades como nos dé la gana yo lo que voy a hacer es bajar de línea y decirle que la anchura de ese vil debe ser una altura determinada howse que la altura ahora mismo es el 100% de la página lo voy a hacer por tanto es decirle que a continuación el with la anchura dos puntos es igual por ejemplo a 400 píxeles veis la sintaxis siempre es igual atributo dos puntos parámetro y punto y coma para separar muchas veces la gente me pregunta oye es obligatorio bajar de línea no es obligatorio yo podría por ejemplo hacer pulsar suprimir y poner las dos propiedades en la misma línea lo único que importa es que se pare jce con doble con 12 puntos y separes instrucciones con punto y coma si lo haces así funcionará a mí no me gusta al principio que lo hagáis así no les gusta el principio que escribáis el código así porque es más lioso porque el pedazo mixta la línea dice es cuántas propiedades añade por no sé me tengo que aprender a leer en cambio si los separa es por líneas es más fácil ver atributo parámetro atributos parámetro atributo parámetro y de informe vistazo ver mejor lo que hace por eso ahora acuerdo ahora recargo y comprobaréis ahora como la anchura ha quedado limitada a 400 píxeles pongamos que pongo 300 no era igual guardó recargo y fijamos como ahora son 300 píxeles en definitiva lo que quiero que os deis cuenta es como cada parámetro que voy poniendo aquí en css va estilizando lo que tenemos dentro del navegador en este caso fijaos que se han juntado dos cosas primero background red fondo rojo y segundo anchura 300 píxeles ancho de 300 píxeles lo que le vaya a ir diciendo la css css lo va a hacer siempre que solucionar es evidentemente en el lenguaje correcto ahora bien lo que voy a hacer ahora es seleccionar con un selector o bien un y de hubiera una clase aquí viene un poco una cosa que os va a liar durante unos segundos pero como siempre así en css vamos a acostumbrar enseguida si yo quiero llamar a un nivel lo que tengo que hacer es poner una almohadilla la almohadilla de estado con la tecla al cr y el número 3 del teclado acceder el número 3 si éste tiene y de lo que me ve entonces lo seleccionó con la almohadilla lo que me ve y a partir de ahí todo es igual ya ves y le voy a dar una propiedad y le voy a decir por ejemplo volver para luego lo veremos más lentamente un píxel sólido negro guardo recargo y atención mirad lo que ha pasado lo que ha pasado en la pantalla es que todos los vips se han puesto con el fondo rojo y con la anchura de 300 píxeles pero sólo aquel que tiene el y de lo que ve de tiene un borde que es de un píxel de ancho sólido y negro que ha pasado en la pantalla los tres días tienen el color de fondo rojo y tienen una ayuda de 300 pero solo el del medio solo el que tiene el y de lo que me dé tiene un borde de un píxel sólido y negro vemos por tanto como la manera de seleccionar mediante vive es con una almohadilla por tanto si no pongo almohadilla pss entiende que estoy llamando a la etiqueta si pongo una almohadilla css entiende que estoy llamando a live y si pongo un punto la estación si quiero llamar a la clase y quiero estilizar la clase otro más os pongo un punto otro más otro más ya ves ya por ejemplo por no poner una instrucción diferente border es igual a tres píxels sólidos blue vamos a ver qué ha pasado aquí ahora guardo recargo y fijaos que ahora solo el tercero tiene un marco de tres píxeles de anchura de color azul estos son por tanto los tres electores en css cuando no pongo nada estoy haciendo referencia a la etiqueta cuando pongo el asterisco no cuando pongo un canal una almohadilla exactamente hago referencia al líder cuando pongo un punto hago referencia a la clase que en lógica tiene esto y yo que sé pero es así alguien como es así en todo css vais a ver que aunque os cueste unos pocos segundos acostumbrados ya lo tenéis para siempre ahora que ya sabemos identificar tanto las clases como los mires voy a borrar estos dos elementos que he escrito al final voy a centrarme sólo en el dip y así vamos a ver algunas propiedades usando únicamente ese mitre de hecho incluso es que voy a borrar estas dos propiedades si hemos restado en propiedades que me quedan no queda nada por tanto guardo recargo tengo ahí el texto pelado pero ahora lo que voy a hacer es especificar propiedades para cada una de esas etiquetas vamos a trabajar con algunas propiedades para empezar de texto así que la primera propiedad con la que quiero trabajar font guión y familia font-family me permite especificar la familia de fuentes que voy a usar de momento vamos a usar familias predeterminadas de html más adelante veréis cómo puedo usar familias personalizadas puedo cargar mis propias fuentes cuando john family 2 puntos y especificamos el nombre de una familia de fuentes por ejemplo había he puesto fondo familiar ya y ahora mirar guardo recargo y creo que comprobaréis como el texto ha cambiado de familia antes teníamos una tipografía de las llamadas con serif us las tipografías con tarifas con condecoraciones con terminaciones con con pequeños añadidos las tipografías sans-serif sin sedif as son tipo de tipografías de palo diréis no lo veo no pasaba antes de verlo permitirme aumentar un poco el tamaño de la fuente para aumentar el tamaño de la fuente se usa una propiedad en css llamada font guión 6 fondo jones ice es el tamaño de la fuente por ejemplo le voy a decir que quiero que esté a 32 píxeles por tanto 32 2.72 perdón px y punto y coma y yo ahora cuando recargo y sorpresa sorpresa el texto ha cambiado de tamaño como veis no estoy añadiendo contenido estoy estilizando contenido bien como os decía la letra arial por ejemplo es una letra de palo es la letra sans se ve sin tarifas porque fijaos por ejemplo en la e no tiene ningún tipo de decoración está compuesta por palos qué pasaría si yo quito está línea de fondo familia pues que recargo veis como ahora la tiene decoraciones esto es una decoración esto es otra decoración esto es otra decoración lo veis al acabar en lugar de robar en palo acaba con dibujitos eso es ser una tipografía tarifa bueno más cosas otra cosa que os voy a decir font family es que se pueden seleccionar varios parámetros separados por comas yo pongo área pero qué pasa si el ordenador donde se ve esta página web no tiene la tipografía arial he fallado no yo lo que hago es poner una lista de prioridades separadas por comas y lo que voy a hacer en este caso es decirle primero intenta hablar si no estaré al coma intenta cargar la fuente llamada verdad como si no esta verdad intenta cargar la fuente llamada tres museos son nombres de familiares de fuentes y de esta manera guardo recargo y si en algún momento falla la primera intentará cargar la segunda y si no tendrá cargar la tercera no podáis más de cuatro si si necesitáis más de cuatro para solucionar vuestra fuente es que algo malo estamos haciendo realmente con tres cualquier navegador puede tener alguna de estas 3 otro modificador que afecta por ejemplo a la fuente vamos a ver dos de ellos es el color el color que permite evidentemente indicar cuál es el color del texto que estoy escribiendo así que bajo una línea y pongo color y ahora vamos a hablar el color en html se puede escribir sobre todo ahora en html5 de múltiples maneras la más fácil es escribir directamente el nombre del color en inglés estáis de suerte porque en html cuatro habían dieciséis nombres de colores solo 16-7 ml 5 hay 256 por tanto yo pongo por ejemplo red guardo recargo y aparece red de color rojo si yo pongo blue aparece de color azul lo voy a por el wire porque entonces no venía nada o si queréis voy a ponerlo simplemente para comprobar que guardo recargo parece que ha desaparecido pero no el texto sigue estando ahí lo que pasa es que su color es blanco una pregunta por ejemplo una pregunta que podéis hacer es bueno vale hay 256 colores cuáles son en los 256 bueno lo podéis encontrar por ejemplo en muchas páginas de referencia en w 3 schools lo podéis encontrar fácilmente en la parte de html5 si entráis en colores encontrareis la gran cantidad de colores que hay dentro de html5 vamos a verlo esta parte html5 colors importar color negro entonces fijaos hay muchos más colores de los que podéis usar son los básicos más 130 marzo son 255 147 por ejemplo en lugar de poner blue puedo poner el color agua ya nuestra tabla sabéis qué colores que nombres hay disponibles lo podéis poner cualquier nombre que os darán así yo pongo por aquí en lugar de green pongo agua guardo recargo y lo tengo de color agua y si quiero agua marina pues pongo aquí aquamarine primero ver cómo se llama aquamarine guardo recargo y lo tengo en color aguamarina esta es la manera más fácil de seleccionar colores pero también la más incontrolable porque estamos un poco vendidos a los colores que css nos den otra manera de seleccionar colores está segunda les voy a decir es la que no vais a usar en vuestra vida es una obligación es mediante su código hecha de firmar su código hexadecimal requiere que escribáis lo siguiente atención requiere que escribáis en lugar del nombre una almohadilla la almohadilla era para seleccionan y death en css sí pero en este caso no tiene nada que ver expresó nacional colores y por ejemplo si quiere indicar el color atención si quiere indicar el color negro pongo 000 000 porque lo he separado en tres grupos porque los dos primeros dígitos son para el color rojo los dos segundos dígitos son para el color verde y los tres segundos dígitos son para el color azul eso lo entiendo una pasada ya veces tampoco entonces guardo recargo y compro vice como el texto es de color negro y ahora os digo ahora lo voy hacer rojo por rojo es efe efe 0000 guardo recargo rojo veréis como lo han sabido vamos a esperar y quiero lo voy a hacer por ejemplo verde pues 0 0 efe efe 0 0 diréis no me estoy enterando de nada no pasa nada es perfectamente normal lo que pasa con el color hexadecimal como os decía hace un momento es que los dos primeros hacen referencia al rojo los dos son mundos al verde y los dos terceros al azul y mezclando rojo verde y azul en cualquier proporción podéis obtener cualquier color de la gama de colores a continuación os voy a hacer una pequeña demostración de esto para demostrar el tema de los colores me voy a apoyar de un programa 3d como por ejemplo 3 estudio max y voy a voy a hacer un plano blanco y sobre ese plano blanco voy a hacer y export voy a hacer tres luces voy a hacer una primera luz de color rojo no de cualquier color rojo el color rojo puro que es 25 500 y a continuación voy a duplicar el palo para hacer otra luz de color verde pero no cualquier verde sino verde puro fijaos que en el sistema de color aditivo es el que usamos en web la mezcla de verde y de rojo a amarillo y ahora voy a hacer una tercera luz que evidentemente va a ser de color azul diréis porque evidentemente pues porque son los tres colores básicos los desplomes primarios hay gente que dice no a los tres colores primarios son un cian magenta y amarillo no esos son los tres colores primarios en el sistema schuster activo su atractivo el sistema auditivo el sistema extractivo es el sistema que sustrae extrae colo en el sistema de aditivo que es el sistema que tenéis ahora mismo en pantalla se llama aditivo por que añadir colores añade luz y añade claridad la suma de los tres colores como podéis ver en pantalla el blanco es el sistema de color típico de cualquier dispositivo que tenga que ver con luz un monitor una televisión un cañón proyector el cine el sistema es usted activo es el sistema que sustrae luz que resta luz yo os digo en luz te pongo en rojo verde y azul isabel blanco pero si cogéis unos plastidecor es y empecé a desarrollar con rojo y con verde y azul sale blanco no sale el negro técnicamente sale un gris kaká sucio finísimo a eso se llama el color shoes tractivo todos aquellos colores que son impresos que son en papel tinta rotuladores last y picores trabaja en el modo sus tractivo quiere decir que señores muchos colores salen negro en cambio en luz trabajamos con el sistema auditivo es más os digo max y no me voy a extender mucho sobre esto pero si os fijáis cuando yo añado cuando yo pongo tres colores primarios rojo perdía azul y colores salen en pantalla el fin el magenta y el amarillo es decir los colores secundarios de luz son los colores primarios de pigmentos primarios de este activo no os preocupéis mucho de esto porque en definitiva en web no podemos trabajar todavía igual en un futuro se puede pero bueno podemos trabajar con paul versus tractivos únicamente podemos trabajar con colores aditivos de esta forma tenéis ya una primera demostración en pantalla de cómo fusionar tres colores básicos deriva en una serie de colores secundarios a partir de tres básicos he obtenido tres secundarios y uno global la suma de verde y azul da hacia este color no se nos llama azulito sino que se llama fiamos la suma de rojo y azul da magenta más rosa del magenta y la suma de rojo y verde a amarillo esto sí que es amarillo tal cual como lo que parece diréis muy bien he visto como con tres luces puedo tener otros tantos tres colores pero no puedo tener cualquier color pues si yo sumo de manera no regular los tres colores si yo lo sumo de manera variable yo creo que fácilmente vais a apreciar en la pantalla cómo puedo obtener cualquier color del arcoiris mirar como aumento las tres luces y de ahí si dais la vuelta con la rueda de color podéis obtener cualquier color que os podáis imaginar simplemente mezclando de manera variable cada uno de esos tres colores esto es la teoría vamos a ver la práctica en la práctica en color hexadecimal estamos trabajando de la misma manera donde insisto una vez más los dos primeros dígitos son para rojo los dos segundos para verde y los dos son modelos de terceros para afuera pero yo no quiero que trabajéis el insai encima al menos al principio porque es difícil de aprender sino que quiero que trabajéis atención mira de la pantalla en este sistema de color en lugar de escribir eso voy a poner el gp pero el programa queréis pedir en formato régimen paréntesis y ahora tengo que separar con comas cada uno de los tres componentes los componentes ahora os explicaré por qué van desde 0 hasta 255 si yo pongo cero coma cero coma cero qué color es el color que no tiene nada de rojo nada de verde y nada de azul es el color negro y el color negro así que guardo recargo es el color negro qué color es el que tiene mucho de rojo nada de azul y nada de verde pero nada de nada de azul consejeros os imaginaréis es el color rojo qué color es el que tiene nada de rojo mucho de verde y nada de azul es el color verde ahora atención atención voy a ser la chuleta si yo quiero obtener 100 diarios está bonito que dos colores mezclar eh el verde y el azul vamos a comprobar como si pongo nada en el rojo mucho en el verde mucho en el azul renuncia qué pasa si quiero obtener amarillo el amarillo está en el rojo y el verde 2 55 25 50 guardo recargo y ahora es de porlamar y además os voy a decir lo siguiente por supuesto no solo podemos ir de 0 y 255 sino que podemos poner cualquier grado intermedio por ejemplo qué pasa si quiero un color gris pues el color gris por ejemplo un gris oscuro es 100 como fiel como acierto guardo recargo y tengo un es oscuro 200 200 200 es un gris clarito guardo recargo y louis clarito y ese que estaréis pensando por mucho que me estás explicando no me entero como a esto de los colores no me entero porque cuando subo un color me sale uno y me sale otro y la mezcla y está bien pues para eso os voy a decir que hubiese a cada hora un programa que lo veremos profundidad más adelante para editar imágenes para la web que es alguien es como photoshop pero de software libre y es un programa que tiene un selector de color como photoshop sólo se obtiene el mismo selector de color entonces si yo pues en este color negro la canción con este selector de color ya veremos más adelante en la parte begin vais a poder jugar y experimentar y desarrollará mediante el juego y la experimentación ya que en juegos nada mejor que maneras de aprender vais a poder ver cada color aquí componentes corresponde mirar y empiezo a jugar por aquí le digo oye si es rojo qué componentes tiene pues mira nrm coméis aquí es 25 500 y si es un rojo oscuro pues mira verde y azul siguen siendo acero perfectamente verde y azul sigue siendo 0 pero rojo va bajando jajajajaja baja rojo oscuro y si quiero azul como aquí azul ojo aquí azul pues mira azul es 0 un valor muy pequeño podría bajar hasta abajo del todo y azulados unos 55 por supuesto os imaginaréis que arrojen eres red rojo gene green es verde y snoop que es azul lo bueno de esto es que vais a poner este alimentar y seleccionar cualquier color y 2d al principio diréis guarde aquí aquello controle el rgb va a pasar tiempo es tiempo va a pasar tiempo pero mientras pasa ese tiempo podéis usar un selector de color como el del game para el 0 y yo no sé qué componentes rg bergero pero yo sé que jugando aquí con esta rueda mira quiero este color cremita tengo que averiguar muchas horas para averiguarlo no te pasa muchas horas tocaron el gin beige y aquí al final el gin de chivas 189 151 17 así que ahora me voy a html 189 151 17 guardo recargo y ahora la letra es justo de ese tipo de color no de cualquier otro por tanto esta es la lógica de funcionamiento de régimen no os mareéis demasiado ya os acostumbréis para principio seguramente os haréis un programa de retoque de imágenes tales como por ejemplo yo os recomiendo el tiempo una pregunta bastante frecuente en html cuando trabajamos sobre todo con colores es porque si yo pongo el color rojo el color rojo va desde 0 hasta 255 porque 255 que tiene de mágico ese número realmente el número 255 no tiene nada de magia el que tiene mucha magia es el 256 si os fijáis realmente hay 256 números diferentes porque el 0 cuenta como un número que es 256 256 es 2 elevado a 8 por eso lo que está haciendo el programa lo que está haciendo con el ordenador es asignar 8 bits de color a cada componente está asignando 8 bits para definir el color rojo y por tanto al designar 8 bits con 8 bits sólo puedo tener 256 combinaciones diferentes son 8 bits para el rojo 8 bits para el verde y 8 bits para el azul por eso frecuentemente oiréis a partir de ahora lo de color de 8 bits o color de 24 bits porque se llama color de 24 bits porque son 8 bits para el rojo 8 bits para el verde 8 bits para el azul 8 por 3 24 siempre que oigáis color de 24 bits o a veces color de 8 bits se llama por componentes quiere decir que podéis obtener 25 256 colores diferentes en rojo en verde y en azul ya mi pregunta es con 256 variaciones para cada uno de los componentes cuántos colores diferentes puedo obtener es muy fácil sería 256 y elevarlo al cubo queda 16,7 millones de colores si cojo 256 y lo elevó al cubo o 256 por 256 por 256 me da 16,7 millones de colores en pantalla esto es suficiente en principio si para la gran mayoría de personas 16 como este nidos de colores es suficiente hay personas que por ejemplo fotógrafos diseñadores trabajan en personas que trabajan frecuentemente con color que necesitan más que su ojo es capaz de distinguir más de 16 como este millones de variaciones de colores de momento de momento en html no hay más que veces es como aste millones de colores esperamos que en un futuro aumenten porque cada día más los monitores tienen más rango de color y los medios de predicción son mejores igual en un futuro aumentarán el número de colores disponibles pero a día de hoy son 16,7 millones de colores los colores máximos que hay vamos a ver un par más de propiedades de texto donde una de ellas es el fondo el fondo way way el peso de la fuente me indica si la fuente es negrita o no lo es cuando white tiene dos maneras de escribirse la primera es contexto donde puedo poner normal si no quiero que sea negrita guardo recargo y volver guardo el petardo para evitar volver a hacerlo normal esta letra normal y vol si quiero que sea negrita hay otra manera de escribir el peso de la fuente esta es una manera bastante desconocida pero nos da más control que es escribirla numéricamente de 0 a 900 donde 0 es el valor más ligero 900 es el valor más pesado way es igual a 0 fijaos tengo el texto a ceros y ahora cuando el 100 veréis como hundirá guardo recargan es un poquito más vamos a verlo es un poquito más grueso es directamente a 600 es 600 o tomando diferencia 900 más todavía por tanto numéricamente eso lo tomamos con los textos mucho más grandes numéricamente podemos controlar no sólo activar o desactivar negrita sino ver hasta cuánto queremos de negrita otro otro modificador para css es el text align llegado a este punto llegado este punto os podéis sentir un poco confusos porque bien cuando es font y cuando es text pues font hace referencia a la fuente de la letra mientras que texas está en referencia a todo el bloque de texto por tanto para alinear no voy a usar no existe son jon al aire sino que es text guión al aire evidentemente como en cualquier procesador de textos existen cuatro tipos de alineación por defecto tenemos la alineación del left a la izquierda no tiene mucho efecto guardó recargo como es lo que tenía por defecto no hay ningún cambio text align write a la derecha mirar a la línea el texto a la derecha text align center alinear el texto al centro como en cualquier procesador de textos y escribirlo en inglés left ride center y luego el text align que a mí más me gusta para escribir textos de párrafo largos que es justify justified justificar es lo típico de que cuando escribes varios párrafos de texto hace que todos los los renglones acaben alineados lo típico que esperamos de cualquier persona textos no es un parámetro compatible con versiones antiguas de internet explorer pero es un parámetro que recomiendo usar cuando explicamos textos largos ya que quedan muy desordenados de cada renglón acabe a una altura diferente justified voy a poner el texto más pequeño lo voy a poner voy a poner a 12 voy a ir al lip xoom.com donde recordáis que queremos extraer este texto para litigar y fíjate que si yo pongo leer copio y pego si yo pongo les guardo y recargo fíjate que cada texto cuando se corta la palabra a cada donde se acaba mientras que justified estaba aquí éste acaba aquí está acaba aquí y está aquí que dos grados mientras que si pongo justified como en cualquier modelo de textos recargo y ahora fíjate que el html estira las líneas para asegurar que estén tanto alineadas por la izquierda como alineadas por la derecha este es el efecto de aplicar su estufa voy a hacer a continuación es hablar también de colores para el fondo voy a poner el color el gm black guardo recargo o el fondo de color negro si quiero cambiar el fondo en lugar de el color de la letra lo que haré una vez más es quieres escribir la palabra background background una vez más o bien con colores o bien con imágenes o bien con degradados nos permite cambiar el color de fondo el background voy a empezar por el centro poniendo el hielo yellow rodillo así que si ahora guardo ya y ahora recargo comprobaréis como como si fuera un post-it el color de fondo de ese texto ha quedado de color amarillo a continuación voy a hacer una pequeña demostración la demostración que voy a hacer va a ser muy cutre pero espero que entendáis por lo menos la esencia de lo que os quiero explicar junto a esa carpeta junto a esa carpeta master web voy a una imagen mirada personal adecuada pero tiene mucho cariño de cariño y verano y al lado del archivo que estoy trabajando voy a pegar la imagen a la punto jpg lo que os quiero decir con esa imagen es que las imágenes también se pueden poner como fondo de texto como fondo de un divo si yo quiero poner una imagen de fondo lo que voy a hacer no es poner hielo sino poner url kuala punto jpg url indica que no tengo un color sino que te digo una dirección donde está esa imagen esa imagen está en la misma carpeta y se llama koala punto jpg si yo ahora vuelvo grabo ejecutó y recargo comprobaréis como tengo allí el cuadro no es un buen ejemplo verdad porque no me deja ver el fondo pero que se va a hacer en definitiva vemos como no sólo es posible poner colores sino también poner imágenes de fondo porque se repite tres veces el koala porque yo he dicho que ponga el cual a cada una de las veces que repito un vivo como hay tres gris y si yo quisiera que el koala nos repetirá tres veces sino que aparecerá continuo no pongas tres días con los tres textos dentro de un solo día voy a devolver los de momento con el amarillo para explicar los idénticos guardo recargo ya lo tengo otra vez de color amarillo a continuación voy a hablar de propiedades de geométrico las propiedades en css se pueden mezclar como os dé la gana yo lo que puede hacer es trabajar las x separando para trabajar un poco más ordenado ya que estamos hablando de propiedades de geometría voy a aprovechar este momento aunque no tiene que ver con geometría para hablar de comentarios cómo se hacen los comentarios el css en css como en la gran mayoría de lenguajes de programación los comentarios se hacen de la siguiente manera yo pongo barra asterisco para empezar un comentario y pongo hasta el disco barra para finalizar el comentario todo lo que escriba entre barras tres cuñas de disco barra se va a considerar un comentario por ejemplo voy a poner aquí propiedades de texto y ahora os voy a enseñar una cosa en la pantalla el comentario igual que el html css se puede utilizar no solo para poner comentarios del lenguaje humano sino también para inactivar para desactivar partes de texto por ejemplo qué pasaría si yo cojo el final del comentario el oporto de aquí y lo pego aquí pues que el programa como él considera que desde aquí hasta aquí es un comentario el lenguaje humano y no es css por tanto la propiedad de que el fondo family sea real la acabo de desactivar lo comprobamos guardo recargo y veréis como la tipografía times new roman es como la tienen sheriff y estás por ahí veis decoraciones por ahí en definitiva que sepáis que los comentarios se usan uno para poner comentarios el lenguaje humano y dos cuando te interese desactivar un trozo de código no lo borres comentaron porque si lo borras y luego lo quiere recuperarlo una solución es volver a escribir pero podéis estropee que ese otro de otra nota vale coméntalo lo desactivas cuando lo quieras volver a activar eliminación comentario y vuelve a estar activado bien ahora voy a hacer otro comentario geometría existo me preguntaréis pero eso quiere decir que no puedo mezclar las propiedades de texto con las propiedades de geometría no puedes mezclarlas como quieras son lo que yo los estoy separando un poco por mantener un orden pero si las mezclas programas a las las dragas ningún problema bien la primera vez propiedad de geometría que vamos a ver permitidme que no escriba acentos en los comentarios se puede escribir a centros no pasa nada pero es un poco problema entonces en las primeras dos propiedades que vamos a ver son which en inglés with dos puntos y la dimensión en cualquier sistema de unidades que acepte css en la que voy a expresar esa anchura de caja la anchura expuesto es básicamente las dos más usadas son en porcentaje o en píxeles aunque existan bien centímetros que sirve para poco para nada milímetros picados hay un montón de unidades voy a poner por ejemplo 200 píxeles 200 px yo ahora guardo recargo y veis como ahora cada bloque de texto tiene 200 píxeles esta es la anchura la altura esta es más complicada mira la altura es evidentemente la altura del vídeo voy a poner momento y dejadme por favor por el cual 200 píxeles de censura y de altura voy a poner 600 píxeles pues a ver voy a quitar la altura quito la altura y automáticamente el texto empuja al día hasta tener la altura que necesite hasta que ningún problema verdad si yo pongo altura pueden pasar dos cosas se para alturas recordables hi puede pasar dos cosas una que me pase y dos peor que no llegue si yo me paso es igual a 400 píxeles no pasa nada simplemente me hace más espacio y ya está está bueno pero qué pasa si no llego se le devoto en los 200 y tú eres 300 si no llego lo que hace tu eres dos tiempos por ejemplo como veis los dips se juntan al final sobre todo al final veis cómo se sale voy a poner la altura del cielo veis cómo se mezclan porque porque yo he dicho el día que tengo una altura del cielo pero es que el texto desborda el texto rebosa fijaos el último día veis como el texto se sale qué pasa cuando el texto se sale bueno cuando el texto se sale hay varias cosas que podemos hacer el efecto por defecto es un desbordamiento si yo por ejemplo a continuación expongo overflow over flowers desbordamiento dos puntos fidel equivale a consúltalo no me lo muestres fijaos como el texto que se queda fuera y no se puede ver ahí se esconde a veces es una buena solución hay otras que no porque dices muy bien no se ha desbordado pero se ha escondido el texto igual yo quiero que se lea el texto hay otra solución en otros lenguajes de programación es muy difícil de programar aquino que es que en lugar de poner giner ponéis scroll que va a hacer scroll los creados por la típica barrita de es crónica no el scroll de la página sino un scroll para el bien con lo cual veis que dentro de cada día tenéis un scroll particular esto no se recomienda mucho de cada usabilidad pero como ser posible es posible hacerlo en este caso hemos hecho que desborde voy a recuperar proporción voy a poner 300 por 300 y a continuación voy a quitar el scroll con el flow overflow giner y lo que voy a hacer ahora es hablar de márgenes y de márgenes internos los de márgenes externos y de márgenes internos voy a ver un par de propiedades más que son el bunning y el mar yo bien pues vamos a hablar de estas dos propiedades donde hay dos son para bing y margen padding es la distancia atención mirad desde este borde de la caja hasta el texto es una distancia interior margin es una distancia desde este borde de la caja hasta la siguiente caja lo vamos a notar fácilmente porque veréis hay tres cajas a que si hay tres bits y el puesto voy a empezar poniendo para bing se escribe con dos veces para mí es igual por ejemplo a cinco píxeles cuando digo igual en css quiero decir dos puntos nunca se pone un igual igual es html cuando recargo yo creo que comprobaréis como ahora hay un margen citó de 5 píxeles entre el borde exterior y el texto si no lo veis bien no pasa nada en lugar de un padre 5 píxeles pongo unos 25 píxeles recargo y yo creo que ahora veréis mejor la diferencia entre el borde y el margen interior a continuación voy a poner margen entre una caja y otra cual es ahora mismo el margen entre una caja y otra no hay margen fijaos que donde acabo una caja automáticamente empieza la siguiente pero si yo la pongo por ejemplo martín de 5 píxeles cuando recargo y os dais cuenta como ahora hay un margen entre caja en caja voy a poner 25 píxeles para que sea mejor así que qué es el margen el margen es la distancia desde este borde hacia afuera y el papel es la distancia desde este molde hacia adentro la cuestión ahora es que al aumentar por ejemplo el margin esto voy a explicar funciona tanto con martín como rompa link de 50 píxeles dice sí pero me lo separa tanto en vertical como en horizontal fijaos que cuanto más lo separó en vertical más se separa del borde izquierdo qué pasa si solo quiero poner un margin arriba o solo un martín abajo oa la izquierda oa la derecha no hay ningún problema mira yo puedo añadir modificadores al margin donde por ejemplo tener todos la pantalla si pongo martín y on top solo va a aplicar el margen a la parte superior de la caja guardo recargo y ahora fijaos como el margen sólo se aplica en vertical no se aplica en horizontal o por ejemplo debut y un margin left guardo recargo y dejamos como tengo un margen a la izquierda pero no entre caja en caja no superior o inferior lo mismo pasa con pan y voy a dejar el martín tal cual si apavit le digo el guión leer solo mirada actuación de la pantalla sólo me hace un margen a la izquierda donde hace un margen arriba ni me hace un margen a la derecha abajo si por la simple cuestión de que la caja es más amplia evidentemente y vosotros diréis bueno ya pero si está un poco que yo esto quiero un margen que será generoso a la izquierda pero quiero tener un margen citó arriba y un margen citó a la derecha no pasa nada porque tú puedes decir por ejemplo que quieres un pan y leer de 50 píxeles pero luego empieza a escribir y desviará quiero un par motor de 10 píxeles ojo cuidado los puntos 10 píxeles y puedes personalizar los márgenes como quieras dejamos como el martín rights y he cometido un error un guión veis cometer un error y nada funciona el rey no pasa nada y ahí lo tenemos y ahora tengo un mal inglés de 50 un top y un rain de 10 y el botón no afecta no está en la parte baja arriba abajo izquierda derecho y ahora a continuación voy a hacer lo siguiente te explicaré derecha css para explicar un truquito de las páginas web ya que estamos con el martín y el padding vamos a ver que tenemos un pequeño problema con las etiquetas html te voy a poner para bing de 0 píxeles y voy a poner un margin 0 píxeles guardo recargo y veo que pese a que tengo un margen de 0 píxeles existe un margen entre el 10 y el borde del navegador y el problema no es el dip el problema es que la etiqueta html y la etiqueta body tienen un estilo por defecto que nosotros no podíamos controlar hasta ahora pero ahora que sabemos css ya lo podemos controlar es el típico caso de oye yo quiero que mi diseño llegue hasta el borde de la página no quiero este margen citó de aquí bueno lo que voy a hacer es lo siguiente voy a borrar un poco lo que escrito hasta ahora guardo el cargo y a continuación voy a estilizar la etiqueta bobbio de hecho voy a utilizar dos etiquetas a la vez html y poder html vol cuando quieres utilizar dos a la vez pongo una coma y la otra y luego llaves para estilizar digo hoy en que marta melo con un borde estos volaremos de bordes un poco un borde de un píxel solid hola guardo recargo y veo que html no llega hasta abajo del todo llega hasta donde llegue el texto este margen exterior es el html y este margen interior es el bollo por eso lo que voy a hacer si quiero que mi imaginación llegue hasta la esquina es decirle que al lateral html y el body le voy a poner un martínez tercero píxeles y un padding 0px es solo con esta propiedad voy a conseguir el texto esté ajustado el texto los tips los colores las imágenes lo que sea que vuestro diseño esté ajustado arriba del todo a la derecha y que no hagas esto tienes margen cientos no os voy a contar otra cosa además es un problema que ya venimos teniendo hace tiempo y es que si yo le decía a una tabla que cogiera el jade está al cien por ciento no cogía toda la página porque mirar la etiqueta html se coge el 100 por ciento de la anchura pero no el 100% de la altura del navegador la etiqueta html y llega hasta donde el texto haya dicho que llegue por eso las tablas poner al 100% no servía para nada vale pero ahora que estoy utilizando con css html al body le digo oye es el que sea pero este to hide es el 100% ahora sí ahora guardo recargo y comprobar es como ahora sí le he dicho que la etiqueta html tenga una altura del 100 por ciento si ahora creará una tabla y le dijera que su altura es del 100% ahora sí que me había caso hasta ahora no me hacía ningún caso a continuación voy a volver a estilizar el día por tanto voy a volver a escribir aquí y voy a decirle que tenga un widget de 200 píxeles un raid de 200 píxeles y un background el hielo cuando recargo ahí lo tengo incluso le puedo decir que el flow se afilan para que esconda el texto que se quede por fuera bien vamos a hablar a continuación de las opciones de exposición y distribución donde la primera propiedad de la que voy a hablar una propiedad que nos va a dar muchas satisfacciones pero también muchos quebraderos de cabeza es la propiedad de flotación el actividad flow y veréis yo tengo ahora mismo tres días incluso yo les pongo un margen en margin ya está walking 3 dips pero es que los tres días están uno debajo del otro tal vez lo queráis así pero hay veces en que creemos que los tips estén uno al lado del otro por lo menos que usted esté aquí que éste esté aquí arriba y soy es el tercer down grave pues ya que salte el renglón por defecto los dips no se alinean un 9 izquierdo a la derecha de otros no que salieran arriba y abajo si yo quiero que se metan uno al lado del otro tengo que usar la propiedad de flotación tengo que poner flow y a continuación como quiero que flote en los elementos hay tres tipos de flotación el front leaf la izquierda clouds right a la derecha live loud centre para centrarlo aunque la flotación de largo que más se usa es la de flotación a la izquierda así que me pongo un flow dos puntos left guardo y si miro ahora de la pantalla comprobaréis ahora como la segunda caja se me ha ido aquí la tercera evidentemente como ya no cabe evidentemente lo que ha hecho es bajar al renglón de abajo así que floyd le alinea los objetos como un párrafo no digamos cloud right lo que hace es alinearlos a la derecha guardo recargo y mirar claramente la diferencia los alineado a derecha y flow centre es como no flotar porque lo que hace mira es alinearlos al centro es como no soltar por tanto simplemente vendidos con la fruta ción parece una tontería pero no lo es en absoluto es básicamente es conseguir que los objetos en lugar de estar unos arriba de otros consiguen estar unos al lado de hombros hay varios tipos de posición para hundir la posición se controla con la oportunidad llamada positio vamos a ver a las monedas alternativas los dólares pero algunas que tenemos dentro de css para la posición hay un tipo de posición muy extraña que se llama con sitios absoluto en posición absoluta la posición absoluta es una posición absoluta al inicio de la página que está en la esquina superior izquierda al punto 00 en la esquina superior izquierda guardo recargo qué ha pasado dónde están mis tres dips porque ahora sólo veo 16 a cada uno de los días a cada uno de los tres días le he dicho ajuste al centro de la página me da igual que le traste empuje y no te empuja pasa de 20 al centro de la página los tres quieren al centro de la página el inicio de la página está aquí arriba y por tanto ahora los tres están uno encima del otro otro tipo de posición es la posición relativa la posición relativa hace referencia al elemento anterior ponte en el inicio en el inicio de que el punto que te deje el elemento anterior relativo es bastante más respetuoso absoluto lo vais a usar muchas veces en situaciones de emergencia cuando quieras para que te algo en la página que sí quiero llevar esta pegatina de oferta arriba a la derecha pero es que el resto de elementos me la van empujando me dice exposición absoluta es decir la absoluta pasa de todos los demás y la puedes ya mover como toda la gana dentro de una página dentro de posición relativa mira es más perdón por el absoluta absoluto a los tres juntos y ahora voy a decir cuál es la caja que está arriba de todas y cuál es la caja que está abajo de todas yo soy la primera caja yo soy la segunda caja y yo soy la tercera acá fácilmente la que se va a quedar por arriba la tercera porque el programa empieza dibujando la primera ya continuación viene la segundo y acepta y se pone encima de la primera y en la tercera de acepar y se pone encima de las demás pero y si quiero que la segunda sea la que está por encima de todas bien recordamos que la segunda y así empezamos ya a usar un poquito los ies y vemos para qué sirven los cines la segunda tiene una idea llamado lo que era así que voy a escribir almohadilla lo que me ve recordad que es igual almohadilla y voy a usar una propiedad de css llamada z guión index que es zeta en un navegador mira la función como una pantalla realmente x es el eje horizontal esto es 0 esto es mucho x horizontal y es el eje vertical esto es 0 esto es mucho z es el eje no lo puedo dibujar la pantalla es el eje que saldría desde la pantalla perpendicular hacia ti por tanto es el que mide la distancia de ti a los objetos yo lo que hago con zeta index es alterar el orden de los objetos de orden de las capas y le digo mil le estoy diciendo estas atrás suben mil capas hacia adelante si ahora guardo y recargo mirad cómo aproximar y yo soy la segunda caja veis lo que ellos reciben tu segunda caja estás en el medio pero salta te lo mete arriba del todo vale si le ponéis un zeta index de 0 le estáis diciendo ni subas me mates quédate donde estás si le pongo un zeta index positivo por ejemplo 4 y asumirían 4 capas no estoy diciendo que suba si le pongo un zeta index negativo le estoy diciendo que baje no estoy diciendo en lugar de subir baja para abajo mal sólo cuando retiramos posición esto que os voy a enseñar ahora no funciona si no vemos activar la oposición podemos añadir márgenes o distancias veréis posición absoluta o relativa a nada igual también funciona con relativa si yo quiero que cada caja tenga un margen superior también le puedo decir todo de 10 píxeles guardo recargo y os daréis cuenta ahora como las cajas tienen un margen superior un desplazamiento superior de 40 píxeles yo sé que me estáis preguntando pero esto no es lo mismo que lo de margin margin top que hemos visto antes lo otro es un margen esto es un desplazamiento 3 y que más o menos es lo mismo con mira si es más o menos oristano hay alguna pequeña diferencia pero son bastante parecidos simplemente deciros que para poner top o leer por ejemplo y que funcione tenéis que haber puesto posición relativa posición absoluta o cualquier otro tipo de posición si no lo ponéis no os sorprendáis de que no funciona y ahora que estamos aquí voy a empezar hablando también de bordes voy a hablar de bordes las cajas pueden tener bordes para escribir bordes voy a escribir lo siguiente atención tali va a tener un border que va a tener tres parámetros atención tres paraderos primero la anchura el grosor del molde voy a empezar con un grosor de un ‘default’ a continuación el tipo de border voy a empezar con un borde sólido y por último el color del borde expresado en cualquier sistema de color que conozcáis y que sea válido en css voy a poner por ejemplo un borde de un píxel sólido y negro guardo recargo y tengo un borde de un píxel sólido y negro y ahora voy a jugar qué pasa si le digo que el borde sea de 5 píxeles 5 píxeles guardo recargo y ahora es de 5 píxeles como veis el primer parámetro controla el grosor del borde qué pasa si le digo que no sea sólido si digo que sea para son los daughter dónde en inglés punteado me hace un borde punteado qué pasa si le digo gas vas pero voy a hacer un borde rayado qué pasa si no le digo que si alguien los cuantos más son los tres más inusuales que pases no lo digo que sea hablar sino que sea red por segundo de color rojo y si le digo que no es red sino que es hereje de 0 0 255 por se vuelve a su lado estos son los tres parámetros que controlan el comportamiento de un borde y ya que estamos hablando de bordes os voy a decir una novedad de css3 le ponen black para hacer esto esto una manito os voy a enseñar una propiedad de ps3 que os va a parecer una tontería pero no lo es en absoluto es la capacidad que tiene de css3 me parece pequeña país es la capacidad que tiene pss 3 de poner bordes esquinas redondeadas para eso voy a poner border guiones radio de por ejemplo 10 píxeles borderes guardo recargo yo creo que veréis fácilmente como los moldes han quedado redondeados diréis menos de tontería ciertamente os lo puede parecer hacer bordes redondeados es más frecuente de lo que podáis pensar y antes en html 4 para hacer ese efecto de bordes redondeados solo para hacer ese efecto ya había que hacer una tabla de 3 x 3 empezar a partir de imágenes en photoshop matizar lo que no se notará una movida ahora simplemente con ese parámetro por des radios con una sola línea lo tenéis perfectamente otra cosa el borde radios si yo especificó un solo parámetro de américa 10 aquí empieza aquí 10 aquí y 10 aquí por cierto el borde ratios igualó el sentido de las agujas del reloj 1 2 3 4 pero qué pasa si yo tiene un radio diferente aquí aquí aquí y aquí qué pasa si yo tiro por ejemplo aquí no y aquí no pues mira a continuación lo que tengo que hacer es escribir cuatro radios escribo 0 píxeles 10 píxeles pero píxeles 10 píxeles guardo recargo y como podéis comprobar aquí tengo el cero aquí tengo 10 aquí tengo 0 aquí tipo 10 el orden es el orden de las agujas del reloj empezando por el borde que esté arriba a la izquierda vamos a ver lo mejor con 30 0 30 0 30 y veis como tengo 0 30 0 30 damos la vuelta a las agujas del reloj una novedad de html5 que es otra vez una de esas cosas que con este belén 4 constaba una barbaridad y ahora son muy sencillas de hacer son las sombras hay dos cosas en html5 que ponen proyectar sombras que son los días las cajas y el texto en la sombra del texto se escribe fácilmente context dios sabe tendréis bosque fácil un momento de nuestra fácil a partir de aquí voy a poner varios parámetros el primer parámetro es el desplazamiento de la sombra hacia la derecha por tanto voy a poner por ejemplo 5 píxeles y luego jugamos un poquito con los parámetros queremos poner la diferencia de poner el 5 menos 5 o lo que sea el siguiente parámetro es cuanto se desplaza en la sombra hacia abajo voy a poner 5 píxeles el siguiente parámetro es cuanto se difumina la sombra voy a poner un píxel y el último parámetro es el color de la sombra voy a poner tu rey voy a hacer una sombra gris guardo recargo y mirad cómo ahora os acercáis veréis que existe una sombra de color gris que está 5 píxeles a la derecha lo podéis comprobar 5 píxeles hacia abajo es quiero que empezar a quitar los parámetros para enseñaros cómo podemos jugar con los píxeles qué pasa si yo en lugar de querer la sombra a la derecha la quiero a la izquierda no pasa nada en lugar de poner 5 píxeles por menos 5 píxeles guardo recargo y ahora breaks la sombra desplazado 5 píxeles hacia la izquierda de la misma manera como os podéis imaginar que pasas en la sombra no la quiero hacia abajo sino que la quiero hacia arriba pues en el segundo parámetro en lugar de poner 5 pones menos cinco guardas recargas y ya tienes la sombra hacia arriba un parámetro que me parece más interesante voy a poner el 3-3 es el difuminado de las sombras entonces el difuminado de la sombra lo que hace es que la sombra aparece ligeramente difuminada le digo un píxel o 0 píxeles la sombra no se difumina asombre ha quedado totalmente totalmente como podéis ver perfilado pero si yo por ejemplo pongo un difuminado de 5 píxeles 5 guardo recargos no se superase cuenta voy a parar para que se vea mejor como la sombra aparece difumina dilla eso insisto antes no había más remedio que pasar por photoshop para la bañera incluso mirad los efectos diferentes por el mismo parámetros acabáis de ver el efecto de que el texto proyecto sombra por supuesto es un texto perfectamente seleccionable si yo pongo más texto automáticamente se recarga y aplica la sombra bien un efecto es proyectar sombra si digo una sombra que esté a cero píxeles hacer opiniones cinco píxeles que sea blanca y que el fondo sea rojo o azul da igual guardo recargo y el mismo la misma sombra me sigue para hacer una especie de destello el destello no se ve mucho verdad hay un parámetro extra que me sirve para especificar la anchura del break atención si yo pongo 0 píxeles 0 píxeles 5 píxeles y pongo una medida de píxeles más por ejemplo 2 píxeles me sirve para especificar la anchura pero el 5 la anchura del texto con texto no está funcionando ahora lo veremos con casa y nada más la vemos con caja en definitiva ahora veréis con sombra que existe un parámetro que nos permite ampliar la sombra y hacer que tenga más presencia igual que podemos trabajar con sombras de caja podemos también trabajar con el perdón es igual que podemos trabajar con sobres de texto podemos trabajar con sombras de caja voy a poner el fondo rojo para ver mejor la sombra background para encontrar blue red o mejor incluso hielo guardo carbón ya lo que voy a hacer es hacer lo siguiente si una sombra del texto este escuchado una sombra de caja es vox guión shadow y tiene prácticamente los mismos parámetros que tiene la sombra de texto el primer parámetro es el desplazamiento del horizontal positivo hacia la derecha negativas a la izquierda por ejemplo 5 píxeles el segundo parámetro es el desplazamiento en vertical positivo hacia abajo negativo hacia arriba por ejemplo 5 píxeles el tercer parámetro es la difusión de la sombra si está perfilada se está difuminada más píxeles más difusión voy a poner por ejemplo 5 píxeles y ahora voy a poner un color con cierta componente alfa voy a poner rg vea a que es la erre rojo que es verde d es azul ya es transparencia por tanto si yo voy a poner un color negro o semi transparente voy a poner 000 cuarto parámetro por 0.5 por cierto que el parámetro de transparencia no va de 0 a 255 sino que va de 0 a 1 siendo 0 transparente 1 opaco y 0.5 evidentemente un grado intermedio de transparencia si yo ahora pruebo este parámetro comprobar como a la sombra le aparece a la caja perdón le aparece una sombrita 5 píxeles hacia la derecha 5 píxeles hacia abajo existe ahora si mirada atención un cuarto parámetro hasta los 5 píxeles tiene ayuda a extender la sombra 65 píxeles incerti que les veis como extiendo la sombra como si fuera mermelada verdad es el cuarto parámetro es opcional no es obligatorio y luego hay un último parámetro mirada atención la sombra por defecto es una sombra exterior la sombra exterior a la caja hay un último parámetro que se pone justo al final del todo que se llama pincel in set es una sombra contenida mirada diferencia yo guardo y recargo las sombras normales una sombra por fuera si le pongo in set es una sombra por dentro en lugar de que la caja parece que está por delante parece que esté por detrás parece que esté como está la grada en el folio voy a hacer un ejercicio en el que voy a demostrar como css nos ayudan terriblemente a combinar todo lo que hacemos trans pml y de paso también nos sirve para repasar lo que hemos visto hasta este punto de html y css por eso voy a empezar expandiendo este código voy a empezar acercándome a la pantalla y empiezo este documento por un dock time company crown of time html estratificar que todo lo cuida de continuación es html escribo html y dentro de html escribo una cabeza y escribo un móvil dentro de la cabeza porque no voy a poner un time voy a hacer una especie de simulacro de página personal voy a poner el justo diferente carratalá así que guardo de esa manera cuando recargo esa página en el navegador veréis como arriba para poner josele frente carratalá bien ahora dentro de poco voy a escribir algo de texto y voy a empezar un poco imaginando qué es lo que quiero que aparezca en mi página para eso insisto esto ya no es una cuestión de programación esto es una cuestión de simple dibujo o simple imaginación yo quiero que en mi página permitirme tenemos que un poquito tenga un marco así esté marcada así en un margen a la derecha arriba haya un menú donde aparezca igual mi foto que aparezca mi nombre y un menú de navegación hecho en base en algunos cuantos motores es a continuación quiero tener un panel principal que tenga una especie de noticia principal y a partir de ahí voy a poner unas noticias secundarias por ejemplo en tres cajas en cuatro cajas en dos cajas las piezas veis que es la típica wagner lo estoy inventando y luego porque no un pie de página de copyright de aviso de privacidad de lo que sea esto es lo que quiera obtener en la pantalla a continuación vamos a crear primero en la estructura html no os vais a creer que con html voy a producir conseguir eso pero luego con css llevaré a html a llenar ese dibujo sí no os voy a hacer ahora dentro de móvil es primero voy a crear un vídeo que va a tener un nivel llamado contenedor contenedor container también está bastante bien google es siempre mejor momento qué hace el deep contenedor nada si ahora lo ejecutó visualmente no hace nada pero ahora mi página va a tener tres partes un gen en los acordes del ceder que tiene la cabecera un sección y también incluso puedo crear como un libro porque no decide igual a la sección como sección principal o contenidos por lo general eso y por último un footer donde me habré dado de contenidos que hemos dicho quiero poner de contenido en el xerez bueno pues el género lo primero voy a hacer que despide el texto luego pongo cosas en el cd de poner mi foto y voy a poner mi nombre mi nombre mi nombre y luego voy a poner el menú dentro del contenido principal voy a poner el valor principal voy a poner artículo 1 el mínimo artículo 2 y ha definido artículo 3 y en el pie de página voy a poner el pie de página ya tengo por tanto la estructura básica de este documento se hará guardo y recargo veréis que el desastroso todo en pantalla es ese pero no pasará a continuación vamos a profundizar recordando aquellas cosas que sabemos y poniéndolas en práctica en este ejercicio a continuación lo que voy a hacer es sustituir todos estos elementos por elementos reales html así que en mi foto la voy a sustituir por una foto recordamos que la carpeta tengo una carpeta llamada ing que tiene una foto mía llamada vicente jose web por eso lo que voy a hacer es poner mi foto recordamos que la etiqueta para poner imágenes es ing ing sf el ing el frente bien bajo josé y abajo web punto dejó trabajar a ver que tengo guardado admira ya está bien foto ahí el documento html también sé un poco más pequeña y para que eso lo recordáis que están las propiedades de wifi de jaén aunque ahora ya podría serlo con css pero lo voy a hacer por tanto wifi es igual voy a hacerlo mal siempre se le quiere hacerlo mal porque recordamos que la imagen se va a estar proporcionalmente pero en algunos navegadores puede fallar cuidado mi nombre mi nombre voy a poner el jose vicente catalá y lo voy a poner en h1 porque es el título más importante o al menos no considero que en mi página es el título más importante 4 ya que estamos voy a poner una de dos porque digamos que en mi página lo segundo más importante es una pequeña frase que me defina lo primero que os recomiendo si hacéis una página personal es que no sociedad en nuestro nombre sino que su visión a la página personal y tenéis cierta orientación profesional que en la línea de bajo de guía que tenéis que hacéis son muy programador somos del carpintero soy ejecutivo soy médico es el desarrollador así que pues buscáis una descripción negativo multimedia con el señor de momento voy a tener unos títulos pero no me preocupa pero los estilos que voy a decir que no preocupa en absoluto no me gusta esto de aquí no me gusta estar aquí me gustaría que los títulos estuvieran al lado de la foto o sea que flotara voy a continuar y ahora viene el menú con eso cierro este vídeo de la parte principal de de la cabecera por tanto en el menú voy a recuperar voy a recordar que teníamos la etiqueta nada de navegación no y para este caso recordar también que el menú horriblemente terreno y vamos a ver por qué ella no es tan horrible lo hacemos con una lista no ordenada full era una lista ordenada i y aparte de cada elemento de la vista yo recomiendo que sea un a es un vínculo de la lista que va a llevar a alguna parte así que el elemento inicio te va a llevar a index.html y ahora copio copio las típicas secciones de la página personal por ejemplo proyectos me llevará a una página que todavía no existe llamada proyectos punto así que leer voy a hacer esta página de hacer este editor más grande y ahora pues por ejemplo portafolio me llevará a la portafolio y como cómo no voy a crear una cuarta sección yo casi diría obligatoria que es contacto contacto punto 7 m no era un formulario para que la gente que está en contacto porque recibo más spam que corrió los propios bien ya tengo esto por aquí por cada correo bueno de un alumno me pasa esto me pasa al otro porque recibo 10 de rolex productos farmacéuticos que voy a decir ahora vídeo de los nacionales recargo y fijaos como tengo la foto mi nombre un subtítulo una lista no ordenada que además contiene enlaces que me lleva al inicio me lleva a proyectos evidentemente no existe por tanto me va a dar error verdad me lleva a portafolio y me lleva a contacto de momento no me lleva a ninguna parte contiene criadores archivos todavía pero de momento me interesa que ya funciona ahora que ya tengo más o menos estructurado estructurado la cabecera voy a ir al menú principal por tanto voy a crearte como manel recital y mini artículos voy a crear un dip y ver llamado valer milk ahora un día y d llamado secundarios voy a hacer ahora tres artículos no tendríamos que hacerlo artículos voy a tener tres ya no voy a tener uno si tengo uno y de si tengo más de uno por tanto artículo class secundario voy a copiar y pegar aunque éramos la imágenes secundaria y secundario y duplicar el nombre claro es que quiero que se comporten igual es normal ya tengo los jeans ya tengo la estructura pero tengo contenidos y aguardó y volvemos contándoles que realmente no tengo nada pero sí que tengo no algo mucho más importante de lo que parece tengo la estructura lo que voy a hacer ahora por tanto es elegir pues qué imagen es la que yo quiero poner como principal pues está por ejemplo la del piano así que pongo aquí en banner pongo ing src tenía me llamó la imagen ya no 2.2 png porque se llama así que voy a hacer y ahora voy a copiar esto y voy a hacer ing una imagen pequeña va a ser tres de lyon cerezas un mundo jpg tenemos que asegurarnos que el nombre de los archivos está perfecto sin fallar ni una sola letra a ver no pasa nada si fallamos a la letra la imagen para fallida y tendremos que buscar lo equivocado no hay problema voy a buscar tres de abejas punto jpg y voy a buscar también pues música habanero junto al jpg vamos a ver si está funcionando correctamente o no guardo recargo y tengo ahí gigante una imagen que irá para el banner o de los anillos del anillo y el piano otra imagen de las cerezas otra imagen de las orejitas de ilustración para niños y una fotografía de lo mismo tomando la guitarra voy a tocar las imágenes para hacerlas más pequeñas pues mira no lo hace entonces es ya habéis visto antes como html y por último el pie de página ya que estamos aquí voy a ponerlo en 86 y voy a poner vivimos de copyright 2012 posee diferente carga talar incluso porque no ahora no borrar en pondré los típicos botoncitos quedan bien a pie de página de mi facebook y twitter mi canal de youtube en y lo que sea ahora lo que quiero es hacer unos pequeños enlaces a mis cuentas de redes sociales en facebook en twitter en mi cuenta de youtube y todo esto así que voy a hacer un pequeño truco se le permite voy a hacer una nueva pestaña y voy a sacar no lleve aquí sino los iconos oficiales de cada una de las páginas por tanto voy a ir a youtube.com más adelante os explicaré cómo usar el favicon como crear favicon sse pero de momento lo voy a hacer hoy es javier pons así que voy a poner youtube.com 1.5 y me aparece el icono de youtube interesante guardo imagen lo guardo en img ya que estamos favicon xavi con el youtube punto eco vuelva a hacer lo mismo con facebook facebook y fijaos tenéis ahí el favicon de facebook me lo guardo también con facebook y por último el familión de twiter aquí tenéis ahí el favicon de twitter bien vamos a comprobar que los tres se vean bien el de facebook parece que no se ve correctamente con el pei y ahora dentro de mi página mira la función a continuación de la continuación del footer voy a hacer ah al ser red y a quien sea me va a llevar a mi página del facebook en www.facebook.com barra carratalá ahora comprobamos que funcione quiero que hagamos una imagen img src ing y es facebook facebook.com vamos a guardo recargo y al final tengo un icónico que si lo pinchó me lleva a mi facebook aun sin este correcto bien no me acuerdo de mi cuenta de twitter por tanto la voy a buscar su interés por ser diferente carratalá realmente son caros pero esta es la página original este es mi blog sembrando ya que tengo aquí y en este es mi twitter así que lo que voy a hacer es copiar y pegar este enlace copio y pego y voy a limpiar mi twitter tweet fácil con twitter y como ocurre que también tengo un canal de youtube lo que ahora no voy a saber es vincularlo a mi canal es más aquí cumple la dirección de mi canal de youtube luego aquí y pongo imc favicon youtube si todo ha funcionado bien será vuelvo a la página principal tendría 11 sino que tendré 3 incógnitos en html luego hacerse en los puntos utilizar para ir a mi cuenta de facebook para ir a mi cuenta de twitter y para ir a mi canal de youtube ya tengo por tanto esto puesto la pantalla luego yo creo que ya puedo empezar a estilizar con css esta página que he hecho lo que voy a hacer ahora ya que tengo el html creado es estilizar lo es maquetar lo con ceses y para eso me voy a ir a la etiqueta g voy a ir dentro del gel y voy a crear una etiqueta estáis voy a crear un estilo interno a esta página más adelante quizás lo externalice este tipo texto css estilo y empiezo a estilizar lo primero que voy a hacer es una costumbre que tengo es html y voy y les voy a decir qué margen es 0 y también es que consigo con el sol lo que consigo veis esta imagen que tiene ese margen consejos que los elementos se me peguen al borde de la página puede parecer una tontería igual que un poco mediático pero me gusta siempre empezamos bien se separa el a continuación lo que voy a hacer es decir que de momento de un estilo temporal para crear las imágenes todo aquello que sea una imagen y por tanto la semana que nos acordáis es la etiqueta img tendrá un week de 200 píxeles y un site de 100 píxeles guardo y compruebo como las imágenes y compruebe cómo las imágenes también pueden ser maquetadas con entonces s tengo de momento eso por ahí no pasa nada recordar que su estilo temporal algo me lo cambió yo lo que voy a hacer es empezar con la estructura de la web cómo se llama la sección principal de la web se llamaba el contenedor que tiene un ideal y de almohadilla clase punto así jeff almohadilla contenedor va a tener lo siguiente el wef de 800 islas el macro lo voy a poner blanco y le voy a decir que tenga un box shadow de 0 píxeles 0 píxeles 25 píxeles rgb a 00.00 1.5 es bien una pequeña sombra de caja a los lados vamos a ver cómo queda como el monitor que no tengo muy grande lo que voy a hacer es alejarme un poco para que lo veáis veis esta sombra arrojado y ahora un pequeño truco que esto nos lo había dicho hasta ahora pero os lo digo a continuación yo quiero que esa caja se me quede centrada en la pantalla recordad ver lo estoy viendo con zoom sostenido al 50% con salitre que consiste en poner margin y en lugar de poner un número ponéis auto es un truco es un truco imprescindible y eso lo que hace es que la página se me centra el bloque se me centrará la página tal forma que lo haga grande lo haga pequeño siempre va a tener el mismo margen a la izquierda ya la derecha es un truco sin el cual no podréis subir a continuación lo que voy a hacer es no ma que tal cualquier imagen sino maquetar la imagen que está en el género para eso lo que voy a decir es que género ing es decir el espacio ing y más que todas las propiedades que quiera que van a ser week es igual a 100 píxeles es igual a 150 píxeles ahora vemos si es correcto o no y flote porque qué va a hacer left loader lo que va a hacer es que la imagen se ponga las proporciones y que el texto empiece a flotar por aquí bien voy a corregir un poco las proporciones quizás 120 vamos conociendo hasta que más o menos me guste pero tengo un problema y es que no me gusta no me gusta que el texto esté totalmente pegado a la imagen me gustaría que hubiera un poco de espacio entre el texto y la imagen pero no pasa nada porque ya sabéis si hay un parámetro se llama martín entonces tengo aquí y le digo la imagen quiero que tenga un margen a los cuatro lados de la imagen no quiero que ningún margen sólo la derecha por eso pongo mal kim wright es de no ser 10 píxeles a prorrogar 10 píxeles veis como el separado del texto de la foto afp y cuánto no separéis ya es lo que vosotros queráis 20 píxeles lo mejor ahí es realizar varias pruebas e ir probando vamos a atacar elemento elemento ya tenemos la foto la tenemos ahí alineada además como veis vamos por los títulos así que qué son los títulos h 1 verdad quiero recordar después voy a poner uno le voy a decir que el fondo family área que el fondo web eres bolt es negrita que voy a ver si me funciona esto que el fondo style que es tal y qué el fondo saiz es 48 pixels incluso le voy a decir que texto sano va a ser refiero píxeles no va a ser de 5 píxeles 5 píxeles 25 píxeles eres gba 0,00 0.3 que he hecho es lo que he hecho se utilizará este título recargo y fijaos cómo tengo el texto en arial negrita itálica es nueva es como en lugar de white press style font size lo he hecho más grande y teclado es decir si os fijáis una pequeña sombra para un poquito más marcada la marco para que la veáis pero evidentemente el texto ya tengo el h1 veis en todo el ratón en css es igual es seleccionar un selector lo que quieres utilizar ya partir de ahí poner las propiedades no tiene más h 2 a otra cosa que se volvió a poner en h1 martín pero pinceles para benítez pixeles ahora sí css sin ningún problema lo vais a hacer constantemente y el viento antes has puesto al final de hecho hoy en la que estamos copio y ahora se modificó no quiero ita liq esta línea me la cargó el font size lo quiero a 12 y no creo que seamos por tanto lo pongo normal pero si te quiero que sea real guardo menos las líneas por un poco por orden porque quede bien eliminó las líneas recargo modificando 1616 pero es que me gustaría que creativo multimedia no estuviera ahí sino que estuviera como subrayando más como utilizando el final del rótulo pues no pasa nada porque recordáis que os he enseñado a poner posición relativa pero ratificó nube y un margen una distancia hacia la izquierda que por ejemplo 400 píxeles abbas y ha pasado y ahora tengo el texto donde quiero una vez más como podéis comprobar con css el contenido con css poco a poco me lo voy llevando a la estática que quiero ahora voy a hacer no diría yo quizás el santo grial del css pero algo bastante demandado por cualquiera que empieza con css que es maqueta lumen o tengo un menú hecho con una lista como veis aquí y siempre que hacemos un menú con lista cuando algún profesor te dice no pero en este menú de lista se va a convertir en un menú súper guay con botones y todos él es decir no no es imposible usar esta lista es horrible esto no es un menú vais a comprobar como sí que lo es lo que voy a hacer es localizar los elementos del link así que voy a decir el link así te digo no un link para decir que no estoy haciendo referencia a cualquier link sino que está dentro del lúpulo y que está dentro del mar voy a empezar diciendo que acercarlo empezar diciendo que cada botón quiero que tenga una anchura de 150 píxeles quiero decir un corporativo el verde así que background grid quiero que tenga un parking de 5 píxeles y un margen de 2 pixeles hablar de aumento guardo recargo mirad ya ha creado una especie de botones por acción bueno vamos a darles más estilo voy a poner calma a él le voy a poner un modificador este no os lo enseñado hasta ahora perdón señor list style type qué tipo de vista quiero de botones de números de letras griegas de las romanas pues no no quiero nada de revista mirar cómo desaparecen los jueves yo sigo sigo o imprescindible flow cloud escriba la ley para que cada uno de los botones se vaya al lado vaya vaya vaya toalla que esto ya se va apareciendo en algo verdad bien pero no ha acabado por supuesto me queda todavía un poquito más ahora lo que voy a hacer es modificar bueno os acordéis los hablantes 2 norma border radios es de 5 píxeles una vez más recargo veis como el menú se está convirtiendo el número de botones pero todavía queda un poco feo porque tienen allí los vínculos de color blanco así que voy a hacer lo siguiente quiero maquetar el nap full li así que decoration no ha funcionado y valor texto john ricco rey son igual no y eso me quita el subrayado y ahora digo color marc bien y ahora por último lo que voy a hacer dentro del link es test online centre y me centra el texto de los botones ahora ya yo elijo cosas como por ejemplo la anchura 150 demasiado pues tiene algo que pasa aquí este problema es típico atención todos la pantalla siempre llega jce y las cosas floten tengo ya algo correcto o beige ya he conseguido convertir el menú en lista en un bebé de botones y podría hacer un montón más de cosas con el menú pero de momento ve a todos a la pantalla lo que tengo es un problema y es que y este problema va a salir miles de veces y es que siempre que pongáis cosas a flotar la última cosa que pongáis a flotar se lleva lo de bajo este es el banner que pekín se ha subido arriba porque se ha subido arriba porque siempre que pongo algo a flotar la última flotación me arrastra me dice que va a ir bien para acá y hoy quiero que deje de flotar el truco os lo voy a explicar a continuación no es un truco de fs ese es un truco de html pensé escribir la siguiente línea entre el jefe y el cni principal voy a poner vivos style y en los puntos bolt por esta línea mágica y esa línea mágica es como que le corta el rollo al frob amigos guardo y comprobar es como de esa manera ese objeto pasaba a flotar bajó tras lo cual como estáis viendo en pantalla ya tengo maquetado y luego si queréis o mirad es más lo voy a hacer ahora voy a ir comparando lo que tengo y lo que tenía grado voy a eliminar el estilo cómo vivieron estilo pues si pongo estilo ya deja de ser una etiqueta esto es lo que tenía y esto es lo que tengo veis el gran papel que me va haciendo css y no ha acabado me quedan unas cuantas cosas más por hacer a continuación voy a maquetar el contenido principal maquetando el banner y más que tanto también el a los artículos nuestros artículos principales por eso me voy me hago un hueco más en css y digo aquello que tenga el ide lo que equivale a almohadilla va a haber ideal bonito va a tener 1 de 800 píxeles va a tener un height de 400 píxeles y ya voy a ver cómo queda un hueco ahí para el bar ‘el hecho un hueco pero la imagen sigue siendo pequeña no pasa nada y ahora digo la imagen que esté dentro del banner vale ing debe tener no ya a flote porque no flota con nadie sino que está sola los demás o flotar pero voy a decirle que tenga otra vez un week de 800 píxeles y un hype de 800 píxeles compruebo y perdón un hype de 400 píxeles compruebo y ya tengo ahí la imagen del mar como podéis ver y ahora lo que voy a hacer he hecho un poco porque si he puesto aquí las mismas propiedades para variar y para manera y mujer no podría simplificar así que puedo valer coma banner ing y así me ahorro estas líneas no es que sea muy importante a estas alturas de la formación pero vamos ya a familiarizarnos con términos de ahorro vamos a intentar ahorrar sigo voy a continuar y ahora voy a continuar maquetando el secundario os acordáis de cundir secundarios que tiene un clan secundario por tanto almohadilla secundario tiene las propiedades lewis 800 píxeles 400 píxeles productos palabra lo cambio y aquello que tenga la clase secundario clase clase punto secundario va a tener gracias a los problemas un wish del 33% y ahora sí si no pongo flow las imágenes no flotan si pongo flow tlet las imágenes flota ves con 30 132 flota 3 lo que haré a continuación por tanto es especificar que las imágenes deben ocupar el cien por ciento vamos allá punto secundario ing la imagen que está dentro del secundario cebra un wing del 133 por ciento de su celda un hard del 100% y ya a ver qué pasa bueno quizás píxeles demasiado alto 160 voy probando 33% me deja ese bolsillo tendría que poner 33.33 para asegurarme que llegará justo hasta el final y ahora si se me queda un poquito al fin y ajustarlo un poco al pizza pero por lo menos veis que ya tengo el contenido por ahí insertado y ahora lo que voy a hacer evidentemente después de cada una de las imágenes es hablar un poco de mí por tanto voy a poner el típico lorem ipsum yo soy copio un poquito de código lo pego quizás es demasiado no lo sé si es demasiado por eso lo que voy a hacer es borrar un trozo bien se escapa bay se escapa un poco el texto no pasa nada porque puedo hacer que secundarios el secundario tenga un margin-bottom de 100 píxeles ma jin para poner el futuro y lo que voy a hacer este black putter que tenga de 100 estamos ahora sí bueno pues tiene una posición relativa y que tenga un desplazamiento arriba de 100 píxeles ahora si veis como me llevo el fútbol me llevo el pie de página hasta abajo 100 píxeles 120 píxeles lo que queramos voy a poner 120 y una cosa sé muy bien por último lo que voy a hacer dentro del contenido es decir que el secundario el font familia es real el fons ice es de 8 píxeles por ejemplo pies de esta line es justify guardo recargo mi pasado 10 píxeles una cosa así arte pequeño tened en cuenta que lo estamos viendo al 50% al cien por ciento sería así bueno pues voy a copiarlo entregarlo y con esto ya los contras poco copio y pego luego y veis ya voy teniendo ahí imagen texto tengo un poco de todo a continuación voy a atacar el futuro voy a atacar el pie de página vamos a orar por el footer y en el futuro voy a escribir algo tan sencillo como decir footer voy a decir que text align el 100 por ciento y el font familia sea marjal y que el fons eyes por ejemplo al cargar fijaos cómo el footer ha quedado eliminado ahora lo que le falta es que los botones de facebook twitter y youtube no sean tan monstruosos por eso lo que voy a hacer mirar es del footer cuando el footer contiene reuters ing bueno arriba y pongo footer a ing y empiezo uy es de tres medios píxeles vamos a probarlo me veis ahí cómo quedan súper bonitos los botones de facebook youtube y twitter para que os podáis manejar como queráis pero si os digo más es que los voy a utilizar y un poquito por tanto ing voy a crear una típica forma de botoncito de border es igual a 2 píxeles sonidos blancos 2 shadow el 03 10 píxeles 20 píxeles gris oscuro queremos hacer 4000 puntos 6 y fijaos los botones con un poco de relieve sabor antes nos vais a llevar con un poquito de realidad tiene una sombrilla voy a hacer que sean un poquito más incluso es más les voy a poner un border radios del 53 ahora teniendo un pequeño radio y para que los veáis bien en el contenedor voy a decir que hyde es igual al tiempo ciento mil 504 recargo ciento claro a la cpm l 100 para que html y css lleguen hasta el final si vemos la página cómo ha quedado hasta ahora veis tengo una página con cabecera para retocar algunos haré algunos retoques más para que quede bien imagen texto título menú tenemos valor principal tenemos imágenes tenemos texto tenemos que de page que sobre todo quiero recordar cómo era esta página al principio cuando recargo la página era así y css han hecho que se convierta de texto luego que esté ese es un lenguaje que no aporta contenido aporte presentación pero que va a hacer que nuestras páginas pasen a ser visualmente horribles y visualmente super guay es voy a hacer unos retos para mejorar un poco la apariencia de esta página lo primero que me gustaría hacer es que si esta página tenga una sombrita veis que la sombrita parece que haga que la página sale un poco hacia delante pero además ya que estoy en el html es bodín me gustaría decirle que el background sea de color gris que hace esto pues que el fondo sea de color gris y así el frente no sobresale un poco más estéticamente más bonito la imagen quiero que tenga un margen a la derecha de 20 píxeles sí pero quiero que tenga también un margen natural 5 píxeles de esa manera veis que da un poquito más desahogado queda un poquito más como el marcador si queréis bueno he hecho hay un pequeño margen citó ahora me gustaría que entre el banner y los artículos hubiera una línea blanca que nos hubieran pegado pero si queréis personal pues bueno entonces me voy buscando el css y modificando y digo el banner quiero que tenga un margen botón de 10.000 soles guardo recargo veis ahí la línea 10 píxeles y ahora es que el texto me gustaría también que tuviera un margen citó o esto es más difícil porque comete un error y el error que he cometido es que escrito texto y no lo he metido dentro del mismo de etiqueta y esto recordáis que os dice que no es una mala costumbre por eso lo podría hacer nunca es tarde para rectificar es poner el texto como lo he puesto entrada de libro etiquetas no lo puedo localizar con css después el problema entonces lo que vamos poner para lo que hago lo podéis poner el texto dentro de una etiqueta p de parágrafo os acordáis y p eso no hace ningún cambio pero simplemente me habilita para que yo ahora pueda poner aquí y decir un jardín es igual a 10 píxeles y por tanto hacer un poco de huequecito hacer un poco de espacio entre el texto y así que bueno más o menos así es como tiene la página pues con css no sólo se pueden maquetar cambios importantes sino que luego además se puede ir esto tendría que modificar lo voy a hacer la página más es más voy a decir que el el contenedor tengo una altura de 800 píxeles voy a probar y más mil soles perfecto y además y además lo que voy a hacer para acabar de utilizarla es decirle que el bol de atención el borde radios quiero que sea aquí de 0 a 0 en 50-50 recordáis las agujas del reloj empezando por arriba a la izquierda así que espero píxeles theron píxeles 20 píxeles 20 píxeles punto y coma para finalizar y veis cómo acaba en redondeado aquí abajo pero no hay arriba ahora sí tengo ya mi página vamos a preparar esta es mi página que tiene la foto que tiene un título que tiene un menú funcionario por el funcionamiento que tiene un banner que tiene unas imágenes que tiene unos textos los textos quizás no me gusta que estén tan pegados no ser una línea empieza la siguiente pues css me va a seguir ayudando porque veo al parágrafo a ver si no o se va a la línea siguiente le digo paren es de 10 mil 3 guardo recargo y veis ya tengo unos textos separados así que ese es en definitiva hagáis lo que hagáis para presentar pues va a llegar os voy a enseñar un pequeño truco y es que ahora mismo tengo un pequeño problema con esta página y es que aquí abajo he puesto el texto bien está bien pero aquí me gustaría poner el texto encima de la imagen y no puedo porque es una imagen que puedo poner el texto a continuación de la imagen pero no encima técnicamente podría podría meter el título que quiero meter en el banner en un día y enseguida hacer lo absoluto y hacerlo que flotara por encima de la imagen y decirle que el zeta index esté por encima pero es un rollo si se empieza a pensar que es complicado es que seguramente no será la mejor solución así que una buena solución para esto es que en lugar de que la imagen esté por encima es que la imagen esté por debajo como la imagen puede estar por debajo os acordáis que como un fondo no se lo puedo poner un color sino que puede poner la imagen así que en el banner voy a decirle background dos puntos url y voy a ir a ing ing y voy a poner como sea más de la imagen dos ya los dos puntos y ahora voy a eliminar la imagen y a dos png me he equivocado en la extensión atención al grado aman talla recargo y parece que nada ha pasado buena señal para que lo he cambiado pero no tiene efecto visual y eso quiere decir que llora en el banner puedo escribir cosas por describir cosas como por ejemplo hola y aunque no lo veáis ponerla porque se ha quedado justo en negro por eso en el banner voy a continuar estilizado y voy a decir que ya que voy a escribir texto el texto será color igual con wells no que estoy mejor gonzález 48 y vamos a ver veis hola más cosas con family bolt porque se habla en un parágrafo nos enseña span primero texto malo a uso ya nos explicó para qué sirve texto vale en un país no va a tener un margen de 23 del 50 y un pan integral y ahora lo que voy a hacer por ejemplo es posición relativa y top 50 risas y ahora si el texto lo separa y ahora cambió hola por cualquier texto descriptivo que podamos poner lo que queramos poner son un creativo diseñador y formador guardo recargo quizás voy a hacer el texto banner más pequeño 50 44 bueno es 48 36 o qué pasa tenemos un problema lo que vamos a hacer en este caso es recoger la etiqueta que pusimos anteriormente la que me permite codificar mis páginas web a 108 y de esa manera aparecerá correctamente diseñador como veis al final también soy un maestro del copia-pega y si algo lo puedo reaprovechar un traído anterior no aprovechar estacional como entre css html podemos crear los oye pero es que no queda bien ese texto aquí arriba quedaría mejor aquí abajo no pasa nada el css y le digo el texto manera top 200 más 200 pero qué pasa que como ahora se me juntan con el blanco de las teclas se confunde porque no pasa nada porque me pongo un text show pero píxeles 5 píxeles rcma black a ver qué pasa y le añado una sombra una cosa antes de cerrar que es spam escrito aquí spam una nueva etiqueta llamada spam si bien es una división es tal es una micro división bien está pensado para hacer cajas para meter mucho contenido en cajas spam está pensado para estilizar una línea de texto unas pocas palabras de texto así que es como el comodín pero en miniatura a continuación vamos a ver una propiedad un pseudo selector de css que luego nos servirá para abrir la puerta a otros elementos de css3 como son las transiciones y las animaciones así que voy a crear un documento html puede saltar la etiqueta de doc train no pasa nada voy a hacer una cabeza voy a hacer un cuerpo y dentro del cuerpo voy a hacer por ejemplo un día le voy a explicar funcionar con cualquier cosa por ejemplo botón por ejemplo le voy a poner botón se puede llevar botón se puede llamar como queráis y aquí ponéis soy un botón guardo recargo y iphone es hoy un botón ahora usando css lo que voy a hacer es darle un poco de estilo acordáis estilo para hacer un estilo css tipo texto pss y lo que voy a hacer es a ese botón darle una salida de propiedades que ya conocemos como por ejemplo pues todo aquello que tenga la etiqueta bien le voy a decir que tenga un week de 150 píxeles que tenga un height de 24 hits él es que tenga un panel de 3 píxeles que tenga un jardín de 5 píxeles y sobre todo que tenga algún fondo de color verde y que tenga un borde de un píxel sólido negro ya que estamos que tenga un borde radios de 5 píxeles por ejemplo vamos a ver el aspecto tiene esto y ahora igualado de recargo veréis como he convertido ese objeto en un botón más voy a decirle que tenga un familiar avial que el color del texto sea blanco y que la eliminación del texto esté centrada guardo recargo y tengo aquí soy un botón no lo tenemos todo mirad paso a paso una anchura de 150 píxeles una altura de 24 píxeles un margen interior de 3 píxeles un margen exterior de 5 píxeles un fondo verde un borde de una línea de color negro beige allí con un radio de 5 píxeles la familia de fuente arial color blanco y alineación de texto centrado luego lo que entonces es es lo que se aplica en la pantalla que si bueno pues lo que voy a hacer ahora es enseñaros un selector era que es escribo lo que quiera en este caso bien y pongo dos puntos hv poner la etiqueta que sea con dos puntos hv y significa que h o where cuando el ratón esté por encima este over el objeto se va a comportar de la manera que yo a continuación le diga y dentro de ese archivo ver voy a poder poner lo que quiera por ejemplo voy a hacer varios ejemplos barrón quiero que cambie a blue atención yo aquí arriba he dicho que el background es igual a green pero aquí abajo le digo que es igual a blue por tanto lo que va a pasar es que mientras el ratón esté fuera el fondo va a ser de color verde pero cuando el ratón esté dentro va a ser de color azul no os lo creáis lo comprobamos atención guardó siempre recargo y mirad como cuando pasó el ratón por encima el botón cambia a ser de color azul realmente atención esto se usa mucho para por ejemplo cambiar de color cambiar de color o un botón pero se puede usar para lo que queráis por ejemplo yo voy a hacer que cuando pase el ratón por encima del wifi en lugar de 750 píxeles sea de 250 píxeles mirad cuando paso ratón por encima el botón se hace más grande o por ejemplo voy a hacer podéis cambiar insisto la propiedad que queráis que el fondo way que el peso de la fuente for your way sea volver sea negrita guardo recargo y veis como la fuente se convierte la negrita es la fuente que es de tipo de grita por tanto qué estoy haciendo con h oberg lo que estoy haciendo con h over es el día tiene estas propiedades cuando el ratón base encima del día con h over mantiene estas propiedades y además añádele de estas cuando le añadas estás puede ser que algunas propiedades sobre escrivá como por ejemplo el background si se sobre escribe ten en cuenta la nueva propiedad si la propiedad no existía antes como por ejemplo el fondo waypoint simplemente poncela pero eso si esto se aplica sólo cuando el ratón está encima del objeto cuando el ratón se sale del objeto entonces se desactiva es atractiva archivó ver está muy bien h über no es novedad de css3 estaba ya hace bastante tiempo sin embargo el problema de over es que el cambio de botón por ejemplo en este caso que estoy haciendo un botón es un poco brusco ya que yo paso ratón por encima y hace pam y cambia de verde a azul en un momento y cambia de anchura en un momento lo que sí que es novedad el css3 es un modificador llamado transición la transición me permite especificar que el cambio entre un estado y otro no se haga de manera instantánea sino que se haga poquito a poquito para eso os voy a decir que lo único que tenemos que hacer es escribir lo siguiente transición y dentro de transición voy a especificar dos parámetros uno que elementos para transición ar y dos cuando van a tardar en transicional si quiero que todo transiciones le vivo al l y a continuación el tiempo en segundos en el que va a transición ar voy a empezar un poquito voy a empezar con un segundo que le estoy diciendo ahí cuando yo pasé ratón por encima haz que todo cambie y que tardé un segundo en hacer el cambio lo comprobamos guardamos recargamos y mira ahora oh vaya hay algo que no funciona abierto y esto es lo segundo que os voy a contar en este vídeo ahora mismo es mayo de 2012 la etiqueta transition todavía no está bien soportada por todos los navegadores así que a partir de ahora no solo con transición sino con unas cuantas cosas que vamos a ver en css vamos a hablar de modificadores de compatibilidad esto quiere decir tenemos trabajando en pro y crown todavía no soporta transmisión probablemente unos pocos meses el soporte ya sino que soporta una variación de transición llamada webkit transition hoy un segundo es lo mismo si os fijáis desde aquí hasta aquí es lo mismo que escrito arriba pero le pongo un modificador de compatibilidad para decirle el haz que esto funcione en huerto que es web de webkit es un motor de navegadores que es el que alimenta por ejemplo a crowe jacques a fire el mismo el motor interno es el mismo yo ahora guardo recargo lo pruebo o mirad veis como el verde cambia a azul poco a poco y como la anchura cambia poco a poco el hábitat cambia del golpe porque no hay otro remedio pero veis cómo cambia poco a poco y tarda un segundo el efecto es mucho más bonito arresi y tardará un segundo porque yo he dicho que tarde 8 mundo por ejemplo si le digo que cambio etiqueta de 3 prueba y fijaos como la tarda 3 segundos veis y ahora he enseñado esto y ahora os voy a contar un pequeño problema la mayoría de navegadores hoy en día requieren para cosas avanzadas efe ss modificadores de compatibilidad se espera que en pocos meses ya agrada falta modificadores de compatibilidad pero a día de hoy hacen falta el que yo se acaba de enseñar webkit soluciona el problema con crowd y con safari pero qué pasa con firefox que pasa con ópera que pasa con interior de explorer el modificador de compatibilidad para firefox es un mod de mozilla por tanto le seguimos y otra vez transición el 3 segundos lo que sea el modificador para operar es una del operario y entender y el modificador para microsoft internet explorer 9 es el único que soporta css3 es ms ms microsoft esto pues es un poco fastidian t porque nos obliga a multiplicar por cinco el código que estamos escribiendo pero que se le va a hacer a día de hoy hay algunas cosas tenemos que escribir este poder por tanto no voy a comentar para que tengáis la marca este es el genérico este es el reloj y safari este es el de mozilla firefox desde el sol vera y este es el de microsoft internet explorer 9 y superior es el último que hay a día de hoy en el mercado es el 9 otra cosa que os voy a decir permitirme eliminar unos cuantos y eso trabajamos de momento ahora mismo sólo con el huerto atención mira yo he dicho que quiero que todas las propiedades o todas las propiedades tarden tres segundos en realizarse pero qué pasa si no quiero todas las propiedades que pasas quiero que algunas tardes entre segundos y otros también 651 o lo que quiera en lugar de poner pool puedo poner el nombre de una propiedad mira quiero que el week tarde tres segundos frank y quite el bloqueo de mayúsculas pero lo voy a decirle que el background tarde 6 segundos podéis si queréis podéis asignar tiempos diferentes a cada propiedad qué pasará ahora pues que la animación aunque es transición realmente no se llama animación la transición de la anchura tardará tres segundos pero veréis que la transición del color de fondo tardará seis segundos vamos a comprobarlo guardo recargo y ahora comprobaréis como mientras que la transición de wild con un confort mientras que la transición ha durado 3 segundos fin dejamos que la de color tarda 6 segundos o se alarme ha guardado a cargo ahora si hay algo que habré escrito mal pero si creo que igual aquí vamos a verlo no pasaba algún fallo habré cometido al escribir las definitivas creáis que se pueden poner propiedades con diferentes tiempos otro tipo de novedad encontramos en css3 son las transformaciones con las transformaciones podemos elegir si queremos mover si queremos rotar o si tenemos escalar un objeto mira voy a quitar la transición y voy a escribir lo siguiente guardo recargo ya la transición para transformar esto el sistema es novedad css3 tengo que poner transform 2 puntos y a continuación el tipo de transformación que quiero realizar en muchos tipos de transformación las tres más básicas son mover rotar y escalar la mujer se llama translate para el año que viene de hecho se está preparando una translate en 3-d translate si no digo 3d se asume que es 2 d y a continuación tengo que escribir lo siguiente la cantidad de píxeles en x que se desplaza y la cantidad de píxeles en y que se desplaza recordad que este es el punto cero en la pantalla esta esquina es el punto cero en la pantalla y que x crece en positivo hacia la derecha y que y crece en positivo hacia abajo luego si ejecutó ahora este código comprobar que no pasa nada porque porque la transformación de css3 también requiere los modificadores de compatibilidad por tanto si hay una web que dior transform guardo y recargo y mirad como ahora sí voy a ir transformando este objeto 200 píxeles en x 400 píxeles en y una cosa muy importante yo ahora solo esto que voy a decir es muy muy muy muy muy importante yo ahora para estos ejemplos únicamente estoy escribiendo el modificador webkit porque porque para esos ejemplos lo estipuló bandos no el navegador chrome eso quiere decir que se vería bien sobre chrome pero no se vería bien por ejemplo sobre firefox vamos a verlo comprobemos los son nuestra carpeta y este archivo lo abrió con firefox funciona en firefox no funciona esto es firefox para el futuro funciona si yo le pongo el modificador webkit estoy haciendo que funcione bien en crown y en safari pero no en firefox cual era el modificador de compatibilidad para para firefox gramos por tanto como aquí una línea nueva pongo aquí guardo recargo y veo como ahora sí que funciona en firefox por eso para estos ejercicios si usó grow sólo pondré en webkit si uso firefox o lo pondremos para la vida real habría que poner todos los modificadores de compatibilidad para asegurar que en cualquier persona que entre en tu página la vía correctamente otro modificador de transformación ya hemos visto el de translate de traslación de mover es el de rotar son de rota y por tanto lo que voy a hacer voy a poner un trabajo webkit transform y en este caso en lugar de poner translate voy a poner a tale proteico jt con un solo parámetro de momento cuando haya transformaciones en 3-d habrán tres parámetros de rotación ahora mismo son un parámetro de actuación que es por ejemplo 90 de 90 del df es la lectura de degree de grado en inglés 90 grados es girarlo a 90 grados y entonces guardamos recargamos y veis como ese botón mira o veis lo he girado 90 grados que nos puede parecer una tontería pero es que este término en 4 dice ss2 no había manera elegida en los objetos 90 grados con lo cual si por lo que sea en tu diseño de la web quería crecer un texto girado 90 grados la única manera era meterte en photoshop o sacarlo como imagen y meterlo como imagen así que ahora y ojo no sólo funciona con 90 grados sino por 45 también mirando el texto girado 25 nos habéis visto algún texto de oferta girar a los 45 grados en alguna web antes había que hacerlo con imagen no había otra manera de hacerlo ahora se puede hacer un texto de una oferta girando 45 grados en css 3 la última transformación o digamos la tercera de las tres más importantes de mover esto un poquito más hacia abajo bien la última transformación de las más importantes es la escala con la escala yo le digo webkit transform fiscal y le digo lo que se escala ese objeto en x y en y he puesto 1 y 1 1 y 1 equivale a no deformarse 1 y 1 pero si yo pongo el 2 y 2 ahora es el doble de grande si le pongo un 4 y 4 ahora es cuatro veces más grande estoy escalando si yo pongo 0.5 y 0.5 ahora es la mitad de pequeño lo veis de pequeño al principio sí pongo 0.2 y 0.2 será que se queda en un 20% del tamaño original una última cosa que voy a explicar transformaciones fijas atención hombre a la pantalla cuando he puesto la transformación de rotación ha dejado de funcionar la transformación de posición y cuando es vuestra transformación de escala ha dejado de funcionar la transformación de rotación y también la de posición si yo quiero poner varias transformaciones a la vez las tengo que poner en la misma línea porque sí las pongo en varias líneas la única que hace caso es la última si quiero poner las tres transformaciones cojo la primera línea y digo translate coma rothstein coma skate y de esa manera puedo tener tres transformaciones a largo no lo veis translate como rotten cómo es que guardo recargo y mirad como ahora hago del pasado cómo órganos de función a la primera hay otros espacios olvidados por el espacio usando un espacio tengo translate espacio root el espacio es que tengo que el botón está movido 200 400 que está girado 45 grados y que está escalado al doble mx y el doble en y vemos por tanto como para hacer múltiples transformaciones tienen que estar todas en la misma a continuación vamos a ver cómo hacer animación con animation en css3 para eso voy a crear un documento html dentro de este documento le voy a meter voy a meter y dentro de este móvil voy a crear un día con y de igual pero tal vamos a animar la pelota cómo puedo hacer una pelota con dips es muy fácil mira ya crear una etiqueta de estilo estilo este tipo texto css y voy a hacer lo siguiente aquello que tenga el nivel pelota ya sabéis almohadilla pelota va a tener una altura crucial píxeles a una altura de 100 píxeles un morder ver juntos el sonido negro un marcador de color verde por ejemplo y por supuesto un bol de ‘news de 50 píxeles de 50 píxeles va a hacer que en la pantalla más que una pelota es decir realmente mira tenía esto si le pongo 5 píxeles sabe esto y si le pongo 15 píxeles sale esto si le pongo 25 píxeles sale esto así que si pongo 50 píxeles como os podéis imaginar sale esto y lo que tengo de momento es una pelota en la pantalla preparada para poder modificarlo lo voy a hacer ahora también es empezar no es obligatorio para hacer animación pero para este ejemplo lo voy a hacer es crear un buen quite transport tanto voy a entregar un web yo trabajo translate de mover por ejemplo 50 píxeles 50 píxeles vamos a comprobar si se ha hecho correctamente guardo recargo y compruebo cómo la pelota se ha movido 50 píxeles bien pues lo que voy a hacer a continuación lo que voy a hacer para empezar animación es escribir lo siguiente voy a escribir en genérico animation dos puntos como se llama mi animación el nombre debe hacer lo elijo yo por ejemplo mi pelota y cuánto va a durar por ejemplo 5 segundos lo que he hecho hasta este momento es decirle que voy a crear una animación llamada mi pelota razonar 5 segundos evidentemente será guardo y recargo de es que nada pasa en la pantalla porque porque he dicho que voy a hacerme animaciones a mi pelota pero está que hace se mueve rebota cambia de color no lo sé eso es lo que le voy a decir a continuación otra cosa aunque no he definido una animación ésta todavía no funcionaría porque la etiqueta de animación es una de esas de css3 que todavía requiere su modificado el webkit por tanto voy a poner webkit la misma edición de lota para no hacerlo todo y al final de cuenta que no funciona y ahora lo que voy a hacer es fuera del css es decir fuera de esta entrada de pelota o sea dentro del css pero no dentro de pelota voy a crear lo siguiente primero una roja a robar el saunier del número 2 como cuando escribe su correo electrónico segundo webkit voy a hacerlo directamente con compatibilidad tercero y frames quizás en castellano sean un fotogramas clave los fotogramas claves son los puntos clave que definen la animación de unos moradores por tanto pongo esta fórmula en webkit y frames y a continuación lo que voy a hacer es poner el nombre de una animación mi pelota porque porque podría tener un montón de animaciones css tengo que especificar con qué animación particular quiero trabajar sabe que mi pelota hace referencia a mi pelota aquí por tanto aquí una es el segundo animación y pelotas y vamos a 5 segundos y ahora voy a empezar a una llave y hasta ahora he abierto llaves como cualquier elemento del css pero ahora voy a hacer lo siguiente en el 0% de la animación voy a tener unas propiedades en el 100% de la animación voy a tener otras propiedades es que esto se complica un poco voy a decirle atención mira que en el 0 por ciento de la animación tendré un webkit transformó en translate de 50 por 50 pero en el 100% de la animación voy a tener un transform de 200 coma 50 esto es lo que escrito voy a ejecutar lo de continuación lo analizamos guardamos recargamos y lo que pasa en la pantalla es que tengo una animación que hace que la pelota avance no es lo mismo tiene transición la gente no suele confundir más también la transición ocurre cuando yo paso el ratón por encima la habitación de solá fijaos tengo click y sin quieto cargada la animación funcionan solas eso la diferencia entre transición y animación y ahora vamos a revisar el código y vamos a analizar qué ha pasado yo he creado una animación donde le he dicho que en el 0% de la animación la pelota esté en 50 y en el 100% de la animación la pelota está en 200 que va a hacer pues se va a mover poco a poco desde 50 hasta 200 en cuánto tiempo en 5 segundos este 0 y 100 hacer referencia a 5 segundos por tanto se cambiara de 5 segundos a un segundo el resultado de la pantalla sería la animación de un segundo si yo cambiar eso por 15 segundos la animación tardaría 15 segundos en realizarse por tanto os puede confundir bastante esto es una manera de quitarse un poquito compleja de trabajar pero a la larga es mejor que aquí en lugar de por el tiempo ponga un porcentaje porque ese porcentaje es el porcentaje con respecto a el 0% es el 0% de 15 segundos y el 100% es el 100% de 15 segundos que es igual a 15 y si yo quiero y derecho ahora quiero voy a poner 50 por cierto el 50 de 15 segundos son 75 segundos le digo quiero que ahora despegue es un paseo y quiero que estés haciendo como a 100 qué es lo que va a hacer permitir me permite esbozar los si esto es 50-50 esto es 250 y esto es 100 100 es más x va así y así nomás costero 50 100 150 200 no tenéis más que contar esto es 50 100 150 200 por tanto 50/50 es esto ciencia es esto 250 es esto que quiero es una pelota para una cosa así comprobamos cómo ahora ejecuto la pelota primero se mueve hacia ese punto y le había dicho y luego me tiene que analizar un poco más rápido porque ese momento el lento que es un poco curioso de everton guardo recargo y mirad como la pelota va primero hacia ese punto y luego va hacia el otro punto luego compro vice que de esta manera podeis controlar todo aquello que queráis de la animación antes de acabar este vídeo quiero deciros que no solo se puede animar una sola propiedad se pueden liberar tantas propiedades como queráis tuvo una animación en la que he animado él transforma y se ha animado transforma hasta ya ha funcionado bien pero yo lo que voy a hacer de hecho me voy a hacer sangrías a lo mejor el macro va a ser blood al principio va a hacerlo a mitad va a ser dream y luego al final va a ser red qué quiere decir esto que cuando la pelota empiece la animación primero estará en la esquina y su color será azul cuando esté en medio estará en fiebre y su color será verde puedes cambiar transforma desde queráis y cuando llegue al final estará en 250 y su fondo será rojo lo comprobar los guardamos recargamos azul verde y rojo podéis cambiar las propiedades que queráis y si ahora quiero solo para poner más ejemplos cambiar el borde el borde quiero que al principio sea de un píxel luego quiero que sea de 10 píxeles y luego quiero que se relaje un poco y que se convierte en un borde de 5 piezas guardamos recargamos un píxel 10 píxeles 5 píxeles estáis viendo en este caso como la animación hace que cambien tres parámetros solares los podéis cambiar tres para rosa pues cambiar perdón tantos parámetros como tira es lo que sí que os voy a reconocer evidentemente es que hacer la animación no es muy visual porque hay que trabajarlo todo con parámetros y por tanto ayuda que antes de empezar a programar tengas un poco claro en la cabeza qué es lo que quieres que salga en pantalla y si no lo tienes claro en la cabeza por lo menos cojas un folio y coges un boli y dibujes un poco el recorrido de los objetos por 100 puntos van a pasar y qué coordenadas tienes que poner en cada caso a continuación vamos a ver un par de trucos para trabajar con las animaciones por ejemplo hay un truco que dice que si yo ejecuto la animación comprobaréis como una animación empieza enseguida empieza nada más comienza la web pero si yo quisiera que la animación tardará un poco en empezar bueno pues le vendría aquí y web un inmenso del aic de leyes retraso 5 segundos si yo ahora ejecutó una animación mirad como atención recargo se está quieta cuento cinco segundos y entonces se ejecuta así que vi light nos permite controlar el número de veces que se ejecuta pero no se les permite controlar el retraso la espera inicial antes de que se ejecute lo que os permite controlar la cantidad de veces que se ejecuta es si tenéis un crown mira cierro esto el vino esto recargo la atención mira la pantalla la alineación se ejecuta una vez y cuando se ejecuta esa vez bueno al principio y no se vuelve a ejecutar hay un modificador que se llama animation integration com y le ponéis un número de veces por ejemplo debe haber dos guardo el recargo y se ejecuta una vez y dos veces pero después de la segunda vez se paga y yo le digo cinco veces voy a poner que se ejecuta en un segundo para tardar menos una porción una dos tres cuatro y cinco y se acabó qué pasa si yo quiero que esté esta animación se ejecuta hasta el infinito y más allá que le pongo mil millones de veces no en lugar de poner un número pongo la palabra infinito si le pongo infinite el programa sabe que tiene que repetir esta animación de manera completamente infinita de manera completamente ininterrumpible otra función otro otro modificador que voy a usar es el siguiente mira nos estáis dando cuenta que por defecto cada vez que llega a cada uno de los nudos acelera y frena fijaos cómo cuando llega al medio hacer frena al llegar acelera al salir y cuando llega al final vuelve a frenar eso es por una cosa llamada la función de animación por tanto lo que voy a hacer para la función de animación es lo siguiente voy a poner bueno espero que nos maneje mucho la palabra grabando webkit animation y el timing un punzón por defecto css3 está puesto que kiss kiss’ es acelera al principio frente al final veis que ejecutó el tipo de diferencia pero si yo pongo por ejemplo en línea mira lo que pasa ni aceleran y frena veis la diferencia de la velocidad ahora no hay freno no hay aceleración lo veis si no lo veis bien pongo otra vez y si comparamos y esa canción veis cómo eran las cosas le puedo decir sólo hay acelera pero no frena les puedo decir es out frena tenemos ahora poco a poco sino que salió escopetado veis por tanto que haya menos modificadores que me permiten controlar la animación y mirar sabes qué pasa es que mi animación me gustaría que fuera cíclica y no es crítica sino que cuando llega al final aceptar y bueno al principio un truco si queréis que sea vuestro animal que nosotros a veces entonces esto es un truco de animación si queréis que esta relación sea cíclica hacer que la posición en el 100% sea igual a la posición en cero y qué hago aquí pues en lugar de dividir 50 y 100 pongo 33 pongo 66 y poco 100 guardo recargo y mirado ahora lo que hace veis como así que tengo un ciclo es un poco css discoteca voy a hablar de una propiedad un poco especial dentro d dentro del css3 que es condenable contenten y también me permite que el contenido de un elemento sea editable y esto que puede parecer una tontería realmente nos abre en gran medida la llave de la web 2.0 que en principio no me gusta demasiado pero entre nosotros mira voy a hacer de hecho no hace falta ni css aunque ahora no sabemos qué es ese programa de falta licencia yo hago h1 aseguró esto es un título que guardo recargo tengo aquí esto es un título no tengo aquí tengo un título aquí pero si escribo no puedo hacer nada bueno pues en html5 hay un parámetro que se llama contención y tavo lo que hace lo siguiente contemplamos es igual azul es cierto está activado si yo hago esto sólo por poner esa frasecita recargó parece que no ha pasado nada pero si llego clic en el título hola hola y puedo escribir en html y puedo seguir editando eso puedo hacer más líneas y hacer lo que quiera así que este parámetro como vamos a ver en el siguiente ejercicio nos puede abrir en gran medida la edición de un montón de proyectos dentro de html5 en este proyecto por tanto lo que voy a hacer es la propiedad contenta vuelvo y me voy a hacer voy a poner un pequeño procesador de textos por tanto para eso empiezo creando un documento html en el body voy a crear un día con y de iguala página hicieron de él incluso como alcachofas hace uno parágrafo y para abajo y como título el documento y para textos dar listo y pongo el documento epson ahora con css voy a volver al gel style y voy a estilizar texto pss y voy a poner lo siguiente html y body padre del 100% y un background azul azul que va a ser el régimen a bueno se ve 200 como 200 255 en marcha pero pintores de un fabric de 0 meses guardo recargo y ahí lo tenemos vais un fondo de color azul y pto ahora voy a la página y desde aquello que tenga libre página tendrá un web del 80% un barro blanco y un box sabor de 5 píxeles 5 píxeles 15 pitones negro y sale así una página pero cómo hacerlo como a cero 0.5 y ahora evidentemente voy a hacer que este objeto esté por un margen margin auto para que se centre en la pantalla y además es esto lo que voy a hacer un parking de 25 píxeles por lo menos para que haya un poco de margen en el documento bien pues una vez que he hecho esto ya tengo incluso porque no puedo decirle que el font family arias y no nos olvidemos que el font size sea de 10 píxeles y que el text align justified vamos a verlo ahora ahora si la letra más pequeña está justificada tengo que un documento lo divertido es que si ahora vengo al h1 y le digo h1 content editamos igual a true y ver content editamos igual a trump si yo ahora recargo delito título del documento este mi momento texto mira en este texto y voy a escribir te voy a contar de votar porque te remite el texto 6 estoy editando un documento directamente dentro de una página web es decir ahora mismo tengo una especie de mini word dentro de una página de html sólo por poner el contacto de carbón y evidentemente cuando hagamos javascript podemos completar esto y convertirlo en un bol completo poniendo que puedas cambiar el color que puedas cambiar el tipo de letra que puedes cambiar el tamaño que puede hacer lo que sea evidentemente eso ya será combinando css3 html5 con javascript además hay elementos con los que podemos trabajar por ejemplo por ejemplo en css lo que voy a hacer es crear lo siguiente veréis que en cuanto pongo el ratón encima del elemento aparece una línea amarilla que lo rodea una línea amarilla anaranjada esa línea amarilla ccss la online a mí particularmente no me molesta porque es una línea que está en ti que te está indicando que ese elemento está editable sin embargo hay veces que podemos querer quitarla cuando queramos quitarla simplemente pondremos por ejemplo h1 y p y ponemos out line es no es decir no quiero hablar online es no la función guardó los pre carbón y beige llamará como ya no hay habla no lo puedo evitar pero ya no aparecen se hablan a partir de aquí hay dos cosas que os voy a enseñar mira por supuesto siguió funcionando el h over puedo decir página dos puntos y quiero que por ejemplo la página cuando voy a hacer un ejemplo cuando no estoy encima de ella sea gris y cuando estoy encima de ella sea blanca pero cuando pasó por encima se vuelve blanca veis la mujer no sólo para matones para cualquier cosa y es más es más con lo que hemos visto de transición y un segundo cuando recargo y mirad cómo se pone de color blanco lo cual me puede servir para no ponerla gris pero sí ponerla por ejemplo 200 con 200 doscientos gris clarito para decir estás dentro del documento ya para el 220 los 20 20 para que sea gris muy clarito y cambie un poquito la pantalla de cambio un poquito pero qué pasa si quiero hacer que cuando yo estoy dando el texto cambia de color bien pues lo que voy a hacer es dar lo siguiente voy a usar una propiedad parecida a ver que se llama focus con 12 puntos focus y el color va a ser igual al clima quiero que cuando esté evitando el texto se vuelva de color verde 2 cómo drew vamos a ver lo que pasa recargo pongo el ratón por encima la hoja cambia por el nombre pero sólo cuando hago clic en el título se vuelve de color verde y si en cualquier momento quito el clic de auditar y si en cualquier momento quito el clic atención lo más de mirando entonces vuelve a ser de color negro cuando hago clic sobre el texto entonces el texto se pone de color verde entonces puedo escribir cuando quitó el clic el texto 9 de color negro que estoy haciendo por lo que estoy haciendo s con h joven pongo un comportamiento donde tendría yo donde cuando sólo por pasar el ratón se abre o cambia con focus tengo que hacer clic para que el comportamiento realmente cambie a continuación vamos a hacer un ejemplo de creación de acordeones en css3 de hecho para crear acordeones vamos a usar tanto caché o ver cómo luego content evita golpe por eso en este documento y trabajamos crear un documento nuevo en blanco a partir de cero voy a crear un pollo voy a crear árbol antes del bolívar el gel no tengo ya dispuso esta mañana saber hacer y ahora lo que voy a hacer es lo siguiente voy a hacer y d acordeón cierra el hielo y ahora dentro del día voy a hacer por ejemplo secciones no es obligatorio usar sensor para esto pero se me acaba de ocurrir así que el sexo porque un acordeón tiene secciones igual ahora mismo en la mente no turista lo que es un acordeón os lo voy a enseñar sexo y esta sección tendrá un título hacen cuatro por ejemplo yo soy un título y con una fe del parágrafo voy a trabajar con él hablamos pagamos que tenemos allí verdad un acorde ahora bien voy a copiar y pegar esto varias veces ahora tengo tres en cielos y ahora con css le voy a dar un poco de forma en la cabeza me hago un estilo el tipo texto css y digo aquello que sea un acordeón va a tener una altura de 400 píxeles ya que estamos ya que estamos en permitir html y voy va a tener un bar no grave seles un padre de 0 pizzas el acordeón va a tener además un marcha auto para meterlo al medio guardo a cargo y le voy a decir también se va a tener un bar aun igual ya los vemos ahora lo que voy a hacer es convertir esto en un acordeón de la siguiente manera de a plegar el acordeón y voy a plegar el acordeón diciendo que cada sección cada sección tenga un faith de 24 píxeles por ejemplo y qué y el hombre flow sea directo guardamos recargamos y nos vamos a darle un poquito más 50 píxeles qué ha pasado he cogido cada una de esas tres secciones y la de plegado la he comprimido ahora voy a empezar ahora voy a hacerlo siempre cuando hagas sexo dos puntos hv quiero que el hi o sea la adaptación aunque veis una sección otra sección otra sección más ahora mismo de píxeles voy a decirle en 300 una para 1200 a ver se abre se abre se abre despliego veis como despliego los acordeones pero claro es un poco bruto esto no ocurre tácticamente lo bien de lo que pasa por eso lo que voy a hacer es usar esa propiedad y la gran 6 webkit guión transición ha recordado el jueves walk it porque tengo de las pruebas en chrome o un segundo mundo será suficiente mirar guardo recargo veis cómo se abre el acordeón es el acordeón pero se llama un acordeón es un acordeón de oficina que me acordé de un instrumento musical ya tenemos esto por aquí pero ahora el problema eso está bien pero son muy incómodo porque yo meto ratón aquí empiezo a leer tienes que nadó instintivamente el ratón se me sale en semana se ha plegado a vuelo a meter estoy leyendo el ratón se me sale y se me ha pegado luego tengo que tener simple el ratón encima para poder ejecutarlo así que a continuación lo que voy a hacer es la segunda parte del acordeón cuando voy a hacerme acordeón con contenten y está cola haciendo clic en lugar de hacer aquí a ver voy a hacer un acordeón lo voy a hacer con css y voy a usar la propiedad content editable para poder usar fondos para poder hacer cuando haga clic que evidentemente haga algo por eso voy a trabajar con html al principio dentro de este el eterno externalizado al final código para el amor boeing boeing y pongo estar antes de eso incluso si queréis el body voy a poner un día que se va a llamar acordeón qué voy a decirle que conten edita vol es igual a tu aquí pongo una 1 hace un título y a continuación un parágrafo que contendrá el casco lips um copio pero aquí no tenemos comprobamos acordeón y nos da estudiar voy a copiar voy a copiar este acordeón varias veces unos 234 por ejemplo y lo tengo ahí varias veces lo veis en la pantalla pues ahora me empieza a meter el css y digo todo aquello que tenga el iii de acordeón voy a comprobar que esta salida todo aquello tendrá 120 300 píxeles un height de 300 píxeles y un borde de un píxel edad y le voy a decirte overflow y todo lo que fuera melo ocultas claro y si encima además pongo una etiqueta de estilo ya será increíble type text barra css estar son las prisas hay 3 bien ahora voy a aprender un poquito más voy a decirle que h1 va a tener un marketing de cero píxeles un padding de cero píxeles y quizás un font size de 24 píxeles para que el texto sea más pequeño lo mismo con él que con el parágrafo me hace que tenga un margen de 0 píxeles un padding que te lo píxeles y que el fondo size sea de 12 píxeles como mucho y ahí lo tenemos bien y ahora lo que voy a hacer es decirle atención mediante una pantalla que el acordeón va a tener una altura de 30 píxeles weiss un acordeón si el acordeón es contento edita gol me debería responder atención mediodía responder a focus por tanto me poner lo siguiente acordeón dos puntos focus y le voy a decir por ejemplo que el hype será igual a 300 píxeles vamos a ver la atención a ver si ha funcionado cuando recargo vea si todo va bien cuando hago clic en el acordeón mira se abre veis cuando hago clic en el elemento se abre cada elemento del acordeón porque por dos cosas una porque he puesto con 37 amor igual trump en cada uno de los días y porque focus reconoce la propiedad content editamos igual tuvo focus es básicamente cuando haga clic dentro del elemento delays oye no ocurre un poco bestia y me acuerdo que el acordeón iba a más poco a poco estaba animado bien esto es porque pusimos una propiedad nos acordáis te ponía transition es igual a en un segundo y luego puse justo abajo webkit guión transition es igual a un segundo de manera que mirada basic y veréis como poco a poco ser el acordeón de esta manera tan sencilla fijaos cómo podéis tener un acordeón animado en css sin tener que usar javascript sin tener que usar otras tecnologías más que simplemente lo único que le pudiera molestar es que al hacer clic aparece el recuadro amarillo de que está seleccionado pero para eso recuerdo que hay una distribución llamada al plane none que quita ese recuadro amarillo y por tanto quita cualquier rastro de la propiedad de edición de content evitarlo voy a hacer a continuación una ilustración vectorial para demostraros como html5 soporta de manera nativa la ilustración vectorial en ese objeto programar ilustración vectorial puede ser un poco complejo al principio pero me voy a servir de una pequeña ayuda que es un programa que se llama inkscape voy a sacar este programa de skate y mira voy a dibujar un círculo parece que es blanco para negro y elevado de color rojo y es más voy a hacer que su relleno sea de color pues por ejemplo verde para este rojo y el color de trazo que sea verde y es más el trazo sea más grande y tengo hay un círculo dibujado con un programa vectorial pero lo divertido propiedades del documento voy a ajustar página a contenido con 1 y uno ahora me voy a guardar esto en mi carpeta vamos a sector vamos a master web vamos a actual voy a dejar en css como círculo círculo con la distensión es en un vergel si llora me hizo o fierro o lo que sea me daré cuenta como yo puedo abrir ese archivo svg es un gráfico vectorial pero lo puedo abrir el genio y vio el código y sobre todo es más dejar un momento porque svg lo puedo guardar como eso se ve que es que hoy se hubiese plano estándar por tanto voy a poner blanco pero ahora si esto es un ejemplo si os fijáis yo puedo hacer un documento html ilustración acordáis htm voy a ir directamente no me hace falta una cabeza mujer voy a poner un título y pongo importando una ilustración preparamos el acento recargar importante la ilustración pues si quiero y esto es lo mejor si quiero simplemente usar este código lo que hago es copiarlo veis que al final es svg con lo cual no es igual pero es parecido a html se llama xml según verger guardo la atención copio y pego y ya lo tengo pero si esto es ha gustado lo que voy a hacer ahora os va a gustar mucho más porque copiar y pegar el código de una imagen no es interesante e interesantes modificarlo si yo me pongo ahora a ver un poquito el código me daré cuenta de que encuentro algunas cosas como por ejemplo fin efe efe 00 00 que es rojo efe efe rojo 0 de verde 0 de azul pero si yo vengo aquí vivo quiero que sea yo rojo clarito 255 200 como a 200 guardo recargo y ahora es lo veis os fijáis rojo clarito no espera que sea rojo oscuro le voy a poner 100 0 pero guardo recargo y ahora es rojo oscuro estoy modificando las propiedades de la imagen vectorial directamente dentro del código más adelante si queréis y nos aprenderemos a escribir código directamente para ese viaje por el momento sólo con enseñaros que podéis copiar y pegar y funciona ya está bien mirar el trazo es verde pues iremos allí donde pone stroke otro extracto en inglés rgb 0 0 255 y lo voy a convertir en azul comprobamos cómo lo he convertido en azul y ahora voy a decir que esto week es igual a 7.8 porque aprenda monstruosidad de 14.8 y vais a ver cómo aumentó el grosor del trazo lo más importante atención a mirarme y hacer zoom a la pantalla es que si yo era cojo ya no zoom comprobaréis como esta imagen no es la imagen de píxeles es una imagen vectorial hasta ahora hasta html5 la única manera de meter imágenes vectoriales en una web era usando de flash de relleno para html5 gracias a la conexión de html5 con el estándar svg podemos insertar imágenes vectoriales directamente dentro de una página web voy a ir en que skype voy a crear un gráfico en movimiento y lo voy a poner en marcha pensando svg y usando html5 por eso escribe un documento nuevo por ejemplo predeterminado lo voy a hacer en pantalla a parís hada y dentro de esta pantalla no voy a dibujar un pequeño gráfico por ejemplo voy a dibujar un rectángulo qué va a hacer las veces de carretera así que dibuja un rectángulo y ahora con las operaciones de relleno y borde voy a hacer que los rellenos sean gris que el color de trazo sea blanco si no se ve voy a hacer que el fondo de la página o sea de un color gris clarito y quiero hacer esto para ahora el estilo de trazo decirle en guiones que quiero guiones de la carretera y luego incluso o incluso puedo y dar otro rectángulo hacer otro rectángulo copio y pego el cítrico y me hago carriles dentro de la carretera veis como con los dos debe hacer este tipo de cosas son fáciles pero es que ahora además es una carretera incluso lo voy a agrupar y dentro de esas carreteras voy a poner un coche permitirme si el coche no es lo más lo más lo diseño esto es la rueda del coche cuidado porque era los parámetros anteriores voy a decirle el estilo del trazo que es una línea continua es un color el trazo de color negro es una anchura mucho menor y es un relleno por ejemplo blanco tengo el neumático de un coche tengo un neumático duplicó y pasó a tener otro neumático y ahora voy a dibujar la carcasa ves que estoy haciendo un gráfico super fotos realistas que está haciendo más allá en un gráfico ilustrativo y ahora lo que hago por tanto es mirar dibujó una caja sin nada más del diseño este coche dibujo otra caja las 1 trayecto unión de nóminas y ahora voy a dibujar un par de círculos para hacer como unos huecos para las las ruedas circuló por aquí circula por aquí a éste le quitó este y éste le quitó excelente y ahora incluso lo que hago es poner porque no va a haber ventanitas bueno una ventanita lleras este y ahora el coche si queréis lo pinto de no ser porque por ejemplo esto lo agrupa tengo una carretera tengo un coche el coche más adelante si fuera por la carretera lo que voy a hacer a continuación es crear un paisaje cuando ahora voy a crear por aquí un campo ahora lo pondremos detrás del coche le voy a dar un delgado una cosa así quito el trazo lo pongo por detrás y ahora como no voy a dibujar unas montañas si hago así tengo ya las montañas las voy a pintar de color verde también por el verde es que azul está un poco oscuro las como por detrás como voy a hacer unas montañas sin emociones detrás ya que los ponemos el pan completo azul así y tengo un cielo por detrás veis que esté fino todo el rato de ilustración vectorial y ahora en propiedades del documento le voy a decir que quiero el fondo o sea tengo a ella como podéis ver un gráfico vectorial debe estarlo bien para que esto se quede por atrás e incluso para que veáis mejor el efecto que voy a dibujar voy a dibujar un árbol con más grosor de trazo un árbol toque y pego luego como veis pues ahora selecciona todo estos objetos trayectos kurion y ya tengo la copa del árbol y ahora voy a poner un tronco voy a poner un color marrón más de marrón tengo el tronco del árbol lo lanzó hacia detrás porque no puedo agrupar estos dos elementos y copio pego copio y pego como yo pego pero para hacerme una hilera de árboles tenemos por tanto como lo que he hecho es una ilustración vectorial en este caso usando inkscape pero es una ilustración vectorial estática a continuación usando html5 y css3 lo voy a hacer es poner estos elementos en funcionamiento para ello lo primero que haré es exportar a continuación lo que es volver a importar mirar voy a cifrar el conchero y lo voy a exportar lo puedo exportar como imagen vectorial o como o como vilma en este caso lo voy a exportar como información vectorial y guardo esto común coche es más vaya exportando como bilbao puedes cortar sólo la selección 90 está bien voy al escritorio y voy a master web actual más css que me lo guardo como un coche atracciones coche exportó y compruebo ya que estamos re cuesta nada que en la carpeta más css ha aparecido un archivo llamado coche punto png donde si lo abro con el visor de fotos de windows que tengo ahí el coche a importante parece que se ha mezclado con las imágenes de fondo no me interesa no quiero por eso lo que voy a hacer es lo siguiente me lo saco aquí fuera y ahora sí nuestra web coche exportó reemplazar y ahora sí separadas muy bien ahora voy a seleccionar la carretera los árboles saco el coche fuera en carretera y árboles lo exportó y también el degradado me lo saco fuera esto me lo dejo para luego y lo exportó archivo exportar mapa de bits seleccionó primer abajo archivo exportar mapa de bits y lo guardo como carretera lo guardo en el escritorio en la carpeta master vuelve igual que antes actual más veces carretera y por último como os podéis imaginar seleccionó el cyber las montañas archivo exportar mapa de bits escritorio carpeta de exportación y menos corto como cielo así que desde este programa de ilustración vectorial ya hemos sacado las piezas que a continuación vamos a montar y vamos a animar usando css3 lo que voy a hacer ahora es crear un nuevo documento que voy a guardar como animación punto html en la carpeta actual ya tengo animación animación que es el verde ya no voy a cargar también evidentemente por supuesto en el navegador escribiendo las dos cosas en el vídeo anterior al final lo que he hecho es trocear lo que estos ácaros tres trozos lo que fueron las puntas para eso una vez más voy a pasar con un documento hace con él siempre la estructura es la misma móvil dentro del móvil voy a llamar a tres imágenes voy a llevar a tres imágenes que van a hacer a ver que las miren más actual más css que son carretera cielo y coche así que voy a empezar con él el cielo punto png carretera punto de ng y consigue png guardamos declaramos y comprobamos como tengo la carretera y el cielo a probar las montañas el cielo en el cielo los árboles en la carretera y luego por bajo el coche tengo las tres piezas pero las tengo separadas a continuación lo que voy a hacer es montarlos como las voy a montar bien voy a darle a cada uno de esos elementos un nivel una idea que me permita identificarlo y más adelante poder maquetar y ver y ver carretera y d un coche porque no les podemos dar a las imágenes seguimos seguimos a continuación con css tal tal la css y lo siguiente el cielo va a tener unas vidas propiedades position absoluta qué hacía posesión absoluta no poner uno detrás de otro sino ponernos todos juntos a la vez cielo carretera y coche pero vamos recargamos y mirad cómo están los tres juntos veis las montañas y por encima la carretera y por encima del coche están bien puestos no están bien puestos evidentemente y para eso lo que voy a hacer es usar os acordáis los márgenes todo que es igual a por ejemplo no sé voy a probar 200 píxeles veis con la carretera sobre de trabajo 400 píxeles más o menos podría empezar a tenerlo por ejemplo 500 píxeles 500 píxeles ahí tengo la carretera 2011 s s estoy volviendo a juntar las piezas y ahora el coche voy a hacer lo mismo en posición de empezar con 2 500 a ver qué pasa ya poner un poco más 600 para conseguir colocar el coche encima de la carretera más varios ya lo tengo 6 podría ponerle 630 cuadrado en el carril del medio definitiva estoy poniendo unos márgenes que he hecho hasta ahora bien hasta ahora lo que he hecho es bastante porque lo que he hecho es esas tres piezas y volver a adjuntar las 1 html y css pero esta vez podrías decir bueno que realmente podrían haberlo sacado directamente así del programa de ilustración vectorial lo he exportado por separado porque ahora lo puedo animar como lo voy a hacer atención todos a la pantalla ahora lo escuché decir que iba a tener una working on animation llamada muy del coche que va a durar 10 segundos y ahora voy a poner a mi web diego y frames y me para no siempre de la animación muy de coche como veréis es la misma estructura que tenemos en el archivo llamado animación de animación veis webkit frames mi pelota en el caso en este caso muy de coche y le voy a decir que en el 0% lo hago y le digo web que john transport dos puntos translate 0 píxeles pongan 20 píxeles y cuando esté en el 100% quiero que se haya movido hasta no sé 500 píxeles americana y guardo recargo mira un coche muriéndose no las animaciones css sirve para algo más que simplemente que para hacer botones pero más cosas voy a decirle 703 pero no ha acabado porque si os fijáis el separador también en el fondo los árboles por eso lo quería hacer a continuación es decir a la carretera que le pongo una animación llamada mueve carretera que ocupará bien segundos ahora copio esto y digo la animación mueve carretera empieza en 0 y acaba en menos 300 por ejemplo vamos a ver qué efecto tiene esto pues de apoyo a la simulación e incluso haciendo como que el fondo está también animado lo que voy a hacer ahora es no solo animar a los árboles y el coche sino que voy a animar un poco el fondo lo bueno de este caso el efecto de perspectiva es que los árboles ahora mover en perspectiva mucho más rápido que el fondo lo que hago por eso es hacer lo siguiente copio tengo y le digo el cielo quiero que tengas la animación mueve cielo y la animación por el cielo lo voy a sacar por aquí abajo la animación del cielo en lugar de mujeres e 300 píxeles se va a mover 50 porque porque si lo veis en perspectiva así lo veis cómo se mueven las montañas es como cuando vas en el coche lo que tienes al lado son mucho más rápido que parece que semos lado de atrás no es que se mueva más rápido es el efecto de la perspectiva lo único que me queda por afinar este ejercicio es que veréis yo he hecho esto y podéis decir hombre está bien pero que se me el truco como se ve el truco pues entiende un poco la magia por tanto lo que voy a hacer al final voy a hacer que el coche de avance sólo 500 píxeles muy bien más cosas y el perfecto lo que voy a hacer ahora lo que voy a hacer ahora es meter todo esto dentro de un día son obligatorios para que quede más bonito pony de marco me pongo sangría y ahora lo que voy a hacer es simplemente sin animal hace falta que anime decirle que todo aquello que sea el marco va a tener un will de 500 píxeles un raid de 600 píxeles y una y una perfil y ver todo lo que se salga pelo y así no ver en los retales de la animación no marco marco marco ah claro claro porque estoy trabajando con una posición absoluta cuando trabajo composición absoluta inevitablemente ocurre esto que estás viendo en la pantalla no pasa nada porque para eso tengo ya una solución las voy a hacer voy a servir y de igual retal arriba más que está abajo retal izquierda y tal derecha que si de paso os voy a enseñar a trabajar con estilo en línea si yo me he cansado de meter estilos arriba en la etiqueta directamente aquí así que simplemente me hago un hueco en la etiqueta bien y le digo style es igual a batman igual a wish igual 1000 píxeles a height igual 200 píxeles la posición absoluta como veis he puesto el css adentro grado recargo iguales y le voy a decir que z inglés es igual a 1000 para la negrita el amor de familia volver un píxel soy blanco a esta se me ha quedado se me ha quedado por detrás como podéis ver absolute en los que ponía a voluntad y entonces mal absoluta y ahora lo que voy a hacer es mover ese metal arriba lo voy a mover arduino bueno ashley pero píxeles menos en cientos píxeles guardo recargo hay otras aves como las malas prácticas seguir yendo un poquito ahora lo arreglo voy a hacer que en la pegatina de trabajo tenga style guardo tiempo de carbón la vida tengo completar por ahí y ahora voy a hacer dos retales más en total izquierdo en total derecho donde en este caso la anchura es de 100 píxeles la altura es de muchos píxeles esta es la altura es más grande bien pasado pero ahora no pasaba de la pasada de mover a 600 píxeles como generando un marco cerrando un marco de manera que lo único que me queda es mover este position slate -20 así pues ya tengo un marco sería un poco al final del truco pero ya tengo un marco donde en lugar de verse las capas por separado lo que se ve es animación conjunta y si es una vez más esto es html y css puro y duro no hay nada de flash y ahora sí podemos hacer las animaciones que queramos para disfrutar los momentos más dejadme que lo disfruté un poquito más o menos a un ratito voy a decirle que en lugar de 10 segundos acaba muy pronto animación que dure 30 segundos ya estoy me cargo y así esto es una trampa montar lo que esta declinación dure más atrás y también puedo ver mejor y disfrutar mejor del trabajo realizado aunque el coche al final del destinos del destino se acabe cayendo por el barranco del fin del mundo lo que voy a hacer ahora es demostrar el uso de media where is entre s s 3 para poder adaptarnos a los cambios de resolución en los navegadores y para que por ejemplo si presentamos una página en un teléfono móvil se presenta de una manera si le presentamos una tableta se presente de otra y se le presentamos una pantalla de ordenador se presente de otra pero sin tener que programar tres veces la página sino simplemente cambiando y adaptando el css y para eso lo que voy a hacer es empezar haciendo un archivo html estándar voy a poner en el dof time pero sí que voy a poner un gel una cabeza así que voy a poner un bol tu cuerpo dentro del gen style la etiqueta style me permite introducir css3 en este caso y voy a hacer lo siguiente yo aquí entonces voy y voy a hacer hundido y aquí voy a decir que cuando encuentro un día lo que haréis maquetado con wii de 200 píxeles de 200 píxeles y background igual a red para decirle que de esta manera tenga un día de color rojo de 200 x 200 voy a hacer una primera demostración por tanto en la que voy a escribir lo siguiente voy a escribir a medias otros seis que usamos para las animaciones y voy a decir media donde el min wyss o sea por ejemplo 1200 píxeles si la pantalla tiene una anchura mínima de 1200 píxeles entonces ejecutará esta dilatación que está insertado dentro una vez con sangría para que lo veáis mejor veis media con crimen hábil y bauer evidentemente que contiene a estos parámetros igual que tenemos min with tenemos marx with por tanto vamos a ver los guardo recargo y de momento no tengo nada porque porque yo he dicho que tenga un mil with de 1200 píxeles mi pantalla ahora mismo tiene 1024 píxeles de ancho cumple la condición de que la anchura mínima es 1200 no la cumple pero si yo digo mil guardó recargo puede hacer 800 por qué cuando recargo de hacerle 200 ya lo tenemos porque ojo fijaos que aunque mi pantalla tenga 1200 o 1024 dejamos que la pantalla del navegador no tenía más de 200 o 300 bien fijaos que ahora yo voy a hacer lo siguiente voy a copiar esto de aquí y voy a hacerlo siempre si la pantalla tiene un mini wifi de 200 polvo de color rojo pero tiene un 1600 polo de color amarillo atención si yo recargo aquí aparece como rojo señor de carbón y aparece como amarillo os habéis dado cuenta rojo amarillo de esta manera lo que está haciendo es actualizarse según el contenido de la pantalla y por ejemplo digo esto sería como una pantalla de pc esto sería como una tableta y ahora digo y si tengo un móvil en plan blackberry en plan pantalla super pequeña pues también lo puedo adaptar porque a otro y digo y si el tamaño mínimo es de 100 entonces me lo pintas de color azul blue guardo recargo mira adaptación grande azul bien voy a poner una no pasa nada voy a poner una porque hay otro que es mark swift y lo mejor es poner lo siguiente porque claro si éste cumple que el 1200 también cumple el perdón si este que es ancho cumple que el mismo hice 200 también cumple que el mini week el 600 y 100 bien yo le puedo decir por ejemplo que el mini wifi sea 0 y el mar suite pero y maps with o sea 200 veis un rango si va a haber 0 a 200 entonces métele este css con bieber si va atención a consejos 22 si va a disminuir a 201 desde 201 porque 201 porque ya he puesto aquí arriba 200 intentando duplicar porque como por lo que sea un dispositivo tenga 200 píxeles el navegador no sabrá qué hacer si va desde 200 hasta 400 entonces le pones este y silva por ejemplo bueno me with desde 401 entonces pondrá este vamos a ver si funciona bien guardamos recargamos y digo amarillo esto y desde cero hasta 200 rojo lo veis como cuando este equipo aparece el color rojo desde 200 a 400 aparece hielo aparece amarillo y más allá de 400 aparece el color azul y qué pues si os ha demostrado esto os puedo demostrar lo que queráis por ejemplo un caso más práctico vamos a ver vamos a ver voy a ir al insumo y ya sabéis la páginas en la que no puedo sobrevivir y copio y pego nos veamos dentro del mismo voy a hacer esto no puede ser el más grande hi 800 800 y 800 guardo recargo y digo sabéis que es que en un móvil la letra se lee muy pequeña hay que hacerla más grande se puede personalizar la propiedad que me dé la gana y puedo venir aquí y decir cuando estés en un móvil font-size de 16 píxeles y el color white ya que estamos trabajando con background red o no el color no será igual blanco guardo retardo que se llama el algo muy pequeño como sabéis 24 fijaos como cuando estás en un teléfono móvil te pone la infra más grande cuando cambias veis cómo cambia el tipo de letra cuando estás en una tableta digamos que el tipo de letra sobre 24 no pero quizás un poco más grande si pongamos 20 de esa manera pongo 20 y por ejemplo voy a poner que en la pantalla del pc los 10 píxeles porque en la pantalla del pc o 12 píxeles porque sale muy bien en la pantalla del trece guardo fijaos como en rojo tengo tamaño 16 para leer bien en un móvil ya sé que es un excesivo pero es una demostración en amarillo tengo letra 20 antes era 24 horas 20 y empecé tengo letra 12 y es que como el pp elegido color azul del fondo pues le voy a decir un color by para el texto para que se lea mejor pues color blanco y ahora color negro grande color negro más tarde en definitiva habéis visto una verdad quizás un poco rudimentaria del momento pero una manera en la que mediante media queries con css programando una sola vez podemos hacer una página que se adapte a tantos medios como queramos a continuación vamos a ver una de las innovaciones más visuales de css3 y también una de las más peligrosas entre comillas digo que es peligrosa no estoy no recomendando su uso así que sí que recomiendo usarlo pero también con precaución veréis voy a hacer en este archivo llamado fuentes punto html un archivo html estándar clásico que va a ser html model y voy a poner un parágrafo hola yo soy un párrafo yo soy un paladar y dentro de él voy a crear una etiqueta de estilo una clásica etiqueta de estilo tal css le voy a poner que todo aquello que tenga la etiqueta p tenga un fondo familia por ejemplo área hago clic aquí y aquí hola yo soy un párrafo voy a poner font-size 24 píxeles para que lo veáis mejor podéis ir un párrafo porque no 36 hola yo soy aparte esto es haría estos estadios new roman tales esto es verdad es parecida arial pero no es lo mismo grave verdad arial veis que ha cambiado es parecida pero exactamente igual esta es courier y llega un momento en que sí sí vale hay dos tipos de fuentes pero no hay más que los predeterminados que básicamente son estos cuatro con algunas pocas variaciones pero qué pasa si yo quiero meter en mi propia fuente qué pasa si yo quiero meter una fuente completamente personalizada el problema hasta ahora era que yo puedo meter cualquier fuente que esté en mi ordenador pero si esa fuente no está en otro ordenador realmente le abre bien solo yo pero ninguno de mis clientes o ninguno de mis usuarios css3 me permite introducir mi propia fuente como se hace se hace de la manera siguiente el siguiente paso que tenemos que hacer para cargar una fuente personalizada es bueno o descargar o vincular la fuente yo recomiendo al menos en un principio descargar la fuente esto es como las imágenes en este ml podemos descargar las podemos hacer hot linkin a la dirección original de la imagen de hecho un bol de una cosa que se llama google font que no luego veremos que nos permite hacer hot linkin a las fuentes de google pero de momento de momento no quiero ver eso de momento lo que quiero es enseñaros a descargar fuentes hay un montón de páginas en internet donde podéis descargar fuentes algunas gratuitas y otras por ejemplo de lado así que voy a enviar voy a me voy a meter en un navegador de internet y voy a poner una de las páginas me puedo encontrar fuentes por ejemplo mil y una freak fons bueno hawai guangzhou shenzhen wang de free font o por ejemplo la font central entrante de fondo que se escribe está font puntocom qué es una página que básicamente tiene fuentes y lo bueno por cierto tener cuidado con esto porque estos puede enganchar esto engancha mucho esto de las fuentes hay miles y miles y decenas de miles de fuentes en internet me gusta bastante dar fondo de hecho es nada vamos una sin sitio web bastante conocido porque los tiene ordenados alfabéticamente los tiene ordenados por motivos fantasía extranjero tecno gótico básico y luego además tiene un muestrario entonces por ejemplo voy a usar esta fuente misma de aquí que se llama card umbro live fijaos que esta fuente no la tengo en mi ordenador la prueba es que si saco un procesador de textos por ejemplo estoy sacando openoffice ryder con toques arranca si yo escribo algo y saco la lista de fuentes times new roman si busco por la fe veréis que no está cartoon religiosa quiero agradecer no tiene trampa ni cartón esta es la vez la cambia captura y castella en centauro no tengo que cartoon realidad y ahora me voy a esta página a la zona fijaos que el enlace que por descargar así que pulso descargar me lo voy a guardar como master web estoy en la carpeta actual en + css me estoy bajando un feed mal un buen o mal en cuanto a qué es lo que hay pero evidentemente voy a tener que descomprimirlo y extraer aquí para sacar el contenido fijaos que esto me está sacando una fuente llamada cartoon relief con extensión de f la extensión de f estruch type font es fuente en formato frutal hay varias hay de hecho tres instrucciones de fuentes que reconoce css3 por la ttf es la más recomendable así que mira tengo una fuente en formato ttf cartoon relief puntos de telefe lo que voy a hacer ahora atención es ir y el editor de textos y antes del parágrafo voy a inscribirlo siguiente voy a escribir otra vez más for your face es decir la cara de la fuente es la siguiente en primer lugar con guión familia ojo no estás llamando a una familia de fuentes estás bautizando una familia de fuentes por tanto voy a decir pues no se cursan hasta fuentes y recuerdo haber lo sea el cartoon pues voy a llamar a esta fuente cartoon tiene que coincidir el nombre con el de la fuente por ejemplo voy a poner dibujitos evidentemente no tengo ese nombre dentro del sistema operativo esta es el nombre con que la bautizó y a continuación voy a introducir una etiqueta src src ya sabéis que siempre el sol es donde lo voy a cargar que es la url la url es donde está esa fuente y cómo se llama dónde está ahí cómo se llama voy a verlo no me acuerdo mas pss esa fuente se llama cartoon mira es más voy a complicar voy a copiar comió pero ahí está a quien he dicho que creó una nueva fuente que cuya familia se hallaban dibujitos y el archivo que uso desde este de aquí y ahora el fondo familia y fijaos que el clip se la cree no quiere decir que automáticamente pase a usarla sino que ahora aquí abajo tengo que poner dibujitos guardo recargo y os dejaréis que esa fuente ese texto ahora se está representando con la gente y con la fuente tanto en realidad pero lo importante en este caso fijaos en la pantalla es que esto sigue siendo texto esto es texto seleccionable parece que sea una imagen para el que parece que sea un gráfico para que sea un bit más un jpg o un png pero no realmente es texto lo que quiere decir en la práctica que puedo hacer títulos artísticos personalizados pero a la vez como son texto google los podrán seguir ingresando correctamente a poner la fuente los hechos por el comillas sencillas en lugar de poner comillas dobles he puesto comillas sencillas si pongo comillas dobles guardo recargo y esto va a funcionar igual entonces os voy a decir una cosa y esto no lo he dicho hasta ahora pero a partir de ahora en otros lenguajes él va a importar en html y entonces da igual usar comillas dobles o comillas sencillas desde luego lo que no da igual es que si aquí he puesto comillas dobles aquí ponga comillas sencillas no si algo lo abro con comillas dobles lo tengo que cerrar con comillas dobles y si yo lo abro con comillas sencillas lo tengo que cerrar con comillas sencillas en html prácticamente da igual que usemos comillas sencillas y comillas dobles lo que tengo que hacer es mayormente acostumbrarme a usar siempre o comillas dobles o comillas sencillas porque porque me tengo que acostumbrar se las puedo mezclar como acabáis de ver y html funciona perfectamente la cuestión es que como veréis en javascript y en php el uso de comillas genera problemas colisiones con las comillas de cpm l por tanto una buena costumbre es por ejemplo en html poner comillas dobles y en php por ejemplo poner comillas sencillas de tal manera que sabéis que las comillas sencillas de php no van a anular a las comillas dobles de html de la misma manera en el que hp también soporta indistintamente comillas sencillas y dobles por tanto puedes usar comillas dobles en php y comillas sencillas en html la cuestión es y ya lo veremos cuando lleguemos a javascript y ap hp es jugar con las comillas para que unas no machaquen a las otras google tiene su propia biblioteca de fuentes en la nube específicamente pensadas para que hagamos hot linkin de fuentes voy a hacer un archivo nuevo y a continuación voy a hacer un link no voy a grabar nada de escritorio dentro de master web dentro del actual centro de masters s y voy a llevarlo a esto como google phone a continuación aquí me hago una estructura html hoy un parágrafo me voy a ir copio y pego ya lo tengo y tengo de momento esto google fons tengo de momento un palabra posee dos partes en google google web llegaréis a esta página web puntocom web fons donde en este caso fijaos podéis ver las las fuentes que tiene google podéis filtrar por categorías fuentes de sheriff fuentes sin ser y acordes otro día las decoraciones fuentes de display fuentes escritas a mano no se pueden clasificar como ser y forzó como sánchez por ejemplo yo quiero sólo fuentes sunseri fuentes de palo veis esto el sheriff condecoraciones 6 las decoraciones y esto es sanz series por ejemplo quiero fuentes hand review todas las fuentes escritas voy a estas podéis elegir el un filtro quiero fuentes gruesas quiero fuentes más finas quiero en fuentes más inclinadas menos inclinadas podéis elegir los parámetros que quieran estos electores están muy bien el tipo de script que creéis si queréis un juego de caracteres latinos cirílico griego dinamita el que sea y a partir de aquí supongamos que digo bueno tengo esta me gusta lovers water que requiere un cuestión quiere usarla así que hago clic aquí vamos a ver qué dice el tiempo incluso de carga que va a abusar atención a esto si hay alguna fuente que está en rojo no cojáis porque eso quiere decir que va a ralentizar el tiempo de carga de vuestra web y básicamente el programa dice mira tienes tres maneras de importar esto o bien con una etiqueta link o bien con una etiqueta import o bien con javascript cogéis cualquiera de los tres recogerla el formato estándar copio canciones copio pero y evidentemente solo por esto no va a funcionar ya que lo que he hecho es traer la fuente y ahora voy a usarla es tal style y le digo que todo aquello que venga ver todo aquello que tenga parágrafo font family voy a poner lovers 4 si lo escrito bien si todo ha ido bien es decir la primera línea lo que hace es importar la fuente y prepararla para su uso pero el nuevo vidente mente se pone en la etiqueta de style en la que llames a la font family que hayáis importado a partir de ahí fijaros como estoy usando una tipografía completamente personalizada pero no la he tenido que descargar sino que la estoy usando desde el servidor de google ventaja me ahorro me ahorro espacio desventaja de textos de google el día que google diga cierro esto pues de repente página de sabe funcionar o la fuente no sé no se ve puestos podéis decir pero si google no cierra nada google de vez en cuando cierra cosas como por ejemplo el año pasado cerró el google labs quedan los laboratorios de investigación de google donde podías probar cosas y a quien lo usábamos nos dejó unas cuantas herramientas os digo que bueno está esto allí pero no os recomiendo hacer hot linkin sino bajarlo todo a vuestro servidor y más siendo que las fuentes que ocuparán final resecas 20 cada 60 casas para megas pues hablaríamos pero para un poco de ocupan creo que vale la pena descargarlas en esta sub unidad voy a hablar de servers air incluyes los servers ay incluyes nos permiten programar nos permiten crear pequeñas estructuras de programación sin tener que usar lenguajes como javascript y sin tener que usar lenguajes como php sino que insertándolo directamente en html nos permiten tener un poquito de funcionalidad para detectar el navegador para cosas parecidas pero eso sí os voy a decir que lo primero que hay que hacer y así ya lo tenemos para el resto de la formación es instalar un software que convierte a nuestro ordenador en un servidor web y esto lo vamos a necesitar no solo para esto que os voy a enseñar ahora para server zaidín clubes sino también para otros lenguajes como por ejemplo php o la conexión con mysql hasta ahora lo que hemos estado haciendo digámoslo de esta manera es un poco de trampa lo que hemos estado haciendo no es tener un servidor web en nuestro ordenador sino hacer archivos html en cualquier carpeta y simplemente abrirlos y meterlos en el navegador porque para trabajar un html no hace falta más pero para trabajar con cualquier lenguaje de programación como php observen side incluyes hace falta tener un servidor instalado concretamente hay hay varios servidores en el mercado el servidor que funciona con lo que os voy a enseñar hoy que server sa y bien clubes es apache es un servidor web es un software al final que se llama apache que convierte en tu servidor a ti convierte tu ordenador en un servidor web y que es un servidor web pues un servidor web no es más que un ordenador que a ser posible está conectado a las 24 horas del día a internet y que en lugar de servir para ver páginas de internet sirve para servir páginas de internet qué quiere decir eso porque es un ordenador que está abierto y que cuando alguien pide una página web va a ese ordenador y ese ordenador se la da eso es un servidor web cuando entráis a internet y veis páginas web y veis aplicaciones web aunque no lo sepáis y estáis escribiendo al final servicios web montar un servidor web nos puede llevar días cuando nos semanas la primera vez que lo hacemos nos puede llevar semanas enteras y aunque luego lo hagamos muchas veces aunque sepamos montar sobre servidores web del carrerón montar un servidor web mínimo sabiendo mínimo una tarde puede llevar por tanto en este caso os voy a enseñar un software que lo que hace es automatizar todo ese proceso y que el lugar del primero lo hace todo por ti y en lugar de tardar como mínimo una tarde tarda como mínimo un cuarto de hora 20 minutos pero sólo os voy a recomendar el servidor web por lo menos para empezar a programar servidor web se llaman samp no es realmente un servidor sino que es un paquete que aglutina muchas cosas mira voy a meter en internet camps escribe así escribe x a mtpe la equis es un comodín que representa tanto a windows como a linux como a mac es decir hay una versión de sap para cada uno de los temas operativos la a es de apache que es el servidor web la m es de mysql que es el servido de bases de datos la primera p es de php y la segunda ps pero que es otro lenguaje de programación en la primera página encontraréis apache friends jump así que voy a hacer clic ahí voy a descargar este programa fijaos que tenéis sanz para linux sean para windows sean para mac e incluso sean para solares evidentemente tenéis que elegir aquella versión que mejor se adapte a nuestro sistema operativo si yo estoy en windows de descargar esam para windows y atención esta versión contiene apache mysql contiene ph paper contiene pero contiene php by admin contiene web alai ser contiene mercury contiene ftp contiene ese kulite también es muy bueno en definitiva contiene fire fila contiene un montón de paquetes preparados para usar la buena noticia es que no vais a tener que aprender ni qué hacer ni cómo configurar cada uno de ellos sino que simplemente lo instalas y automáticamente configura instala copia abre todo lo que sea necesario por tanto hago clic en sant para windows aquí abajo veréis que nos dice que quieres el samp los añadidos desean para un usb élite para portable el sap y que lo quieres el instalador o en zip si es tu primera vez coge instalador así que estaba me lo bajo de sourceforge pero abajo a donde sea caos que la instalación ocupa unos 80 megas con lo cual más o menos en unos pocos minutos en este caso con mi ancho de banda en tres minutos queda correctamente instalado una vez que ya está correctamente descargado lo que vamos a hacer es instalarlo por tanto hacemos clic en el paquete que nos hemos bajado pulsamos clic seleccionamos un lenguaje de socialmente los lenguajes que nos ofrecen para instalar son inglés y alemán así que tenemos que pensar cuál de ellos nos duele menos en mi caso de momento me duele menos al inglés así que voy a elegir inglés y voy a pulsar ok en windows vista y windows windows 67 nos recomienda desactivar el o hacer el control de acceso de usuario el típico control que no te deja y estando programado señores administradores encuentros listas en windows 7 por defecto se recomienda que estemos instalado como veremos a continuación se apersonan alhama que se instala del tirón el software libre no estamos introduciendo ninguna licencia nos completando nada todo el software libre pulsamos en el éxito en qué carpeta lo vamos a instalar sanz por defecto se instala en la carpeta de dos puntos barra el disco duro ce en champ se puede instalar en cualquier carpeta pero dado que la carpeta por defecto para cualquier instalación es esa yo recomiendo dejar con efecto esa carpeta y así poder acertar por defecto veis esa carpeta yo recomiendo dejarlos dentro de esa carpeta y atención dentro del siguiente formulario se nos pregunta las típicas opciones tornas de crear un icono de acceso directo al escritorio bueno por qué no crear una carpeta en luz de litio vale porque no pero a continuación tienen 33 elementos muy importantes da igual lo que elijáis en la instalación porque más adelante se puede cambiar si no tenéis activado se puede activar si tenéis activado se puede desactivar y nos dice si queremos instalar apache que es un servidor web como un servicio mysql que es un gestor de base de datos como servicio o file fila que es un gestor de ftp como servicio cuál es la diferencia si yo no los instaló como un servicio cada vez que arranque mi ordenador y los quiere arrancar los de drei que arrancar manualmente como programas mientras que si los instaló como un servicio cada vez que arranque el ordenador automáticamente y sin que yo les digan nada de fondo arrancará lo voy a la práctica quiere decir que si vas a desarrollar frecuentemente golpe hp con mysql mantenlos como servicio porque si no cada vez que arranquen de las quiere arrancar los manualmente por otra parte si vas a saber un desarrollador eventual si dices es que con mucho voy a tocar código una vez a la semana o una vez al vez y tengo un ordenador en el que tengo poca memoria y no quiero gastar memoria arrancando servicios automáticamente que luego no voy a usar pues en eso instala los sin los servicios arrancados en mi caso evidentemente como desarrollo de manera continua todos los días meister mientras a tenerlos activados al final te ocupan 15 megas 20 megas fijos por arrancar la cuestión es cuántos gigas tenéis en vuestro ordenador se llamaría de hoy tenemos de 4 a 8 gigabytes o menos de nador nuevo pues 15 megas tampoco van a gastar mucho tampoco tampoco nos pone mucha diferencia por tanto si vamos a instalar de manera continua si vamos a desarrollar una continua y recomiendo marcarlos como servicios una vez hemos empezado la instalación ya el programa lo que empieza a hacer es la parte del wire que es copiar configurar e instalar todos los archivos en las carpetas correctas ahora veremos que la carpeta sham que acaba de crear el programa elaborado después de la última instalación va a tener carpetas para html y carpetas para php carpetas para bases de datos carpetas para movilización carpetas para lo que sea el proceso de instalación proceso de copiar el archivo de php puede tardar un rato samp tiene decir puede tardar un rato con lo cual simplemente ahora hay que hacer es tener paciencia y dejarlo que copie y que instale veréis que al acabar este proceso de copia saldrán unas ventanas de ms-dos no os asustéis no son virus sino que son dos ventanas que dicen arrancando el servicio de apache arrancando el servicio de sql y como han tenido fácil a arrancando el estudio de fácil simplemente vosotros no tenéis que tocar el ordenador hasta que el programa diga ya ha acabado instalado

voy a hablar de usabilidad donde en este caso ya que tenemos unos conocimientos de html css la siguiente pregunta que nos puede surgir es válido como uso de estos conocimientos vamos a hablar de usabilidad donde usabilidad trata de que la web sea práctica en su uso hay tres vértices de un triángulo que debemos considerar cuando diseñamos una web y es primer vértice que esté bien programada segundo vértice que esté bien diseñada de lo cual nos ocuparemos más adelante es decir que sea estéticamente agradable y tercer vértice que sea usable si tu web cumple esos tres puntos tu web es perfecta solo por que sepas programar no quiere decir que vayas a hacer una web usable de hecho un proceso le pasará justo al contrario y es que tenías a programar y haces la web pensando en que la programación esté bien pero no pensando que el usuario vaya a encontrar correctamente la información con el diseño pasa lo mismo pero a la bestia hay veces que los diseños más creativos son precisamente los menos usuales porque son diseños que son tan innovadores que la gente no está acostumbrado solar y no está acostumbrada a usarlos y por tanto no encuentran la información así que en definitiva que vamos a tratar en la usabilidad en la usabilidad vamos a tratar del usuario vamos a tratar vamos hablar de que el usuario siempre es lo primero y de hecho es me recomiendo en el triángulo poner el vértice de arriba al usuario y en cualquiera de los vértices de abajo programación y diseño el objetivo es que el usuario encuentre la información que está buscando en el menor tiempo posible y que además el usuario cuando salga de la página y más adelante vuelva a entrar recuerda perfectamente cómo navegar por esa página por tanto y como decía antes la usabilidad trata de una web sea usable de que el usuario pueda usar fácilmente la web y de que por tanto encuentre lo que quiere con el menor esfuerzo posible no tiene nada que ver con que la web sea bonita o con que la web esté bien estructurada bien programada vamos a hablar ahora de los modelos mentales los modelos mentales no son vuestros amigos pero vais a tener que hacer amigos suyos un modelo mental equivale a contemplar que los usuarios de la web no son máquinas son personas y como son personas cada persona que entra en una web automáticamente no adquiere un conocimiento objetivo del 100% de la estructura de esa web sino que adquiere un conocimiento subjetivo y parcial de la estructura del contenido de esa web eso quiere decir que como tú eres una persona humana cuando tú entras en una web tú no sabes cómo es esa web tú crees que la web es de una manera o crees que es de otra tienes la percepción humana y por tanto en la mayoría de casos erróneo el problema está en que cada usuario no sólo es ya que pueda tener su propia mentada en su modelo mental propio es que lo tiene y cada usuario va a percibir una página web de manera diferente al otro usuario si por ejemplo dos usuarios entran en mi blog y les hago preguntas probablemente no responderán lo mismo dónde está la sección de descargas dónde están las últimas noticias porque no es cómo es mi web es como los usuarios la perciben y ese es el problema además por si esto no fuera suficientemente complejo hasta ahora de lo que se entiende lo que se deriva es que hay tantos modelos mentales como usuarios de una web pero es que además el modelo mental de un usuario suele cambiar a veces a mejor a veces a teror suele cambiar en cuanto a t cuanto yo más entró en una web más sé qué cosas tiene esa web más conozco esa web y por tanto mi modelo mental se acerca más a la realidad hay veces que desgraciadamente ocurre lo contrario hay veces que es una que hay una de que hay webs son tan diosas que cuanto más navegas menos sabes esa web por tanto debes tener en cuenta cuando cuando hagas una web que existe en un modelo infinito de modelos mentales es decir tú tienes claro cómo es tu web y tú esperas que la gente cuando entre en tu web automáticamente se perciba perfectamente cómo es esa web en cuanto estructura y en cuanto al contenido pero no es así porque a continuación vamos a ver una cosa que es el tiempo de atención si cada persona dedicará dos horas a cada página web evidentemente tendrían un modelo mental muy preciso pero algunos de vosotros cuando veo una página por primera vez estas dos horas viendo esa página web luego la primera regla de la usabilidad es la gente va a hacer con tu página lo mismo que tú hagas con el resto de páginas si tú no tienes paciencia con el resto de páginas la gente no va a tener paciencia con tu página por tanto hay que diseñar páginas que en la medida de lo posible comuniquen la información lo más rápido y lo mejor posible hacer una página perfecta es imposible hay que acercarse todo lo que podamos a la perfección y como ahora luego veréis la perfección en usabilidad muchas veces es sinónimo de sencillez en este vídeo vamos a hablar de la atención del usuario y si os fijáis muchas de las cosas que os voy a decir a partir de ahora son cosas de sentido común porque la usabilidad es una disciplina que trata con la lógica y el sentido común no con las complejidades de la programación ni cosas así internet es un medio muy cruel en cuanto a los siguientes si tu diseñamos un coche y ese coche lo diseñas mal [Música] quien se ha comprado ese coche no comparar a otro coche hasta dentro de unos cinco o seis años por tanto ese error lo empezarás a pagar dentro de cinco o seis años como diseñador de coches tienes cinco o seis años para subsanar su error por supuesto porque si ese usuario si a ese usuario no le gusta ese coche la próxima vez que se compre un coche no sólo comprarán esa marca pero tienes cinco o seis años para ese error si tú haces sistemas operativos los usuarios no cambian cada día el sistema operativo cambia la gente se mete mucho con windows pero cuantos cambian del sistema operativo qué alternativas hay te puedes comprar un mac pero tienes que gastar el dinero en un mac te puedes cambiar linux pero tienes que aprender a usar linux así que te puedes cambiar del sistema operativo pero cuesta al final si la gente a través de los años se cansa de windows acaba cambiando el sistema operativo pero tienes años windows dispone de años para compensar los defectos de windows con actualizaciones gratuitas con programas con compatibilidad para videojuegos con una serie de cosas y al cabo de los años la gente decide o bien seguirse quedando en windows porque a pesar de las desventajas hay dos ventajas o cambiarse te puedes cambiar pero pasan años cuando tú trabajas con un programa como word o como entre studio o como autocar te puede no gustar el programa pero tampoco te cambias inmediatamente tardarás un año como mucho 2 cuando sacan una versión aproveches y cambias del programa pero el problema de internet es que cuando accedes a internet sobre todo a través de google cuando buscas algo en google tú sabes y si tú lo sabes tú sus usuarios lo saben que igual que está tu página hay decenas de miles cuando no centenares de miles cuando no millones de páginas iguales y aunque sea un negocio local tú sabes que aunque no vean tu página van a ver miles de páginas iguales tu mismo tipo de negocio en tu misma ubicación geográfica y cuanto más tiempo pasa más gente hay que tiene página web luego esto se convierte en el peor y por esto internet es un medio muy cruel con un coche tú puedes hacer lo mal que la gente va a tardar cinco o seis años en cambiar de coche cambiar de página web cuesta tres segundos por tanto un fabricante de coches tiene cinco años tú tienes tres segundos para contentar a tu usuario tienes 3 segundos para demostrarle que la información que está buscando está en tu página y no debe ir a cualquier otra buscarlo y por eso internet es el medio más cruel en el que podáis trabajar y existe una vez más pensando vosotros hacéis lo mismo si vosotros entráis en una web y hace un vistazo no encontráis atención no es que no encontraréis es que de un vistazo no os parece que la estética de la web cuadre con lo que vuestro esperabais y no le dais una segunda oportunidad sino que os vais a otra web porque sabéis que en google vais a encontrar un montón de webs iguales luego que sepáis que si vosotros lo hacéis la gente lo va a hacer con vuestra web tenéis que medir y empezar a diseñar vuestra web desde el punto de vista en que la gente encuentre la información como máximo en 10 segundos óptimo 3 segundos como máximo 10 segundos porque si no la encuentra en 3 de 3 a 10 segundos se irá a otra parte porque como veis aquí el usuario vale sabe que tiene decenas de miles de alternativas no estoy hablando de programación no estoy hablando de diseño cuando estoy hablando de que el usuario no encuentro de información en 10 segundos no estoy hablando otra letra sea más grande más pequeña que el color de fondo tiene una textura no estoy hablando de eso esté hablando de que la web muestra la información lo más clara posible e insisto una vez más claridad suele ser sinónimo de sencillez sencillez tampoco quiere decir no poner una imagen sino poner dos textos arriba hay que tener un balance hay que ir más hacia sencillez que hacia recargamiento nosotros queremos a nuestras webs porque las hemos hecho nosotros y porque como lo hacen muchos nosotros no vemos sus defectos pero tenemos que ver sus defectos de hecho un error fatal que solemos cometer es que amamos a nuestras webs porque las vemos nosotros en nuestras obras nos parecen maravillosas y no queremos saber nada las gomas de la competencia porque no son de la competencia no está siempre es la mejor pues no es justo lo que no tenemos que hacer entonces me habló que ponen la primera frase y decirme si no es verdad un usuario pasa preparado es pasado mucho más tiempo fuera de tu sitio que dentro de tu sitio eso quiere decir que si tienes una tienda online de zapatos es muy difícil que tu usuario sea la primera vez que entré a una tienda de zapatos y justo voy a entrar en la tuya lo que quiere decir esa frase es que cuando entré a tu tienda de zapatos habrá pasado por 100 tiendas de zapatos antes por tanto es importante que visites las tiendas de zapatos de la competencia porque porque si un usuario habéis dado cien tiendas de zapatos o diez me da igual y de esas diez ha visto los mismos elementos vas a tener que poner esos mismos elementos en tu página web yo siempre digo si visitas 10 páginas de zapaterías online y en esas 10 páginas de zapaterías el fondo tiene elefantes rosas en tu página zapatería tienes que ponerle francés rosas porque el usuario inconscientemente asocia elefantes rosas con zapaterías y te puede pararse parecer absurdo pero las asociaciones en tiendas de comercio online a veces son así por tanto la gente tiende a mirar solo su web y evitar mirar las de la competencia error tienes que pasar tiempo y tiempo y tiempo mirando qué hace la competencia porque la gente cuando entra en diez tiendas de zapaterías que se hacen un modelo mental lo ha visto todos a veces entráis en un periódico online que no parece un periódico online que parece más bien tienda online y dices esto no es lo que yo esperaba para y no le das ni una oportunidad y media por tanto tienes que conocer y aplicar el lenguaje visual que tus clientes esperan encontrar a partir de este punto y voy a empezar a balancear dos conceptos yo que soy diseñador de formación soy el primero al que le gusta hablar de creatividad y soy el primero al que no le gusta hoy no es creativo hombre copia esto no nos gusta sin embargo el problema de crear es que hay que ser creativo pero con cuidado yo recomiendo lo de siempre del elefante rosa si todo el mundo por un elefante rosa tu pueblo también porque tu usuario lo va a encontrar que es lo que pasa por ejemplo con los coches conceptuales todos hemos tenido incluso cuando los pequeños 20 años atrás 30 años atrás coches conceptuales con formas hermosísimas que había de oír no están en el mercado ya ha pasado en 30 años por qué porque la gente se adapta muy lentamente a los cambios más lentamente a los cambios que los creadores el usuario y el consumidor es más lento en adaptarse a los cambios que los creadores ingenieros diseñadores lo que sea por tanto cuando el cambiar un coche no sacar un modelo nuevo lo cambian completamente es lo mismo que antes con unas pocas líneas cambiadas y ya está con los años sí que van cambiando pero poco a poco la web nuevos la web es igual tú no puedes hacer una web sin y piti flautita completamente diferente a las demás porque la gente no va a gastar esfuerzo mental en ver tu web lo que tienes que hacer es en gran medida seguir las reglas que están imponiendo los demás y cuando conozcas esas reglas entonces saltarte las simple la regla es la misma con los de las reglas cuando las conozcas sabrás cómo saltarte las en usabilidad debemos buscar la consistencia voy a sacar una página web drá esto es una página web aquí donde puedo y donde no puedo usar donde donde puedo no puedo hacer clic os veréis yo puedo hacer clic aquí parece que sí porque tiene forma de botón así que en mi cabeza se crea un módulo mental en el que digo parece que en esta página los tres vínculos son botones cuadrados rojos vale voy a ir agregando más abajo y me doy cuenta de que hay un botón azul mi modelo mental se alteró un poco nos altera demasiado y dice en este botón es cuadrado como este la tipografía es la misma así que bueno como soy un ser humano de mar – por delante a los cambios veo que es también será un botón el problema viene y sobre todo viene para la gente mayor cuando llego aquí abajo y esto qué es también es un enlace y por tanto si es un enlace es un botón y esto es yo también lo es luego hay dos lenguajes visuales hay un pequeño fallo de consistencia en esta página web yo porque sé que esto es un enlace porque mi modelo mental incluye visitas anteriores a otras webs y me suena a que he visto que en otras webs cuando tengo un texto de color azul cerca de texto negro ese texto se puede pinchar un momento mi modelo mental me puede orientar y también me puede engañar hay otras páginas donde yo he visto que cuando hay un icono es que puedo pinchar en el icono pero en este caso no mi modelo mental no siempre va para mejor también puede ir para peor el problema en este caso es que hay fallos de consistencia internos y fallos de contingencia externos los externos no nos podemos arreglar no podemos cambiar el mundo pero los internos sí cómo es posible que en una misma página y esto insisto una vez más es muy difícil de decir pero muy difícil de osh es muy fácil de decir pero muy difícil de hacer y es que no puede ser que para la misma función tengas dos formas diferentes porque debo tener en cuenta que si estoy al lado de una persona mayor esa persona mayor me dirá oye porque lo de abajo también es un hipervínculo bueno pues yo le responderé mira es que es por esta razón y por esta otra si esa persona mayor está sola pueden ocurrir dos cosas que cambio de página o bien que se vaya al internado cuanto más tiempo pasa lo que ocurrirá es que se vaya a otra página vale esto es la consistencia la consistencia en usabilidad es intentar crear un lenguaje visual y sobre todo una navegación consistente si usas botones para navegar usar botones en todo el sitio si usas hipervínculos de color azul o usa hipervínculos de color azul en todo el sitio tal forma que cuando alguien pase los 10 primeros segundos de tu página y diga vale los vínculos son de color azul pues ya sé que todo lo que me encuentra en la página va a ser de color azul y no esté constantemente página a página redescubriendo la navegación porque la gente se cansa de redescubrir porque tú crees que es divertido pero la gente no tiene tiempo ni recursos mentales no porque no los tenga sino porque no nos quiere tener para aplicar en tu página para gastarnos otro página la gente tiene muchas preocupaciones en la cabeza como para que encima están aprendiendo en tu página cómo se navega debemos mantener siempre que podamos listo la consistencia dentro de la web el modelo de sandwich es simplemente una costumbre que existe y que está ampliamente difundida en internet a día de hoy el modelo de sándwich es un modelo partido en tres trozos la cabecera que nos informa de la identidad el eslogan en la información el contenido está en el centro es la chicha y el pie de página de información adicional quiénes somos a la llegada del primero cosas así a la gente le gusta el modelo de sándwich porque mirad puede sacar una página bueno y voy a por ejemplo un periódico digital es más voy a sacar mi página de favoritos tengo un montón de de páginas guardadas país ya lo tengo podríamos abrir el mundo y todas tienen cabecera con identidad corporativa menú de navegación contenido en el centro y pie de página abajo el mundo identidad corporativa menú de navegación antes te explotan contenido en el medio y tiene página abajo la intervención española noticias 3d tecnológica identidad arriba sándwich arriba contenido bajo sostienen un poco raro la derecha abajo pie de página más cosas no está pero voy a meter hasta el punto com tengo realidad tienen favoritos y te siente la corporativa vino un contenido y pie de página abajo en tres en la página que entres los twitter wikipedia múltiple ideas nunca es un poco especial entidad que por encima arriba voy a hacer english y entre la corporativa arriba en el caso de wikipedia nacional en medio de naciones la búsqueda contenido y abajo tiene página la gente está acostumbrada al modelo de sándwich el modelo de sándwich os guste o no os guste es lo que hay actualmente yo no sé qué habrá en 10 años pero lo que hay o bien días de modelos admita webs que no estaba hace 10 años por eso es una buena apuesta la gente cuando entré en tu web va a intentar buscar el modelo de sándwich cuando busquen cómo navegar vale ir arriba a la derecha cuando busquen quién eres quién eres manera arriba de izquierda cuando busquen en el aviso legal van a ir abajo al pie de página no es una buena idea que a menos que tengas contra idea mejor todavía si no sabes qué hacer las modelo de sandwich la zona de scrolling es aquella a la que solo puedes hacer acción de spray y por tanto en un periódico digital esta de aquí arriba cerrado que mala fortuna esta vez es pasado la zona de nuestro link es la que veis aquí en la pantalla la zona de eshkol y es la que solo veis cuando hacéis scrolling no es que no hagáis scrolling la usabilidad la teoría de la usabilidad dice que debéis no hacer scroll pero claro si tienes contenido que poner en tu página tienes que poner scrolling lo que al final se dice es tened en cuenta y esto está probado empíricamente en la página youtube.com hay un artículo bastante bueno de esto el 80% de los usuarios no hace scrolling si no le convence lo que ve en la zona de los crol y me estoy refiriendo a una primera visita si yo de una publicación digital y la veo todos los días aunque no vea algo que me interesa la primera página en la en la zona de los clown bajaré hacia abajo eso no cuenta le estoy diciendo en la primera visita en la primera visita tienes que poner toda la chicha arriba toda la chicha todo lo que sea interesante tienes que enganchar al usuario para que le dé ganas de entonces ir hacia abajo es lo mismo que recomiendo cuando enseño a la gente a hacer portafolios de diseñador con lo mejor al principio no te dejes lo mejor para el final porque porque yo como tantas otras personas he trabajado una temporada de oteador en una empresa y de seleccionador de currículums y cuando trabajas de eso tienes como 100 portafolios encima de tu mesa si tienes 100 portafolios y cada uno de ellos tiene 20 imágenes no miras las 20 miras las cinco primeras y si en las cinco primeras no te ha gustado lo que ves pasas accidente portafolio luego en web es igual lo mejor que tengáis ponerlo al principio en este vídeo vamos a hablar de la anchura de la página y haces lo que hagas como podéis leer en la primera línea no puedes acertar no vas a acertar es imposible no puedes hacer una anchura de página que contente a todos los usuarios para unos la página se quedará pequeña para otros la página quedará justa para otros quedará muy grande porque porque cada usuario tiene una resolución de pantalla lo mejor que os puedo recomendar sin duda alguna es usar google analytics o statcounter o cualquier otra aplicación que se dedica a registrar tus visitantes qué características tienen por tanto mirad voy a abrir una pestaña con analytics sanín voy a entrar cualquiera de las páginas donde tengo analítica voy a entrar la mina principal en el blog y mirada atención en tecnología navegadores es tema operativo por aquí por alguna parte vais a ver chrome e incluso si voy bueno esto está por aquí en alguna parte en la vista del contenido podemos ver incluso la resolución que tiene vamos a verlo no encuentro un salir de fase beta por aquí una de las zonas de analytics me dice las resoluciones que tienen los usuarios en base a eso yo lo que puedo hacer es establecer una resolución intermedia que contente a la mayoría de contenta el 50% que contenta el 100% o que contente al porcentaje de visitantes que me interese lo que os voy a decir en definitiva varias veces es que tenemos que usar analytics o cualquier aplicación de analíticas para poder conocer cuáles son nuestros miles visitantes y tomar decisiones adaptadas a nuestros visitantes y no a cualquier otro visitante de cualquier otro sitio web el caos que en este caso ya ha encontrado la solución de pantalla está en un 18 bueno realmente da igual cómo esté fijaos que fragmentado que está no puedo favorecer a alguien directamente por tanto lo que voy a hacer es decir bueno con 1280 y 1024 o con 1440 por ejemplo con esta contento al 13 más y 18 más el 11 más al 10 al 9 no al 10% no a 1024 sin al 5 no a 1.600 no contentó a todos menos al 18% por tanto 1440 contenta prácticamente todo el mundo 1080 contenta más personas todavía vale porque contento también a los de 1300 y a los de 1440 en definitiva debo saber cuáles son yo tengo una página más bien tecnológica y mis usuarios actuales con otros de pantalla bastante amplios podría tener una página mucho menos tecnológica con la que la gente entrara con tamaños de pantalla mucho más pequeños entonces tenía que hacer mi web mucho más estrecha para asegurarme que se vea correctamente en la mayoría de visitantes que entrar en mi página esto es solo una variable de lo peor la segunda variable es que también debo tener en cuenta y esto es un poco investigación de mercado primero que monitores no habrán ahora si no abran el año que viene y al otro qué precio tendrán y qué rotación de monitores estimo que tendrán muchos usuarios porque queremos tener en cuenta que si un diseño no sale bien puede durar dos o tres años por tanto si lo hago pensando en mis usuarios de hoy y mis usuarios de mañana tienen otra resolución web depende como haya dicho el diseño puede ser fácil cambiar la anchura o puede no ser nada fácil igual a un diseño que se cambie la anchura se me d’esquadra todo y tendría que rehacer el diseño vale por tanto a veces vale más tirar un poquito por arriba esto no solo en resolución sino también un poco en todo aquello que tiene que ver con web y hacer cosas que quizás hoy no sean 100% compatibles pero que mañana sí que lo sea mejor que hacer algo que hoy sea 100% compatible pero que mañana esté desfasado y cuando digo mañana no es mañana mañana pero es igual al año que viene el siguiente componente del que vamos a hablar es el logotipo realmente compuesto por el logo y la tipografía que representa a la marca oa la web que estás presentando en cuanto al logotipo en el modelo de sandwich y esto lo podéis comprobar en la página que queráis el logotipo se encuentra arriba a la izquierda se encuentra en el header se encuentra arriba a la izquierda de la derecha solemos encontrar el menú hay algunas excepciones donde podemos encontrar el logotipo centrado en el xerez pero lo normal es que la imagen corporativa esté arriba de la izquierda porque porque todo el mundo la tiene ahí tu cliente de tu usuario espera encontrarla ahí y el logotipo es algo que da bastante rabia desde el punto de vista del diseño web porque es algo que tu usuario va a ver no tiene unos cinco segundos lo va a encontrar va a decir vale he puesto esta página estoy viendo este logotipo me cuadra luego me fío luego he llegado al sitio que yo esperaba y a partir de ahí nunca más volver el logotipo el problema está en que cada página que cambies aunque vayas a varias páginas tienes que seguir poniendo el logotipo porque sin alguna página no pones el logotipo tu usuario dirá qué pasa aquí es como una ancla es como algo que te ayuda a sentirte pegado a la página si al momento ya no aparece el logotipo puedes pensar acaso salido de la página sin haberlo querido acaso me han llevado a otra parte sin que yo lo haya autorizado vale por tanto el logotipo y esto no estoy diciendo lo que me gusta a veces que me gusta decir algo tipo en otra parte voy a hacer una pantalla partida a la mitad lago tipo de izquierda nada en el logotipo arriba a la izquierda como siempre os y en usabilidad os lo voy a decir varias veces no os estoy diciendo lo que obligatoriamente al cien por cien tenéis que hacer os estoy diciendo lo que la gente espera encontrar si te quieren saltar esta norma te la puedes saltar pero si pones el logotipo en otra parte de la pantalla que sepas que el usuario va a tardar tres segundos en buscarlo y si no lo encuentran tres segundos se va a ir ya que si lo puede ser otra parte de la página que el usuario no tarden más de tres segundos es decir a valero hasta aquí arriba pero está aquí abajo que estoy satisfecho una cosa te voy a decir que se opone a lo que dije anteriormente y es que además el logotipo debe ser un enlace a la página inicial del sitio de la gente espera el logotipo también es una especie de tabla salvavidas cuando alguien se pierde dentro de la página la gente suele entender que si haces clic en el nuevo tipo llegas a la página principal esto está en contra de lo que dije anteriormente de la operación consistente porque evidentemente es imposible que además el logotipo tenga forma de botón el único que se salta esto el único que hace que sí que tenga forma de botón el logotipo y lo soluciona con bastante estilo como no si hablamos de estilo hablamos de apple vale donde fijaos que han conseguido mantener lo del menú arriba en la cabecera con imagen corporativa además no se puede permitir reducir la imagen corporativa a la manzanita porque todo el mundo entiende lo que es la manzanita el menú y además han conseguido que el logotipo sea un botón y no quede mal sino que está integrado perfectamente bien en la botonera así que este sería un ejemplo bastante único bastante poco frecuente desgraciadamente de cómo cumplir las dos cosas como cumplir imagen corporativa arriba a la izquierda integrado con el menú y además una navegación consistente por qué es un botón más del menor siempre que puedas y esto lo hemos hecho anteriormente aplicando fuentes a css3 por el texto en letra y noáin imagen porque porque va a mejorar tu posicionamiento porque cuando google entre en tu página lo primero que quiere es que se indexe es el nombre de la página el problema es si el nombre de la página está en una imagen está en un jpg google no va a poder leer dentro de esa imagen es únicamente podría pero pasa de ello dice para qué voy a leer por melo tú el texto si usáis siempre que podáis poner siempre que puedas fuentes en css3 podéis poner el título en texto legible y además darle la fuente tipográfica con el destino que quieras otra cosa es no sabemos imágenes corporativas que no puedes reducir a la tipografía hay veces que la imagen corporativa tiene algún juego de tipografía o algún dibujito que no puedes poner con tipografías css3 vale en ese caso en definitiva con lo de la imagen hay trucos dejan de ser trucos cuidado para poner el logotipo en imagen y luego compensarlo con otras cosas poniendo por allí en otra parte el título en texto o donde sea pero siempre que puedas poner el texto en letra y no en imagen el menú se suele encontrar el usuario espera que lo encuentres porque porque cada día más páginas lo tienen ahí en la parte superior de la interfaz en la cabecera a la derecha del logotipo por tanto la distribución más esperada suele ser en la cabecera del logotipo de izquierda a la derecha insisto los estoy diciendo lo que a mí me gusta sino empezar a ver web para ver web y es como cuando empiezas a ver muchas películas americanas que creen que son todas únicas para financiar todos iguales entonces tienes tu presentación el principio del personaje es la trama de la película el desarrollo y al final donde ganas bueno unas páginas web dinero son iguales y al final de mes arriba la cabecera con el logotipo del menú abajo el contenido y abajo del todo el pie de página el usuario espera encontrar la imagen corporativa que la izquierda creo que esta repetición de la anterior a sitios odio de barra el menú básicamente debe tener forma de menú otra vez voy a poner el ejemplo de la página de abril porque es bastante bueno en cuanto a que el usuario no entiende lo que es un híper enlace pero entiende lo que es un motor fijaos qué proceso en la página de apple hay muchas consideren en forma de botón es algo tan sencillo como simplemente recuadrar el texto con algo que la gente pueda confundir con un interruptor de pared o con que la gente ve un botón diga como el de mi casa y pudo pulsar el interruptor de la pared también debe pulsar este interruptor igual que si vais a google igual que el sevilla google cada día más me encuentro cosas con forma de botón ale por tanto intentar que vuestra botonera intentar que nuestro menú tenga forma de botón a partir de ahí lo que tenéis que hacer es poner las secciones principales que va a tener en nuestra web en esta botonera y atención una un ejemplo práctico de la agregación consistente si aquí pone stormare hay ponga de forma y para títulos soporte cada menú en el que entres debe tener la misma del mismo contenido si yo entro en un periódico digital españa el mundo europa deportes en el que seas litro de españa aquí deben seguir poniendo españa el mundo europa los deportes y luego aquí si quieres en segundo nivel que hace es un menú contextual un submenú adaptado lo que tú has pedido de servicio de españa esto es un pequeño proyecto un pequeño una pequeña y si yo voy a vivienda y si yo voy a cultura aquí arriba siempre tiene que aparecer el menú con los mismos elementos porque haciendo esto la gente primero se empieza a hacer un modelo mental de cómo esta página ese modelo mental sabe que le sirve para cualquier página y la gente se siente tranquila porque sabe que el menú es como una especie de tabla salvavidas si en algún momento me pierdo es más seguro que me pierdo porque en un pórtico digital hay mucha profundidad de contenido si hay que pinchando arriba voy a poder volver a cada una de las secciones grandes y sé que si pincho arriba ves como la imagen corporativa es un enlace a la página inicial sé que me voy a poder guiar y el problema está cuando dice este hombre solamente en deportes para que quiero ver nacional internacional te voy a cambiar el menú y la gente de como el menú de arriba va cambiando y dice no me sirve para nada lo de arriba porque cada vez que en cada página que entreno voy a tener que estudiar otra vez para tener en cuenta que la gente va a puestos bajos cuando por internet yo no tiene romperme las neuronas que lo que quiero es llegar rápido fácil y bien esto es igual si tú haces que el menú sea siempre igual en todas las pantallas estás navegando rápido cada día más se hace imprescindible en una web tener un buscador porque pues porque la gente cada día más usa google antiguamente la gente tenía alguna que tendría una perspectiva jerárquica de la búsqueda de la información quiero decir con esto con una perspectiva jerárquica que si tú querías buscar algo no había google había enciclopedia y toda la enciclopedia primero tenían que localizar cuál era la primera letra de la palabra aquellas buscando del término que nunca para localizar el tono que correspondía y a partir de ahí coges el tomo si es jerarquizar la información a partir de ahí abres y dices van a estar la primera letra bajos la segunda letra y según la segunda letra te vas al principio al medio o al final del tomo y vas buscando alfabéticamente lo tenías eso es una búsqueda jerárquica jerárquica por orden alfabético cuando internet nació nacieron los directorios los directorios es como una especie de agencia telefónica no puedes ver dónde páginas amarillas pero por categoría y no solo por negocio aunque terminal de negocios directorio y buscar un centro de formación post directorio alimentación no ocio nuevos centros de formación mira aquí y eso es una búsqueda jerárquica centro de formación de baile no del música no de informática mira de estos buscando mientras otra vez y han tenido es una búsqueda género chicas por categoría pero google está cambiando de los buscadores están cambiando no sólo esta manera de buscar a nuestra manera de pensar entonces cada día nos preocupamos menos me cuál es la jerarquía de contenidos que estamos buscando si no nos vemos como acostumbrado la gente dice esto es que google está haciendo el ser humano tonto no es así si perdemos eso a cambio ganamos otras cosas perdemos la capacidad de jerarquizar que hagamos la capacidad de sintetizar porque hay mucha gente mayor cuando llega google dice quiero averiguar el resultado del partido de la eurocopa del estado que obliga a quitar toda la paja ya poner sólo los términos importantes resultados partido eurocopa sábado vía tal ganamos las cosas perdemos otras el problema está en que los ministros que está hablando de la vía positiva anterior es una búsqueda jerárquica mientras que cada vez más todos usamos google y tener esto en cuenta si tú usas google y si tú cada día yo por ejemplo voy a decir un ejemplo yo soy muy vago rsc yo me gusta ver la parrilla de programación de televisión del país del diario de país porque pues posiblemente porque de un vistazo lo veis todo pero yo ahora mismo no sabría si yo entro en elpais.com yo no sé llegar a la parrilla de televisión por qué pues porque está por ahí dentro de cultura dentro de televisión dentro de parrilla tengo que hacer tres o cuatro clics para llegar y realmente hay veces que el modelo mental verdad no me acuerdo cómo se llega pues yo lo que hago es poner programación dv el país y con un bien llegó y este es un caso anterior de escribir evidentemente este es un caso donde buscando en google he llegado antes que navegando a través de la propia página web el problema y aquí de un vistazo tienes todo lo que estaba buscando para abajo el problema en este caso es que si yo lo hago hay más gente que lo hace y si yo lo hago con la página del país hay gente que lo puede hacer con mi página luego teniendo esto en cuenta que he hecho en mi página o casa puntocom ojo suficiente carretera puntocom no es lo mismo pues lo que hago es decir mira tienes blog tiene sobre mí tienes noticias tienes descargas y luego tienes próximas formaciones y luego tienes centros los que imparte formación y luego me cuenta a twitter y noticias noticias y categorías yo ya un momento que digo esté perdido tanta información que el usuario que llegue se puede perder está buscando algo específico igual no sabe dónde encontrar lo que hago un buscador y en la mayoría de periódicos digitales un buscador y aquí un buscador y cada vez más gente incluye un buscador en su página aparte de evidentemente hacer bien el seo para que google el xxi bien pero sin fiarse de google sin esperar a que en google vas por tu página y trend exe bien todo en un buscador dentro de tu página porque porque cada día hay más gente que pasa de esto y se va directamente a esto yo no sé dónde en qué sección está cómo se llama yo soy es palabras clave si las palabras clave les quiere buscar por lo tanto si cada día más usamos los buscadores y la gente se está acostumbrando en lugar de menús quieres buscadores así que siempre que puedas por un buscador en tu sitio esto igual que las migas de pan es algo muy fácil de decir no tan fácil de programar sin embargo si tenemos cuidado y si usamos php jamás pib podemos programar no es un buscador para nuestra página con no demasiada complejidad las migas de pan son esa información que aparece en muchas páginas web que te dice dónde estás y cómo has llegado a esa parte y sobre todo cómo puedes volver atrás por tanto tener en cuenta los siguientes pero un poco como hansel y gretel los usuarios se van a perder en tu web en cuanto a cesc una web con más de tres niveles da por hecho que usuarios se van a perder da igual lo bien que lo hagas se van a perder mitad por culpa tuya mitad por culpa suya pero ya no es cuestión de quién es la culpa sino de cómo solucionarlo así que además los usuarios van a cometer errores yo antes he dicho yo cuando voy a buscar la programación del país pues igual entro en cultura porque creo que en cultura estará a la programa de la televisión aunque a veces más en cultura agricultura pero que se va a hacer y yo empiezo a buscar y digo a ver libros cine música teatro danza la televisión por un segundo haya pensado me había equivocado televisión pues creces entras en televisión y no está la programación sino que ésta está pasando ser es televisión estrenos audiencias en televisión titulares yo no quiero nada de esto no tiene que me hables de aníbal y no quiero que me estés de esta serie si no yo no no veo dónde está la parrilla de televisión luego puede ser que mitad este periódico digital haya estructurado mal la información o puede ser que yo me haya equivocado igual si me sentara con alguien al lado del país mediano hombre es que fíjate que la programación está en cultura pero está no sé dónde está en un sitio que no es pinchar la mitad de ellos lo han puesto mal me tardo me equivoqué como eso va a pasar eso tienes que aceptar que va a pasar los usuarios van a cometer errores tienes que poner migas de pan que indiquen al usuario dónde está qué pasos haya llegado para dar a ese sitio y cómo pues puede volver fíjate que en este caso no se me está hablando muchas migas de pan simplemente la miga de pan una mini miga de pan podría ser esta etiqueta de aquí como diciendo hey estás en cultura porque fíjate que el menú te está diciendo nos en esta flechita el señor héctor política la publicidad aquí tengo la flechita es una mini miga de pan pero ya es algo de asado para decir ostras de aquí arriba donde estoy ciudad los que están usando una mini unidad de pan de color si estos naranjas porque está en el bloque naranja si esto es rosa es porque estás en el bloque rosa y además una flechita porque por si me hubieras pillar otro dice estás aquí para que en cualquier momento sepas dónde estás y sepas cómo puedes volver atrás y sepas cómo puedes cambiar de bloque dentro donde estás buscando cuáles son ejemplos de migas de pan que debéis buscar porque insisto navegar nosotros pensad cómo navegar y veréis que cuando os equivocáis buscáis ayuda si nos queréis ayudar a ofrecer ayuda a muchos usuarios ballers una vez el usuario se ha situado y aquí no estoy dando tanto de periódicos digitales sino de comercio online son lo primero de contenido que el usuario mira donde una imagen vale más que mil palabras pero estás viendo si estás vendiendo algo el primer la primera regla del comercio online es el usuario no puede comprar lo que no puede ver si un usuario de algo muy bonito pero no ve el botón de compra ya el usuario día es bonito pero no sé cómo comprarlo fuera a un tienda online es decir si ponéis algo atractivo como para que la gente a primera vista al impacto quiere comprarlo poner grande de botón de comprar ya es una tienda online bueno voy a poner otra vez para ilustrar lo de apple esto es un banner son los datos que ser bastante efectivos es un panel que muestra el producto en el cual si pinchas error a poner aquí compra ya pero sin embargo si hago clic fijaos que a partir de ese momento vaina o cómpralo ya se me voy a la página de veis ese es un manera superchulo es un banner súper sencillo que te muestra un producto pero está mostrando perfectamente y te dan ganas de comprarlo te dan ganas de comprarlo ya cañar arriba pinchar antes de que te des cuenta de que estaba el doble por algo pasado y si yo voy a amar y señor veis aquí no tengo todavía ningún producto pero si os digo quiero comprar un macro bueno cuando tienes un patrón de compra doña si yo me voy por ejemplo a la página de la serna vamos algo más cercano el banner el banner es esto de aquí arriba no es un bar es muy bueno esto se podría construir un banner aunque realmente no lo es productos grandes más vale una imagen que mil palabras’ por la imagen que a la gente le gusta comprarlo esto como estamos esto me está ocultando la televisión y por supuesto siempre el enlace para que la gente haga clic y pueda añadir a la cesta si el botón no está en la página principal por lo menos primer clic en el botón de compra es decir que quiere comprar te encuentres otros fácilmente el corte inglés’ eso es un señor manera eso es un bar el perfecto además en el caso del cortinglés un banner que va a dar dos vueltas tiene varios elementos y va a dar vueltas pero fijaos tiene imagen o tiene ese libro y tiene la oferta en el texto tiene del sofá o me gustaría estar ahí con el texto decimos dentro de financiación soy una tía diario bikini más bonito lo quiero porque a mí me tener al igual que esa chica pues algo que tengas imagen una imagen atractiva una imagen clara y la palabra con el descuento y también por supuesto regla de oro que el banner sea pincharle no hay nada que frustre más que decir me gusta este bikini no quiero comprar y luego donde encuentro semana es perdido el cliente si algo te gusta clic quiero ese libro pues para tomar libros elige el que quieras y comprado ya por tanto banners pero con palabras en un montón de compra banners deben estar enlazados al producto que está aprendiendo porque si no estás perdiendo el tiempo y error corte inglés error de dejar suficiente tiempo para que se lea de selección bueno aquí hay mucho que leer pero 15 los regalos de televisores eduardo mendoza el enredo de la bolsa no mal tiempo a leer dejar tiempo para que los banners se puedan leer incómodamente la bbc tengo por ahí y recordado él el enlace de mi página de enlaces en la página de la bbc [Música] y tengo este manera pues en los vales de la bbc van bastante rápido sin embargo fijaos que a veces no ve al tiempo a leerlo igual no es prueba de la bbc y buenos problemas de que mi inglés si no es muy bueno tengo que ir leyendo poco a poco pero lo bueno de la bbc dejaros software word mitt romney eso federmán mont que gana una nómina la mitad el por lo menos tienen su botoncito de pausa quieres pausar vale puedes hacerlo ya te has cansado tienes ir a la siguiente muy bien puedes hacerlo la bbc dentro de que tiene una velocidad de banners bastante alta tiene por lo menos en compensación este menú yo os recomiendo poner siempre que podáis este menú la pasada porque de javascript veremos cómo programar ese menú en pero en definitiva tener un poco de todo y luego encima si ponéis atención esto mucha gente lo pasa por alto pero si encima arriba ponéis las miniaturas de los iconos ya mejor todavía porque estáis diciendo a la gente cuantos website y ahora el corte inglés entró aquí digo bueno cuántos van a ensayar me tengo que esperar a pasar una ronda entera para decir parece que hay tres pero tengo que esperar a ver por aquí ay mira si está aquí bajo no leen esto perfecto pues siempre que podáis vender una cosa de estas si tendréis un balde rotatorio inventéis la cantidad de diapositivas y encima mente y son dos botones de play de pausa delante de atrás y ese banner es una imagen bonita y tiene un poco de texto y tenemos donde compra habéis encontrado la ola perfecta ahora tenéis el balón perfecto en la mayoría de páginas web están construidas con ladrillos los ladrillos nos ayudan a jerarquizar la importancia de la información donde la información más grande tiene ladrillos más grandes y está más arriba y conforme vamos bajando los ladrillos se convierten en ladrillos más pequeños dispuestos los labios siempre en ejemplos letra más grande y cuanto más arriba letra más pequeña cuanto más abajo mira yo me voy a la página de apple persona poner mucho como ejemplo como veréis un vídeo arriba un ladrillazo que es el banner cuatro ladrillos más pequeños que son los destacados pero si es que entró y dentro del centro dentro de mano veo un ladrillo 3 cardillos en este caso está bien y de otras columnas 1 2 y 3 más que el mismo pero empezó con 1 2 3 y 4 y luego aquí abajo aunque ya que no tiene página es 1 2 3 4 5 6 7 más ladrillos o sea perdón menos ladrillos más importantes arriba más ladrillos menos importante abajo cuál es el tamaño de la letra mirar el tamaño de la letra la de yo principal pedazo al título conforme vamos bajando una letra más pequeña pero todavía elegible conforme vamos bajando atrás más pequeña y más pequeña y más gris y menos legible vamos a ver más ejemplos otro cambio digital porque siempre con los mismos para que no voy a es que está preparado no voy a sacar más vamos a abrir la bbc ladrillazo de hecho la libertad sobre estar en dos o tres columnas más pequeño veis títulos grandes títulos un poco más pequeños uno y dos bloques aunque realmente hay 3 1 y 2 1 2 3 y 4 estos son ladrillos 1 2 3 y 4 y aquí ya voy a empezar un poco el esquema washington post’ drá ladrillo ladrillo pero voy bajando y cada vez el texto se hace más pequeño y cada vez los bloques de anuncios 1 2 3 y 4 se vuelven más pequeños por tanto arriba es no mares a tus usuarios con muchos elementos por un elemento grande y claro y quien quiera marearse que vaya bajando side periódico alemán fijaos la bella zona una imagen clara una imagen concisa titulares grandes resúmenes pero conforme voy bajando atención conforme voy bajando mirad ya tengo imágenes más pequeñas títulos más resumidos tipografías más pequeñas esto es hay vamos a ver claro el site y tengo imagen grande o apañado pero a partir de aquí voy bajando voy bajando y cada vez ladrillos más pequeños luego hacer vosotros igual al en ladrillos grandes fijaos que utilicen el mismo ejemplo tanto en páginas de comercio electrónico como en páginas periódicos digitales hay cosas son diferentes pero muchas cosas son más iguales de las que os podáis pensar vamos a hablar ahora de imágenes y usabilidad como te podría decir yo como te podría decir yo no uses imágenes de relleno anteriormente en la teoría dispositiva os he dicho en banners usa imágenes claras imágenes bonitas pero ahora os vivo usa imágenes reales no hay nada peor que usar una imagen de biblioteca porque la gente al final usa las imágenes de biblioteca y abusa de ellas y el usuario el consumidor se acostumbra a ellas por ejemplo entro en 9 no hay punto hereje mira esta buena señora y esta cosa de hace ocho años dentro de semana y lo mejor yo voy por mislata por la avenida principal y está esta misma foto en una clínica de blanqueamiento dental claro por qué porque el modelo se presta bajo de casa bajo de mi casa hay una tienda de cocinas que se llaman house hay una chica en la pancarta de la entrada que está súper contenta dice guay porque es como que ya tengo mi cocina esa chica me la encuentro por todo internet y por toda valencia está en una foto del kily police anunciando no sé qué y está en otro catálogo de los a donde se encuentran y si entras en el país o en el mundo digital está en un anuncio de juega lotería online y ezcaray sáchica es comprar una cocina la lotería anuncios no sólo que hay polis no es una foto de edad y lo peor que puedes hacer es si tienes por ejemplo algo como un despacho de abogados ni se te ocurre a poner la típica imagen de abogados profesionales de corbata hacer un tratos poniendo así la mano otra cosa es que te hagas una foto a la gente que hay realmente en tu despacho de abogados y pongas esa foto como el que estamos enseñando que estos somos nosotros esos suma puntos eso es positivo en cuanto a la gente huele una imagen de biblioteca típica de wil madre mía yo conozco a dos personas en ese segundo el de abogados y ningunos es personas y es más miras de las personas y dices tienen más pinta de modelos quiere ser cara la carrera de derecho aunque tú dirás porque no pueden ser muy guapo ya sé que será la cara de derecho pero fin el caso es que los ves y dices no me cuadra y al final la gente empieza ya a conocer las imágenes de biblioteca eso resta puntos porque dice es al final tú no lo has hecho para mentir a la gente sino para poner un poco de relleno visual pero la gente siente que mutilar engañado como que le han querido vender que son los abogados del bufete y realmente no lo son y la gente dice se va a engañar en esto en que más de estar engañando vale así que pone de imágenes sí pero imágenes descriptivas no imágenes del relleno ya que si no lo haces la web para hacer una plantilla a la que tras bajado de año de miles de plantillas que disponibles distingue tus imágenes y pone imágenes claras buscar buenos ángulos hay veces que por ejemplo en el caso a través del bufete de abogados que vas a hacer una foto busca un rincón soleado si hace falta bajar de la calle o si hace falta no te vayas a la calle de un parque oa la playa o verde a una localización aumenta el gusto de las ciencias desde un sitio que quede bonito coge un día que haya sol directo del mundo que sonría y que se vista bien al menos por ese día y hace una foto bonita porque si haces una foto real con la gente de la empresa pero esto en un día nublado en el rincón más oscuro de la empresa y la peña llegar sin afeitar pues de terminar para eso mejor no pongas foto no pongas ni de relleno ni la real si va a quedar mal no pongas fotos vale si vas a hacer una foto no oyen digamos ya que te estás vendiendo a los abogados de la empresa sino que está viendo unos productos que has hecho por ejemplo vas a hacer una tienda de coches de segunda mano no cojas los coches que vas a vender y les hagas la foto más rápida y más chunga que puedas el típico coche en un garaje de segunda mano que está encajonado entre muchos coches que queda claustrofobia no antes de meter el coche en el taller en un rincón soleado en un pasillo que quede guay el fondo le haces una foto al coche y el estudiante un poco los ángulos dedica dos tardes a saber que queda mejor las fotografías desde delante desde detrás desde abajo cuando me traen uno más croma nito pues algo así para que se vea como refleja el sol es decir pasa tiempo buscando el mejor ángulo para las fotos porque en el caso de un coche de segunda mano la gente va a comprar el coche va a llamarte según la foto que ha visto en internet sin internet hice un madre mía dinero del coche sólo lo arrancó se desmonta igual es un discurso muy bueno porque la foto está mal sacada igual que a veces acá es una foto que es madre mía que parece foto para funcionario y es un coche que va estos kilómetros y cae a trozos por tanto en fotos fotos auténticas fotos buenas ponerle en cariño a las fotos no hace falta si queréis hacer un curso de fotografía pero por lo menos deben dedicarle no llegar con la cámara de estas compactas y decir vale a ver poner a los 123 pueden clara la añadió foto para la web sino dedicar un poquito de cariño al tema usabilidad el peor error que puedes cometer cuando empiezas a escribir texto ya que ya sabéis que se pueden vender tipografías personalizadas es meter una tipografía artística para dejarlo escrita a mano por ejemplo muy recargada el usuario o su estado los usuarios barra vale todos son vagos y el usuario además se encuentran con que leer en pantalla y olvidó mucho en pantalla y al finalmente una ver en pantalla pero leer en pantalla cuesta más que leer en una página de papel y los ojos se cansan más rápido leyendo en pantalla que leyendo en una página de papel por tanto con tipografías sencillas de palo ya que son más fáciles de leer que las tipografías el ifas y desde luego mucho más fáciles de leer que las tipografías artísticas y hechas a mano las tipografías artísticas dificultan la lectura así que el consejo final es no seas un artista y usa letras de palo a menos que seas un artista igual es un fotógrafo si eres un fotógrafo y des neiges que soy un artista la fotografía y por lo menos en el título quiero que aparezca una letra artística bueno si eres un artista que se va a hacer pero es que estoy cansado de ver como fets de abogados que usan la comic sans es claro porque porque saben mucho de derecho pero nada de diseño web y de saber la comic sans se usa para guarderías y para nada más si monta esta guardería no pongas la letra de palo por una letra cómica nada una letra comic sans que parece de niños pero se monta a su martín negocio de adultos por la letra normal de adultos no pongas letra de niños porque cuando lo hace se le muerte va muy bien pero cuando lo ves siempre es un problema ocio queda como más venía tengo un bufete de abogados y parece que sea el derecho infantil vamos y si existe que creo que vale así que no os complicase no intentéis innovar demasiado en esto es más entrar en alguna web que hay letra artística y veréis que los cinco minutos que nos vais por cansancio no por no encontrar la información con contenido accesible me refiero a la redacción de contenido no ya como titular lo a que tipografía usar a qué color en la letra sino cómo redactar el texto el contenido que escribes para web se tiene que redactar de manera más accesible primero porque es más difícil de leer ya hemos hablado de ello le heredó monitores más difícil que leer un papel y segundo porque tienes más herramientas de las que tienes en un papel titula correctamente si un periódico tiene que sintetizar en una web todavía más permite que la gente discrimine de un vistazo situ las correctamente la gente de un vistazo podrá saber qué artículo va a leer y qué artículo lo va a leer por qué porque un periódico de papel como es tan fácil leer y la gente está enganchada realmente aunque no haya sido el artículo que quieras por ella que éstas te lo lees y luego continúas hojeando las páginas porque un periódico básicamente es lo que hace si lohan de páginas hasta encontrar lo que quieres pero el problema está en que uno perdido digital tienes que poner artículos grandes porque sabes que la gente como mucho por cansancio visual vale el 3 o 4 y en estos tres o cuatro tiene que estar el que quiere si empieza a leer uno dos tres cuatro milanos en contra lo que querían y me dijo están cansados ya de leer igual que quería estar aquí bajo pero ya no lo has encontrado porque tres o cuatro ya no le des más por tanto la lectura en pantalla no funciona igual que la lectura en papel no podéis seguir las mismas reglas se breve resumen lo importante al principio y cuando pones un artículo resume el primer párrafo tiene que resumir todo el artículo y a partir de allí continúa desarrollando lo que está prohibido en redacción de contenidos para medios impresos es justo lo que está permitido en redacción para internet en redacción de medios impresos tú no puedes llenar de repente de negritas todos los artículos pero aquí es al revés si tú pones negritas tú estás diciendo cuál es la frase más importante de cada párrafo y permites a la gente que de un vistazo sepan en qué edad cada párrafo y vaya al párrafo que más le interesa en medios impresos imposible no existen los hipervínculos ojalá existieran igual en diez años existe cuando se fundan los medios impresos y los medios digitales no habla del kimbell hablo de cosas más avanzadas y tú dices el banco central europeo rechaza el plan rechaza porque ya hablaste anteayer de un artículo que decía eso usa los hipervínculos para eso los tienes en html deja a la gente que por un solo clic visite el otro sitio uno de los ejemplos de contenido más accesible pero que os lo dije el otro día y no vuelva a decir hoy es la wikipedia la wikipedia mola mogollón porque aparte de ilustrar lo que es la wikipedia no tiene prácticamente navegación es directamente tiene lo que quieres si yo entro aquí louis slot y no sé qué hizo fijaos que prácticamente en cada párrafo tenéis cinco o seis sea éste hombre de los programas de rusia que es rusia muy bien muy bien entonces estamos a ver es un federal que es federal eso es y no otra cosa eso es redacción accesible es forma de federalismo que es el federalismo no lo sé clic y eso es lo que mola de la wikipedia el que no es una enciclopedia cada cosa nueva que buscas tienes que volver a buscar el tomo en otro artículo va saltando a otro bastante ‘no a otro y una tarde has visto un huevo de cosas subraya usa negritas marca con fluorescente haz lo que sea aunque visualmente que te haga rulo pero haz lo que sea para que la gente obtenga en la mayor cantidad de información en el menor tiempo posible y sobre todo para que la gente pueda descartar y no leer lo que no quiere y gastar su tiempo leyendo lo que realmente quiere permite al usuario que discrimine de un vistazo discriminar este caso es bueno siempre que puedas poner un sitemap el site map es lo contrario del diseño el set map escoge toda tu web y resume la en una única página mirar vamos a lo vamos a ver si entra un apple yo tengo en la piel que puedo ver la papel principal puedo ir directamente a la tienda puedo comprarme un marco y dentro de mac me puedo comprar un montón de tipos de más me puedo comprar el macbook air applications software todo este tipo de software y además hay accesorios hay servidores de mar no se usan mucho pero los hay en esto enma globo está la sección de ipod con ipod tengo varios tipos de ipod los productos que hay los diferentes el appletv el nano con pantalla viene ahora el producto del itunes y digo wow esto se está complicando aquí el contenido ya pero con el iphone el iphone empieza para darle caña y luego tengo el ipad aunque life for generalmente como solo te venden el último no te venden varios y luego tengo el ipad light un sin soporte y al momento que dices wow no menos que tiene toda esta web bueno pues si os fijáis papel por aquí abajo tiene una cosa que se llama sitemap voy a encontrar los imac está aquí y el salmón no es más que todo lo que tiene la página concentrado en una sola página todo lo que tiene el sitio web concentrado en una sola página sin florituras ni imágenes ni leches es como el índice digamos el site map es si el sitio web fuera un libro el site map es el índice poner un índice porque google lo valoramos oyón y cada día hay más usuarios que recurren a los índices de las páginas como si fueran los índices de un libro como cuando con un libro manual sino directamente un capítulo pues cada vez más gente que usa los adeptos por tanto generales hay más veis que no es algo complejo de ese punto de vista de diseño sino antes por él para programarse hipervínculos etiquetas en html y asegurar seguro tienes vinculado todo el problema está en que cada parte de nuevo que haces tienes que dar sabía asegurarte que está en los dos sitios la parte de eso aunque veréis que hay alternativas con programación para que sea autor y se actualice automáticamente pero general sitemaps independientemente de que cuesten mucho o cueste poco formularios voy a hablar de formularios verdad número 1 si alguien está en desacuerdo que levante la mano todos lo digamos los formularios nos repatea rellenar formularios en la web por tanto dado que eso es verdad pide cuánto cuantos menos datos mejor actualizarlos todo lo que se puede actualizar en un campo select o en un campo radio button actualizarlo si las opciones para por ejemplo de género son que eres hombre o mujer no ponga que género derecha le escribe lo vamos a ver expondré tu mujer dale un radio button o uno u otro y sabes que tus usuarios que coche tuviste antes que esté en una página de cosas de segunda mano a ver no hay millones de marcas con el ford hyundai por lo que si volkswagen por audi que la gente puede hacer clic porque va a tardar menos en hacer 4 kristen tener que escribir la marca del coche y se casó luego con otros si quieres y un campo para que si no está en la lista puede escribir de qué provincia eres no pongas no hagas que la gente lo escriba las provincias de un país se pueden poner aún en un campo select y la gente quiere hacer dos clicks peak para desplegar y clic para seleccionar en su provincia como mucho un poco de scroll si el select es largo no hagas que cada uno tenga que escribir sobre todo y os voy a decir una cosa no penséis ya en los usuarios de pantalla en usuarios de pc escribe en un pc cuesta poco escribir una tablet la tableta cuesta bastante más me da igual que tengas atrás la de atrás de 600 euros me da igual me da igual que tengas un ipad escribir en una tableta siempre cuesta más que escribir en un teclado por tanto cuando ves algún formulario en tableta pide cuántos de nosotros mejor automatiza auto completa si por lo que sea este escriba de otro hombre mi nombre es no hay tantos puedes tener una política de nombres si me amó vicente por beat y deja que el sistema te diga vicente y tú dices sí vale acepto y no has tenido que escribir a veces autocompletar dar un poco de mal rollo pero si lo pones bien es como el de google y alumbradas de google generalmente permitir me falta un poquito de que esto no puerto de los días si yo busco información sobre mí porque soy un poco egocéntrico pues pongo jose beige y va rellenando vicente y antes aparecía y desde que llegué últimamente no sé por ejemplo que pongamos el hombre que deja que rellene al final esto es porque google tiene una base de datos inmensa pero al final tener una base de datos con nombres y apellidos no es algo tan recuperándonos algo tan imposible de conseguir ofrece ayuda para cada campo esto google lo hace bastante bien el que te estoy pidiendo en cada campo de radiación voy al correo de google mira correo de google no quiero crear una cuenta la nombre nombre de usuario puedes utilizar letras números y puntos arroba gmail.com eso es ayudar a un usuario el número de usuario con tú que has hecho una aplicación sabes qué reglas hay un usuario lo sabe contraseña seguridad de contraseña demasiado corta usa ocho caracteres como mínimo no uses una contraseña esto es ayudar al usuario el guiarle y decirle que debe rellenar esto es lo que hace que cuando pues el botón de enviar haya los menos errores posibles usa ajax siempre que puedas que es ajax o veremos el javascript es la tecnología por ejemplo que se introduzca una contraseña le va diciendo a tiempo real si la contraseña está bien no está mal o si yo uso un nombre de usuario me va diciendo creo que tiene me lo dice hasta que no vaya al siguiente y me dice mira atención hecho clic no está mal debes usar entre 6 y 30 como si elijo una contraseña me dice no esa ya existe es el nombre de usuario lo veis cómo ha podido saber que ya existe si no lo he enviado porque a tiempo real lo que está enviando está comprobando si existe o no y te está devolviendo el vale perfecto o no elige otro porque ya existe eso es ajax y eso lo veremos evidentemente evidentemente en javascript y eso lo tenéis que usar en vuestra aplicaciones web siempre que podáis hayáis es un poco complejo de escribir veremos una librería que se llama jquery que automatiza el uso de ajax ahora sí que automatizan decir que lo simplifica al máximo sino que avisa de tu política de privacidad esto estoy pidiendo el correo para que lo voy a usar tienes que decir para que lo vas a usar si le vas a enviar correos y nos lo vas a enviar de qué temática se le vaya el correo cada cuánto se le va a enviar correo avisa tu política privacidad avisa da mucha confianza de que ese correo va a estar guardado de una base de datos que en cualquier momento el usuario podrá hacer uso de esos derechos de oposición de implicación modificación y acceso a los datos y eso la gente de la confianza más que decir hoy no me estén diciendo que van a hacer mi correo igual lo van a vender a otra persona si es ilegal trabaja en gente que lo hace es por tanto avisa dable bits porque la gente iba a rellenar ni esto ocurre a poner una encuesta en tu web si era enseñar un premio quién va a rellenar esa encuesta y el dato rellena esta encuesta con tu correo y tendrás acceso a ofertas y descuentos antes que ningún otro usuario de la web eso es un premio eso es un caramelo en definitiva de formularios cuantos medios elementos mejor hay usuarios que son muy frikis son muy expertos hay usuarios que son muy novatos los usuarios pueden acceder a la vez a una misma web haz que tu web sea accesible haz que tu web sea igualmente de fácil accesible por gente muy experta y por gente muy novata un ejemplo básicamente de esto es en cualquiera en cualquier diario digital el ejemplo que se enseña van desde el buscador y el menú eso es un ejemplo de navegación accesible quienquiera quien esté acostumbrado o quien quiera pasar rato navegando por los menús que pueda hacerlo quien sea vago y quiera o esté acostumbrado y quiera navegar por el buscador que el buscador generalmente nuevos caminos duplicar pero en este caso duplicar navegación duplicar la negación es bueno quien busque con menús pasada del buscador quien busque con buscador pasa de los menos para todo el mundo podrá acceder a la información desde la misma interfaz ampliaciones demografía uno de esos casos en la web donde hagas lo que hagas estás entonces si tú le estás muy grande cada menos contenido y las personas jóvenes dirán adiós y letras que grandes letras esta web es demasiado grande sino letras pequeñas pero legible de las personas mayores dirán hoy es que no leo bien esta web solución mete un empleador de tipografía si yo entro por ejemplo hay muchas páginas pero si entro en la de la nube en castellano por ejemplo veréis que en accesibilidad mira hay muchas páginas que en esto hay un elemento para disminuir el tamaño de letra y otro para aumentar lo veis pequeño grande pequeño grande y al final puedes hacer que la misma web o quien tenga buena vista pueda leer el texto fácilmente y quien lo tenga tan buena lo pueda leer simplemente pinchando un motor en este caso letra grande otra pequeña hay webs que tienen hasta cinco tamaños diferentes de letra por ampliadores por la fia para personas con dificultades visuales como con javascript evidentemente ya lo veremos y así cada usuario al final como veis es una cuestión de que cada día la web sea menos estática y más dinámica y de que cada usuario siendo la misma web se la pueda personalizar para usarla y para verla como mejor le parezca insisto que esto desgraciadamente es más tiempo de desarrollo para vosotros pero más facilidad para el usuario e incluso admite la posibilidad de cambiar el css os voy a enseñar un ejemplo muy bruto no quiero que lo hagáis tan bruto como esto pero voy a entrar el c en cardel en el csc carden y mira yo aquí tengo una página pues si yo hago así puedo cargar es la misma página es veis que es la misma página el mismo contenido pero con otro css under decir la misma página el mismo contenido pero no sé si podéis ver que el contenido es el mismo se puede hacer que haya varios css en una página por ejemplo en lugar de cambiar tan brutalmente el diseño por el típico diseño de base y el diseño de alto contraste teatro contraste para personas con alteraciones visuales alteran la estética del portal esto es lo malo que si quieres mantener una imagen corporativa a veces se la salta pero a la vez te permite adaptar la página a varios perfiles de persona eso si olvídate de tablas la web no puede estar programada con tablas tiene que estar ampliamente programada con css evidentemente compatibilidad está en esta diapositiva la voy a pasar rápido porque esta es una de esas que es muy fácil de decir pero muy difícil de hacer hay muchas tecnologías en el mercado hay muchos navegadores cinco principales y muchas versiones de cada navegador intenta que tu web sea compatible con todos pero seamos realistas ten en cuenta que esto incurrirá a veces el doble o el triple programación porque a veces no es cuestión de cambiar el css si hay navegadores que no soportan css vale por tanto hay veces que te va a tocar reprogramar tu web dos o tres veces reprogramar tu web o la web que está haciendo un cliente dos tres veces requiere trabajar doble o triple y cobra doble o triple hay veces que de socialmente no y por tanto si no dispones de presupuesto usa analytics para conocerlos a tus usuarios en un corte igual te gastas un tiempo y un dinero en reprogramar la web para internet explorer 6 y luego no hay nadie que esté entrando clientes con internet explorer 6 haz la página con css por ejemplo y luego analytics y mira cuánta gente está entrando con navegadores antiguos efe vale pues voy a poner la página de inversión antigua o es más tenéis que traducir tu página cinco idiomas no lo sé por tu página y mira a la gente de qué país está entrando romeros primero acceso entonces si todo el mundo que viene por lo que sea por lo que vende eso por lo que anuncia por los artículos que haces al final vienen todos de china y defectos que hacen un acceso y se salen porque tu página está en español dice es tras un rentado de china por los por los títulos pero lo han visto que estaba en español y se han ido este tío que venía de china si se le pongo en chino igual se queda porque tengo una tienda online y vendo a nivel mundial por polo chino pero no hagas una tienda en chino sin antes haber comprobado que tienes gente de china entrando es una tienda de artículos y exportar a méxico y exportar a argentina y exportar a venezuela y de repente un día te das cuenta que hay mogollón de gente entrando desde brasil porque uno de brasil habló con uno de méxico le dijo bien ya que tiene más wire claro veces con él se exportó a méxico y exporta argentina venezuela porque no exportadoras y el problema me presionaban portugués es parecido al castellano pero un poco diferente pues en ese caso si detectas de gente que está entrando desde portugal hace una página portugal el en brasil hablan portugués pero antes comprobarlo no lo hagas a ciegas vamos a valorar de mailings no ya de páginas web sino cómo hacer las reglas básicas para hacer un mailing usable y accesible primer error primer error faltar un mailing es complejo no sé es complejo para todo el mundo aunque sepas hacerlo es complejo pero no te pases 100% de imágenes pero no hagas como todo el mundo que coge una imagen en photoshop la hace súper guay lo saca como jpg y lo mete en el mail y por qué porque si lo metes todo en un mailing le está diciendo al gestor de correo electrónico que no va a poder leer dentro de ese mail y si no va a leer no se sabe si es porque quieres ocultarle algo o simplemente porque no sabías va a quedar un mail de esa manera permite que el filtro anti-spam sepa que no vendes díaz gracia les metes un juego que no lo puedes saber y ante la duda a la carpeta de estar hacer un mailing en imágenes es prácticamente garantía de que tu carpeta de spam con mensajes claros y directos cuando tú entras en una página web tu has elegido entrar en una página web luego se supone que tienes un mínimo de interés pero cuando tú recibes un correo en muchos casos el turno elegiste recibir ese correo auto no existe recibir un buen dinero de inglés pero no sabes cada cuánto lo vas a recibir entonces la predisposición no es la misma que cuando entras en una página web y por tanto el contenido no puede ser el mismo que cuando entras una página web mensajes claros y directos si en una página web ya tres que resumir en un boletín de noticias tienes que poner solo el titular no pongas nada desarrollo no pongas rollo quién quiere saber más que haga clic y que vaya a la página donde se le va a ampliar la información intenta poner enlaces permanentes a tu sitio web que el que entre a ese mailing funcione tanto hoy como dentro de seis meses porque hay veces que hoy lees un mailing no te interesa lo más absoluto pero dentro de seis meses alguien te pregunta él te dice oye pues pues yo tenía un mailing en mi correo de mi buzón de entrada que decía algo de eso hay espera que lo voy a recuperar no quites el enlace al mailing la semana que viene porque igual la gente dentro de tres o seis meses sigue entrando asml muchas veces entran más con el tiempo inmediatamente al es por tanto por enlaces permanentes del enlace que pongas funcione el menos un par de años en un mail y la política de privacidad es imprevisible mucho más visible que en la web en la web no es tan importante porque quiere entrar ya ha entrado ha entrado manualmente pero no un mailing por siempre bien claro no hay nada que dé más mal rollo que recibir un mailing y que no te pongas como te puedes dar de baja y a la vez atención si es posible implementar una aplicación de baja automática habéis visto un montón de mailing que no es ya que te diga usted pues puede ejercer su derecho de acceso rectificación cancelación u s listo mailings que incluso te dice si usted quiere darse de baja haga clic aquí y se da de baja poner eso y ojos trace como pongo yo eso y yo os digo cuando veamos ph todos enseñaré cómo vale pero siempre que podáis y os enseñaré a hacerlo ponerlo y luego en cuanto al tracking del del mailing porque estás un mailing y tú como sabes cuánta gente lo ha leído entonces un pelín de cimientos personas y te devuelven 200 correos porque porque son correos antiguos atrasados que ya no están en funcionamiento o tienen el buzón lleno cómo puede saber que en 300 no han recibido pero de esos trescientos como sabes cuántos lo han enviado directamente a la papelera y cuántos no han abierto para leerlo pues para eso tienes las imágenes voy a las imágenes voy a enseñar a introducir las son imágenes un poquito imágenes trampa pero no os preocupéis no hace no le hacen nada malo al usuario que marcan cuántas veces alguien ha visto esa imagen cada vez que esa imagen se carga se carga desde tu servidor tú puedes hacer una estadística que diga cuánta gente ha visto de esa imagen voy a tal manera que siempre es un correo a quinientas personas 200 durante vuelto y es a nuestro han leído y la oí en la boya dice que cielo han leído pues después de 500 100 éxitos 100 lecturas lo cual no quiere decir que no van a hecho clic en el producto que está vendiendo en el mail el único problema ya lo sabéis es que hay gestores de correo que bloquean las imágenes como yahoo como hotmail o como gmail y tienes que permitir las imágenes que se puedan ejecutar yo muy rara vez lo permito sólo si conozco bien al remitente por tanto las imágenes voy a tienen ese pequeño problema que a veces no son del todo fiables hay gente que puede ver tu mailing y no a ver hasta todas las imágenes y por tanto no acepta las huellas esta diapositiva crece de importancia cuanto más tiempo pasa dispositivos ten en cuenta que ya no es una cuestión de ordenadores cuanto más tiempo pase más gente va a entrar a tu web con dispositivos con dispositivos se entiende de teléfonos móviles y tabletas la manera de acceder a la información no sé si tenéis tableta o teléfono móvil pero la de navegar no es la misma que la verdad de navegar con ratón y con teclado cambio un poco los teléfonos móviles son más incómodos de usar el tamaño de pantalla es más pequeño y se suele usar en marcha hay veces que vas andando por la calle viendo las noticias corres el riesgo de peatón otro una farola pero es que hay gente que lo hace con lo cual no puedes poner tanta tanto dibujito y tanta historia como en una página web en una página web y quieres que pone de historieta tienes que poner diseño tienes te pones floritura porque si no es que queda muy seco pero en un móvil es al revés en un móvil tienes que poner la información justa y necesaria y no poner ni florituras ni media hay una frase que es del de using puntocom que es oficina do eliminados es que si duda si algo es importante es sólo por dudar es que ya no es importante ser algo es importante ni lo dudas por tanto si lo dudas deja lo fuera en teléfonos móviles este es un consejo evidentemente que sirve para este año en teléfonos móviles simplificación al máximo igual al año que viene sacan unos telefonazos de novelas y que son teléfonos que son como una tableta no digamos ya cuando saquen se rumorea eso son rumores verdad y los rumores sí que hacen es el caso justo pero se rumorea que el siguiente iphone y el siguiente ipad no tendrán márgenes sino que será información hasta el borde y luego también he visto los vídeos conceptuales no queda mucho tiempo para las pantallas de grafeno puede que tengas como un folio así de grande flexible que te puedas enrollar en el teléfono cuando eso llegue entonces ya no hará falta tanto lo de phinda olvidado porque el novio es la más grande pero a día de hoy con los teléfonos móviles que hay hoy en día si quería pensar solo mucho antes de poner un contenido o poner otro vamos a la hora de planificación mejor nos vamos hablar en el siguiente vídeo

a continuación vamos a trabajar con javascript pero lo que vamos a ver es cómo meter javascript y dónde meter javascript es un lenguaje que puede ir suelto o se puede integrar con html vamos a hacer unos primeros ejemplos integrando javascript frank 7 ml para no tener que trabajar desde el principio con dos archivos diferentes aunque al final no haremos voy a crear un ser y voy a crear un mod por regla general javascript va dentro de la cabeza aunque también hay veces que puede ir dentro del cuerpo cuando tú quieres cargar un script y si y que se quede en memoria para usarlo cuando quieras eso se hace en la cabeza cuando quieres un script que solo se va a usar particularmente en un lugar específico de la web entonces se mete en el cuerpo la recomendación es meterlo en la cabeza para meterlo en la cabeza lo que voy a hacer es crear una etiqueta script claro hay muchos tipos de scripts que se pueden usar voy a cerrar la etiqueta script y voy a continuar diciéndole al programa qué tipo concreto de speed voy a usar para que no se confunda aún así si podéis escribir y no ponéis nada más casi todos los navegadores hoy en día entienden que escribes javascript pero no está de más quiere llegar que el tipo es texto barra javascript si yo no pongo nada más se entiende que voy a escribir el hamas fit aquí dentro si yo quiero llamar a un archivo externo simplemente tendría que poner src igual comillas y mí y javascript con extensión javascript esto sería si fue el externo pero hoy no lo va a ser por tanto voy a borrar esto y voy a quedarme con esta etiqueta atención si llevo aquí o la víctima fijaos que no aparece de color negro igual que con css entre la etiqueta de estilo y la etiqueta de estilo todo lo que se escribe es tss en javascript entre la etiqueta de script y la etiqueta de script todo lo que se escribe es javascript atención mira la pantalla veis que head budismo de html están de color verde ve qué pasa si yo quito esta etiqueta de script que estando en color negro porque porque yo he abierto aquí en etiqueta de script no la de cerrado y el programa cree que todo esto es javascript por eso primera regla como cualquier cosa abrió css html si abres una etiqueta cierra la delimita dónde empieza y dónde acaba en este caso java spears a continuación voy a decir que no puedo poner cualquier cosa en javascript hamas que ya es un lenguaje que empieza a ser un poco restrictivo no es como html que puedo hacer lo que me dé la gana e incluso poner etiquetas llamadas localiza no dejaba si tengo que poner solo aquellas instrucciones que el programa me deje vamos a empezar poniendo comentarios y al poner comentarios vamos a empezar reaprovechando cosas que ya sabemos los comentarios en javascript se ponen como en css si yo pongo barr asterisco asterisco barra equivale a decir que esto es un comentario y por tanto ese comentario no se verá en pantalla si yo ahora guardo y recargo veréis que atención el comentario nos vale en pantalla pero en javascript como el html si miro el código fuente de la aplicación veréis que javascript sale en el código igual que sale en los comentarios de html también salen los comentarios de javascript de hecho sale todo java speed paso tener cuidado con lo que escribís en un comentario no revelase más pistas de los necesarios esto quiere decir dos cosas una que tú vas a poner copiar integrar hamás que de otras páginas web y dos que la gente va a poder copiar y pegar javascript tu página web no os preocupéis porque más adelante os enseñaré a proteger nuestro javascript a codificar lo para que la gente no es que no se lo pueda copiar pero no sea más difícil copiarse uno de los primeros elementos que podemos poner es un elemento un poco molesto que no al principio nos sirve para jugar es un objeto pre hecho llamado alero y por tanto voy a poner a leer paréntesis punto y coma todos los comandos dentro de javascript cada instrucción que pongamos debe y con punto y coma esto no genera error hay veces que poner punto y aparte o sea poner un es poner aparte simplemente funciona pero ponerse este punto y coma por si acaso es como teóricamente se tiene que escribir javascript y ahora voy a poner aquí comillas comillas y voy a poner hola este objeto a leer simplemente me muestra un mensaje en la pantalla y ese mensaje en la pantalla me dice lo que haya dentro de mira me acaba de autoguardado lo que dice dentro de esas comillas si yo ahora recargo ahora me dirá hola nada muy espectacular de momento bien voy a continuar aprendiendo a usar las variables las variables en javascript y en prácticamente cualquier lenguaje de programación son contenedores de información por tanto voy a poner la palabra reservada para atención veis que es una palabra reservada porque se pone de color rojo el nombre de la variable yo elijo el nombre de la variable mi variable y ya que estamos le asignó un valor el operador de asignación es el igual mi variable es igual a 3 y punto y coma qué elementos tienen esta declaración es la palabra reservada que indica que vas a crear una variable mi variable es el nombre de la variable atención javascript distingue entre mayúsculas minúsculas por tanto poner mi variable en mayúsculas no es igual a poner mi variable en minúsculas para el programa son dos variables diferentes no es la misma el signo igual le da un valor y lo que pongas después del símil cuál es el valor que hasta la variable si ahora atención dentro de la leer quito el hola y las comillas y pongo mi variable si guardo y recargo a la media 3 la pantalla merece 3 porque yo lo que he hecho es simplemente a mi variable darle el número 3 y a continuación decirle dime cuál es el valor de mi variable cuál es el valor de mi variable estrés y por tanto me saca 3 en la pantalla a continuación voy a hacer dos cosas dentro de este vídeo voy a crear una segunda variable voy a introducir los operadores aritméticos y voy a demostrar cuál es la diferencia entre javascript y html y voy a demostrar porque hamás tintes en un lenguaje de programación y html es un lenguaje de marcado esto que he dicho varias veces y que era por fin vamos a llegar voy a crear otra variable voy a crear una segunda variable para eso mirar una línea y dibujar puedo crear tantas variables como tiran mi segunda es igual a 5 reglas para definir variables los nombres de las variables no pueden tener espacios si hago esto mi espacio segunda dará error pero más no entiende que todo eso es una variable no tiene que tener espacio si queréis separar palabras podéis hacer como yo que los disponiendo con la letra mayúscula o poder poner podéis poner un millón bajo podéis poner números en las variables mi segunda 2 pero el primer carácter de una variable no puede tener un número esto daría error por tanto poner variables con letras al final es la mejor apuesta a continuación voy a poner un poco largo para que sea más didáctico bah zuma yo que he hecho al decirle que creó una variable que se llama suma y a continuación le doy un valor porque se llama asuma y no supere sus marcas porque no el nombre le dijo yo zuma es igual a mi variable más mi segunda qué crees que pasará ahora en la pantalla vamos a analizarlo vamos a imaginar que nosotros somos el ordenador mi variable es igual a 3 y eso queda almacenado en la memoria mi segunda es igual a 5 el socket almacenado en la memoria suma es igual a mi variable más mi segunda y luego atención sea suma es igual a 8 digamos al leer mi variable que saldrá en la pantalla 38 saldrá 3 porque estoy amando a mi variable guardo recargo y sale 3 pero si de repente ahí en lugar de poner a leer mi variable zuma recargo y sale número 8 poco espectacular sí pero sin embargo damos cuenta que acabamos de hacer una operación aritmética de suma en html y css en ningún momento podríamos hacer una operación algo tan sencillo como una suma esto es un programa acabáis de hacer un primer programa en un programa un programa que cumple la siguiente condición y es que tiene una entrada la entrada es estos dos elementos se realizan una operación con esos elementos y te devuelve un resultado esta estructura tan sencilla es un programa introduce con estos datos realizó una operación en este caso matemática aritmética con esos dos elementos y devuelve el resultado de pantalla evidentemente javascript es capaz de hacer muchas cosas mucho más complejas que una suma pero es una primera introducción para marcar la diferencia entre un lenguaje de programación y un lenguaje de marcado en este vídeo voy a empezar hablando de operadores aritméticos una pregunta que me suele hacer la gente es es obligatorio para hacer una suma antes haber declarado variables y meterlos en variables no es recomendable pero no es obligatorio por tanto ahora cargar de operadores si queréis incluso me voy a cargar estas variables para no mezclar conceptos mira y voy a dejar solo de la alerta son esquís más voy a agregar el comentario y así reducimos javascript a la mínima expresión los operadores evidentemente la atención qué va a pasar ahora si le digo a leer suma he definido la suma no me ha cargado que pasa en la pantalla nada un momento como que nada yo he dicho a leer si no tengo la suma no debería haber aparecido una pantalla vacía una ventana flotante vacía no yo he cometido un error y javascript es muy muy es muy traicionero porque cuando cometo un error no funciona nada aunque debería haber funcionado la ley no se ha quedado en pantalla si yo pongo aquí a leer nada entonces me sacan una del vacío y por tanto siempre que javascript cuando le deis a ejecutar no haga nada es que algún error un error habréis cometido y no pasa nada eso os va a pasar a vosotros y a mí un montón de veces cuando eso pase simplemente revisaremos el código a ver dónde está el puntito y cómo que falta la coma que sobra o lo que sea o las comillas que faltan lo que sea bien lo que escribir a decir para esta primera demostración es que yo puedo poner alguien directamente operaciones aritméticas 5 más 3 guardo recargo es igual a 8 esa es la operación aritmética de suma si yo quiero restar simplemente uso el signo menos el signo menos ya sabéis en cualquier ordenador es el guión atención grabando 5 – 3 es igualdad 2 cerrado no hay ningún problema el signo de la multiplicación ya sabéis en cualquier prácticamente calculadora nuestra operativo es el asterisco asterisco 5 asterisco 3 equivale a decir 5 por 3 por tanto sea la guardo y recargo de veras 5 x 3 es igual a 15 en cuanto en cuanto la división hay dos elementos de división si yo digo 5/3 la barra es lo que está en mayúsculas 7 no lo que está en al xerez o varios clases 5 por 3 1 666 66 se puede controlar los decimales sí que se puede y luego está el módulo 5 atención porcentaje 3 5 porcentaje 3 el resto es 2 / 53 cuál es el resultado 53 es igual a 1 con un resto de 2 el módulo es el resto porque thomas adelante veis que podemos hacer operaciones aritméticas donde diga si divides tanto por tanto la división entera es tanto y el resto es tanto el resto entero y llegaremos a la librería matemática que es una de las librerías más chulas que tiene javascript os imagináis todo lo que se puede hacer ahí dentro con una librería matemática y luego vienen dos operadores muy chulos que son el incremento y el decremento si yo a 5 le quiero añadir un valor simplemente pongo 5 + quiero 5 más pues 5 más en la pantalla en este caso me da un error voy a hacer lo siguiente bah variable es igual a 5 y ahora pongo variable más más ahora mismo sácame la variable guardo recargo y ahora me dice 6 qué es esto pues 6 es que cuando yo pongo más más delante lo que se llama un post o decremento perdón después le estoy añadiendo un valor a esa variable si yo le digo un post de incremento variable menos menos a cuánto será igual la variable a 45 menos menos equivale a bajarle un balón una cosa divertida vamos a ver variable más más siéntese las 5 horas 6 y si ahora vuelvo a decir variable + + por 567 no puedo simplificar esto sí sí que puedo atención que para variar hable a la variable le quiero aumentar dos valores directamente hay una fórmula extendida que dice variable es igual a variable más 2 variable es igual a mayores más dos variables es igual a 52 variables 7 guardo recargo variable semana 7 esta es la fórmula extendida la fórmula abreviada a la gente le cuesta mucho acostumbrarse a la fórmula abreviada pero es así es más igual 2 dos o tres o lo que queráis beber tres para que lo veáis poner más igual quiere decir coge variable y suma tres unidades guardó recargo y el resultado es 538 [Música] de la misma manera atención de la misma manera existen al menos el por y el / mira – igual 3 quiere decir coge 5 quita de 3 es igual a 2 por igual 3 quiere decir coge 5 x 3 que es igual a 15 y partido igual a 3 quiere decir coge 5 dividido entre 3 es 1 666 66 estos que habéis visto aquí por tanto son los operadores matemáticos los extendidos y los simplificados que nos permiten realizar operaciones matemáticas con los elementos numéricos las variables están pensadas para cambiar de valor para que su valor se puede modificar en un principio voy a poner por ejemplo un ejemplo un ejemplo muy claro y es que voy a crear una variable voy a simular una no digo mini sino que digo micro tienda online donde digo el producto 1 es igual a 140 unos 140 euros no puedo por el euro evidentemente es otra manera después para productos 2 es igual 240 y ahora voy a hacer una cosa atención bar suma es igual a producto uno más productos debes tener pongo el resultado de la suma y añadido dos productos al carrito guardo recargo y el resultado es 380 voy a poner una cosa que a continuación os voy a explicar voy a poner el total de tu compra es un signo más como es que pongo un signo más permitiendo que pongo un signo más y ahora explicó para qué sirve sino más no es de suma sino de cadena acción explicó lo que es tú compras durante tu compra este es 80 pero yo ahora lo que voy a hacer atención todos a la pantalla es crear una variable llamada producto 3 que es igual a 345 y ahora vuelvo a decir la suma es igual estamos permitido un nuevo producto tendré que actualizar la suma en la tienda online producto 1 más productos 2 más producto 3 pero digo alerta el nuevo total es más su mano este es un caso bastante clásico de una variable en este caso llamada suma que va cambiando de valor cuando yo meto dos productos en el carrito de compra está tienda online la suma vale tanto pero si yo meto tres productos entonces lo que vamos prácticamente olvidar el valor de suma actual y rehacer la suma con un valor nuevo todos los llaman variables porque están pensadas para variar de valor en un momento dado si nos interesa guardo recargo y dice el total de tu compra es 380 pero si pulso a ok ahora dice el nuevo total es 725 en ambos casos el llamado a la variable suma pero una vez más yo nos podría preguntar cuánto vale la variable suma porque vosotros me diría depende aquí en este punto vale producto uno más producto dos pero aquí en este punto vale producto uno más producto tres más productos en definitiva una variable es un cajón es un cajón dentro de un armario y tú dentro de ese cajón metes y sacas información como quieres en este caso hemos cometido un cajón cuántos elementos y luego le metemos un tercero podríamos incluso haber sacado porque no hay un problema las variables esto es algo que os puede parecer un poco extraño pero es muy normal pueden albergar cadenas las variables no sólo pueden albergar números sino que pueden albergar cadenas de caracteres bar mi variable es igual por ejemplo mar mi nombre es igual pero eso sí lo puedes poner jose vicente el ordenador fallaría tengo que ponerlo entre comillas siempre que quiera poner una cadena de caracteres alfanuméricos tengo que ponerla entre comillas en definitiva son números no hace falta que pongas comillas tiene al menos alguna consonante al menos alguna vocal tienes que poner comillas las anteriores variables son variables de tipo numérico estas son variables de tipo cadena alfaro medica javascript como php es un lenguaje muy suave muy permisivo en cuanto a la tipificación de variables hay dos lenguajes más restrictivos donde cuando creas una variable le tienes que decir qué tipo de información va a albergar a javascript no viajamos y le das un número automáticamente dice vale variable numérica si le das una cadena alfanumérica difiere vale pues automáticamente es una cadena baja mi apellido es igual carratalá y era muy divertido las variables las variables de cadenas se pueden sumar cuál es el resultado de sumar jose vicente más carratalá el resultado es muy gracioso no es realmente una suma cuando vale la más la e no se puede sumar eso se podría sumar su posición hexadecimal por el momento vamos a dejarlo en este caso el operador de más se usa como operador de encadenación de encaminamiento y no como fumador si yo digo a leer mi nombre más mi apellido cuál es el resultado de pantalla bueno pues no es una suma aritmética sino que es un encadenamiento va a decir josé vicente y después le va a poner cada lado guardo recargo y dice jose vicente catalá en el caso de las caderas la suma realmente es un encadenamiento y es más puedo encadenar diciendo atención mi nombre es sumo mi nombre más y apellido atención siempre que pongáis un número o una variable no hace falta ponerlo entre comillas esto es un número pero es una variable siempre que pongáis una cadena que no sea un número o una variable hay que ponerla entre comillas como veis he puesto cadena más variable más variable y el resultado en pantalla se guardó y recargo es mi nombre es dos puntos variable 1 + variable 2 y vamos a hablar ahora de los operadores lógicos y para eso voy a poner a leer atención y voy a poner 3 igual igual 4 no he puesto un igual he puesto dos iguales y cuando yo pongo dos iguales estoy empezando a hacer una en comparación en este caso de igualdad lo que le estoy diciendo aquí es es cierto que 3 es igual a 4 es cierto probablemente no por tanto el resultado en pantalla que voy a obtener es foros cuando llegó la comparación si no es cierta dice falls si es cierto dice falso es cierto que 3 es igual igual a 3 guardo recargo y centro es lógica no es nada más que lógica atención voy a empezar a complicar un poco es cierto que 3 es igual a 3 con comillas vamos a ver esto guardo ver cuál es la diferencia 3 lo he definido como un número mientras que si meto el 3 con comillas estoy diciendo a 3 con una cadena no es el mismo tipo de datos este es un dato numérico este es un dato de cadena pero al final vale 3 pues si realmente una cadena de meter un número al final vale 3 por tanto las dobles igualdad funciona ahora bien si hay una doble igualdad también hay una triple igualdad mira atención a la pantalla si yo pongo 3 es igual igual igual a 3 lo que le estoy preguntando es tiene el mismo valor y el tipo de datos es el mismo si uno es numérico el otro es numérico y si uno es cadena el otro es cadena el resultado ahora en pantalla va a ser falso porque si el resultado es 3 pero no es cierto que sean exactamente iguales porque uno es un número y otro es una cadena aunque los dos valoran tres vale por tanto doble igual triple igualdad recordad que en la primera igualdad esta asignación la doble igualdad es comparación y la triple igualdad es comparación exacta otra igualdad es la no igualdad la no igualdad en prácticamente cualquier lenguaje de programación que yo conozca es admiración igual la admiración en prácticamente cualquier lenguaje de programación y que vaya a decir no es la negación por lo tanto es cierto aquí vemos el primero a complicar es cierto que 3 no es igual a 4 o sea no es igual pero yo estoy preguntando si es cierto por tanto sí que es cierto que 3 no es igual a 4 luego el resultado es true estruch como podéis ver es cierto recordar siempre la palabra clave la pregunta clave es es cierto que porque el truco el falso está respondiendo a es cierto qué es cierto que 3 no es igual a 3 eso no es cierto no es cierto que 3 no se llevará 3 luego el resultado es falso y luego tenemos unos operadores muy divertidos los conoceréis toda la vida que son el mayor y el menor came tenemos por tanto luego los operadores de menor y mayor que no necesitan mucha explicación y presentación donde voy a hacer lo siguiente mira es cierto que 3 es menor que 3 evidentemente guardo recargo y me dice que estos foros no es cierto 3 es igual a 3 pero no veis menor que 3 es cierto que 3 es mayor que 3 es falso 3 es igual a 3 3 no es mayor que 3 pero atención mira la pantalla hay un operador compuesto que es es cierto que 3 es mayor o igual a 3 no es mayor pero sí que es igual por tanto el resultado de esta afirmación será true será cierto es cierto podemos comparar grupos de afirmaciones y para ello tenemos dos operadores que son amp ib o voy a decir lo siguiente atención mira la pantalla voy a poner la cosa se ha complicado un poco en cuanto a los paréntesis mira voy a poner un paréntesis y voy a decir es cierto que 3 es igual a 3 y él se pone con dos personas los samper sans son los signos que salen con mayúsculas 6 en el teclado y es cierto que 5 es igual a 5 y ahora os voy a preguntar es cierto esto y es cierto esto me responderéis y luego el resultado en pantalla será igual a su es cierto pero atención mírame ahora la pantalla es cierto que 3 es igual a 3 y también es cierto que 5 es igual a 6 globalmente no es cierto la primera parte era cierta pero como la segunda parte no es cierta no puedo decir que es cierto que 3 es igual a 3 y que 5 es igual a 6 por tanto aunque la primera parte se acierta al recargar el resultado es falso la expresión y creada a través de un doble adversan requiere que todos los elementos comparados sean ciertos solo con uno que no sea cierto globalmente la expresión ya no es verdadera no solo pueden haber dos pueden haber todos los que queráis pensar la persona y que uno es igual a uno esto seguirá sin ser verdadero porque uno de ellos falla con que uno solo de ellos falle da falso pero si todos dan verdadero entonces el resultado es tú esto es y el otro operador es oro es obra que se representa con la barra vertical la barra vertical es un poco más difícil de obtener atención mirar porque se obtiene con al xerez que es el botón que está a la derecha de la barra espaciadora mantenéis pulsado al xerez y luego pulsáis el número 1 del teclado y sale la barra la barra vertical voy a poner dos x por el castellano como mira de la pantalla para su tiempo para hacerlo es cierto que 3 es igual a 3 o que 5 igual a 5 o que uno es igual a 11 realmente todo es cierto por tanto el resultado final es true es cierto el resultado es true pero atención es cierto que 3 es igual a tres o cinco es igual a 6 o que uno es igual a 2 solo le hace falta que una de ellas sea cierta si una de ellas es cierta entonces dará verdadero si al menos una de ellas es cierto dará verdadero ojo cuidado es cierto que 3 es igual a 4 y que 5 es igual a 6 y que uno es igual a 2 o que 18 grados lo siento ninguna es cierta sin ninguna es cierta entonces el resultado es falso las estructuras de control me permiten ejecutar un trozo de código dependiendo de si será una condición o no de esta forma las estructuras de control me permiten también tomar decisiones en un programa y por tanto me van a permitir crear comportamientos complejos dentro de un programa en javascript lo que voy a hacer es lo siguiente voy a escribir paréntesis ya ves lo que voy a hacer es lo siguiente y además habrá estudio a continuación el llaves voy a validar una expresión allí dentro si el resultado de esas personas es cierto entonces se ejecutará este código y si el resultado es falso entonces se ejecutará en este código y ahora yo digo si 3 es igual a 3 hasta ahora me decía tú yo digo a leer eso es cierto y si él es falso llegó a leer eso es falso qué creéis que pasará pues yo voy a evaluar esta expresión si despierta ejecutaré este código y si es cierta ejecutaré este código si ahora guardo y recargo el resultado será eso es cierto pero señora pongo es cierto que 3 es igual a 4 guardo guardo recargo y me dice eso es falso la estructura y por tanto nos permite tomar una serie de decisiones en base a una certeza o falsedad y ahora a continuación vamos a hacer una sanidad aprobar este hijo lo que voy a hacer a continuación es poner lo que se llama y validado puedo olvidar un ir tantas veces como haga falta voy a crear una variable llamada era variedad que va a ser igual a 34 y a continuación voy a decir sí algo llame el algo poder siempre os recomiendo la estructura básica y luego rail ice estoy seguro que no vosotros voy a decir que si la edad es menor que 20 pasará algo pero si la edad es mayor que 20 verdad si es mayor que 20 es falso y ahora aquí digo lo siguiente estoy repitiendo otra vez la estructura de control tengo una estructura if y la estoy repitiendo aquí abajo y la gente shift corchetes el paréntesis vamos a ver si la estructura es hilaridad es cierto que es menor que 20 entonces ejecutará este código cierto y aquí digo si la edad es menor que 10 que sí es cierto que la edad del menor que 20 y también es cierto que ese menor que bien entonces diré alert eres un niño si no es cierto a ver mirada atención mírame todos y pensando lógicamente sí es cierto que tengo menos de 20 años pero no es cierto que tengo menos de 10 años cuántos años tengo entre 10 y 20 puesto a leer eres un adolescente ahora si la edad es menor que 30 eres un joven si no es cierto que mi edad es igual menor que 20 y tampoco es cierto tenida es menor que 30 que era tengo más de 30 nuevos alert ya no eres un joven vamos a ver cómo se traduce esto era igual a 34 guardo ejecutó y me dice él ya no eres un joven dentro de los cuatro textos posibles al ejecutado ya no eres un joven si hubiera puesto por ejemplo 24 era igual a 24 me hubiera dicho eres un joven si hubiera puesto edad igual a 14 me hubiera puesto eres un adolescente y si lo hubiera puesto edad igual a 4 hubiera puesto eres un niño veis por tanto como anidando pips lo primero el código se complica es o bien físicamente pero también nos permite tomar decisiones más complejas nos permite decir si pasa esto pero si pasa en esto pero si no pasa esto entonces haz esto otro sin embargo cuando no queremos ayudar y porque fijaos que de esta manera tenemos que meter una estructura dentro de control dentro de la otra lo que haremos es usar una estructura de control llamada switch switch es una estructura de control es un interruptor con varias posiciones donde en este caso dentro de la misma estructura contemplamos varias posibilidades mirar la estructura es igual que le pongo suites paréntesis llaves voy a validar una expresión aquí para edad y ahora dentro de ahí voy a ponerlo siempre voy a poner case 1 61 y a continuación ejecutó a leer eres muy pequeño y al final atención al final muy importante pongo un break 20 en este caso no se ejecutará si es verdadero si es falso solo si tengo un año 62 vas a la guardería 62 chris 3 voy a decir voy a decir más alcohol 64 y puedo meter tantos casos como quiera sin complicar el código ya eres mayor y ahora de edad digo que es igual a 4 fijaos que automáticamente dice ya eres mayor si pongo 6 y 3 dice llamas al cole diréis estaba hacer básicamente lo mismo que el eve anidado sí pero esa estructura de control es mucho más fácil de digerir que agregar varios chips no tienes que pensar cuando es falso cuando es verdadero simplemente hay un switch con tantos casos como tú quieras luego tenemos el break donde el break en este caso es una instrucción que nos permite romper que nos permite decir ya es ejecutado este código vale sal no te pongas a ejecutar los demás se os sale el móvil de control por tanto el break es el que le permite finalizar esa instrucción según clic de control la estructura de control voy a cerrar este script voy a abrir otro dentro del body objetivo texto barra javascript y voy a usar la instrucción que es parecida a leer a leer sangre te saca ventana flotante en pantalla pero a veces se puede volver un muy buen cómodo por tanto dentro de javascript voy a usar otra instrucción llamada document.no right escribe en el documento hola qué hace esto esto no quiero hacer es poner actuación hola en la pantalla poco espectacular verdad lo podríamos haber hecho directamente pero ahora veréis que realmente tiene su utilidad el que jamás te pueda escribir por nosotros contenidos en la pantalla ahora por tanto voy a escribir este bucle for el bucle favor tiene la siguiente estructura pongo forma una condición y un código que se va a ejecutar fue la condición del foro tiene tres condiciones dentro así que voy a crear lo siguiente voy a crear un poco de pseudo código mirad a la pantalla es la condición de inicio punto y coma la condición del final es para observar punto y coma la condición de incremento esto es el código no quiere decir que lo tengáis que escribir tal cual sino que es poco para darnos pistas y limpio y que empieza siempre igual a cero creó una variable y latina que empieza siendo igual a cero el código se ejecutará siempre que iu sea menor que 10 y cada vez que pase por aquí ahí le voy a aumentar un valor vamos a ver qué quiere decir esto lo que quiere decir esto es que y empieza siendo cero es cierto que es menor que 10 y ejecutó el código cuando pasas por aquí y más más luego y ya no es 0 y es uno vuelvo a empezar y cuánto es uno es menor que bien si ejecutó el código le añade un valor dos tres cuatro cinco seis siete y cuando hoy ya no cumple que sea menor que diez entonces separa el código un enfermo siguiente document.no jets y entre comillas hola qué pasa guardo recargo y tengo viernes de sola lo que hace es ejecutar 10 veces desde la vez 0 hasta la vez 9 ya que pierre no cumple que sea menor que 10 hola a partir de aquí puedo escribir lo que quiera mira lo que voy a hacer a continuación hola más hola esta es la vez más más que pasas por aquí y luego un verde que lo que hace es devolver la línea esta es la vez y que es y y es el contador así que atención guardo recargo hola esta es a veces lo que pasas por aquí hola esta es la vez 1 te pasas por aquí hola estás la bc2 que pases por aquí y así hasta 9 podría poner algún espacio más para que quedara más ordenado y esto es lo que hace un bucle for un bucle for y más números lo que va a hacer simplemente es repetir una tarea x veces en la pantalla hay cosas muy divertidas que podemos hacer con los jeeps x con los foros quería decir mira porque tiene que empezar en cero y acabar en directo podrían dar en cinco y acabar el once a ningún problema guardo recargo 5 y 10 atención problemas podría empezar vamos a verlo en uno acabar el 11 y decir y es igual a ir a ver si me lo ha aceptado mira que he hecho una vez que me he metido en un bucle infinito porque porque he dicho y es igual a 1 mínimo perdón máximo 10 cada vez que pases por aquí y es igual y nunca aumenta de valor y siempre es igual a boro luego este código se ejecuta hasta el infinito y más allá luego entrado en un bucle infinito que solo puedo parar de hecho parece que me puedo parar mediante ese color o nada esta página se ha colgado más cosas divertidas puedo hacer acordáis los operadores del decremento puede hacer que empiece siendo 10 y que siempre que sea mayor que 1 y disminuya de valor y menos menos y menos a más y menos menos 19 8 7 6 5 4 3 2 y así hasta que hasta que sea trabajo le puedo aumentar o disminuir les digo más y empieza haciendo uno hasta que se ha abierto y le vivo y es más igual 2 y es igual y es menor que bien y es 1 3579 en lugar de aumentarle un valor de aumentados por tanto evidentemente al final tengo 1 3579 normal a continuación vamos a ver dos bucles que son el bucle while y el bucle tu baile en este vídeo vamos a empezar viendo el bucle while que son otra vez dos bucles de interacción atención mira voy a poner una vez más guay paréntesis y ya me diréis secreto de rato igual pues si no lo tengo pero la atención el bucle enjuague es como el bucle for pero en cierta manera simplificada el bucle o para ir únicamente contiene la condición de ejecución no contiene ni la de inicio ni la de final mirad el incremento por tanto es fácil que el buque el bucle while si no lo controlamos nos puede llevar a vivir sin finitos y yo te digo mar era parte brad es igual a cero empiezo teniendo una edad de cero y os digo mientras que la edad sea menor que 30 documento punto wright tengo era años y luego un cr para salto de línea qué voy a hacer a que me va a llevar este bucle me va a llevar a un bucle infinito porque porque tengo edad igual a cero mientras mi edad sea menor que 30 ejecutó en algún momento le estoy diciendo que aumento en edad no así que mi edad siempre va a ser 0 y voy a ejecutar este código hasta el infinito y más allá atención comprobemos lo guardo recargo y veis ya he entrado en un bucle infinito de qué manera puedo yo trabajar con los while bueno es muy sencillo simplemente tengo que introducir la condición de incremento dentro del cual le voy a acercar y básicamente dentro del while voy a decirle qué edad más más fijaos con bloque un bucle while al final no es tan diferente de un bucle for en el bucle for teníamos inicio final incremento aquí tenemos inicio fuera la ejecución dentro incremento fuera si ahora hago esto cada vez que paso por aquí le añado un valor la primera vez que pasó edad 1234 cuando sea 30 se acabó guardó recargo se acaba la página no pasa nada en bucle infinito mirada actuación y tengo cero años 1 3 4 5 6 7 8 29 still book in white ejecuta un código mientras la expresión validada sea cierta el bucle while es como el bucle en wilde pero al revés y tiene una particularidad atención a la pantalla el bucle de wilde es 2 algo mientras que la expresión que te pongo aquí sea verdadera y una cosita esto es un detalle tupé es muy importante el bucle de while es el único de los bucles que tiene que tener un punto y coma al final veis que hasta ahora ni el wild y el forn y el leaf y el switch tenían un punto y al final el sí y de hecho es así en prácticamente este programa y que usen un punto de comer evidentemente para finalizar visual racing por ejemplo no y ahora digo documento punto raid hola mientras que la edad sea mayor que 10 si esta persona tiene más de 10 años dile hola esta persona cuántos años tiene no tendría que decir hola no no cumple la condición solo puedo decir hola a aquellas personas que tienen más de 10 años pues lo divertido del núcleo de uruguay es que ejecutó y comprobó que me dice hola una vez porque dice una vez más cuando llegó hasta aquí el ordenador todavía no ha leído esta línea y el ordenador dice vale di hola digo estimula en la pantalla y a continuación dice si la edad es mayor que nieve y el cual dice alba si ya lo he dicho no tenía que haberlo dicho y digo bueno pues para la próxima vez quiero lo digo pero ya lo he ejecutado al menos una vez ojo al menos una buena vez si la protección es positiva es verdadera entonces se seguirá ejecutando pero aunque sea falsa al menos una vez la ejecuta el javascript se puede combinar sin ningún problema con css y con html yo por ejemplo voy a hacer ahora un bucle form para hacer una pequeña demostración qué dice fort variable día día del mes es igual a uno es más no mientras días empiecen siendo igual a 1 porque esto es un poco de fort no hace falta declarando fuera tampoco pasa nada porque claro no fuera pero hasta que vi a sea menor de 32 meses digamos y cada vez que pase por aquí día más más había el añade un valor ahora pongo documento punto raid y con html pérez que este ere que recordáis es una fila de la tabla dentro del tr pongo tb pongo hoy es el día más bien tareas para hacer es más voy a poner un minuto y hay un problema si tengo comillas un problema ahora ah jim wood time place holder igual introduce tu tarea veréis no sé qué va a hacer eso antes del script voy a vender un table table uy es igual al 100% y border es igual a 1 y después del script me tomo un table vamos a ver qué hace estamos bien y no comete ningún error que podría ser será guardo y recargo pone hoy es el día 1 2 3 4 5 6 los que quieras que introduces tu tarea y digamos que he hecho un pequeño dietario un pequeño clasificador de tareas por días en javascript y lo he hecho mezclando en este caso javascript html un primer ejemplo un primer mini micro ejemplo de para que nos pueden servir el javascript en este caso el javascript me ha librado de tener que escribir 31 filas de una tabla sino que por un bucle form 2 que repiten n veces las cosas automáticamente con mucho menos código no tengo pero ahora pregunta original era y ahora como a esto como elemento css la respuesta es pues metiendo sólo si ahora me voy a hacer y pongo oscar igual a text para css y ahora digo por ejemplo el body sera no sé quiero y ahora la tabla va a tener un border de 0 pixeles sólidos perdón un píxel sonido negro y repite para tener un borde de un píxel sólido negro este te digo más al primer te dé le dimos vas a tener que libre con comillas sencillas y registros del problema saliente como sencilla líder bien pues aquello que tenga el día le voy a decir que el fondo wait es para que solo la columna de la izquierda sea negrita se llevará algo así fíjate como tengo con css fíjate que esto es negrita y esto no lo es y lo he hecho todo y ahora le digo font family área y ahora al table le picó pero es igual a cero el racing igual a cero y fíjate como con css puedes utilizar una tabla que al final ha sido generada por javascript y puedo combinar los que puedo es que debo combinar las tecnologías sin ningún problema a continuación vamos a descargar la librería jquery esta librería está en la siguiente dirección voy a abrir una pestaña nueva y voy a entrar en la dirección www.hufh.org escribe jquery tal cual como es buena con y y con q y con un punto o hereje esta librería le vamos a sacar mucha punta porque nos va a permitir hacer muchas cosas y lo primero que vamos a hacer es descargar el jquery cord hay varias cosas que podemos descargar de hecho en su momento veremos jquery lugar hay cómo hacer interfaces de usuario para para darle el cuadro con james welling el documento mira de atención voy a hacer clic en jake query con el núcleo de james whale hago clic y dentro de la página típica de la página clásica desde el cuerpo mira la atención a la pantalla consiguió la última versión elige tu nivel de compresión puedes bajarte jake wearing de producción que ocupa 32 casas porque está verificado y ciclado o puedes bajarte el gateway de desarrollo que son en lugar de 32 247 cast que es código descomprimido yo que os recomiendo bien vamos a usar al menos de momento ahora que estamos aprendiendo jake huir y para usarlo no para modificarlo porque estamos aprendiendo cómo vamos a modificarlo por eso en reproducción mira atención la pantalla se aguanta un log fijaos como éste es el gateway significado tendréis algo no porque tampoco lo vamos a usar tampoco lo vamos a escribir no lo vamos a modificar quizás más adelante quizás al final vale por tanto lo que voy a hacer atención es comprobar como la versión de desarrollo es una versión mucho más entendible pero claro ocupa mucho más que la versión que está comprimida la cuestión está en que si de momento y durante un buen tiempo no nos vamos a meter a tocar dentro gateway y lo vamos a usar pero lo vamos a modificar es como tengo un coche conduzco el coche no preguntes qué remotos del coche pues james wani es igual igual y es el motor tú vas a conducir el coche pero no vas a tocar visor del coche vale pues lakers y es el motor que vamos a usar lo vamos a usar pero no lo vamos a destripar así que mi recomendación es que pinchase aquí en production en la versión de producción pinchase download y digáis no me lo he bajado me lo ha mostrado en pantalla pero no os preocupéis porque le pincháis aquí a la barra de herramientas guardar página como tíos lo guardan jce en mi caso en el escritorio en master web cuando encuentre master web en actual en javascript y lo voy a guardar atención mirad con el nombre que venga jay query un 1.7 puntos 2 punto min js le podemos cambiar el nombre pero no lo recomiendo vamos a dejar el nombre que tiene y en unos pocos segundos jake query está bajado en nuestro sistema preparado para usarlo en este vídeo vamos a trabajar con el objeto de que al igual que el objeto más es un objeto que ya está pre construido en javascript pero que tenemos que instancia para poder usarlo igual debemos poner más punto pi vamos a poner el objeto de una vez más evidentemente voy a hacer un archivo html y acercarme html de hecho cojea en el archivo que vamos a hacer hoy os va a servir para toda la eternidad vamos a hacer el típico archivo que básicamente te dice hola fulanito hoy es día tal de tal vez al año lo típico que ponéis arriba en tu página web por tanto este archivo que vamos a hacer lo vais a poder usar prácticamente en cualquier proyecto y así demás vamos también a aprender a externalizar javascript para poder copiarlo dejarlo en cualquier proyecto y que funcione pero en primer lugar le voy a hacer un script de tipo texto barra mástil qué va a decir lo siguiente en principio lo que voy a hacer es empezar instancia este objeto de softbeis tiene múltiples métodos por tanto voy a poner lo siguiente bar fecha ya sabéis que ponéis nombre en castellano si nunca os vais a equivocar es igual a un mío paréntesis paréntesis qué quiere decir esto esto probablemente ahora mismo no lo entendéis y me parece normal porque no hemos explicado todavía cómo trabajar con programación orientada a objetos dentro de havas tiene recordar que toca la semana que viene sin embargo lo que he hecho es básicamente llamar a un objeto de it que existe dentro del javascript ya veréis que la palabra new sobraba reservada para decirle qué fecha es una nueva instancia de ese objeto es como una plantilla una plantilla de un documento y ahora voy a poner lo siguiente a continuación lo que voy a hacer es la siguiente línea obtener por ejemplo el día el día en el que estamos así que digo va a día es igual a fecha punto de the gate es un método es una función dentro del objeto qué hará esto bueno pues evidentemente esto no va a hacer nada porque si te hago así ibra evidentemente no sale nada de la parte de la pantalla porque yo he creado variables pero no he dicho que quiero mostrar estas variables de pantalla luego ahora lo que voy a hacer exponer document.no white para hacerlo sin j lo hacemos con foto díaz quiero que me devuelvas el día es la batalla guardo recargo y ahora si me devuelve el día 8 casualmente hoy es 8 de junio así que como veis me está devolviendo el día lo que voy a hacer a continuación es sacar la referencia completa de objetos que tengo en w3 schools que me dice todo lo que le puedo pedir alguna fecha le puedo pedir el día le puedo pedir al año le puedo pedir las horas le puedo pedir lo que sea vamos a ver otra cosa que voy a hacer además para abreviar es que yo aquí arriba y realmente no es obligatorio está así está tengo que hacer una nueva instancia es termina no me la puedo saltar pero porque tengo que escribir día y luego por en esto no puedo escribir directamente esto lo cierto es que puedo y sigo teniendo el mismo resultado veis por tanto como digo que me devuelve el día voy a volver a escribir voy a poner documentos rights para que esté un poquito más ordenado y ahora lo modificamos voy a poner un ver que va a hacer el ver evidentemente saltar más línea abajo me voy a copiar esto y voy a ir variando en lugar de beit puedo poner d que es de día no es el día del mes sino el día de la semana cuál es el día de hoy viernes con respecto al día de la semana es el número 5 con diferentes maneras de decirme una fecha y hay muchas más otra otra fecha por ejemplo es el full ya julia evidentemente me da 2012 atención cuidado os recomiendo poner foliar porque si pongo los días me dice que es el año 112 porque el javascript elaño cuenta a partir de 1900 por tanto desde 1900 estamos en el año 112 si queréis poner el año 2012 tenéis que usar foliar o recurrir al truco que usamos todos que es poner fecha que diera más 1900 y evidentemente te devuelve otra vez el año 2012 yo creo que os imaginaréis que si yo quiero foliares el año que de ellas el día jet mont es el año pero este es el mes cuando recargo y estoy en el mes número 56 número 5 sí porque los meses empezará a contar a partir de 100 enero 1 febrero paul jones o julián han hecho desde el 1 hasta el 12 en lugar de en el del 1 al 12 va del 0 al 11 pero qué hacer de hecho si miráis la documentación veréis que en vermont dice returns the month from 011 raro muy raro pero es así que se me afecte hay que adaptarse más cosas de la misma manera como os podéis imaginar tengo el agua bien a ver qué tal uers con una s ahora mismo son las 11 las 11 y las 11 y el mix son las 11 y 48 10 seconds verdad los segundos veis cómo va cambiando cada los que recargo y atenciones desarrollar un poco mil y secos la capilla no sí no 1000 seconds claro por favor 10.000 seconds es la cantidad de milisegundos que al pasado hoy lo vais a empezar a ver los milisegundos son muy importantes en javascript así como árabe son las últimas últimas versiones reconoce milisegundos javascript hace muchos años que reconocen incrementos lo cual es muy interesante para hacer la animación y luego por último hay una vamos a ver efe aquí hay otra que a día de hoy no parece que os vaya a ser de utilidad pero si yo les digo que el tc d atenciones 10 y 3er de espera que no me la están devolviendo buen tiempo así dieta me devuelve este pedazo de número que no es más que la cantidad de milisegundos que han pasado desde el día 1 de enero de 1970 para que me va a servir ese dato ahora mismo parece que para nada pero os aseguro que cuando empezamos a trabajar con bases de datos trabajar con ese número me servirá para meter cada registro a la base de datos con un señor ese número que va a ser único para cada cosa que emita la base de datos y por tanto poder poner un identificador único para cada registro ya que será muy difícil que metan dos registros del mismo milisegundo verdad me aseguró que cada registro tenga un número completamente único e independiente a continuación vamos a aprender para qué nos sirven las funciones en javascript cómo declarar las y cómo usarlas las funciones son realmente plantillas que podemos usar más adelante tantas veces como queramos por tanto voy a crear un documento html voy a crear un jefe voy a crear un body y dentro del voy a crear un script de tipo jamás crit qué va a hacer lo siguiente voy a hacer directamente un alert hola jose vicente si yo guardo y ejecutó esto lo que estoy haciendo es y ejecutar una instrucción directa y por tanto el programa me dirá hola jose vicente sin embargo si yo quiero reutilizar esta función más adelante yo voy a escribir la siguiente fórmula voy a escribir function palabra reservada function el nombre de la función el nombre de la función es el que yo quiera o la jv obligatoriamente tenga parámetros o no tengo que poner paréntesis si no tiene parámetros los paréntesis estarán vacíos si tiene parámetros pondría y dentro parámetros yo la pongo una llave y cierra la llave después de la leer qué quiere decir esto que en este caso alert ha quedado encapsulado dentro de la función hola jose vicente lo que he hecho hasta este momento es crear una función que equivale a crear una plantilla si ahora guardo y recargo comprobaré que el resultado en pantalla es ninguno porque porque yo he creado una plantilla pero no la he usado es decir al programa siempre que yo te diga hola jose vicente me tienes que decir esto pero siempre que te diga no te lo acabo de decir quédate preparado para esto por tanto esta es la fórmula con la cual definimos una función que es la palabra function nombre de la función paréntesis y el código que encierra la segunda parte es como se llama a esta función para llamar a una función simplemente ponemos la jv paréntesis punto y coma esto es una función esto es llamar a una función guardo recargo y ahora me dice hola jose vicente que he hecho aquí he hecho dos cosas una crear una función y dos llamar ejecutar esa función ahora fijémonos en que esta función realmente es una función estática es una función que yo no puedo adaptar porque porque esta función dice hola jose vicente pero y si yo quisiera que dijera hola paco y si yo quisiera que dijera hola alejandro hola nico estar o no serviría tendría que crear otra función en este caso se quisiera hola jose vicente hola paco el alejandro la nico tenía que ver cuatro funciones tendría que multiplicar el código por cuatro no puedo de alguna manera de aprovechar y adaptar esta función sí que puedo para eso están los parámetros dentro de esta función lo que voy a hacer es function hola jose vicente bar nombre eso quiere decir que al decir hola jose vicente el programa está esperando a que yo le diga un nombre y ahora aquí voy a poner atención mirad hola más nombre qué quiere decir esto que está esperando que dentro de los paréntesis tú pongas algo y ese algo tendrá hola lo que pongas atención guardo recargo y si yo ahora pongo aquí hola jose vicente me dirá no me dice nada un momentín voy a poner aquí bar nombre lo voy a poner fuera marc nombre me diría mira hola jose vicente pero si yo pongo aquí para co me dirá o la atacó y si yo pongo aquí alejandro me dirá hola alejandro y si yo pongo aquí indicó me dirá hola micó para esto sirven los parámetros dentro de las funciones aunque he hecho un ejemplo muy sencillo y muy básico este ejemplo ilustra y es la llave de entrada para poder reutilizar funciones que en lugar de tener que escribir cuatro funciones diferentes y yo simplemente cambiando un parámetro puede hacer que una función una sola función se comporte de cuatro maneras diferentes ahorrando por tanto tiempo y ahorrando por tanto código a continuación vamos a descargar la librería jl esta librería está en la siguiente dirección voy a abrir una pestaña nueva y voy a entrar en la dirección www.hufh.org escribe jquery es buena con y y con q y con un punto un hereje esta librería le vamos a sacar mucha punta porque nos va a permitir hacer muchas cosas y lo primero que vamos a hacer es descargar el jquery cord hay varias cosas que podemos descargar de hecho en su momento veremos jquery you like they were you by cómo hacer interfaces de usuario para para licuar y con jake wedding el documento mira de atención voy a hacer clic en jake guárico el núcleo de james whale hago clic y dentro de la página típica de la página clásica desde igual mira la atención a la pantalla consigue la última versión elige tu nivel de compresión puedes bajarte jake wearing de producción que ocupa 32 casas porque está verificado y ciclado o puedes bajarte el dj query de desarrollo que son en lugar de 32 247 cast que es código descomprimido yo que os recomiendo bien vamos a usar al menos de momento ahora que estamos aprendiendo lakers y para usarlo no para modificarlo porque estamos aprendiendo cómo vamos a modificarlo por eso en reproducción mira atención la pantalla se aguanta un log fijaos como éste es el greek wedding unificado tendréis algo no porque tampoco lo vamos a usar tampoco lo vamos a escribir no lo vamos a modificar quizás más adelante quizás al final vale por tanto lo que voy a hacer atención es comprobar como la versión de desarrollo es una versión mucho más entendible pero claro ocupan mucho más que la versión que está comprimida la cuestión está en que de momento y durante un buen tiempo no nos vamos a meter a tocar dentro gateway y lo vamos a usar pero lo vamos a modificar es como tengo un coche conduzco el coche no preguntes qué remotos del coche con james wani es igual y wallis el motor tú vas a conducir el coche pero no vas a tocar con el coche vale pues lakers y es el motor que vamos a usar lo vamos a usar pero no lo vamos a destripar así que mi recomendación es que pinchase aquí en production en la versión de producción pinchase download y digáis no me lo he bajado me lo ha mostrado en pantalla pero no os preocupéis porque le pincháis aquí a la barra de herramientas guardar página como tíos lo guardan jce en mi caso el escritorio en master web cuando encuentre master web en actual en javascript y lo voy a guardar atención mirad con el nombre que venga jay query un 1.7 puntos 2.1 punto js le podemos cambiar el nombre pero no recomiendo vamos a dejarlo y en unos pocos segundos jake query está bajado en nuestro sistema preparado para usarlo lo que hemos descargado es la librería jquery la librería jquery es este archivo de aquí que en lugar de tener la extensión html tiene la extensión js los archivos que tienen html pueden contener html pueden contener css y pueden contener javascript pero los archivos que tienen la extensión js javascript solo pueden contener javascript como nos hemos bajado la librería y nos la hemos bajado en javascript por eso tiene la extensión js un archivo js no es un archivo ejecutable es una librería fijaos que se haga doble clic el programa o no sabrá qué hacer o medirá con que abro yo esto esta librería no está pensada para hacer doble clic está pensada para que la hayáis bajado la dejéis ahí al lado y desde cualquier archivo html la llaméis vamos a ver cómo se llama a esta librería el primer paso mejor dicho el segundo el primer paso ha sido descargarlo el segundo paso va a ser llamar a la librería por eso he creado un archivo llamado probando punto html que va a llamar a esta librería y ahora voy a cargar el archivo probando html tanto en el editor como en el navegador y voy a hacer lo siguiente probando html voy a arrancar el programa de zoom que no lo tengo arrancado ahora es el programa de html va a hacer lo siguiente de crear un archivo html que va a tener un gel que va a tener un body y en el gel recordamos que teníamos una etiqueta script de tipo barra javascript y que aquí se acaba el script y dentro de esa etiqueta habíamos programado el javascript bien pues lo que voy a hacer es escribir aquí a continuación src igual comillas comillas y tengo que llamar al archivo javascript tengo que llamarlo diciendo que vamos a ver dónde está la carpeta diciendo que llamo al archivo jquery y 1.7 puntos dos puntos min punto js lo que he hecho por tanto es llamar a ese archivo decir que src es igual a jquery guión y el nombre exacto sin fallar ni un punto ni una coma ni un guión del nombre del archivo que me ha bajado de esta manera yo parece que no ha hecho nada guardamos derecho y recargamos pero sin embargo lo que he hecho en este archivo es incluir es llamar a jquery es decir voy a usar esta librería y por tanto a continuación podré escribir código usando elementos de esta librería ahora a continuación lo que voy a hacer si ya tengo la librería llamada mira es crear otra etiqueta script otra porque a otra barra javascript donde aquí dentro dentro de esta etiqueta aquí voy a escribir mi código fijaos que tengo dos etiquetas javascript la primera me sirve para llamar a la librería para decir el programa y voy a usar esta librería y por tanto voy a añadir nuevas instrucciones que hasta ahora no existían y a continuación dentro de la segunda etiqueta script es donde escribo mi propio código la diferencia es que la primera llama a una librería externa y por eso tiene lo de src igual a jquery y todo lo demás la segunda no llama una librería externa porque la segunda es el código que yo voy a escribir podría escribir mi código en un archivo externo de hecho más adelante lo haré ahora de momento por claridad para no empezar a manejar varios archivos a la vez para algo que puede estar en un mismo archivo voy a hacerlo todo en un solo elemento la estructura general de un script cuando usamos jquery es la siguiente lo primero que voy a hacer es crear una variable llamada como quiera voy a hacer una escritura de jquery extendida y más adelante extendida y fácil y más adelante en cuanto vayamos poniendo más jquery haré una escritura más resumida pero más difícil de usar por eso vamos a empezar con la larga y fácil voy a crear una variable por tanto pongo var y asignó el nombre que quiera por ejemplo x podría ser la variable x la variable mis variable la viable lo que sea y ahora digo x hace referencia x es igual al documento por tanto pongo x igual dólar el dólar y paréntesis ya es de jquery y por tanto digo con lo que voy a trabajar a continuación es con todo el documento pero lado punto y coma para finalizar cada cada línea recordar ahora x equivale al documento por tanto si ahora pongo x punto rudi estoy diciendo cuando el documento esté preparado entonces se ejecuta una función qué hacen estas tres líneas estas tres líneas lo que dicen básicamente es no tengas prisa no empieces a cargar el javascript antes de que acabe de cargar el html cargar html y cuando el documento esté preparado cuando tengas todos los elementos cargados correctamente preparados entonces arranca este script ya que hay veces que arrancamos javascript y hamás y encoje tal elemento de html y cambiado y html dice es el evento no si todavía porque no ha llegado a esa línea porque veréis que hamás pero generalmente se ejecuta en la cabecera antes del cuerpo esto lo que está diciendo es usted de la cabeza pero no mercy put es hasta que el documento no esté completamente preparado ahora y he dicho que cuando el documento esté preparado ejecute la función de inicio voy a crear la función de edición como se crea unas funciones javascript se pone la palabra reservada función louis que se pone de color rojo se puede que el rojo y decir que dije una palabra reservada no la puedo usar para mis fines no sólo la puede usar para crear funciones la función de inicio atención cuando creó una función pongo la palabra a función pongo la palabra que yo he elegido para el nombre de esa función y a continuación tengo que poner paréntesis porque en los paréntesis esa función pondré los parámetros de esa función la cuestión es que si una función no tiene parámetros y esta función no tiene parámetros hay que seguir poniendo los paréntesis aunque estén vacíos y ahora ya ves veis que una función es parecida a una estructura de control en cuanto a que pongo el lugar de gift digamos pongo inicio para entonces y luego las llaves y ahora por claridad simplemente con claridad bajo y pongo este código alert hola tienes complejos y esto antes lo hacía yo más fácil directamente sólo escribiendo alerta si ahora veréis que complicarlo al principio tiene ventajas al final vamos a ejecutar este código a ver si funciona guardo recargo y el resultado es hola cuál es la diferencia de momento aunque ahora veréis que trabajando con jquery las diferencias son muy grandes y muy beneficiosas de su ejecutaba aller o la directamente ahora lo que hago es primero decirle al documento y él acaba de ver ejecutar y q solo cuando hayas acabado de ejecutar te entonces arranca hola en primer lugar vamos a hablar de selectores y vamos a ver cómo los selectores de jquery son muy parecidos a los electores en css por tanto el cual era el selector para el y de el css la almohadilla cuál era el selector para la clase en css el punto nuevo los selectores jquery son los mismos que en css en este ejercicio lo que voy a hacer es dentro del body crea un día sin ver yo soy un vivo ahora voy a crear un día tendrá un nivel llamado cosa yo soy un bip y ahora voy a crear un mismo que tendrá una clase llamada pasa te dirá yo soy un vivo con una clase y ahora vamos a ver cómo podemos vamos hacer un poco el triángulo cómo podemos estos elementos en html y asignarles css usando los electores dentro de la función de inicio y voy a volver a entrar una variable por ejemplo llamada x ya he usado antes pero la puedo volver a usar sí que es una costumbre así que voy a llamarla y ya digo la canción y es igual a dólar paréntesis vivo hay más vamos a fijarnos un momento voy a quitarle la almacenada donde he visto yo esto pues esto lo he visto yo igual aquí arriba primero declaró una variable y luego pongo variable igual a dólar algo primero declare una variable y luego digo variable igual a dólar algo un primer ejemplo que vais a ver constantemente esta formación y es que la estructura se repite una vez que ya conoces ya la puede usar para lo que quieras y ahora la atención el perdón esto va con comillas cuando quiero llamar a una etiqueta hago como en css simplemente pongo el nombre de la etiqueta y ahora voy a usar una de las funciones más sencillas una de las instrucciones más sencillas de jquery que es css mira tiene la siguiente función la siguiente estructura y punto css pero si vuelve a repetir antes era x punto red y que quiere decir cuando x esté preparado ahora es y css es decir modifica el cssd y y tienes y el bip luego modifica el css del vivo paréntesis y pongo los libros comillas comillas para que lo vais a conseguir atención background es igual a hielo 4 recargo y veo atención que tengo tres días cuyo background ha sido pintado de color amarillo pero lo ha hecho css no lo ha hecho jquery una demostración de cómo puedo controlar css usando jquery y no escribiendo directamente css para que me puede servir esto ahora más adelante y con los ejemplos tranquilos que lo vais a ver voy a hacer un poco más de código mirar cuál es la estructura de esa instrucción pues se es y punto css es decir siempre es el selector punto la función lo que quiere decir selectores a quién vas a punto qué vas a hacer con ello pues y que es el día que vas a voy a el día css voy a gritar su css y entre paréntesis comillas forma comillas el wef será igual a 400 píxeles y punto css puedo repetirlo tantas veces como quieran el hi será igual a 400 píxeles y el border y css el borde será igual a un píxel sólido blanco guardo recargo atención y tengo mirad que ahora cada día tiene color amarillo tiene 400 x 400 y tiene un borde negro sólido de un pixel como hemos visto dentro de este código css lo que hacemos es primero usar un selector y a continuación usar una función de las que lleva implementada jquery la función una de las más sencillas que es css cuando quiero seleccionar por etiqueta simplemente en el selector pongo el nombre de la etiqueta cuando quiera o seleccionar el por día igual que el css pongo almohadilla cosa porque recordado que tengo un día y de igual a cosa guardo recargo y mira ahora nos ha quitado el primero no han apretado el tercero sino que sólo me ha quitado el segundo que es el que tiene vive y de igual a cosa por tanto veréis que y no hay que aprender tantas cosas nuevas sino que al igual que s si queréis llamar a un elemento que tiene una clase tenéis que poner igual que el css un punto punto pasa guardo recargo y en este caso no más que todo el primero mi maqueta un segundo sino que estoy matando el tercero que es el que tiene la clase llamada pasa en definitiva los selectores dentro de jquery funcionan igual que el css si tú no ponés nada simboliza que estás llamando a la etiqueta si tú pones almohadilla simboliza que estás llamando al idle y si pones punto simboliza que estás llamando a la clase otro elemento que voy a usar de jquery va a ser el elemento text de instrucción text podría usarlo por ejemplo en lugar de o además de lo descrito anteriormente da igual voy a escribir una nueva variable zeta y ahora voy a hacer lo siguiente lo que voy a hacer es decir que z es igual a dólar el elemento que tenga almohadilla cosa que estoy haciendo lo que estoy haciendo es llamar a este elemento bien pues hay una mayor instrucción dentro de jquery es la instrucción text la instrucción text mete texto dentro del selector text yo soy un texto nativo con jota cuero guardo recargo aunque pasaron dice yo soy un dip yo soy un texto me tiene con jquery yo soy un tipo en una clase que ha hecho text lo que ha hecho seleccionar el elemento que tiene el y de cosa ha quitado el texto que había fijamos que el texto de cosa es yo soy un disco ni de he hecho que jquery escriba texto dentro de ese vídeo estoy puedo elegir el texto que escribo dentro de un día específico usando la instrucción simplemente el texto otra función del texto no es ya escribir sino leer lo curioso es que es la misma instrucción la función texto cuando dentro de dentro del paréntesis lleva algo lo que hace es escribir texto escoger ese bien e introducir texto pero si yo pongo atención bacete z hace referencia a aquello que tiene cosas y pongo z punto text lo que estoy haciendo es leer el texto es decir si dentro del paréntesis pongo algo lo que estoy haciendo es decir seleccionó el bien y le meto texto pero si pongo el text vacío lo que hago es decir seleccionar el texto y quiero leer el texto selecciona el cosa y quiero leer el texto que tenía ahí pero claro sabes qué pasa que si no ejecute o no hace nada porque yo soy yo soy una clase y internamente la variable zeta guarda el valor de ese entorno lo podéis ver así que yo os pongo un ejemplo donde os pongo a leer z texto que hace alerta sacaron la pantalla evidentemente cuando recargo mirada atención y dice yo soy un dip comida lo que he hecho es con jquery tomar esa idea su contenido y ponerlo en una caja con una letra al final poco a poco vamos haciendo que avastin dijo está 41 en comportamientos ves allí coge esto por lo aquí se acabó en pantalla eso era imposible de hacer con html y css html es enseñar esto está css es maqueta esto ya está j&j acuario javascript es ves aquí y coge esto pues no haya hace esto haz lo otro si se cumple esta condición hazlo si no pues no lo hagas mientras que text te permite leer y escribir texto plano existe otra función como os podéis imaginar llamada html html que te permite escribir y leer texto plano en la realidad html se usa muchísimo más que texto por tanto digo z a ver z punto html con comillas y pongo br y yo soy un texto i d y hoy no he puesto sólo un texto he puesto etiquetas html se habrá guardó y recargo mirada de hacer la pantalla mirad cómo hago así y ahora tengo un werner y este texto es negrita y exclusiva html hace lo mismo que texto simplemente la diferencia es que textual permite meter texto plano mientras que html permite meter texto plano y etiquetas html de la misma manera la atención de la misma manera otra vez con él no se va a notar mucho si este elemento tiene yo soy un disco 1001 nivel este elemento tiene etiquetas si yo trabajo html solo sin parámetros quiere decir que estoy leyendo html ahora sí digo a leer z punto html guardo recargo y mirad yo soy un dirk una idea y me saca también las etiquetas de html no se podría por cierto es la típica pregunta no se podría marcar aquí cosas dentro de la caja javascript con negritas con títulos que no no esta casa a partir de muestra texto evidentemente usando jquery y usando javascript veremos cómo hacer cajas flotantes en html que podamos formatear como queramos voy a hacer un ejemplo mirad voy a borrar todo este javascript voy a borrar todo este html y voy a empezar a hacer algunas cosas grabó guardo recargo no tengo nada perfecto hay una etiqueta en html que hasta ahora no tenía ninguna utilidad pero que a partir de ahora la tiempo es una etiqueta que se llama button que iba a hacer botón no va a correr fórmula 1 sino que va a mostrar un botón en la pantalla aceite martín button y vivo soy un botón guardo recargo y que tengo en la pantalla soy un botón clic en un botón que puedo hacer clic pero que ahora de momento no hace nada esta etiqueta no tiene sentido en html css porque recibe un botón que al pulsarlo no ocurre nada cuando no sirve de nada ahora precisamente estamos en javascript y con javascript tienen mucho sentido usar la etiqueta botón porque ahora voy a poder especificar que cuando pulse el botón pase algo en la pantalla como lo voy a hacer bien vamos a ver primero la elemento clic vamos a introducir vamos a traer un poco los eventos más adelante veremos más eventos pero voy a hacer lo siguiente cosas que ya conozco creo una variable llamada y hasta aquí ninguna novedad ahora como le digo a esa variable y que llame al botón médico y es igual a dólar y entre paréntesis y comillas pongo button hasta aquí nada nuevo creo una variable griega y le digo que llame a aquella etiqueta veis no lleva almohadilla no lleva a punto luego llama aquella etiqueta que se llame button esta etiqueta se llama motor esta etiqueta ya la vez un motor ahora atención para que veáis que es que jquery es fácil si yo he querido cambiar el cssd un elemento digo y css si yo he querido leer o escribir texto he puesto y punto text si yo he querido leer o escribir html he puesto y punto html si yo quiero hacer algo cuando haga clic simplemente voy a poner civilidad punto clic es la misma estructura todo el rato y digo cuando haga clic quiero ejecutar la función dime la función de me acabo de inventar yo ahora puede ser dime dime tu favorito dime tú lo que fuera para el nombre de la función es el que vosotros digáis la función dime existe no la tendré que crear es como atención x 9 inicio primero llamado a la función de inicio luego he creado la función inicio así que ahora lo que voy a hacer es crear la función de email [Aplausos] dime y va a decir a ver yo te digo qué hace este código puede que ahora mismo lo entendáis pero ellos lo voy a explicar empieza el documento leerlo desde la primera línea hacia abajo y veréis cómo defenderse empieza el documento y digo cuando el documento esté preparado ejecuta la función de inicio se empieza a ejecutar la función del inicio porque porque le ha llamado si no lo hubiera llamado no se ejecutaría y digo que una variable y llamó al botón cuando el botón haga clic sólo cuando el botón haga clic ejecuta la función dímelo la función vive solo cuando haga clic me dirá yo te digo cuando yo recargue la página va a aparecer una alerta que me digan yo te digo no solo cuando yo recuerde la página y haga clic en el botón se ejecutará esa función cuando recargo y aparece un motor motor pero sólo cuando vado clic en él es cuando aparece de vivo esto es un poco más esto se empieza a parecer a lo que es javascript piensa que algo no pasa hasta que tú no realizas una acción de esa instrucción lo que hace es que solo cuando haga clic sobre el botón entonces ejecuta la función de email comprobamos una vez más sólo cuando hago clic se ejecuta la función dip a continuación vamos a ver dos elementos llamados anclas y remote class para esto voy a hacer lo siguiente mira el soy un botón pongo atención cuando haga clic en el botón añadiré un estilo al green debajo el botón mira hazlo guardo recargo cuando haga clic en el botón añadir un estilo debajo hazlo y ahora voy a poner aquí un dip a secas qué va a decir yo soy el mejor guardo recargo cuando haga clic este le vendrá un estilo de este debajo ahora dentro de la cabeza dentro de la cabeza html voy a crear un estilo un estilo evidentemente está vivo texto css y voy a decir la clase mi clase tiene will 300 píxeles a 300 píxeles background igual a green y volver igual un píxel soy blanco tengo la clase llamada mi clase que tiene esta anchura esta altura este fondo y este borde a quien se aplica esa clase ahora mismo a nadie guardo recargo se aplica al nivel bajo no porque yo estoy diciendo quién tenga la clase mi clase que se le aplique esto pero este bic tiene la clase mi clase no es un día secas no tiene la clase mi clase no va lo que voy a hacer ahora es que cuando haga clic en el botón en lugar de poner alert voy a hacer para z porque acepta porque nada por ahí podría ser la que podría ser la latina podría ser la letra que queráis o podría ser bar ni variable no variable el nombre los elegimos otros y ahora pongo atención como z junto a las mayúsculas y minúsculas tienen que estar como yo lo has escrito haz claras la cei con mayúscula y dentro de ese recuadro pongo como se llama la clase no acuerdo mi clase mi clase y lo tenemos vamos a ver lo que hace la continuación volvemos a explicarlo los refresca les guardamos hicimos cuando haga clic en el botón añadir un estilo al de ir debajo no funciona hazlo vamos a ver de momento no mi clase mi clase a clase limpio a flash aclaro por favor tierra natal z es igual a dollar dip si no he dicho a quien le pongo la clase y es que encima siempre es igual creo una variable seleccione un elemento le aplico algo pues aquí me he dejado crea una variable seleccionó el día le aplicó una clase aprobarlo ahora guardo recargo atención pulso hazlo y al grid debajo se le aplicó una clase vamos a volver a hacerlo recargo para deshacerlo cuando haga clic en el botón añadir un estilo libre bajo hago clic y solo en ese momento se le aplica la clase y por tanto el estilo para el evento vamos a refrescar el código qué hago aquí adk las es añadir una clase cuando haga clic en el botón se ejecuta la pyme y ni me seleccionará el vídeo le aplicará una clase y no cualquier clase sino a la clase llamada mi clase voy a hacer ahora otra línea para aquí abajo stl estoy en body y diga en cuando haga clic en este pero quitas justo button el problema hablo el problema yo y es que voy a guardar recargar cuando haga clic en este botón añadir un estilo al de abajo y cuando haga clic en estas lo quitas hazlo ha funcionado si este se supone que es el que pone y este supone que es el que quita porque muy sencillo yo aquí estoy llamando a aquel elemento que tenga técnica la etiqueta button problema yo ahora tengo dos button como puedo diferenciar que llame a uno y no al otro es muy sencillo mirando aquí en la pantalla button y de llamado poquitas button y de no te pones tú pones tú estás y ahora le digo que no llamo el botón si nos llamó a aquello que tenga el d tú pones fijaos que ahora se recargos recargado por supuesto si pulso este no funciona sólo cuando pulso este funciona y bueno pues es lo siguiente en la inicio voy a decir que van de selecciona a aquello que se llame tú quitas y bigote fondo clic el círculo de la función quitárselo la función quitárselo la voy a crear ahora a continuación función quitárselo para zeta ceta es igual abril z punto ritmo class mi clase lo que estoy diciendo atención seleccionó el tu pones cuando haga clic en tu pones ejecuta la instrucción dime total función nivel seleccionó tu quitas cuando haga clic en tu quitas ejecutó la función quitárselo la función nivel le añade una clase la función y quitárselo le quita la clase vamos a comprobarlo guardamos recargamos vamos a ver me falta la cada clic que efectivamente iba a cometer un error gracias tiene que tenerla cada clic porque si no no hubiera funcionado muy bien entonces ahora lo que hago es hago clic en éste y le pongo una clase hago clic en este y si todo funciona correctamente le quitó una clase clic en esta se la pone clic en este se la quita y veis cómo puedo trabajar con css y puedo incluso mantra de 11-6 externo y asociarlo puede asociar lo tanto como quiera a continuación vamos a ver ya que ya conocemos el evento clic de jquery vamos a ver los eventos mouse o ver y vamos auto que es cuando el ratón sale de un elemento y cuando ratón entra dentro de un elemento voy a borrar todo este código no voy a reescribir y voy a hacer lo siguiente mirar dentro del móvil es un vivo que se llamen y de zonas sensibles si queréis pongo aquí yo soy la zona sensible y luego pongo aquí otros disponibles objetivos objetivo y ahora voy a hacer lo siguiente atención mirada arriba antes s voy a decir qué zona sensible tendrá un week de 300 crisis un hype de 300 a 200 pistas un pago de 20 rifles y un border de publix el gas black vamos a qué pinta tiene esto guardo recargo de minar yo soy la zona sensible las frases civiles por donde yo voy a pasar el ratón y ahora css otra vez sigo con css yo mismo objetivo objetivo va a tener un wing de 300 píxeles un raid de 300 píxeles y un background hello y un border es el doctor black guardo recargo y tengo una zona sensible y tengo una zona que va a sufrir algún cambio lo veis lo que voy a hacer es que cuando pase el ratón por encima de este elemento el debajo cambie porque lo de hacer que cuando pase por el elemento y pase algo ya lo sé hacer el css es hv entonces ese pero lo que no se hace es y cuando pase por aquí encima otro elemento de la pantalla cambie lo que voy a hacer dentro de la función inicio es lo siguiente voy a ver todo el otro mismo bar y y es igual a dólar almohadilla sola sensible acabo de usar un selector es seleccionado zona sensible y ahora digo y punto más poder en este caso over nos lleva a mayúsculas vamos a ver todos juntos todos seguidos sin mayúsculas ejecutaré la función hembra y ahora digo parte es igual al selector zona sensible podría haber nuevos escritos resumidos sí pero si lo ves mejor el punto más out ejecutar de la función sal cuando el ratón entre dentro de esa zona se ejecutará la función entrar cuando el ratón salga de esa zona se ejecutará la función sal y las funciones van a hacer lo siguiente función entra sin pagar metros va a hacer bar y latina y es igual y d objetivo y punto css por ejemplo voy a hacer que el background red cuando el ratón entre el background el objetivo será red pero cuando salga mirar que copian era más descargado que voy a hacer pero cuando salga función salen el background el objetivo va a ser hielo qué hace este código este código lo que hace es seleccionar la zona sensible y decir cuando el ratón entre dentro de la zona sensible ejecuta la función entra cuando el ratón salga fuera de la zona sensible ejecuta la función sale que hacen las funciones entra y sale la función entra selecciona el objetivo y cambia a su fondo a rojo la función sale selecciona el objetivo y cambia a su fondo a amarillo vamos a probarlo guardamos recargamos y atención yo soy la zona sensible si todo ha funcionado bien cuando meto el ratón dentro de esta zona el fondo cambia a rojo cuando saco el ratón fuera de esta zona cambia a amarillo vale entrar es mouse over cuando el ratón realmente no es entrar es cuando el ratón esté encima de este elemento cuando esté encima de ese elemento ejecuta la función entra cuando el ratón mouse out cuando salga de esa zona ejecuta la función sale que hace la función entra la función entra como veis cambia el background a rojo no de cualquier elemento sino del objetivo que hace la función sale la función sale con respecto del objetivo cambia a su fondo amarillo así como veis con click conseguimos que al hacer clic en un elemento otro cambie o el mismo cambia a veces con el mouse over y mouse out lo que hacemos es que un elemento cambie cuando el ratón está encima o fuera de él que yo haya usado magnus haber usado no quiere decir que obligatoriamente hay que usarlos siempre a la vez el mismo proyecto en un proyecto puede usar mouse over y no usar malos autos y viceversa puede usar mouse out y no usar mouse over pero lo que sí que es cierto es que si los usan los dos y en este caso los o los dos aquí arriba estoy un poco duplicando el código porque estoy diciendo lo que pasa cuando entra y lo que pasa cuando sale es lo que voy a hacer es simplificar este código y decirle que en lugar de mouse obert voy a usar h uber heuer o suena de css hv entra como sale de esta manera por tanto mouse over se ocupa sólo de lo que pasa cuando ratón está encima manos out se ocupa sólo de los vídeos que pasamos de los gonzález h über contemplas dos funciones a la vez hvd contiene dos funciones y básicamente la función es la que se ejecuta cuando el ratón entra la segunda es la actitud en la que se ejecuta cuando el ratón sale por tanto podemos comprobar como hv es una simplificación es una contracción a la vez de las funciones mouse over y vamos a ser aguardo y recargo comprueba le como el comportamiento del script es el pie voy a hacer otro código en este caso voy a enseñar otro evento que es el evento mouse move el evento mouse move es útil para pocas ocasiones pero para esas pocas ocasiones es muy útil sobre todo para hacer videojuegos es utilísimo lo vais a ver lo que hace es ejecutar una instrucción siempre que el ratón se mueva da igual por donde se mueva va a ser siempre que el ratón se mueva mira voy a borrar esto voy a borrar la función de inicio voy a borrar incluso esto y ahora dentro del móvil voy a hacer lo siguiente móvil bien m igual coordenada x vivo igual a coordenada y y ahora vivo y ve igual a zona sensible el estilo la xl y no las voy a maquetar pero voy a decir que zona sensible es igual a week de 300 píxeles a height de 300 píxeles y a un borde de un píxel das la guardo recargo con fuego y tenemos aquí una zona sensible si queréis como aquí no soy la zona se siente hay otras como os decía por tanto mouse over nos permite ejecutar una función siempre que el ratón se mueva al igual que se mueve mucho se mueve poco siempre que se mueva ejecuta una función voy ahora a escribir el inicio lo siguiente bar y y es igual a dólar comillas zona sensible he seleccionado la zona sensible voy a hacer algo con la zona sensible y le digo y punto magos siempre que el ratón se mueva por dentro de la zona sensible voy a ejecutar la función dime la función di me va a hacer en los siguientes días la función y me va a ser una maestra de jquery y javascript a palo seko porque voy a decir barxeta lo realmente barbos x 2x es igual dólar almohadilla coordenadas ya no voy a decir 2x punto html o texto da igual y voy a poner los billetes x es igual a encadenó por dais que deja vacío se encadena con el signo más y pongo event punto cliente x que equivale a decir dime cuál es la posición del ratón en la pantalla en el eje x de la misma manera ahora copio vuelvo a copiar mar posse y coordenada y y digo y es igual eb entiendo y vamos a la que funciona y a continuación lo que hacemos es estudiar el código y ver qué afecta a la línea guardamos recargamos y vemos qué gracia allá por donde voy pasando el botón se me acerco arriba tiende a ser cero cero si me voy bajando hacia abajo también sé en cada vez un valor más alto pero atención esos números sólo pasan esos números sólo se mueven si el doctor está encima de la zona sensible me salgo de la zona sensible deja de ejecutarse solo funciona cuando estoy dentro de la zona sensible así que ahora mira la canción los voy a hacer es usted el código y voy a decir que sólo cuando esté dentro de la zona sensible ejecutaré y solo cuando el ratón se mueva dentro de la zona sensible voy a ejecutar la función dime la función dime lo que hace es poner en la coordenada x x es igual a la posición del ratón en x y en la coordenada y porque recordáis que tenía unos tres llamados coordenadas x y coordinada y y es igual a lo que sea que estoy haciendo de esta manera sólo cuando ponga el ratón para que encima se ejecute atrás la mano qué pasaría si yo quisiera que me llevara a las coordenadas xe y no dentro de este tipo sino en cualquier parte de la página web os recordáis que al final body es una etiqueta con lo cual si vivo no quiero zona sensible pero voy cambió por god y ejecutó y mirad cómo logra funciona en cualquier parte de la página web esta tontería del vamos muy nos abre la puerta a la creación por ejemplo de videojuegos que requieran conocer cuál es tu posición del ratón o por ejemplo a la creación de software de mapas de calor recordáis el software de mapa de calor que registra la posición del ratón donde la gente mueve el ratón por tu página pues imagínate que si con esto ya estás afectando cuál es la posición del ratón de tus clientes pues en lugar de mostrar esa información en pantalla no las muestras y la vas guardando en una base de datos y un buen día dices quiero ver la posición por las que las personas han puesto sobre donde la base de datos voy a editar voy a hacer que la resolución de esta página el zoom sea dinámico para con respecto a la resolución de la pantalla para que siempre se quede maximizado y no tenga problemas con múltiples monitores para problemas siempre siempre tendré pero por este caso para eso lo primero que necesito hacer es introducir el script de havas jquery llamada jquery porque voy a mostrar jota cuello así que voy a hacer lo siguiente lo voy a copiar de aquí y lo voy a pegar en este proyecto va a funcionar directamente no no va a funcionar porque antes necesito eso tenerlo muy en cuenta necesito copiar la librería y pegarla estaba dentro de ejemplo css si no no funcionará que es un clásico que se nos olvida a todos copio pero no funciona porque me ha dejado quedaría en otra carpeta ya tengo esta librería y ahora lo que voy a hacer voy a borrar esta función de inicio voy a empezar diciendo que función de inicio agrupar y y selecciona un selector a la etiqueta voy y ahora digo y css paréntesis pareja de parámetros y digo el zoom es igual a 0.5 guardo recargo y tengo ahí el zoom a 0.5 y esto que acabo de hacer siempre lo hago que es hacer algo que sé que va a funcionar porque porque me permite diagnosticar si he cometido algún error al principio es que hay veces que te pone despedirlos en este código hasta que no esté no tendrás nuevas pruebas y de repente falla dice ahora de buscar dónde falla por tanto existe una costumbre muy buena en javascript especialmente porque -ha buster como es comprobando cuando falla no dice que ha fallado eso simplemente no pasa nada en la pantalla es ir comprobando poco a poco y esto os lo voy a decir tanto ahora que no sabéis cómo cuando se país aunque sepáis cometemos errores como todo el mundo vale por tanto probar poco a poco cómo funciona 0.2 vale funciona perfectamente muy bien lo he hecho con javascript para ahora poder realizarlo de manera dinámica y por eso lo que voy a hacer es hacer lo suyo la posición no perdón la anchura es igual a javascript anchura bar anchura es igual a el comando de javascript que me permite averiguar la anchura de la pantalla o la anchura del navegador que creo recordar era screen punto uy si no lo sé de memoria lo que voy a hacer es preguntarle a san google y decirle javascript altura del navegador alto y ancho del navegador y me dice que es mira documento de client height o windows en el site walesa window dinner with y windows en el site apreté screen también lo cogía y va altura es igual es igual realmente el drama nos falta así que fuera bien voy a hacer una animalada voy a poner ahora que la el factor de zoom sea directamente la anchura tendré un zoom de 800 un zoom de 1024 una pasada voy a hacer es hacer una página web muy grande ni se ve ni se ve porque está por ahí bajo su probablemente es mi cara son los píxeles de mi cara porque veis por qué porque es un zoom muy grande lo que hago ahora es establecer un factor de corrección anchura partido 800 voy a probarlo y parece que no funciona mejor bien será recargo damos cuenta como la página en todo momento se está rescatando a la anchura de la página por tanto da igual el que entiende imagina que orador tenga da igual que resolución de pantalla tenga al recargar podría hacerlo sin recargar por el frenado tiempo real pero al recargar se va a poner automáticamente a la anchura perfecta de su pantalla es un pequeño truco porque he puesto 800 y no cualquier otro valor nosotros tenéis preguntando por qué recordar que mi página tenía 800 píxeles de ancho para eso he hecho 1024 partidos la anchura real perdón anchura real partido por 800 incluso podéis comprobar que ofrezcáis por aquí que si lo pongo no ya en esta pantalla sino que lo pongo en la pantalla de al lado recargo y sea cual sea la anchura de la pantalla se va a ajustar podríais decir nombres que ya no quiero que me ocupe toda la pantalla yo creo que tiene algún margen citó pues no pasa nada no lo divida por 800 divide no por ejemplo por milk y vas a tener un margen citó aquí fijaos que la proporción entre el margen citó y la página va a ser la misma aquí que aquí es la proporción del margen citó que aquí una demostración práctica de cómo conectar útilmente las piezas que estás aprendiendo cómo conectar en este caso javascript que controla el css y css que controle html voy a grabar voy a editar mis funciones porque voy a trabajar ahora con vamos vamos a ver a voy a hacer estilo fuera [Música] voy a hacer así que me de fuera en el body voy a poner un botón y me expulsa men a veces en el estilo voy a decir que el vivo tiene cumbres recién pixeles píxeles y el barro va a ser red rojo y el border va a ser un píxel sólido vamos a ver qué aspecto tiene esto ahora tienes que pulsar lo que voy a hacer ahora en toda la función es creer no media y para qué voy a cambiar la llamara al botón y decirle que cuando haga mouse hoy estamos vamos dando ejecutaré la función pulsa y cuando haga voy a hacer directamente si queréis y punto ejecutará la función de expulsar evidentemente me acabo de inventar otra función pulsando la jce está en castellano es que mal inventado la función púlsar tiene lo siguiente el siguiente código es que me lo voy a copiar estoy cansado escribir barxeta z selecciona el vídeo y ahora dijo z css quiero que el background [Música] o sea de color gris y en la opción de expulsar en la función de expulsar quiero que el día tenga el background blood [Música] voy a robar la atención guardó recargo a ver si todo funciona bien no me desagrada es rojo cuando llegó la atención voy a hacer clic y lo voy a mantener lo voy a soltar clic y mantener pulso se vuelve verde pero por qué he hecho mangos down pero cuando yo levantó el dedo del ratón se vuelve de color azul es un comportamiento diferente para cuando el pulso y para cuando discurso cuando pulso como podéis comprobar se vuelve el green se vuelve verde cuando te expulsó mouse up se vuelve de color blue digamos es una extensión de clic clic no diferencia entre manos y manos down telemar haces click es dentro y fuera pero si quieres trabajar que ocurre algo diferente cuando pulso cuando proyecte columnas pulses usa mouse up y mouse down dos eventos más de jquery son los eventos focos y blur vamos allá vamos a cargar javascript me había perdido sobre todo estos eventos focos y blues están pensados para formularios para elementos de formulario y mira en el body yo voy a hacer un camino input type text y voy a hacer no soy esto el estilo voy a borrar en javascript por supuesto voy a llamarla y voy a llamar al input y voy a decir un empresario es cierto cuando haga focus equivale decir cuando ya haga clic con el ratón dentro de un elemento de formulario voy a ejecutar la función enfocar en castellano y punto en inglés es desenfocar es desenfocar para qué me sirve esto lo habréis visto en multitud de ocasiones función enfoca el equivocado es llave llave para la zeta ceta igual dólar haywood iceta punto css barrón es función de se enfoca el background es cuál qué hace esto esto lo que hace es mirar es que cuando yo recargo esto es un formulario cuando yo quiero escribir algo dentro hago clic y se vuelve de color verde cuando yo el pulso fuera vuelve a ser de color blanco quizás he pasado un poquito con el color verde por lo tanto voy a poner rgb 202 55 200 para que en lugar de ser fuerte tan fuerte sea un verde clarito y es más voy a decir que out line va a ser no de esta manera con focus y blues yo puedo hacer que cuando esté dentro de un campo se vuelva de color verde los cinco veces no sabes qué campos de rellenando el formulario y que cuando salga vuelva a ser de color blanco para este ejercicio voy a hacer una validación en javascript yo tengo mirada atención en la pantalla yo tengo un foro tengo y voy a poner un input de 2000 un botón de enviar formulario pero yo no voy a hacer una cosa voy a adelantar un efecto explicar a continuación yo quiero lo siguiente yo quiero que este formulario no se puede enviar vacío pronto quiero que hasta que alguien no introduzca texto en el formulario este botón no aparezca y además me diga tienes que introducir texto para poder continuar así que en la función de inicio mirando que voy a hacer en la función de inicio voy a poner el bar y y igual a dólar y de botón enviar y esto es entradas por tanto evidentemente mirad aquí abajo hay que poner y de igual entrada y de igual botón enviar y ahora con esto estoy ganando una cosa más adelante voy a decir y punto file qué va a hacer me va a esconder me va a hyde el botón enviar guardo recargo y vamos a ver botón en día botón de envío porque no está respondiendo y punto 1 algo debo estar haciendo mal voy a poner fire con parámetros -hay fast botón envía el botón enviar mira pongo un botón pongo envío y le digo que me coge sutton y menores converse no me lo estás comiendo claro funciona por supuesto para ser visto porque no estaba funcionando es muy sencillo y este es un error característico de javascript de mención yo estoy llamando porque me lo dejaba aquí en el ejercicio anterior a entrada que llamada función enfoca y desenfocado las funciones existen no no puedo llamar visiones tutor ya no existen porque entonces dará error de hecho puedo crearla sofía vacías en foca y fusión de se enfoca si las creo y están vacías entonces vale pero si no no veis desaparece desaparece el botón mantengo la animación para que veáis cómo desaparece lo que voy a hacer ahora es decir qué pasa cuando enfoca y cuando enfoca lo que voy a hacer es el valor de un elemento y jugar con él vamos a ver quiero una función if si el input está relleno del texto entonces me muestras el botón de enviar si no no si pasa algo entonces vas a hacer algo barxeta z igual atención z igual z igual wood punto a tr valiente fin acr valió y digo que es esto esto es el input cojo su atributo que es el valor y ya digo vamos a verlo realmente esto es primero si esto no es igual a nada a ver si funciona si eso no es igual a nada en ese caso me cojo el botón y lo muestro vamos a ver qué pasa prueba el botón desaparece audi centro escrito algo no a opinar y el principio sigue sin enfocar claro porque es que enfoca a votar cuando desenfocar es cuando aparecen gran algo así me tengo que salir fuera del elemento para que se dé cuenta ahora de que tiene texto y por tanto muestra el botón momento de recargo tiene texto por mucho que haga clic no lo va a hacer por mucho que haga clic si el campo está vacío no va a mostrar el botón pero si muestro el campo pero tengo que hacer clic fuera de click dentro porque vamos a ver porque muy fácil llegó clic aquí llego clic fuera de sus fotos pero el blues desenfoca no tiene programa dorado solo cuando vuelva a entrar es cuando entra el botón porque es cuando comprueba si tiene algo por eso lo que voy a hacer es copiar todo esto así directamente sin miramientos dentro de desenfoque por eso ahora escribo y al hacer clic aparece el motor el típico que me dice que no puedo rellenar no puedo continuar hasta que no rellene el formulario por ejemplo voy a hacer lo siguiente mira voy a continuar el ejemplo botón fue vivir bieber igual rellena hasta que no rellene es el campo no pasas hasta que no regrese el campo no pasa dónde de formularios pues yo quiero que cuando haya rellenado el campo este mensaje desaparezca verdad pues y ahora aquí le digo marcet a la mayoría y igual como era el día y de rellenar [Aplausos] y punto es igual a nada porque nada vale puedes pasar comió pego y pasa lo siguiente escribo algo vale puedes pasar y de verdad veréis como la vez está pasando que me enseña el botón y me cambia el mensaje vamos a empezar a trabajar con efectos y para eso lo primero que voy a hacer es crear un archivo html dónde voy a empezar hablando de un efecto llamado hair y otro efecto llamado show además voy a mostrar el fumador de pantalla y así veréis mejor el código que estoy escribiendo tengo por tanto un hair tengo por tanto un body y dentro del head lo primero que voy a hacer que de hecho me lo podría copiar del otro día mira efectos probando me voy a copiar la llamada al archivo jquery y luego voy a hacer una etiqueta de script donde voy a escribir mi propio código aquí me falta una etiqueta de cierre de script y ahora sí barra javascript bien dentro del body tengo esto preparado para empezar a trabajar dentro del body voy a hacer lo siguiente voy a hacer un botón con y de mostrar cerramos el botón y voy a poner aquí a continuación voy a poner muéstrame nuestra media está voy a hacer otro botón a continuación en el que voy a poner oculta me y el ide será ocultar y luego voy a poner un dip y de igual a texto cerramos el vip donde voy a poner el clásico loren voy a lip xoom.com voy a copiar y pegar copio pero si ahora recargo en la pantalla veo que tengo esto veo que tengo un botón de muestra me y un botón de ocultarme y un texto que va a ser mostrado y ocultado a continuación usando javascript y evidentemente usando el jquery voy a conseguir ocultar y mostrar ese dip o en definitiva podré ocultar y mostrar cualquier cualquier elemento a continuación usando jquery voy a ser capaz de añadir dos efectos básicos que son estos efectos de mostrar y ocultar para que se muestre este div lo importante es que entendáis que no sólo sirven para este dip sino que sirven para prácticamente cualquier cosa para mostrar y ocultar cualquier cosa que os podáis imaginar por eso dentro de esta etiqueta dentro de la etiqueta script voy a empezar escribiendo var x x hace referencia al documento y cuando x 9 cuando x esté preparado quiero ejecutar la función de inicio función de inicio que a su vez va a hacer lo siguiente bar y dónde y hacer referencia a aquel elemento que tiene el líder llamado mostrar y digo cuando y punto clic cuando haga y clic ejecutaré la función mostrando delfino bar zeta ceta hace referencia a aquel elemento que tiene el y de ocultar cuando z clic ejecutaré la función ocultando que hacen las funciones mostrando y ocultando de momento no lo sé porque no lo has escrito todavía por tanto function mostrando y función ocultando y digo fuente no ocultando bar t hace referencia a aquel elemento que tenga el iii de texto y digo de punto hyde este punto es lo que hace básicamente es ocultar es ocultar el elemento que yo haya especificado aquí arriba si te es igual al texto y bigote punto jaime lo que estoy diciendo es oculta me el texto ahora aquí arriba voy a hacer justo lo contrario la función mostrando lo que hará este punto show qué ha pasado aquí que ha pasado en este código pues lo que estoy haciendo en este código es decirle que cuando pulse el botón mostrar lo que haré es mostrar el texto sobre el texto y cuando pulse el botón ocultar lo que haré es ocultar el texto vamos a ver si funciona guardo recargo y será pulso oculta me oculto el texto y será pulso muestra me muestro el texto como podéis comprobar el efecto más sencillo que es hide que show me permite para ocultar y mostrar aquellos elementos que quiera si yo no especificó ningún parámetro dentro de hyde y dentro del show lo que estoy haciendo es especificar que quiero ocultar los y mostrarlos e inmediatamente sin embargo mira dentro de high dentro del show puedo meter parámetros atención tales como por ejemplo fast escrito comillas fast si pongo fast se establece mirad una velocidad de ocultación y demostrado rápida veis que se realiza una animación donde los elementos se muestran y se ocultan rápidamente fast se puede cambiar por slow siendo fast igualar rápido slow igual a lento mira guardo recargo por supuesto si digo oculta me veis que se oculta lentamente y si digo muéstrame se muestra lentamente por supuesto si puede ser un slow no tienes por qué poner el otro slow sino que puedes poner por ejemplo que se oculte lentamente y que se muestre rápidamente y luego por último deciros que en lugar de slow o en lugar de fast podéis poner un número por ejemplo voy a poner 1000 guardo recargo atención mira y si digo oculta me y si digo muestra me tarda exactamente un segundo o lo que es igual mil milisegundos en mostrarse y ocultarse en javascript tener en cuenta que el tiempo siempre se mide en milisegundos por tanto mil equivale a un segundo si por lo que sea quiero que tarde voy a poner un poco una aberración quiero que tarde diez segundos en ocultarse lo que disponer 10 mil recargo pulso ocultar y fijaos cómo tarda 10 segundos así hemos mejor el efecto en ocultarse y si quiero que se muestre hago clic en muéstrame y tarda 10 segundos y uno más ni uno menos en mostrarse vemos por tanto cómo podemos controlar mediante el parámetro la velocidad de hyde y de show y que si no pongo ningún parámetro en hyde y show lo que estoy haciendo directamente es asumir que no quiero animación sino que quiere un mostrar y ocultar inmediato a mí realmente high the show no me gustan particularmente porque cuando yo pongo hide y pongo el show yo espero que los elementos se muestren y se oculten y para mí quizás por el modelo mental que tengo de programas de animación mostrar equivale a ganar transparencia ganar opacidad perdón y ocultar equivale a ganar transparencia pero si os fijáis si lo pongo en slow si pongo aquí slo y aquí pongo slow fijaos que no solo se pierde transparencia sino que parece como que la caja se está haciendo pequeña es una doble animación sos fijáis por una parte se gana transparencia y opacidad y por otra parte se hace grande y se hace pequeño bien pues a mí lo de que se haga grande y se haga pequeño no me gusta sino que únicamente me gusta que gane y pierda transparencia los efectos que me gustan más que show y que hide son los efectos de rating y faye down feiring hideout lo que hacen es jugar sólo con la transparencia no jugar con la escala del objeto mirad por tanto lo que voy a hacer es simplemente dentro de este programa que tenía desarrollado poner show quitar show y poner facebook en la y con mayúsculas fighting y donde ponía hyde voy a poner facebook out reid out equivale a ocultar rating equivale a mostrar sin embargo si comprobamos el resultado en pantalla atención mirad si digo oculta me lo que hace es que me oculta sólo la transparencia y si le digo muéstrame me muestra sólo la transparencia veis el texto no se hace pequeño oculta me muéstrame y como podéis ver se cambia únicamente la transparencia de en este caso el de texto no se cambia la escala ni el texto empieza a desaparecer en línea y todo esto igual que con jaydy console el fary inside out tiene parámetros de slow de fast mirad guardo recargo oculto rápido nuestro rápido veis que hay una pequeña animación si quito fast y slow la ocultación es automática es decir no inmediata pero automática y si pongo una cantidad de tiempo voy a poner 5000 tardará los milisegundos que yo haya especificado que ocultar y tarda atención cinco segundos y uno más uno menos en ocultarse o en mostrarse te voy a mostrar y tarda cinco segundos en venir a pantalla veis por tanto que al final si ya sabes trabajar con jaydy con show fighting y feid out son exactamente iguales un elemento parecido a fellini zeid out que se puede combinar como queramos es el elemento facebook yo por ejemplo voy a poner ahora en mil milisegundos un segundo sólo guardo recargo oculta me mira ahí lo voy a poner con facebook fin efe down cuando recargo me oculto tarda un segundo en ocultarse y se oculta completamente pulso mostrar y tarda un segundo en mostrarse y se muestra completamente ahora en alguna ocasión podrías decir es que yo cuando quiero ocultar no quiero que se oculte del todo sino que quiere que quiero que se quede a un 50% de transparencia para eso tenemos el método llamado face to aquí donde ponen fade out voy a poner facebook y lo que voy a hacer es lo siguiente voy a poner en facebook el porcentaje de transparencia donde uno es opaco 0 es transparente y evidentemente 0.5 en este caso sería un intermedio entre los dos guardó recargo mirad oculto y se queda al 50% voy a hacer lo siguiente voy a poner slow coma 0.5 oculto y fijaos que ha tardado en velocidad de slow como medio segundo por ahí pero se ha quedado al 50% de transparencia veis no ha desaparecido del todo cierra la vía muéstrame se vuelve a mostrar tendría que decirle facebook voy a copiar y pegar feito slow hasta 1 vamos a ver oculto hasta 0.5 muestro hasta 1 es más mira ahora voy a ocultar hasta 0.2 y voy a mostrar hasta 0.7 oculto hasta 0.2 veis que casi no se ve pero está ahí y luego muestra hasta 0.7 no está al 100% de opacidad con facebook por tanto podéis elegir hasta qué punto queréis ocultar o hasta qué punto queréis mostrar hasta ahora tanto con él como con soul como con feeding como con fey dautt como con feito nos hace falta una función para mostrar y otra para ocultar y por tanto al final nos hacen falta dos botones uno para mostrar y otro para ocultar hay una función que se llama toque que nos permite simplificar esto con un único botón es decir mirada atención y demostrar y es que si ya está mostrado en no hace nada yo lo dije ocultar pero si os fijáis un interruptor de cualquier habitación el mismo interruptor te sirve para pulsar para encender y apagar el interruptor ya detecta si está apagado o te lo enciende si está encendido te la paga pues eso es todo voy a eliminar un botón voy a crear el botón llamado hola con el ibi amado actúa y ahora voy a hacer lo siguiente digo cuando pulses en aquel botón que tiene leader actúa quiero ejecutar la función actuando la función actuando bart z z hace referencia al texto y ahora digo z punto toque doble como dar la vuelta con slow atención mira cuando recargo y ahora si pulso o la oculta el texto pero es que si vuelvo a pulsar hola se muestra así que gracias a tucker podremos conseguir que el mismo botón sea el que muestre y sea el que oculte voy a empezar este proyecto en el que voy a aplicar todo lo que hemos visto hasta ahora voy a aplicar html voy a aplicar css y le voy a dar dinamismo con el javascript y con jquery por tanto en este archivo index.html voy a hacer un archivo unas etiquetas de html evidentemente voy a hacer una cabeza voy a hacer un cuerpo dentro de ese cuerpo voy a hacer un dip que tendrá el líder llamado contenedor y ese contenedor tendrá a su vez dos dips uno que se llamará cabezal que es donde voy a poner las herramientas para eliminar cambiar de fuente y cosas así y otro día de llamado página donde cualquier persona podrá escribir así que lo que voy a hacer en definitiva es decir que content edita bolt iguala para que la gente pues la gente pueda editar dentro de dentro de ese libro yo soy un texto y ahora guardo recargo veo que tengo un texto y que además es editable así que ahora con css con estilo css voy a poner un style style text css y voy a decir que html body el html y el body vaya contando javascript no estaba olvidando ya el css y verdad y les digo que margin es cero having es cero y le digo también que el background va a ser de color gris al contenedor es decir almohadilla contenedor le digo que el fondo va a ser blanco y él que el wifi va a ser por ejemplo de 800 píxeles en mi caso que tengo un monitor pequeño el hi va a ser de 1200 píxeles más o menos un folio a4 y un boxeador donde pondré 5 píxeles 5 píxeles 15 píxeles black para que quiera ver que he hecho con esto guardó recargo y fijaos que lo que tengo es un folio tengo un folio blanco como por encima del fondo lo ha tenido que hacer zoom porque tengo un monitor de 1024 y escribiendo mitad de pantalla por tanto a golfo y al contenedor le digo atención margin dos puntos auto para que se sitúe en el centro de la pantalla así que no tengo ya aquí un texto sobre el que escribir ya que no tengo una página en blanco sobre la que escribir bien pero no puede formatear no puedo hacer nada de esto lo que voy a hacer ahora es decir que el cabezal tendrá un wish del 100% un background de rgb 000 0.2 y le digo que tenga un hype de por ejemplo voy a empezar con 24 píxeles a ver qué pasa mirad lo veis tengo ahí un cabezal donde empezaría a poner botones de alinear archivo nuevo cursiva negrita y todo eso y abajo tengo el texto además dentro de la página de poner página voy a ponerle simplemente un padding de 25 píxeles y de esa manera el texto quedará mejor centrado en la pantalla voy a copiar y pegar voy a hacer un simulacro y veis como estoy escribiendo una especie de word en línea lo que he hecho de momento es con html escribir este word a continuación voy a diseñar unos cuantos iconos para el cabezal y para luego poder tratarlos con javascript para eso lo que voy a hacer es usar inkscape que es un programa de ilustración vectorial específicamente recomendado para diseñar botones para programas voy a crear un botón en este caso vamos a darle un color gris clarito voy a darle un borde el relleno y el borde está por aquí color de trazo está blanco voy a ponerlo si queréis gris pero el estilo de trazo será mucho menor por lo que le diré que va a tener un pixel y ahora tengo este objeto que de ancho mide 61 voy a hacer que mida 32 x 32 y tengo ya por aquí un botón bien este botón me va a servir para crear múltiples efectos de hecho voy a hacer un botón 3d y para eso voy a hacer un relleno donde podrá especificar la dirección del relleno de esa plantilla de botón que va a servir para crear un montón de efectos un montón de elementos por tanto ahora lo que voy a hacer es empezando a crear los botones de por ejemplo eliminación y luego un botón por aquí le digo que las uniones serán redondeadas y quizás que el texto sea más grueso y algo así copio y pego [Música] lo hago más grande cuidado algo más grande así duplicó duplicó y por último duplicó la distancia entre líneas es igual es la misma no pero para eso tengo unas herramientas de alinear y distribuir que van a permitir hacer que la distancia en vertical sea la misma que nos sugiere este botón este botón nos sugiere que voy a alinear a la izquierda por tanto yo copio esto y digo exportar exportar mapa de bits exporto la selección 32 píxeles examino y digo que lo exportó m master web actual editor voy a crear una carpeta ing para guardar imágenes y llamo esta imagen a eliminar izquierda exportó y ahora voy a esa [Música] a esa carpeta voy a master web actual editor y mgm que he creado un botón a partir de ese gráfico vectorial y ahora por supuesto en html dentro del cabezal meteré una etiqueta img src img va a alinear guión izquierda punto png vamos a ver si puesto el nombre correctamente parece que sí tenéis ya por tanto esperar que haga un poco más grande el botón de alinear a la izquierda no es un botón es una imagen no pasa nada ahora luego con javascript lo vamos a convertir en un botón voy a editar un poco el botón voy a retocarlo un poco veis que algo no cuadra porque el cabezal tenía una altura de 24 píxeles pero el botón tiene un altura de 32 no voy a hacer que el cabezal tenga una altura de por lo menos 34 para que lo pueda contener y ahora voy a volver voy a volver a editar el gráfico voy a hacer un degradado relleno lo voy a editar y voy a decirle que este de aquí sea de color gris o de color blanco y este de aquí abajo sea de un color gris un poco más oscuro si tengo un botón con una ligera forma 3d exportó reemplazo voy a visualizar y tengo ya ahí el botón con una ligera forma 3d insisto ahora mismo es una imagen y hago clic y no hace nada pero evidentemente más adelante haremos que ese botón realice alguna acción no lo habéis visto claro pues lo vuelvo a repetir yo lo que voy a hacer es seleccionar este botón lo duplicó lo modificó para decir que esta va a ser la alineación centrada por tanto selecciono exportó y digo esto se llamara alinear al centro exportó y ya que estoy esto se va a llamar alinear a la derecha derecha exportó ya existe y este de aquí se va a llamar alineación justificada son los típicos iconos del programa de ofimática a alinear justificada y ahora me voy a guardar esto para en un futuro poder editarlo editor ing botones para no perderlo y ahora vuelvo aquí mirar y puedo incluso porque no atención copiar esa línea y pegarla img alinear derecha alinear al centro y alinear atención justificado cuando recargo mira tengo allí los cuatro botones el último ha fallado porque parece que no era alinear justificado sino alinear justificada una sola vocal que falla y la imagen ya no carga pero corrijo la vocal que haga falta evidentemente recargo y ya tengo ahí los cuatro botones ya tengo ahí cuatro botones y lo que voy a hacer es a continuación empezar a hacer que esos botones realmente modifiquen mi texto lo que haré ahora por tanto exponer ya este programa en funcionamiento al menos en un mínimo funcionamiento voy a copiar lorem ipsum aunque luego evidentemente cualquier usuario podrá escribir lo que quiera dentro de esta aplicación pero así contamos con un texto largo que se pueda comprobar fácilmente mirad tengo esto la alineación por defecto es a la izquierda lo veis atención mirad a la izquierda lo que tengo que hacer ahora con javascript y con jquery es que estos botones funcionen y que estos botones me permitan alinear correctamente el texto mirad de probando me voy a copiar la etiqueta script las voy a pegar aquí en el g y por tanto lo que he hecho es importar a jquery y ahora voy a crear mi propio script type a texto barra javascript y pongo var x x hace referencia al documento cuando x punto ready ejecuta la función inicio y la función inicio de momentos sin parámetros hace lo siguiente cada botón va a tener una idea son imágenes pero los voy a convertir en botones y de igual a y de alinear a la izquierda copio y pego esta será de alinear a la derecha esta será hace de alinear al centro y esta será a jd la línea de justificado lo que importa es que ya les he puesto una idea por tanto ya las puedo seleccionar y ahora la función inicio dice vale x he usado x antes pero no pasó nada puedo usarlo otra vez les digo x hace referencia a aquello que tenga el ide alinear a la izquierda y lo mismo que pongan un sitio tengo que poner el otro cuando x punto clic entonces ejecutaré la función alinear a la izquierda al ahli la función alí y allí arriba pongo al y abajo tengo pedal va a hacer lo siguiente marc x se puede volver a repetir hace referencia a la página x css le añade la propiedad text align es igual a left ya está pero sabéis qué pasa he empezado con el peor que podía empezar porque es el texto ya estaba alineado a la izquierda así que bueno voy a probarlo para comprobar que simplemente no pasa nada no es que no pasa nada sino que simplemente estudiando la propiedad que ya tenía vale pero lo que voy a hacer ahora es simplemente repetir este código y decir cuando seleccione juan primero seleccionó a d alineó a la derecha alguna función llamada alinear a la derecha copio esta indicó al y se convierte en alde fijaos y aquí pongo al de aquí pongo al d y le digo que el alain me lo hace no right a la derecha guardo recargo vamos a ver si funciona por supuesto para que esto funcione en la carpeta del proyecto tiene que estar copiado el archivo jquery que senna no funcionará bien guardo recargos y pulso este botón se alinea a la izquierda si pulso este botón se alinea a la derecha veis como acabo de empezar a hacer el resto va a ser repetir esto es tan infinito y más allá veis como ya he conseguido formatear un texto usando dos botones y jquery permitirme continuar y acabar con los cuatro botones como os podéis imaginar esto va a ser cuestión de copiar y pegar si ahora vivo que quiero maquetar un copiar y pegar es que no tiene más alinear al centro y alinear justificado alinear al centro ejecutará la función alce y alinear justificado ejecutará la función al jota y ahora me copió las funciones y digo alce a línea al centro center y al f a línea con justify guardo recargo voy a hacer la pantalla grande para que se vea mejor el efecto y tengo con los cuatro botones alineación de la izquierda a la derecha al iniciar alineación al centro y alineación justificada vamos a ver por qué text align es igual a justify alf claro es que he puesto alf y es al jota veis una sola que te equivoques y ya no funciona una sola vocal consonante que te equivoques izquierda derecha centro justificado y veis como javascript nos ayuda a hacer más dinámica la página hasta ahora y de hecho a partir de ahora continuaré prácticamente igual pero hasta ahora os he estado explicando la versión para niños de jquery la versión simplificada de jquery la versión aplicada simplificada de jquery cada cosa que hacemos es un paso diferente y de esa manera escribimos mucho código y lo podemos entender perfectamente y podemos ir línea a línea sabiendo que hace cada trozo del código el problema lo podemos ver ya con este código que tenemos en pantalla es que al final tenemos tanto tan de tantas líneas que nuestra cabeza aparece el pensamiento esto no se podría simplificar sí que se puede simplificar pero atención la simplificación siempre va a ser a costa de aumentar la dificultad en la lectura del código cómo puedo simplificar yo esto pues mira por ejemplo para la función de inicio voy a hacer dos simplificaciones una más suave y otra más fuerte voy a decir que realmente no me hace falta declarar una variable para esa variable asignarle un selector para ese selector asignar una función porque fijaos esto es x x igual a esto x punto clic pues yo puedo hacer perfectamente esto si esto es igual a equis porque no puedo hacer esto así que puedo hacerlo y es más si ya tengo el selector y tengo la instrucción para que me hace falta ahora la variable la eliminó y lo que estoy haciendo de esta manera un momento porque ésta es la primera simplificación luego haré la segunda que es más compleja lo que estoy haciendo de esta manera es decirle directamente selector y función ya no me hace falta cargar una variable para esa variable asignar un selector para esos electores en una función voy por tanto a hacer lo mismo con el resto de líneas y a continuación por supuesto vamos a comprobar que funciona y click he pasado de tener 12 líneas de código a tener 4 líneas de código pero la dificultad ha aumentado un poquito en este caso vamos a comprobarlo atención guardo recargo y fijaos cómo izquierda derecha centro justificado es decir sigue funcionando perfectamente pero voy a ir más allá voy a seguir simplificando y voy a pensar lo siguiente yo estoy aquí en index y digo cuando hago clic ejecutó la función al y la función ali está aquí ld ejecuta esta función a lc ejecutar y la función porque tengo que tener las funciones separadas porque no cuando hago clic aquí no le puedo decir directamente lo que quiero hacer la cuestión es que puedo pero cuidado esto requiere que haga lo siguiente atención voy a copiar esta función y a palo seko la voy a pegar aquí de hecho si la pego ya no me hace falta si el apego ya no me hace falta que se llame función allí porque a mí me hace falta cuando la llama arriba la llamo abajo y la tengo que identificar ahora puedo decir que simplemente es una función escribo function dos puntos tal empiezo a comprimir el código y digo 99 bar x me sobra bar x me sobra y digo página css eliminó eliminó y ya lo tengo así que por ejemplo vamos a comparar con clic a lb tengo que llamar a l de aquí tengo que crear una función aquí y tengo que definir la variable y tengo que gastar líneas de código sin embargo con alí lo que he hecho es seleccionó ay cuando haga clic ejecutó una función que selecciona la página y le da el css text align a la izquierda ojo es menos código pero ahora se ha complicado guardo recargo compruebo que así que funcionando mirad sigue funcionando voy a hacerlo con todos de hecho puedo copiar y pegar atención me voy a cargar estas funciones y voy a hacer lo siguiente atención clic copio y pego y digo este va a la derecha este va al centro y estaba justificado guardo recargo y compruebo como el funcionamiento es el mismo solo que punto número 1 he reducido la cantidad de código que tengo y a la vez he aumentado la complejidad de la lectura de ese código porque como traduciría en esta línea antes se podía traducir línea a línea ahora esto se traduce de la siguiente manera atención seleccionó el elemento con i live aid y le digo que cuando hago clic ejecute una función que selecciona la página y le añade el css text align left es legible pero esto es digamos entre comillas como leer en alemán que dices vale veo un montón de palabras y no sé ahora mismo cuál es el verbo y cuál sustantivo y cuál es el tal vale por tanto que sepáis es más queréis una simplificación más fuerte todavía la podemos hacer qué pasa con esta de aquí arriba porque yo le puedo decir que en lugar de que ejecute la función de inicio le digo esto me lo cargo y digo cuando el documento esté preparado ejecuta la función de inicio pero es que es más la función de inicio la voy a meter ahí dentro me cargo la palabra inicio y función la meto ahí dentro y no tengo que crear una variable x no tengo que decir que cuando el documento esté preparado cuando recargo compruebo cómo sigue funcionando perfectamente así que en definitiva como veréis hay un javascript para niños y un javascript para expertos cuál tenéis que usar yo os recomiendo usar el javascript para niños donde si cometes un error es más fácil detectar dónde lo has cometido y luego cuando ya controles perfectamente el de niños os pasáis a este que es el simplificado que es donde escribimos menos líneas de código pero a la vez el código se vuelve menos legible y por tanto aumentan las probabilidades de que cometamos un error y no sepamos localizarlo el problema aquí y fijaos está en que se expone a contar es difícil sobre todo es difícil por esto mirar en que está este paréntesis se abre aquí donde se cierra se cierra aquí no estos son dos se cierra aquí tampoco se cierra aquí ahí es donde se pierde la legibilidad y está ya vea que corresponde esta llave corresponde a aquí y este paréntesis veis y esta llave de aquí a quien corresponde pues a esta de aquí y ésta de aquí este paréntesis a este paréntesis ahí es donde se pierde la legibilidad house eso sí sigue funcionando perfectamente lo que voy a hacer ahora es crear más elementos [Música] vamos a ver editor index aquí está voy a crear más elementos para este editor de texto para ello voy a recordar que tenía por aquí el programa inkscape con el que estaba diseñando los botones y voy a seleccionar un botón lo voy a pegar aquí abajo con una extensión de la colección de botones y voy a decir que le pongo una letra be y la ave va a ser negrita así que me grita y tengo la letra b ahora duplicó pero esto aquí esta letra la editó la convierto en una y le digo que va a ser itálica y creo por tanto unos iconos con los que si todo va bien el usuario debería entender que este es el icono de negrita este es el de cursiva y voy a hacer otro icono en el que voy a poner una o una le quitó la cursiva y evidentemente dibujando un poquito me cojo estoy aquí copio y pego llegó un pequeño subrayado con lo cual la gente debería entender que pulsar el botón equivale a subrayar todo el texto ahora exporto exportó y digo esto es formato punto vol esto es formato guión itálica y esto es formato guión subrayado de vuelta a html evito estas imágenes y digo tengo 3 y digo la primera es formato guión negrita he puesto negrita ha puesto vuelta vale el molde el siguiente es formato itálica y el último es formato subrayado los seres no pueden ser iguales formato vol formato itálica formato subrayado efe efe y me lo estoy inventando son identificadores que me sirven para luego poder localizar dentro de javascript hago así y fijaos que ya tengo tres botones más que de momento no funcionan para negrita para itálica y para cursiva y ahora lo que voy a hacer por tanto es volver a javascript y escribir me copió estas tres líneas no he separado con un espacio simplemente para separar bloques e incluso podría poner el comentario sería bastante recomendable para más adelante poder y poder recordar que hacía cada línea estilo y esto era eliminación y ahora digo cuando haga clic en aquel elemento vamos a pensarlo selecciona el elemento formato negrita cuando haga clic en el ejecutar en la función que al elemento página le daré el css weight bold cuando pulses sobre el elemento f cuando hagas clic sobre él ejecutará en la función que seleccionará la página y le aplicará style y tales cuándo haga clic sobre elemento llamado fs creo recordar igual me estoy equivocando pero si no ahora luego lo compruebo con las plantillas que era font style and air line guardo recargó vamos a ver qué efecto tiene esto texto centrado a un lado ya otro para texto en negrita texto en itálica y texto subrayado parece que no vamos a ver a continuación qué puede ser lo que voy a hacer ahora es cambiar el lugar de fonte style voy a poner text decoration con lo cual ahora sí comprobaré cómo tengo negrita itálica y subrayada el problema ahora mismo es que si yo pulso negrita no se quita la negrita porque negrita sirve solo para poner no sirve para quitar claro yo podría hacer otro botón al lado que fuera para quitar negrita verdad pero usuario no está acostumbrado a esto el usuario está acostumbrado a que si pulsa un botón se pone negrita y si pulsa ese mismo botón se quita la negrita todos lo hemos hecho verdad en procesado de texto en correos vale vamos a ver cómo podríamos hacer esto simplemente con javascript lo que voy a hacer es lo siguiente mira la atención arriba del todo es más fuera de jquery voy a crear una variable llamada negrita que voy a igualar a 0 pero es negrita no uno será negrita así y ahora voy a hacer lo siguiente creo una función que va a hacerlo siempre esa es la función de negrita me hago espacio me hago espacio típico estoy dentro de la función verdad dentro de la función dentro de la que convierte a negrita y digo sí negrita es igual a 0 entonces pone el objeto en negrita ya que negrita sea igual a 1 sí no y ahora os explico el código sí no haz que el tamaño del peso de la fuente sea normal y negrita sea igual a cero vamos a ver si funciona primero vemos funciona y luego explicó el código guardo recargo y vemos que a verse funcionando correctamente pulso este botón y se convierte en negrita y si todo ha ido bien pulsa el botón y se vuelve a convertir en letra normal la habéis visto mira pulso y se convierte en negrita pulso y se convierte en letra normal porque ha funcionado voy a explicar el código una variable llamada negrita que empieza siendo igual a cero recordad lo que he dicho negrita es igual a cero y cero es igual a que no es negrita es normal y ahora digo atención cuando haga clic en ese botón voy a comprobar si negrita es igual a cero o sin negrita es igual a 1 sin negrita es igual a 0 atención mirad a la pantalla sin negritas igual a 0 ejecutaré este código sin negrita es igual a 1 ejecutar este código verdad y es una decisión de verdadero o falso sin negritas igual a cero quiere decir que el texto no es negrita luego pongo el texto en negrita pongo el texto en negrita y en la línea siguiente digo negrita es igual a 1 para la próxima vez que me pulses ten en cuenta que negrita ya no es igual a 0 negrita es igual a 1 estoy en negrita esta es igual a activado atención era de la pantalla la próxima vez que yo pasé por aquí mira cuando haga clic en el elemento negrita es igual a 0 no es falso es igual a 1 si es falso le diré que le pongo un fondo weight normal le quitó la negrita le quitó la negrita y en la última línea digo negrita es igual a 0 le quitó la negrita luego negrita desactivada en a grita es igual a 0 este es un ejemplo por tanto en el cual vemos varias cosas cómo combinar varias piezas cómo usar variables cómo usar funciones cómo usar jquery y cómo usar las estructuras de control que nos van a servir en este caso una estructura de control y para que el programa haga lo que nosotros queramos esta es la forma extendida fijaos que con la forma extendida yo lo que he hecho es introducir saltos de línea en cada una de las operaciones con la forma abreviada yo podría ahora empezar a suprimir y empezar a ponerlo todo en una sola línea sin embargo si me lo permitís en esta ocasión como el código se complicaría una barbaridad lo voy a dejar así como está voy a dejar con saltos de línea para que entendáis que hace el if y que hacer else voy a cerrar lo mismo con la itálica y con la y con la cursiva para ello arriba del todo voy a empezar haciendo una variable llamada itálica igual a cero y una variable subrayada subrayado es igual a cero es que incluso mirada atención incluso lo que voy a hacer es copiar y pegar todo este código condicional copio y aquí en la función función aquí pero y digo sí itálica es igual a cero style es igual a itálica pero si itálica itálica es igual en itálica itálica pero sí itálica es igual a 1 en ese caso el font style será igual a normal y itálica será igual a 0 es lo mismo cambiando las variables voy a volver a repetirlo hasta aquí este es el problema contar llaves y saber que es hasta esta llave y no está esta porque se cogieron además una de menos fallaría ahora cojo la función y desde aquí hasta aquí voy a pegar morro muy abajo pego y digo sí subrayado es igual a cero digo que pecs decoration es igual a underline subrayado es igual a 1 sí no text decoration no pondré normal sino que pondré no 1 ninguno y subraya no es igual a cero compruebo y compruebo como negrita así y no itálicos y no subrayados y no en definitiva repetimos la estructura para en cada momento comprobar el valor de la variable y actuar de una manera o de otra al final el valor de cero y uno para negrita itálica y subrayado es una variable interna nuestra que ponemos porque nos da la gana entonces no es que siempre cero tenga que ser apagado y uno encendido aunque evidentemente por motivos lógicos se recomienda que sea así pero podemos saltarnos esa recomendación entonces yo voy a hacer que por ejemplo es massa para que lo veáis voy a poner hasta en valenciano voy a poner que negrita es igual a apagado que en castellano sería apagado a pagar a pagar para que veáis que puede ser la palabra el término que vosotros queráis pero yo bajo aquí abajo y digo negrita es igual a apagar pues entonces acceso y negrita es igual a en ses no poner bien no ponen acentos para no complicar la cosa els negrita es igual a atacar apagar apagado pienses a pagar y entonces guardamos probamos y comprobamos como formateo texto y al llegar aquí negrita negrita itálica itálica subrayado subrayado los valores de un y off son los que tú quieras lo que pasa es que se recomiendan que sean 0 y 1 porque todo el mundo trabaja poniendo falso igual a 0 verdadera igual a 1 si haces esto de poner tus propios códigos de verdadero y falso el programa funciona pero estás dificultando la lectura de ese código a otro programador que puede venir después vamos a ver una nueva instrucción de jquery donde hasta ahora hemos visto cómo meter texto cómo meter html que en ambos casos sustituyen al contenido que previamente tenía un elemento pero gracias a pen vamos a poder insertar nuevos elementos mira lo que voy a hacer atención es lo siguiente el segundo lo que voy a hacer es empezar creando un botón recordad siempre es importante que guardemos este archivo ya que son los botones originales que estamos están desarrollando copio pego y voy a hacer un botón que añada una tabla al texto que yo esté escribiendo no quiero que se sustituya el texto y meto una tabla quiero que añada una tabla a continuación voy a meter una caja negra una caja le voy a quitar el redondeo color de trazo lo voy a poner en negro voy a disminuir el tamaño del trazo y ahora usando esta herramienta voy a crear una línea por ahí y voy a crear una línea por aquí en definitiva y algún icono que espero que la gente entienda como un icono de crear tabla o editar tabla o lo que sea así que guardo exportó esto es tabla y ahora en html lo que voy a hacer es crear una nueva imagen qué será tabla png con ella y de llamado por ejemplo con tabla porque porque me lo acabo de inventar algo así fijaos que no tengo un botón que me servirá para poner una tabla bien pues yo me voy ahora a javascript y escribo lo siguiente mirad y escribo por ejemplo me copió esto me pegó aquí abajo vaya donde tengo que pegar pues vamos no se debe pegar justo a continuación y más adelante ya me diréis dónde empiezan y dónde acaban los corchetes y las comillas y digo siempre que seleccionó el elemento que se llame con tabla cuando haga clic ejecutar una función en la que en la página voy a empezar con html empezar con lo que no hay que hacer pondré un html khedira table paintball wef es igual al 100% border es igual a 1 y ahora hago pr tv dv tb tr ahora me cumplir todo esto no pero aquí y si todo ha ido bien eso es una tabla de dos por dos por lo que si ahora guardo y pruebo el resultado será negrita cursiva y si hago así lo que hago es meter una tabla pero cuidado he usado el método html así que quito el texto que tenía y meto una tabla esto es lo que no quiero bien lo que voy a hacer por tanto es meter y esto debe seguir siendo editable es meter lo siguiente y de hecho le voy a decir que content evitamos es igual a true lo que voy a hacer es que en lugar de usar el método html voy a usar el método app en el método apple me sirve para decir que además de todo esto cuando yo haga clic a continuación quiero meter una tabla y de hecho si sigo pulsando clic comprobaré como a continuación puedo meter tantas tablas como quiera lo que haría ahora es poner un poco de contenido de prueba guardo y recargo meto una tabla y a partir de ese momento puedo editar esa tabla esta es mi tabla que tiene el contenido que yo quiera hola y si ahora quiere otra tabla yo hago clic por aquí inserto tabla e insertó la tabla a continuación portland o veis como elemento html el elemento a penden puede servir para añadir más elementos a mi proyecto dentro de jquery vamos a trabajar con el objeto más que llegue incorporado dentro de javascript el objeto más nos permite simplificar la creación de algunas operaciones matemáticas como por ejemplo los redondeos uso de constantes en números aleatorios etcétera por eso voy a sacar a los comités voy a empezar con este archivo y voy a crear un archivo html que va a contener una etiqueta necesita boeing dentro del egm crear la etiqueta de este tipo texto barra javascript dentro de ella voy a hacer lo siguiente voy a poner el típico acordamos de las primeras veces en javascript document punto wright hola así que si yo hago esto y ahora recargo obtendréis que me dice hola en la pantalla bien lo que voy a hacer ahora es decir lo siguiente eres para x es igual a por ejemplo vamos a empezar con las constantes más punto daos cuenta una cosa y es que fijaos que en cuanto el puesto más ese tema se ha puesto de color verde lo cual quiere decir que se reconoce como una de las librerías específicas de javascript una vez más por tanto la palabra más es una palabra reservada y no podéis usarla para vuestras propias variables pero recordad el consejo que os dije al principio poner siempre palabras en castellano para nuestra propias variables y nunca o prácticamente nunca os podéis equivocar si yo ahora digo quiero recuperar el resultado de x x que es x es igual a más y equivale a decir más seleccionó a la librería matemática punto y selecciona un método de la librería matemática que es el resultado de pi cuáles son los métodos de pi los pies 3 14 15 92 de esta manera estoy ahorrando me porque es importante saber el valor de pi ahora lo veréis sobre persona sesión la creación de juegos con trigonometría bidimensional y veréis qué parte econometría es muy importante el uso de pi por todo para convertir de grados a radiales y cosas así por tanto el primer elemento que encontramos dentro de la librería matemática son las constantes las constantes no son variables sino que son números constantes que podemos usar en nuestros cálculos tenemos y tenemos el número cuál es el número y el número es otro número bastante importante que se usa para agrupar logaritmos y fijaos que si yo recargo ahora me dice que el número es igual a dos puntos 71 82 etcétera etcétera otra constante por ejemplo atención es más es el erp 2 que es ese q r t 2 ese es la raíz cuadrada de 2 un momento eso quiere decir que solo voy a poder averiguar la raíz cuadrada de 2 no puede saber igual cualquiera igual cualquier raíz cuadrada que quieras lo que pasa es que esto recordad que son constantes para algunos números que ya vienen predefinidos aún así cuando quieres averiguar cualquier raíz cuadrada simplemente tienes que poner ese q rt paréntesis veis como se reconoce como una función como un método por ejemplo de 4 cuál es la raíz cuadrada de 4 guardo recargo y me dice que la raíz cuadrada de 4 es 2 cuál es la raíz cuadrada de 9 la raíz cuadrada robert estrés cuál es la raíz cuadrada de 8 la raíz cuadrada de 82 82 84 veis por tanto como vamos a poder disfrutar de algunos números constantes y sobre todo una gran cantidad de funciones insisto de constantes incluyendo por ejemplo el logaritmo neperiano de 2 el n 2 por ejemplo el logaritmo neperiano de 10 el n 10 no están todos evidentemente si pongo y el logaritmo del período de 11 el programa medirá gasto que es nuestro definido no puedo creer cualquier cosa sólo una lista de constantes que javascript tienen preprogramadas vamos a ver ahora un par de funciones la primera de ellas ya hemos visto es la función de square root que nos permite hacer raíces cuadradas otra muy importante es por ejemplo + round más round me permite redondear un número si yo por ejemplo pongo cuatro puntos 76 acepción obtengo el valor 56 tengo ahí más puntos round de 4.76 y en la pantalla el resultado de 5 mientras que si pongo más punto brown de 4.34 el resultado en la pantalla es 4 es decir lo que hace el programa es redondear al número entero más próximo si superó el punto 5 se va hacia el número superior sí supongo existe sino superó el punto 5 se va hacia el número inferior y ahora lo que voy a hacer mirar es usar un par de funciones más la primera de ellas llamada flor y la tercera de ellas llamada fail fail de feelings de techo mira te pongo en lugar del round pongo flor flores el suelo si yo hago 4.34 flor de 4.34 el resultado es 4 pero si yo hago 4.8 y le digo cuál es el flor sigue siendo 4 el flor es un redondeo siempre hacia abajo flor en inglés el suelo al techo siempre al suelo de la misma manera a fail face styling este hecho quiero averiguar el techo de 4.8 cuál es el techo de 4.826 5 evidentemente pero si yo digo cuál es el techo atención mirad de 4.2 el techo de 4.2 también es 5 porque es redondea 4.2 pero no donde ha llegado hacia arriba si yo hago una aplicación financiera evidentemente realmente me convendrá redondear hacer un round pero donde hacia arriba cuando que hacia abajo otro tipo sin embargo veréis que en muchas otras aplicaciones en un momento dado te puede convenir más redondear siempre hacia abajo o siempre hacia arriba más cosas el valor absoluto la el valor absoluto es el valor sin signo de un número lo que hago para poner un valor absoluto es más punto a bs de absoluto cuál es el valor absoluto de 4.2 el resultado es 4.2 pero cuál es el valor absoluto de menos 4.2 el resultado es 4.2 es decir absoluto lo que hace siempre es quitarle el signo si es menos 10 lo convierte en 10 si es más 10 lo convierte en 10 en absoluto se queda solo con el número y olvida completamente el signo como por ejemplo pues que te diría yo este es el balance de empresa ir a menos 10 mil y tú al final en javascript dices quiero averiguar cuál es el balance negativo balance negativo igual a 10.000 no es balance negativo igual a menos 10.000 porque entonces sería positivo negativo en negativo es igual a positivo ese es un típico caso donde conviene usar el absoluto es es menos 10.000 pero el servicio de balance negativo luego quieres averiguar la verdad absoluta absoluto del número una de las funciones a las que yo tengo ahora que yo tengo más a precios la función aleatoria ya que me permite generar aleatoriamente un número en principio puede parecer que la función aleatoria en javascript está bastante limitada sin embargo no es así ahora veremos que le podemos sacar bastante partido para generar una función alertó bien tengo que poner en más punto random razón en inglés es aleatorio y ahora pongo paréntesis paréntesis tras lo cual si guardo y compruebo veréis como en este caso atención ha salido 0.3 471 lo que sea pero yo ahora recargo y me sale otro número y ahora recargo y me sale otro número y ahora recargo y cada vez me está dando un número diferente porque esta es la gracia que tiene la función aleatoria la base que tiene es precisamente el que cada vez que recargo me da un número completamente diferente el problema entre comillas porque no es un problema y vamos a ver cómo se resuelve del número aleatorio es que si os fijáis va entre 0 y 1 además es un número de la teoría bastante raro porque veis que entre 0 y 1 me da bastantes decimales de precisión pero esto insisto es bastante conveniente porque voy a poner varios casos voy a resolver estos casos y ahora luego un ejercicio práctico veremos para que nos pueden servir y mucho el número aleatorio lo primero que voy a hacer es juntar dos funciones por tanto lo que voy a hacer mira es más punto round y ahora lo que he hecho es englobar más puntos random dentro de este paréntesis es decir fijaos que tengo más puntos round y dentro de ello tengo más punto random que voy a hacer los hechos anidados dos funciones matemáticas no se pueden olvidar tantos como queráis calculó el número aleatorio y a continuación le digo redondea velo así que si el número aleatorio era este por ejemplo 0,14 mi lugar donde ha dado a cero si el número aleatorio hubiera sido 0.7 breve ha redondeado a uno si ahora guardo y recargo veréis que ahora tengo cero o tengo uno porque todos aquellos valores que son menos vivieron el tercero punto cinco de los pasada cero y todos ellos valores que son mayores que 0,5 menos pasado bien muy bien he conseguido resolver esto durante un problema y es que puedo averiguar dos verbos aleatorios entre 0 y 1 pero no puedo averiguar para los mandatorios entre 0 y 10 porque errando me lo da pero no pasa nada hay un truco un pequeño truco que se usa una realidad que es decir bueno más puntos round y digo más punto random por 10 y de esa manera con este sencillo truco voy a averiguar cualquier número aleatorio entre 0 realmente y 9 o qué problema el problema en este caso es que sólo podría averiguar fijado sabéis tengo valores que van desde 0 a 10 luego no son 10 números son 11 números porque si contamos el número cero si os fijáis la cuestión aquí está en que si yo por ejemplo decirle round le digo fail de hecho únicamente me va a averiguar el techo de sus números fijaos que se hace cargo muchas veces ya nunca voy a ver el número cero así que de esta manera realmente tendrá una función aleatoria que va entre 1 y 10 days por ejemplo para que pueda servir la esta función que pasaría porque ahora voy a mostrar un juego de cartas aleatorio que pasaría es que si es que no quiero ni uno ni diez quiero tres pues en lugar de multiplicar por diez multiplicó por tres cuando recargo y mirar tengo uno dos o tres pero no tengo ni cuatro ni cero ni más de cuatro el número aleatorio bien usado nos puede servir para generar cualquier tipo de juego que tenga el número de elementos que nosotros queramos qué pasaría si yo quisiera por ejemplo tener un número aleatorio entre 5 y 10 la solución es mucho más fácil de lo que puedas pensar veréis si yo hago un número aleatorio los multiplicó por 5 yo tendré un número que irá desde 1 hasta 5 y tú dirás project preguntado eso estoy preguntando un número aleatorio que vaya desde 5 hasta 10 la solución es tan sencilla como meter esto dentro de un paréntesis y sumarlo en 5 así que al número que te ven entre 1 y 5 las sumas 5 y tienes un número aleatorio entre 5 y 10 fijaos como ahora tengo 8 tengo 6 tengo 9 tengo 10 57 algún 5 mes habrá alguna vez no claro lo que puede ser un 5 porque le he dicho que el sumó 51 más 5 es igual a 6 con lo cual es sumaría 4 vamos a verlo y ahora si tendría algún 5 y de vez en cuando espero que me salga algún 10 y si no lo que haría es sumar de este valor a instalar en lugar de multiplicar por cinco los multiplicaría por seis en definitiva como veis cualquier rango de valores aleatorios lo podéis conseguir simplemente cogiendo el valor random original y multiplicando o sumando oa veces incluso restando vamos a ver unas cuantas funciones más para esto voy a empezar por ejemplo con las funciones trigonométricas una vez más son si estos pongo más punto y lo que hago es poner por ejemplo el cost el coseno de un número el coseno de uno de uno que pues aquí viene la mala noticia por lo menos la mala noticia para mí y es que en javascript los los ángulos se escriben en radiales no en grados yo estoy más cómodo a trabajar en grados por tanto veréis que siempre que hago un programa que usa la matemática trigonométricas lo primero que hago es convertir de los bienes sagrados para saber mejor lo que estoy haciendo entonces por ejemplo el consejo de uno no es el co seno de un grado sino es el seno de un radio y me dice que es 05 es el resultado de cosa nuestra 5 recordad que trabajando en radial es una vuelta entera de circunferencia es 2 por pi radiales son dos ni unos nuevos dos por fin de llevar a prácticamente 77 el consejo de 2 – 04 tenéis que ver esto como un círculo digamos fijaos que si el dibujo un círculo creo que no puedo dibujar un círculo para aquí y esto es cero si él si tenemos dos pues prácticamente el coche no abre el consejo de uno estaría lo suficiente nosotros no estaría por aquí vale por tanto el cose no como veis dispositivo sin embargo creo que el consejo de dos estaría para aquí y veréis que por tanto el corsé no es negativo tenéis que pensar lo siento y soy primero que la rabia es que pensaba en radiales luego tenemos otra función que es el seno del pse no se escribe en inglés por tanto se escribe como sin como sinus y no como se pongo si del seno evidentemente era el seno de 2009 el seno de uno me dará 08 pero sin embargo el seno de tres meses seguirá dando positivo pero el seno de cuatro ya me darán negativo y el seno del 5 evidentemente era negativo y el seno de 6 era negativo y grace porque os hacéis el esquema de radiales es que es muy fácil ya una circunferencia esa patata conferencia a partir de la conferencia y si este es el grado cero y hemos dicho que prácticamente y aquí aquí hay existe unidades uno estará por aquí fijaos que el 0 da positivo 2 estará por aquí el seno de positivo 3 está la voz por ahí pero ahora 3 estará por ahí y él se notará positivo pero 4 estará por aquí con lo cual como veréis el pse no está ya negativo para las funciones trigonométricas para la creación de videojuegos aunque ahora de repente parezca una tontería pero para creación de videojuegos son imprescindibles más cosas tengo el coche no tengo el pse no tengo la tangente la tangente de 6 – 0.29 en este caso por la tangente bien 2 recordad siempre estamos trabajando en radiales a partir de ahí mirar tenemos el arco xenón escrito así arch linux que es nota number en este caso tenemos el arco con seno en este caso del hombre 2 otra vez y es nada number 4 ponen al cuando hamás escritos dice hernán es nadie para decir not a number no es un número lo cual equivale a decir te has equivocado ya sabemos tail ya sabemos flor ya sabemos ground tenemos también el logaritmo natural el organismo natural por ejemplo de uno es 0 el logaritmo natural de 2 el 0,69 el organismo natural de 3 es 1,09 vale podemos calcular logaritmos dentro de javascript y una que os va a interesar bastante es el power ya sabéis el pse cuerda que es el esfuerzo que se q rt que es la raíz cuadrada de 3 1,73 si yo pongo pwr en inglés elevar un número a otro es realizar un poder ser power pero si yo le mostré 64 pues el stress power 4 si yo por ejemplo elevó 3,2 el resultado evidentemente bueno sports el de hp pwr y stop 323 al cuadrado es tres por tres semanas 9 cuánto estrés al cubo 3 al cubo evidentemente es 27 3 por 3 por 3 3 por 3 9 por 3 27 aquí decís la base en el primer número de freese la base el segundo número es el exponente por ejemplo 4,3 equivale a 4 al cubo que es igual a 64 4 por 4 16 por 4 864 vamos a empezar este proyecto que va a consistir en un juego de memoria de cartas creando una carpeta llamada juego cartas donde he creado un archivo index.hu bl está vacío y por supuesto la librería jquery que voy a usar para trabajar con este juego por eso lo voy a hacer evidentemente descargar el index punto html tanto en el editor como en el navegador voy a poner o la voy a poner o la para comprobar que evidentemente tengo lo mismo en los dos sitios y ahora voy a empezar a programar este juego que html body dentro del gel nuclear bolsa script time para javascript src igual a vamos a ver cómo se llama se llama por fuera un 1.72 punto y punto js cierro la etiqueta de script esto es la importación de jquery y ahora lo que hagamos es escribir mi propio código además para este ejercicio cómo se va a complicar lo que debes irlo comentando paso a paso sobre comentarios para que luego sepáis que hace cada barrio bien mientras dentro del bonito y dentro del bonis voy a dibujar ocho cartas por tanto voy a crear un vídeo y de igual a tablero y ahora voy a crear un día de clase carta recordad que cuando un elemento se repite varias veces es recomendable que lleve las manos y ahora aquí el gel le digo que el style el texto va a ss es carta punto carta todo lo que sea del tipo carta de la clase carta tendrá un week de 200 píxeles d 300 píxeles un background rey un border de 3 píxeles sólido white un borde radios de 20 píxeles aspecto en la pantalla yo tengo una carta quizás un poco grande voy a hacerla más pequeña de 100 x 200 no se ve a robar tienes tres tragos a un poquito quizás demasiado estirada al cien por ciento cincuenta que tenemos hay una carta y ahora pongo un box pesado donde le digo 15 píxeles 15 píxeles iniciales rgb a 0 conocerá cómo hacer un 0.3 es la carta que proyecta sombra voy a ponerle menos tamaño en la sombra veis hay una carta del proyecto mente de sombra quizás voy a decirle que el fondo no sea tan oscuro 0.0 no voy a decirle 200 200 200 que equivale a un gris clarito quizás demasiado clarito voy a poner 150 150 150 150 ya tengo ahí se ve gris un poquito clarito yo lo que voy a hacer es poner aquí un signo más por ejemplo pongo un signo más claro sería allá arriba por tanto me ha empezado a quitar el texto voy a decir qué el fondo familia será aliado el ford 6 será mismos 32 píxeles el fondo wave será volver negrita el text align será centre y el pub todo será de 30 mil soles vamos a ver cómo sale esto aguas y veis yo tengo un signo más en la carta voy a hacer la carta un poco más pequeño y por cien ya tengo ahí la carta y quizás en un color gris ya aclaró estoy dicho regenera y por eso no funcionaba 200 200 ahora sí bien y un patín top pues por ejemplo de 20 píxeles lo voy haciendo hasta que consigan que el signo más se quede más o menos centrado es crear nuevas cartas voy a enviar 8 cartas por ejemplo tengo una para el signo más voy a tener 2 con el rayo un círculo otras dos se podría poner con un palo y otras dos con el signo menos tengo ya como veis ocho cartas lo que voy a hacer ahora también es decirle que está la carta flow que flote a la izquierda para que cada carta esté una al lado de la otra de qué manera tan extraña sólo tengo cindy cartas por porque se ve que la carta de allí se me olvida duplicarla no pasa nada ahora como veis tengo ocho cartas diferentes y es más voy a hacer que entre cada grupo de cuatro se fuerce a yaya un salto de línea ahí puedo decirle que le pongo un martín 10 píxeles para que estén un poquito separadas entre sí quizás 10 especies ha sido demasiado voy a decirle fijo ya lo que tengo por tanto es la versión estática de este juego tengo una pequeña programación que me ha ayudado a poner y maquetar 8 cartas en pantalla pero lo que quiere hacer por supuesto mediante javascript son varias cosas primero lo que quiero hacer es que el resultado de cada carta sea aleatorio que cada vez que yo reinicie la página de paraje automáticamente las cartas y luego lo que haré es que me las oculte para darle una clic en una de ellas se muestre y son parejas entonces sé que veo en el juego de memoria pero en versión digital lo que voy a hacer a continuación es en una primera instancia hacer un barajado automático por eso lo que voy a hacer es que sea javascript el que controle la escritura de estas cartas y no html por suerte sabemos que el jquery tenemos una función llamada html que nos permite escribir html bien voy a hacer lo siguiente tenemos que se llama papel y no recuerdo de otro día script tal tres barras javascript y ahora voy a escribir lo siguiente bar x x hace referencia al doble y cuando x reding en este caso ejecutar la función de inicio donde la función de inicio sin parámetros de momento lo que va a hacer es una vez hola bienvenido al juego cuando recargo y dice bienvenido al juego allí por ejemplo podríamos poner las instrucciones de partida para el juego de momento me ha servido para comprobar qué jquery funciona no doy nunca más de dos o tres pasos sin comprobar que funciona en la pantalla ahora lo que voy a hacer es comentar esa línea para que luego funcione pero de momento se quiere dormir y ahora digo yo la dejo form hago un bucle for porque porque quiero ocho cartas y poner ocho cartas no es repetir ocho veces la misma operación cuando el hamas crítico repetir ocho veces la misma operación lo que hagamos un bucle for bucle form y digo fort van y es igual a 1 la carta número 1 y se abre norte 9 y más más que quiere decir esto repite esta operación 8 veces repite la ves de que es igual a 1 hasta que sea menor que 9 es decir 8 y lo que voy a hacer es dar x x ac referencia a aquel elemento de la pantalla que se llama tablero pero recordad tablero tablero también un tablero sin tablero y ahora vivo x punto apple qué era pero aprendes a adjuntar añade algo a continuación y voy a hacer una de esta carta lebron aquí comillas sencillas y así no se me pega con las comillas dobles que tengo ahí cuando eliminó esto y se hará recargo y todo ello bien el resultado en pantalla será ocho cartas con el signo más de lo que hecho aquí digamos que también está vacío lo que he hecho aquí con este bucle foro es decirle es decir en forma de ocho cartas en pantalla es más es más lo que voy a hacer es lo siguiente mirar sabéis que padres que sea algo así aparecen las 8 así yo creo que aparezca el 4 y 4 pero claro dentro de un bucle for como método lleva un perro porque es muy sencillo voy a meter unit y digo si el número y es igual doble igualdad estoy comprobando si eso es cierto o no lo es doble igualdad a 4 en ese caso digo parte x x punto apple br no voy a evolucionar vamos a ver si funciona recargo y fijaos cómo de esta manera recargo no me lo está haciendo vamos a verlo igual a uno igual a 4x a pvr pero sí que me lo está haciendo aunque ha bajado una y lo voy a hacer es poner más vélez de real de cuatro veces para que foto más pues que incluso le puedo decir tiempo style cuando quiero que algo deje de flotar guardo recargo vamos a verlo vamos a ver el código pero el código aclaró el código pantalla no muestra por qué es he cometido un error ahí porque es javascript he cometido un error ahí y es que me falta poner unos dos puntos ahora sí hay unas 2 2 comillas que me sobran en alguna parte veis qué curioso sale por ahí en html y las dobles comillas están aquí respuesta a las dudas para que me aseguro que lo ponga como lo ponga siempre pone cuatro y cuatro porque si no es igual a cuatro entonces me pone su nombre carta pero el momento en que di en que y es igual a cuatro que poner una carta y un saldo de dinero ahora voy a realizar un primer barajado un barajado aleatorio y para eso lo que quiero es que el programa genere un número aleatorio número matemático aleatorio voy a hacer lo siguiente dentro del bucle form cada vez que pase por el bucle foro voy a decir que bart y y es igual a un punto rando [Música] donde lo que voy a hacer ahora veréis lo que va a pasar es que voy a colocar ese número de y al otro cuidado qué va a pasar a poner un número aleatorio de la carta y ahora lo que quiero es decirle que y es igual al redondeo o por ejemplo si algo donde hay más puntos round de más puntos brandon así que me va a dar 0 va a dar 1 guardo recargo y mira a 0 y 1ero divertido es que cada vez me baraja unas cartas porque es aleatorio y es la ventaja que tiene bien voy a continuar y ahora quiero multiplicarlo por 4 voy a hacer unas cosas voy a poner más fail no tengan ver no tenemos bien claro este no es aquí es aquí recordar n n es nota number 4 13 26 está barajando está barajando donde en este caso el juego de memoria consiste en recordar los números que van de 194 pero supongamos que no tenéis los números del 1 al 4 que es el signo más el signo menos la equis el círculo vale como convierte hoy o un 3 en una equis cómo convierte hoy o un 2 en un signo menos pues es muy sencillo y atención recordamos que tenemos la estructura de control switch switch es cómo unir pero con múltiples casos y digo suites y en caso de qué y sea uno voy a crear la variable voy a crear una variable llamada voy a crear por tanto una variable llamada nunca y voy a decir en caso de que sea el número uno no es igual a x el número 1 equivale a x recordad beige rojo en el caso de que sea el número 2 no será igual a la o en el caso de que sea el número 3 x será igual al signo menos y en el caso de que sea igual al número 4 x será igual al signo más guardo recargo y ahora le digo que no quiero ver y si lo que quiero ver no y fijaos cómo ahora me convierte cada número en equis o más o menos fijaos ya tengo insisto parece el juego de percepción extrasensorial pero no lo ves al hecho el juego realmente de las cartas fijaos por tanto mirad cómo lo que he hecho en este caso veis como el código se está complicando poco a poco es decirle que primero ejecutó un bucle fijaos hay que contar a veces las llaves ejecutó un bucle repetitivo a continuación dentro del bucle pongo un número aleatorio yo he dicho que iba a comentar no lo estoy comentando ahora voy a comentar de aquí aquí creo un número aleatorios y luego en casa poder repasar el código y acordaros de que hacia cada parte y porque escribí cada parte aquí abajo convierte los números y símbolos aquí abajo creo una carta y le pongo dentro un símbolo y ahora voy a recordar que el bucle foro me sirve para poner 8 cargas repite 8 veces la misma operación de selección número aleatorio convertido en un símbolo por una carta atención mira que se en lugar de poner 9 hubiera puesto 17 ya no tendría ocho cartas tendría 16 es el lugar de ello hubiera puesto el 15 pues tendría 14 cartas para el bucle foro es el único control a cuántas cartas tenéis en el juego en este caso voy a hacer un juego sencillo de 8 cartas pero en cualquier momento luego lo podemos convertir en un juego de las cartas que queramos evidentemente aumentando el nivel de complejidad voy a aparcar de momento un poco la aleatoriedad en este código y lo que voy a hacer mira es decir que cojo la y y en lugar de hacer un switch con la y a un switch con la isla dinámica de la i latina estaba aquí así que digo si el caso es uno o cinco ya veces me deja poner comas dos o seis 37 4 u 8 vamos a verlo vamos a verlo no no me deja me deja 3 sobre deja 5 bueno pues lo tuviese igual un punto y coma pues lo que voy a hacer es poner el case 1 y poner aquí cuatro casos más grave esta va a ser una primera manera no aleatoria y luego cambiaré la aleatoriedad de asegurarnos que tengo dos elementos 2 a 2 tengo 1 2 3 y 4 5 6 7 8 y tengo 2 x 2 2 2 – y dos signos más voy a hacerlo no aleatorio pero me he dejado aquí preparado el código aleatorio para más adelante especificar que los elementos sean estáticos pero la distribución el barajado se aleatoria lo que voy a hacer ahora es o sí es decirle al programa que al principio vamos a ver voy a decirle al programa que en la función de inicio aquí está la función de inicio le dijo par es parte usted hace referencia a todo aquello que tenga la clase carta con la clase la clase tarde grave de css fons el guión sabes será de 0 píxeles vamos a verlo vamos a verlo recargo bien voy a decirle que el estilo baile antes el estilo tranquilo no lo está cogiendo tarde ccss por el color para asegurarme que está funcionando bien bien no está funcionando parte hace referencia a todo aquello que tenga la clase carta sea lo que sea si bien no algo falla aquí tras escapar bueno todo aquello que sea un día le voy a decir como sabéis será de 0 píxeles no me dejan es es más comentó guardo recargo y el iphone 6 es de 0 porque lo que quiero hacer es que cuando haga clic en alguna carta en ese caso se abra se muestre el phone sites ahora lo que voy a hacer que es lo siguiente luego usar un selector qué va a hacer lo siguiente para x hogar que r otras variables r es igual a vis es este objeto el objeto sobre el que yo haga clic o sobre el objeto que yo haga algo ya digo r punto click me ejecutas la función muestra de esta forma lo que estoy diciendo es no quiero que te haga referencia a todos los días ni a todos los que tengan la clase tal sino solo al que yo haga clic entonces digo vamos a ver función muestra creo que estoy trabajando aquí función muestra va a hacer lo siguiente parker r es igual a vis r punto css va a ser igual saiz de 72 píxeles vamos a ver si funciona en principio no funciona aquí voy a decirle que el lugar del dis nombrar a alguien muestra apoya a hacer que la función muestra haga a leer hola siempre quiero no sé si funciona no le pongo una alerta hola cuarto al cargo y vemos como no funciona algo hecho mal porque cuando hago clic es decir cuando hago clic dentro de ese día debería ejecutar la función hola para herrera ah claro es que lo he puesto fuera de la función edición como van a estar bien guardo recargo o la mía ahora sí he cuidado me ha puesto todos los elementos pero ya he conseguido mostrar cartas al león o la menor inactivo hago clic en una se muestran todas las voy a recuperar el dis 10 no me hace caso lamentar las muestra todas y él verá por el momento dice y ahora vamos a ver porque no funciona ya no se pongo qué puedo hacer clic en una carta y revelar la por tanto a continuación lo que tenemos conseguir es que solo se revele la carta actual lo que voy a hacer en este caso es en el bucle poner clases carta y poder ir en cada una de las cartas y de va a ser igual y tal forma que la guardo miro el código terminarlo miro el código y compruebo como las cartas vayan a aparecer las cartas serán carta con y de una carta con y de igualados ya ser de esta forma voy a hacer un código quizás un poco poco eficiente pero r hace referencia a lo que tenga el vídeo 1 no se puede poner número no se debe poner números voy a decir y ver lo que tenga idea r clic muestra uno y muestra uno para seleccionar lo que tenga y de uno y ponerle font-size 72 vamos a ver la función muestra uno cuando haga clic en lo que tenga y de uno y ver más vamos a ver lo que tenga allí de 2 este código se quedaría así seleccionó y de 1 le digo que hago clic y ejecutó muestra 1 es una función donde amigo seleccionó y b1 y punto css tiene 1 coma css sabes es igual a 32 píxeles vamos a ver si funciona y ahora voy a eliminar la función muestra el problema está en que estaba fuera del sitio cuando recargo probablemente será el problema y ahora en esta función lo que estoy diciendo es que cuando el pulso de libre voy a hacer una cosa hacer que sean todos y de igual hago llegaría a la muralla pss sabes punto y coma ahora tengo a leer hola hay alguien problema bien tenemos algo a lo mismo sin el hola en este caso es que no está funcionando el tiempo lo cual básicamente al kily funde me va a mostrar el dip en esa posición sin embargo ahora lo que necesito es poner aquí y b1 y bien 1 click al principio no me está funcionando voy a ponerlo en vil y si pongo dis así que voy a repetir este código este código que está simplificado no voy a copiar y si digo igual no me hace falta aquí lo que se dice no me está funcionado y ver uno el trabajo pasado como decía voy a copiar y pegar este código para decir que si hago clic otra vez fundido irá al nivel 2 el r2 de momento no funciona evidentemente voy a decir que vive es igual palomas sobre tráfico clic y aparecen los dos poco aparecerán los tres y así poco a poco podéis seleccionando cada una de las cartas de momento evidentemente pulse donde pulse aparecen todas las a continuación lo que tengo que hacer es que sólo cuando puse una se revele esa voy a hacer lo siguiente para que me funcione el javascript lo que voy a hacer es convertirlo otra vez en estático por tanto dijo vivo carta con el nivel 1 y de momento no pongo nada de texto vamos a poner un signo más algo y el borro este bucle borró lo que pongo x punto html indicó que vive más y le digo que el html quiero poner por ejemplo no más vamos a verlo vaya tengo 8 más perfecto esto no lo creo que el lado estoy fuera este nuevo papel sino que es un hcm l y pongo aquí ahora guardo recargo de momento nada x hace referencia al pide más la letra bien y no se está viendo nada porque le había hecho al principio que la font size fuera de 0 píxeles pero si lo pongo se verá perfecto h + + + y de 1 2 3 4 5 y 7 de 8 ahí tenemos las haches de rociamos que le pongo aquí no y vuelvo a tener las cartas ahora le digo cuando haga clic en ese solo ese se hace grande ahora parece que sí que está funcionando cuando haga clic en el que tenga de uno sólo vive uno se hace grande vamos a verlo voy a probar otra vez la doble función bis a ver si funciona pues ahora los voy a hacer es copiar esto y escribirlo para cada una de las ocho cartas y de dos y de tres y de cuatro y de cinco y de seis de siete keith de 8 que hace referencia a 1 2 3 4 5 6 7 y 8 recargo clic clic clic veo ya por fin como estoy mostrando cartas y al final lo tenido que convertir en una mezcla de esta tipo dinámico y ahora apoya des comentar esta línea para conseguir que pueda revelar tantas cartas como quiera lo que tendré que hacer a continuación es que las cartas estén abiertas un cierto tiempo para que el programa compruebe si los valores son iguales y entonces comprobar si las vuelve a esconder o se quedan de hacer lo siguiente voy a usar contadores este código de aquí los contadores para los siguientes voy a hacer de momento ahora en un principio que cuando clic en una carta se muestre cuando hago clic en la carta se vuelve a ocultar ‘hemos voy a jugar yo limpiamente y luego el ordenador me lo haga automáticamente de esta manera voy a decirle qué vamos a ver voy a crear una serie de variables y ve uno es igual a cero a partir de 2013 v 4 y el 5 6 y de siempre y de 8 estas ideas son igual a cero de forma que tal y como hicimos anteriormente cuando haga clic antes de ejecutar una función yo pueda especificar que pueda indicar voy derecho a borrar todo esto para que consulte más claro voy a indicar si debo ejecutar un css u otro por ejemplo aquí en la función lo voy a descomprimir luego lo comprime sí si ve uno es igual a cero en ese caso ejecutó ese código y a continuación le digo nivel 1 es igual a 1 pero sí no entonces ejecutó este código es igual a 0 píxeles y de 0 es igual a 0 vamos a ver si funcionaba esto va a hacer y al hacer clic en este se haga grande y seguro va a hacer clic se haga pequeño muestro y es cuando las cartas bien voy a repetir el código y ahora lo que voy a hacer es comprimir lo veis esto es el código extendido descomprimido para que entendáis dónde está el inglés pero evidentemente esto se puede comprimir para ocupar menos espacio pero así ahora se ocupa serán multiplicó por 8 esta línea 5 6 7 y 8 voy cambiando 2 2 no os y de dos igual a 1 y de 2 y de dos igual a cero y de tres 4 5 6 7 y 8 3 4 5 6 7 y 8 34 6 7 y 8 34 7 vas a dar 3 4 con 67 y 8 y por último tres cuatro cinco seis siete y ocho global momento es funcional guardamos éste se muestra se esconden se muestra se esconde se muestra no se esconde – cómo podemos mostrar y ocultar cada una de las cargas ahora lo que voy a hacer es que el programa reconozca que si dos elementos están mostrados me los pongan el color verde es decir si yo hago xx con los verdes como diciéndole a desacertado bien lo voy a hacer con esto es lo siguiente aquí a continuación voy a hacer una tanda de tips y para esto vamos a ver cómo se usa la lógica que ya de varios elementos a la vez sí es cierto que hay de 1 es igual a 1 y doble adversa también es cierto que y de 5 es igual a 1 en ese caso lo que voy a hacer es seleccionar y escribir ahora el código resumido voy a centrar el elemento que sea y de 1 y le voy a poner css el color forma de la misma manera voy a seleccionar aquello que sea y de igual a 5 y le voy a poner el color debe funcionar cuando recargo si lo saco esto no pasa nada pero si yo saco esto y esto deberían ponerse de color ocre y de uno es igual a 1 voy a decir si de 1 es igual a 1 no me lo ha hecho seguiré 1 es igual a 1 a leer hola guardo a cargo y no me dice hola no voy a poner aquí y b1 es igual a 1 y vive uno es que para uno alertó la a brasil por tanto aquí en cada uno de estos voy a ponerlo siempre y de 11 y de 5 ese lugar a 1 solo eso se cumple eso me dirá hola para luego voy a copiar ese código en todas partes ahora voy a decir otra vez qué seleccionó aquello yo tenga el b1 y le pongo el css color vivo y ahora seleccionó el y de 5 y le pongo el color gris vamos a verlo si funciona se llama algo cualquiera de estos no funciona pero si llamara con los dedos tal debería funcionar y del 5 así que funciona s funciona siempre claro porque le quiero decir que icv y de igual a una anda y del 5 igual a 1 vamos a verlo ahora todos son de 51 bueno no sé por qué me ha cogido este pero me lo debería haber cogido parece que el error está aquí eso funciona clara de simplemente esto no porque tengo que pegar lo en la función siguiente para vigo en esta función y de igual a 1 en la b 5 la vuelvo a pegar aquí dijo que sí y de dos y de seis me voy al 6 y se lo pegó vamos a comprobar funciona funciona por aquí funciona por aquí para de grado claro pero por supuesto porque le tengo que decir que el inet 2 y el ide 6 y aquí el de 2016 vamos recargamos funciona funciona no funciona no funciona por eso a continuación lo que voy a hacer es volver a recargar y de 3 el estrés está conectado con el 7 y de 3 y del 7 comió pegó en el 7 y por tanto ya solo me queda el número 4 que a la vez es el número 8 si ve 4 y 84 johnson copio y pego aquí y ahora puedo hacer 1 y 2 1 y 2 1 y 2 2 vemos como reconoce en verde cada uno de los elementos para que me puede servir que me reconozca en verde bueno básicamente me puede servir para crear un primer sistema de puntuación no puedo decir lo siguiente al principio creo un bar puntuación que evidentemente 1000 y cada vez que yo consigo una cosa de estas vivo puntuación si es más igual a 1 sumarle uno la puntuación a leer tu puntuación es de más puntuación cuando recargo a través tus puntuaciones de 1 pero un momento momento e incluso voy a decir que si puntuación es igual a 4 entonces alerta es más bien así puntuaciones semana 4 alerta has ganado el juego sin puntuación no es igual a 4 vamos a ver si es falso es tu puntuación es la que sea vamos a verlo tu puntuación es 1 si hubiera ganado el juego me lo diría ahora copio y pego aquí aquí aquí aquí aquí y aquí pero vamos tu puntuación es de 1 tus puntuaciones de 2 tu punto 73 has llamado al fuego incluso evidentemente podéis combinarlo como queráis teóricamente era teóricamente en principio está limpio y decir no pues me lo escondes no pues me lo escondes sí perfecto pero a continuación vamos a ver si ya podemos hacer que sea el programa el que oculten los las cartas cada equis mire milisegundos voy a hacer por tanto es hacerme un hueco aquí después de este es porque lo que estoy diciendo después de éste el gran teatre emails y aquí este es lo que está diciendo es que sí y d 2 es igual a 1 y seguir de seis igual a 1 entonces lo has hecho bien pero si no lo has hecho mal no es cierto hay un problema y es que claro que no puede pulsar las teclas a la vez siguió en punto 1 el programa que tiene que dejar un poquito para ver si impulso el otro y si pulso el otro entonces decir que has hecho bien y si no decir vale mucho más que voy a hacer es decir lo siguiente es set time out donde voy a especificar un código en un tiempo voy a poner por ejemplo 5 milisegundos y voy a decir qué veamos sí y dedos no es igual a 1 6 no es igual a 1 entonces comí 29 hacia arriba le digo que lo que sea y de 1 vamos a verlo aquí lo que sea y dedos va a tener el css font-size igual a 0 píxeles lo que sea y de 6 va a tener el font size igual a 0 pixel y 2 y 6 van a ser igual a 0 qué hago con esto vamos a comprobarlo un poco yo pregunto esto en 5 segundos se comprueba si he ejecutado otra cosa con lo cual se esconde es decir estoy diciendo algo así es cierto que el otro está levantado no pues en cinco segundos lo oculto a funcionar aquí y funciona aquí con la equis con la equidad si en cinco segundos no he pulsado la otra se esconde pero si hago así click clack tu puntuación es de 1 y ya no se esconden se llama así punto feder de 2 vamos a seguir realmente ahora va a ser copiar y pegar el código este lo copió y no pero aquí y digo els y pide 3 y 7 3 7 3 y sí sigo viendo las pistas haber 4 y 8 4 y 8 4 y otro ahora cumplió este de aquí y lo peor el número 5 como estoy aquí 1 y 5 copias de dos y seis lo veo en 6 cojo el de 5 y 7 y lo veo en 7 y cojo el de 4 y 8 y lo bueno a ver si pierde terreno bien que podría ser que no en este marco u otro no en cinco segundos se oculta este marco otro no principio en cinco segundos se debe ocultar y modificado algunas cosas claro este es pide vamos a verlo 4 y 8 4 y 8 4 y 8 me parecía a mí que lo estaba haciendo muy rápido 3 y 7 3 y 7 3 y 7 es correcto sí vale 4 y 8 tampoco va a funcionar 4 y 8 4 yo uso 4 y 8 4 johnson 64 y 8 el presiente debería funcionar 3 y 7 3 y 7 3 y siempre hagamos clic en este en fin con segundos debe desaparecer y hay algún problema este es el número 5 a los que yo estoy buscando en 1515 15 15 15 15 al principio debería haber funcionado vamos a probarlas bajo justo luego combinamos muy bien ahora pruebo combinados bien pues justo ese justo en ese tengo algún tipo de error así que miro el error y dijo en el que hace 5 allí parece que está el error este y de 2004 pues esto es 15 1 y 5 1 y 5 parece vamos a probarlo ahora y en cinco segundos para hacer que se quita así que ahora tengo por fin yo puedo marcar varias pero no funciona pero en cuanto pulso cuando hago así y bueno que desde 1 aquí he fallado pero aquí he acertado en puntuaciones de 2 al poco tiempo se quita pero si marco aquí 3 y marco aquí 4 luego ya tengo un principio de juego ahora te falta la aleatoriedad y con la aleatoriedad lo que voy a hacer es una pseudo aleatoriedad es decir barajar un poco las cartas lo que falta ahora es un sistema de pseudo aleatoriedad por eso voy a decirle a las cartas que su posición es absoluta qué ha pasado aquí porque tengo todas las cartas para dejar la sala 10 haciendo todas una detrás de otra lo que voy a hacer ahora es lo siguiente veréis voy a recuperar la primera parte del script voy a el número aleatorio voy a encontrarlo si no lo veo bien no tenía yo por aquí pero parece que ya no está no pasa nada no pasa aquí al principio antes de empezar la aleatoriedad o antes de empezar foto erick voy a decir lo siguiente no incluso de hacer dentro de inicio voy a decir aleatorio aleatorio es igual a ma punto radio lo quiero redondear y lo quiero multiplicar por ejemplo por 4 más punto 6 más punto rato por cuatro normando rom colombia con esto se me da un número aleatorio y ahora voy a decir yo lo siguiente sí o mejor dicho sweet un caso bajo yo y ya está no voy a volar mejor no volver a aplicación bueno vamos allá claro está switch aleatorio y digo en el caso 0 al ejecutar un cierto código voy a decir que con el elemento que tiene el nivel 1 punto css y le voy a decir y le voy a decir que su web que transforma es igual a translate pues por ejemplo 100 píxeles y los 50 píxeles vamos a ver que ha hecho esto de hecho voy a hacer que el número aleatorio igual a cero efectivamente le pongo un viola webkit a ver será funciona mal lo que es llevar esa carta como que he barajado voy a seguir baraja como mentir te espero multiplicó por 8 ahora me va a ver esta está en 100 perfecto y ahora dedos 4 67 y 8 y yo pseudo aleatoriamente voy a decir que tú eres 0 tú eres 0 150 tú eres 300 como a 150 tú eres 200 tú eres 400 puedes comer 0 tú eres 200 por aquí pero falta un 0 1 2 y 3 ahí está 0.0 vamos a buscar 4000 50 200 150 200 0 300 como 150 me hace falta un 300 1 2 3 4 1 2 3 4 00 100 100 claro 200 200 y ahora 300 300 si he hecho bien el cálculo debe haber barajado las cartas y no ha hecho bien el cálculo en 200 está duplicado vamos a ver los 200 no en el cielo tiene estado aplicado ahí lo tenemos tiene está duplicado no ha dejado aleatoriamente no sé qué carta es cada carta por tanto prueba esto es correcto esto es correcto no la primera soy usuario así que se quita esto es correcto suerte luego creo recordar que el agua estaba allá arriba vierte y entonces ahora esto lo tenemos aquí para que lo voy a hacer por tanto ahora es poner varios casos como veis es pseudo aleatorio son varias distribuciones ahora digo que esto es el 1 2 3 4 5 6 7 y qué número me asombra del 2 al 1 23 58 61 para bien o aleatorio es igual a más round recordar que puede ser 0 y 1 ejecutó veis más pues ahora ejecutó y es cero y menos 0 – x más vale el 0 pues creo recordar que el pse no estaba aquí en mi puntuación es de 1 cierto la x 0 x 0 así a la diputación por tanto menos menos y por tanto más más pero si ahora vuelvo a ejecutar a la vuelve a ser lo mismo presume no ejecutar ahora es más +6 tengo dos casos pseudo aleatorios puedo hacer por tanto tantos casos se vuelven aleatorios como quiera lo que tengo que hacer evidentemente es decir que el feil por ejemplo cuatro casos uno caso 2 caso 3 paso 4 voy a decir ahora 1 2 345 6 7 y 8 y ahora voy a decir 1 2 345 6 7 y 8 tengo por tanto esto es 6 3 y 6 4 según cuatro casos aleatorios el programa baraja de una manera de otra x menos vale x vaya xx pues creo que tengo que defender antes no más menos o más – y la otra lo que podría hacer eso si es hacer que el tayrona dotar de menos igual 5 segundos son demasiados una cosa tengo un mogollón de time outs por ahí por el código cómo puedo cambiar los dos una vez un truco de hate es que lo seleccionó le doy a copiar y reemplazar y digo quiero reemplazar todos los de 5000 por 2000 reemplazo todo y de esa manera de ahorro tiempo de esa manera ahora lo he cambiado todo por 22 segundos enteros 1 y rápido 1 y 2 y en dos segundos se quitan 1 y 2 me suena del visto un chino más por allí no pues entonces 1 y 2 y lo tengo cero y 0 casualidad luego y ahora vuelvo a ejecutar y la partida la partida ha cambiado y la partida ha cambiado en tengo una serie de casos segundo aleatorios aleatorio al 100% sino que hay unos pre baraja dos décadas ahora que ya tenemos esto lo que vamos a hacer es hacer la aplicación más bonita tenemos digamos el código correctamente desarrollado funciona pero la aplicación no es nada estética por eso lo que voy a hacer es el principio empezar marcando y voy a decir aquí que crea un género dentro del cual creó una 1 y un texto de párrafo por ejemplo y digo hace 1 como de memoria y pongo levanta las cartas por parejas hasta acertar o levanta dos cartas en 2 hasta aceptar las parejas cuando recargo no tengo pero claro esto es muy feo por tanto voy a ir algo css y voy a decir html tiene el martes pero píxeles el parque 0 píxeles el barrio grave y el family allianz ahora digo que el ceder tienen el fondo negro que llega al 100% y que subraye es de 50 píxeles y que el color de los elementos conseguir contenidos es guay ahí lo tenemos 50 píxeles igual ha sido poco voy a poner 100 píxeles y yo le había dicho a html como voy quiero que el body tampoco tenga margen el género debe tener un balín de por ejemplo 20 píxeles cifras ha sido demasiado 10 píxeles ahora la cosa se empieza a parecer un poco más a continuación ya tengo esto más o menos desarrollado lo que quiero es centrarlo entrar la pantalla por eso voy a decir que en el género text align es igual a centeno y voy a decir que el tablero va a tener un wing de 600 píxeles y un margen alto con lo cual podremos comprobar como si todo ha ido bien el tablero sobre el tablero agradesco tablero debe ser más pequeño 400 píxeles martín luto y ahora si tenemos un juego de memoria más cosas veis como las cartas quizás es tuvo que estar un poco demasiado pegadas por tanto lo que voy a hacer es separarlas un poco más voy a decir que en lugar de 300 esto me va a costar un poco voy a cambiar bien por vamos a cambiar los 100 píxeles por 120 píxeles voy a cambiar 200 píxeles por 240 píxeles voy a cambiar 300 píxeles por 360 píxeles y voy a cambiar 150 euros estaba bien guardo a ver si todo está bien recargo vaya y ahí el problema es que he cambiado también la carta pero es igual a 100 el height es igual a cero guardo recargo y ahora si tengo seis cartas tengo ocho cartas obviamente donde podemos seguir jugando este y este baile recuerdo tengo siempre esto es preocupante vamos a recargar y veremos como ya no aparece lo mismo ya mi suerte se ha ido o estaba él tengo un poco de memoria hecho en javascript voy a continuación a sacar imágenes de google aprender a pretender de yale y yo por ejemplo voy a esa imagen no sé imagen no es correcta tiene un poco de marco y digo 2 esto estaba en el escritorio esto está el máster web esto está bien actual en juego cartas y voy a crear una carpeta llamada y en ejemplo donde pondré tras lo cual puedo decirle al boy y ganamos será url y en verdad aprender punto jpg lo guardo recargo y veis allí como dibujado un tapete otra cosa muy interesante de css es que se pueden admirar colores url no aérea 000 0.5 no le voy a dar la vuelta coma pero ahora corrijo se verá puede aplicar esto y había en principio lo que debería estar pasando es que me debería unir las dos imágenes no me lo estaba haciendo así que voy a dejar únicamente la imagen del papel nos hace falta evidentemente siempre puedo tocarla por ejemplo el programa que sirve para editar imágenes estaré por aquí y luego evidentemente os diré que de la misma manera que cambiaron la imagen de fondo del tapete pues puedo cambiar las x las ojos y lo que sea por cualquier gráfico por cualquier personaje por cualquier lo que sea protagonista televisión que pueda querer meter en un juego de memoria bueno estoy abriendo el gym y mientras se abren voy a explicar otra cosa les voy a explicar ahora es que como veréis llega un momento que un solo archivo html tengo un montón de código y llega un momento que no sé realmente qué hace cada trozo de código lo que voy a hacer es externalizar voy a hacer es decir que en este archivo en este proyecto intencionalidad creó un elemento llamado estilo css y creo un elemento llamado juego punto j s lo que voy a hacer ahora miramos lo siguiente cargo estilo para un juego y el estilo copio y pego el estilo y el juego copio y pego el juego lo que estoy acción de esa manera es separar lo que es javascript de lo que esté ss de lo que es html en cuanto a html no hay ningún problema perdón en cuanto a hamás tiene ningún problema porque simplemente lo tengo que decir donde aragón el archivo como veis ahí ponen que el sol la fuente es fuego js el problema vino un poco más común con css ya que en css no puedo poner directamente un src porque no existe porque no funciona de esa manera sino que lo que tengo que hacer es atención grande es quito las etiquetas de style y pongo lo siguiente pongo link para hacer un vínculo rey igual a esta del sip h red igual a estilo punto css de tal manera y digo que el type es texto para css de esta manera como podéis comprobar lo que he hecho es especificar la atención mirar en esta línea claro el javascript archivo externo que en esta línea caro jquery y que de esta línea el cargo mi archivo java ha sido llamado juego punto js ser acuerdo y recargo compruebo cómo el juego sigue funcionando igual y compruebo como sigo teniendo las cartas valor creo que las puntuaciones de una puntuación pues no hay puntuación y puntuación y ahora por último garcía que tengo el bien abierto dentro del tiempo ya archivó abrir el escritorio master well actual como cartas ing y puedo el tapete y decirle por ejemplo que lo quiero oscurecer o que lo quiero convertir en un tono diferente tono más de tapete verde menos saturación menos luminosidad para aceptar y guardar trato la imagen definitiva para que aceptar y guardar quiere mejor con respecto a lo que es el programa vamos a empezar a ver una cosa de html5 que se llama calmas el canvas consiste en la propiedad que tiene html5 unido a javascript de poder pintar una imagen de mapa de bits en este caso del mapa de bits y no de vectores que vemos con svg sino de poder pintar al final una imagen que podríamos decir que se convierte en un jpg que podríamos decir que se convierte en un png una imagen basada en píxeles entonces la cuestión está en por qué nos interesaría hacer esto si ya hace muchos años que html es capaz de importar imágenes en jpg importa mis mánagers en png que gracia tiene el poder hacer esto desde dentro de javascript la gracia como ahora veréis consiste en poder controlar el contenido de esa imagen desde dentro del javascript vamos a empezar trabajando con canvas y para empezar trabajando con gambas evidentemente ahí voy a arrancar el fútbol que no tenía arrancado y así poder hacer zoom bien nos decía que trabajando con canvas vamos como siempre hacer el archivo html que estoy en la carpeta actual estoy en la carpeta java spíritus en el archivo canvas punto html y voy a hacer bueno y dentro del botín voy a hacerlo siempre dentro del botín voy a hacer una etiqueta llamada canvas donde el canvas en castellano otro diríamos como lienzo es un espacio en blanco en el que yo voy a poder pintar con javascript este canvas debe tener una idea para que javascript lo pueda localizar por tanto voy a poner y de igual a mi carpa se vive evidentemente pueden ser el que queráis y luego el estilo voy a poner un estilo en línea para no tener que poner una tirita estilo más adelante quizás la ponga voy a poner que el estilo es week 200 píxeles pixeles que tenía yo y el border es un tips el dust en la práctica me da este resultado le da un canvas a un lienzo en el que voy a poder pintar voy a devolver construye lo que el ajuste de texto y así saltará de línea tengo un canvas y por tanto lo que voy a hacer es ser capaz de pintar dentro de ese canvas usando javascript por eso y ahora explicar en cuando poner avánzit después cuando poner antes cuál es el orden de ejecución de los elementos para este caso particular lo que voy a hacer es poner el script de poner una etiqueta de script justo debajo justo a continuación de canvas este tipo texto barra javascript y dentro de ese script voy a poner el código javascript que me va a permitir pintar dentro del canvas este código javascript que voy a escribir os puede parecer un poco rollo al principio pero también os digo que al igual que jk wedding es una de esas cosas que te lo aprendes una vez y lo que aprendes ya sirve para dibujar cualquier cosa esto que voy a poner ahora prácticamente va a ser copiar y pegar en cada uno de los ejercicios de canvas lo que voy a hacer es decir que creó una variable que es igual a document.no element vaya a elementos del documento coge un elemento tomando su idea qué hay de voy a pues evidentemente voy a el y de llamador me capas de hecho hasta ahora bueno tengo aquí un canvas que se llama mi canvas lo que he hecho aquí es decir del documento selecciona aquel elemento que tiene un y de llamados mi capas es tradición a jonás type y fíjate que tenés un elemento así porque ahora voy a hacer algo dentro de él me voy a la línea siguiente y le digo bar con texto es igual hacer punto y contexto ese estudio el contexto dónde el contexto puede ser 2d o pueden ser tres de esta es precisamente ahora estamos un poco en el límite de html5 esta es una de las cosas que no están completamente desarrolladas este canvas está preparado para poder pintar en 2d y hacer juegos o gráficos bidimensionales o hacer juegos 3d lo único que pasa es que el canvas en 3-d todavía no está del todo desarrollado por tanto de momento únicamente vamos a poner el get con textos de lista que pongo siempre lo mismo pues porque más adelante el año que viene quizás se podrá poner un contexto en 13 con texto en 2d como veréis a continuación lo que va a hacer es que nos permite pintar formas en donde tengamos un eje x tengamos un eje y y podamos pintar formas aire así que lo que he hecho dejamos hasta ahora es decir le coge mi canvas coge el elemento que tiene la idea de canvas y tener en cuenta que dentro de mi canvas voy a pintar en 2d así que a continuación voy a empezar a pintar le digo contexto punto phil style voy a decir que es igual a #ff 0000 que en esa decimal encima del círculo rojo ten en cuenta que lo siguiente que voy a pintar lo voy a pintar de color rojo hay canvas si queréis funciona un poco al revés por lo menos para mi gusto porque para mi gusto yo suelo decir cuando pinto algún programa primero lo asegura que quiero dibujar y luego de qué color lo quiero me llena rock canvas es el rsc es primeros letras y el color con el que vas a pintar y lo siguiente que pintes que lo pinta de ese color [Música] y por último voy a decir contexto punto film style perdón si el rey voy a hacer un rectángulo relleno que va a tener las siguientes cuatro coordenadas va a tener la primera coordenada en x qué profundo es 50 lo vemos con la con el dibujo la segunda coordenada en y y a continuación la anchura del rectángulo y la altura del vent ángulo creo que os lo dicho al revés lo que él quisiera por y ahora vamos a ver así que vamos a repasar que he hecho aquí seleccionó el canvas pinto en dulce pongo con el rojo [Aplausos] pinto rectángulo y vamos a ver qué ha pasado en la pantalla guardo recargo y el resultado en la pantalla como veis es un rectángulo de color rojo lo que he hecho por tanto es pintar este rectángulo de color rojo voy a probar un poco de los parámetros 10 x 10 lo que he hecho por tanto como veis no ser porque el rectángulo está pintando [Música] principio de apariencia me está pintando 200% pero ahora veremos por qué pero básicamente fijaos que lo que he hecho es realizar un dibujo en javascript lo que he hecho es el entrar hundido que en este caso es un canvas y poder dibujar dentro de ese canvas de manera que jamás te va a ser el que me permita especificar qué es lo que voy a dibujar dentro de esa zona vamos a repasar el código vamos a diseccionar lo y básicamente mirad yo lo que estoy haciendo aquí es un poco simplificar el código diciendo que atención es igual al documento punto get element by mike ambas omic ambas que estoy diciendo aquí la variable ce equivale a el elemento que tiene libre mi canvas y qué y qué hago yo con esto pues fíjate que a continuación digo contexto es igual hace punto get context 2 d si este c equivale a document.getelementbyid lo que le estoy diciendo es al documento aquí lo que estoy diciendo es al documento que tiene el y de mi canvas ponle aplicarle un contexto 2d pero es que la cosa continúa y continúa y dice contexto fill style fíjate qué contexto es ce punto que contenidos de y al abc es document.getelementbyid así que estoy haciendo es que estoy como comprimiendo la información lo que estoy haciendo al final es decirle al documento que tiene el y de mi canvas ponle un contexto 2d y pone un color del relleno rojo con texto al documento que tiene el elemento y de mi canvas ponle un contexto 2d y pone un rectángulo con estas proporciones por eso y eso es como siempre podría escribir el código abreviado pero entonces me saldría una chufa más de unas líneas y de larga que tendría que diseccionar que es cada trozo de la línea más cosas vamos a hablar de estas cuatro componentes estas cuatro componentes están siendo un poco raros pero bueno ahora veremos por qué la primera componente es la distancia que hay desde la esquina superior izquierda hasta el elemento así que por tanto mirar si aquí pongo 10 fijaos es la distancia que hay desde negro azul desde este punto a la proyección en x esta distancia de ahí la distancia x el segundo elemento es la distancia que hay no sé por qué me haya alargado la distancia que hay desde ese punto hasta ese elemento la distancia que hay en vertical me sale como el doble de alargado es un poco extraño a ver el momento en que me acerque el primer elemento por tanto es este es esta distancia el segundo elemento es este la distancia que hay en vertical el tercer elemento es la anchura en x el cuarto elemento es la anchura en y voy a hacer una cosa un momento height 200 píxeles voy a decir voy a sacar el wifi line del style te voy a decir win de 200 píxeles 200 palabra ahora si me sale bien habría algún problema en el css mira por tanto a ver repetimos lo que he hecho es sacar el wifi el height del c6 y ponerlo como parámetros de html y dejar únicamente el css el borde lo que hago por tanto es ver lo siguiente vamos a verlo el primer parámetro por tanto es esta distancia el segundo parámetro es esta distancia el tercer parámetro esa distancia la anchura el cuarto parámetro es la altura y esos son los cuatro parámetros que gobiernan junto con el color de relleno en la caja con la que estamos trabajando y ahora una pregunta muy importante y es en qué orden se ejecuta el canvas pérez lo que voy a hacer porque ya hemos visto que hamás fit se puede poner en la cabeza y se puede poner en el cuerpo y ahora mismo lo que he hecho es poner el script dentro del cuerpo y funciona pero lo que hubiese la continuación mirada canción es cortar todo este javascript cortarlos directamente lo corto y lo pegó dentro del jefe el mismo javascript lo he cortado del body y lo he pegado dentro del jefe va a funcionar no guardo recargo y no funciona porque no funciona vamos a tener en cuenta el orden de ejecución de los elementos en html y en javascript tanto en html como en javascript los elementos a menos que digamos lo contrario se ejecutan desde arriba hasta abajo así que mira si yo vengo aquí y empiezo a html voy a hacer un archivo este ml voy a darle información a la cabecera que el usuario no verá a un script de tipo texto havas tildó hasta ahora bien es verdad pero el problema es que ahora en la siguiente línea digo creo una variable y esa variable le digo por mel document.getelementbyid mike ambas aventín a ver si puedo dibujar una cosa yo pero el problema está en que hasta ahora no puedo al llegar el programa conoce esto conoce a esta esta línea pero nos además así que dice seleccionar el elemento que tenga el ideal y canvas hay alguno que se llama más hamas que dice no no sé es un elemento que se llama canvas hasta ahora no lo he visto y por tanto dice me da igual todo lo que me dieras a continuación porque me has hecho que apunte a alguien que no sé quién es entonces el problema está en este caso que no está funcionando porque le diga lo que le diga hasta aquí está pintando en algo que desconoce y luego es cuando aparece el canvas y claro esto es como ahora son las mangas verdes verdad es como decir si ahora tengo el canvas pero ya he perdido el código de dibujar en este caso por eso funciona correctamente que el poner el script detrás del canvas porque lo que hace es primero pinta un canvas tienes un canvas que se llama mi canvas claro cuando a continuación aparece el script y dice que te element by the coge aquello que se va a mi canvas javascript justo arriba han dibujado un canvas que tiene este y ve puede ser localizarlo eso quiere decir que el script de canvas nunca se va a poder en la cabeza no a los ritmos pueden ser una manera de poder ponerlo en la cabeza y que funcione perfectamente pero eso va a ser en el siguiente vídeo otra cuestión es que yo era html no puedo cambiar el orden de ejecución porque html es un lenguaje estático pero yo en javascript puedo cambiar el orden de ejecución y otras que realmente puedo hacer lo que quiera porque para eso es un lenguaje de programación así que lo que voy a hacer ahora no es ni más ni menos que combinar ambas con jquery para comprobar como jquery puede hacer que funcione que ambas en la cabecera esto no quiere decir que yo recomiende que ambas tengan estar en la cabecera canvas puedes dar donde queráis simplemente estoy explicando cuál es la orden de ejecución de los elementos y que si queréis se puede cambiar arriba en la cabecera mirad lo voy a volver a hacer voy a pegar el script el estilo voy a cortar voy a pegar la cabecera la cabeza no funciona lo habéis no funciona sin embargo ahora por supuesto si quiere usar jquery tengo que llamará jquery script type texto barra javascript y le digo que el sol es jquery no sé cómo se llaman archivo no me acuerdo yo tengo por aquí se llama jquery 1.7 puntos dos puntos min js el mismo nombre que tenga aquí otro truco la verdad es que defina lo difícil podría ser copiar el área y me aseguro que no comete errores cierro el script encierro el ciervo spears y ahora que he hecho allá arriba lo que he hecho es simplemente llamar a jquery decir a partir de ahora voy a usar jquery y aquí lo que voy a hacer es algo tan sencillo como decir bar x x hace referencia al documento y equis punto red y cuando el documento esté preparado ejecuta la función de inicio la función de inicio a su vez tiene el código el canvas voy a ejecutarlo voy a comprobar que funciona y a continuación os voy a decir por qué funcionan guardo recargo y compruebo que haciendo eso sí que funciona y ahora la pregunta es por qué porque ahora funciona vamos a ver el código se encuentra en la cabeza pero si leemos el código nos dice que var x x hace referencia al documento cuando el documento esté preparado atención x puntos 9 entonces y sólo entonces ejecuta la función de inicio qué quiere decir pues que yo lo que estoy haciendo es guardar la función de inicio que dibuja en el canvas pero con esta línea le estoy diciendo no ejecute esta función ya ejecutará cuando el documento esté preparado cuando el documento está preparado cuando ha acabado de cargar todo el html esta es una de las muchas razones para usar jquery y es con jquery lo que hacemos es ponerlo arriba pero decir no tengas prisa no lo ejecute es todavía primero carga todo el documento html y cuando haya descargado todo el documento html y estén creados todos los game y todos los vídeos y no es lo que haga falta entonces ejecuta este código esta es una simple demostración de cómo podemos alterar el flujo de trabajo dentro de javascript de cómo podemos alterar perdón el orden de ejecución dentro de javascript durante el medio que vamos a hacer hoy vamos a estar programando algo razonablemente complejo con lo cual no es solo que demostraremos cómo cambiar el flujo de ejecución y el orden de ejecución sino que es quien necesitaremos cambiar el orden de ejecución para que el programa haga lo que nosotros queramos más elementos que podemos dibujar dentro de canvas son rectángulos son círculos voy a dibujar voy a hacer que este rectángulo sea de 50 x 50 y así le hago un poco de espacio para seguir dibujando por aquí elementos tales como círculos elementos tales como líneas o elementos tales como degradables lo que voy a hacer a continuación es pintar un círculo por tanto lo primero que debes cambiar de color cambiar de color ya sé cómo se hace es contexto punto field style y digo que el fil style es igual a verde como es verde bueno verde es almohadilla 0 0 efe efe 0 0 pero sí claro escribir con s next a decimal es un poco complicado yo la verdad es que sé cómo se hace pero nunca lo uso porque me es mucho más fácil poner colores en el relieve por tanto yo os recomiendo mucho más que pongáis green me prendí y el siguiente ejemplo haría un ejemplo por el género o pongáis rg beige quiero verde sería 025 50 por ejemplo y voy a hacer ahora lo siguiente voy a poner contexto punto de jin pak voy a empezar un trabajo y este trazo va a tener las coordenadas siguientes con texto punto arco un círculo realmente es un arco y va a tener los siguientes parámetros de atención va a tener por ejemplo 50,50 de 15 a 0 como variante más puntos y por dos como truco evidentemente para continuación os voy a decir que hace cargo los parámetros y por último voy a decir contexto punto close up la cargamos comprobamos si funciona en principio no vamos a ver me debe faltar algún parámetro ah hace falta el último contexto punto si vamos a verlo ahora ahora si tenemos un círculo de color verde vamos a verlo ahora vamos a comentar línea a línea vamos a ver qué hace parámetro a parada aquí le estoy diciendo voy a dibujar verde a quien le estoy diciendo esto un trazo aquí le estoy diciendo dibujó un arco aquí le digo finalizó el trazo y aquí me digo rellena menor lo difícil en este caso es saber qué es cada una de estas componentes es muy fácil la primera componente es el centro en el eje x si yo pongo hay 100 migración se mueve hacia la derecha es el centro de 150 es el centro en x es la distancia que hay desde ahí desde el centro hasta el borde izquierdo el siguiente parámetro evidentemente como os podéis imaginar es el centro en y es la distancia que hay desde desde este centro mira hasta arriba desde el centro arriba el siguiente parámetro es el radio si pongo 15 tengo un círculo pequeño si pongo 50.000 tengo un círculo un poco más grande si pongo 80 tengo un círculo más grande todavía pensamos es un lienzo por tanto al ser un lienzo no se sale del lienzo es como pintar pero él el ángulo 50 el ángulo en el cual empieza a pintar empiezo a cero quiere decir que empiezo desde aquí más y por dos quiere decir que smart puntopy por dos que son dos y radiales son toda la vuelta al círculo entre prometía si pongo por ejemplo en más punto quiere decir que estoy más riendo 180 grados recordar radiales y dos radiales esto da la vuelta al círculo si los pies toda la vuelta evidentemente uno por fin es media vuelta si pongo mirada atención 0.5 por pi que haré un cuarto de la vuelta guardó recargo y tengo bueno tres cuartos perder ver el 1.5 1.5 es un cuarto de la vuelta en este caso 0.5 serán tres cuartos de la cuenta veis aquí un cuarto dos cuartos tres cuartos el parámetro truco indica si es un círculo relleno o si es una tarta voy a poner falls recargo y veis ahí tengo el valor completo o el valor complementario no solo ves falso son dos elementos es el mismo círculo pero el relleno por arriba o relleno por abajo y a partir de ahí como veréis podemos dibujar cualquier círculo dentro del canvas con las coordenadas generalmente cuando queréis dibujar un círculo básicamente se pone el número 22 y tenéis un círculo a otra cosa mira vamos a poner uno por martín donde ha empezado realmente el círculo el círculo empieza aquí el círculo empieza en este lado porque por la sencilla razón de que un círculo no tiene esta forma esto que sepáis que son círculos por una patata es un círculo donde mirar esto es cero esto es y la vuelta es dos pinos de la misma manera esto es para partidos y estoy aquí tres cuartos de pie si yo he dicho 0 quiere decir que empieza en esa zona pero si yo quisiera que empezara aquí le diría y partido 2 como vamos a decirlo allí en lugar de poner cero pongo 0.5 por más punto y lo que tengo en la pantalla mirad es que vaya al revés es steve hacia abajo veis como he empezado el círculo aquí ya no utiliza aquí voy a ponerle el ‘buen hacer’ 4.5 voy a ponerle el 1.5 beige ahora empieza allá arriba es decir puedo controlar el punto de inicio puedo controlar el mundo de final aunque insisto en la gran mayoría de ocasiones para hacer un círculo completo simplemente se pone allí cero y a continuación se pone 2% para llevarle hazme un círculo completo dentro del arco por tanto repasamos los parámetros tenemos varios parámetros que hacen lo siguiente mirar el primero atención el primero es la distancia del centro es la distancia del centro en el eje x es la distancia que hay desde el punto central del círculo hasta el borde izquierdo vemos que pone 150 luego que ese valor ahora mismo es de 150 el segundo es la distancia que hay desde el centro al eje y recordad que en ambas en javascript html desgraciadamente para mí el punto cero es el punto que hay en esta esquina lo digo porque para probar videojuegos es un poco complejo porque generalmente me suele gustar más que el punto cero esté aquí abajo izquierda pero que se va a hacer esos son los dos primeros parámetros que son la distancia del centro a x y los dos siguientes parámetros son perdón el siguiente parámetro que es el tercero es el radio el radio que es la distancia desde el centro a cualquier punto de la espera no puedo hacer con este arco elipsis tendría que hacerlo con otra herramienta es decir es un solo radio ese radio es equidistante para cualquier punto de la circunferencia y ahora los dos siguientes parámetros lo que me dicen es donde empiezo y donde acabo y lo que hará el programa es barrer el ángulo desde donde empiezo hasta donde acabo lo que voy a decir también atención grammer es que no es obligatorio usar la librería más lo que pasa es que es conveniente porque voy a hacer unos cuantos ejemplos atención voy a empezar el número cero y voy a acabar el número 16 no es obligatorio usar la librería más empiezo en el cero a cabo en uno lo que pasa es que me puede costar más entender por qué hacen los números el resultado en pantalla es esto esto es pero esto es 1 si queréis para hacer el contrario les voy a decir al final fours para qué clase no falsa para que me haga ese recorrido he empezado de cero y he acabado en uno ahora lo que voy a hacer es empezar en cero y acabar en dos esto es 0 esto es uno de estos 2 ahora empiezo en cero y acabó en 3 esto es 0 esto es 1 estos 2 estos 3 de la misma manera puedo continuar 4 y me lo hace hasta ahí 5 y me lo hace hasta el 6 y lo haces de la misma manera puedo decirle por ejemplo atención 424 si estos cuatro quiere decir que esto es 0 estos 4 1 2 y 3 qué pasaría si yo quisiera hacer un círculo desde aquí y hasta aquí pues en lugar de empezar en cero empezaría en 1 y llegaría hasta 4 probamos en 1 y acabo en cuatro básicamente es el punto de inicio y el punto de final de ese círculo el problema en este caso está en que porque uno y porque el cuatro es más cómo podría yo acertar 06 fijaos que no es perfecto ese punto de finalización no es perfecto porque pues porque trabajando en radiales realmente toda la vuelta al círculo son 2 pirra viales de esta manera lo que voy a hacer es lo siguiente mira lo que voy a hacer es sacar la calculadora sacó la calculadora la canción y digo 33.1 14 16 más o menos por dos 628 todo el círculo completo no es 6 sino un 6.28 ya sabéis que en programación los decimales son conjuntos no con comas solo así conseguir un círculo completo para que estoy usando la librería más pues para ahorrarme tener que sacar la calculadora a cada momento y ahorrar de tener que yo calcular manualmente el número pi por tanto como yo sé que toda la vuelta al círculo son dos pies radiales por eso pongo aquí que en lugar de poner 6 con 28 pongo más un top y saco la constante pide la librería matemática y lo multiplicó por 2 más punto tipo 2 o 2 puntos más puntos bien me da igual guardo recargo y solo así tengo el círculo pues sólo poniendo más puntos es cuando tengo un medio círculo eso en cuanto a los parámetros de inicio y de final y luego también tener en cuenta que falls es decir bueno la atención ha sido desde desde grado 0 hasta el grado 180 pero ha sido por bajo o ha sido por arriba pues el fox están para rellenar lo de bajo o lo de arriba como de la izquierda como de la derecha mirad falls rellenado debajo si pongo otro y el relleno lo de arriba nos permite cambiar qué parte está rellenando otro tipo de forma que podemos generar es una línea donde podemos especificar cada uno de los puntos hacia los que va a viajar esa vivienda entonces lo que voy a hacer mira voy a hacerme un hueco de hecho voy a comentar el código para que luego sepáis que hacía yo en cada casa voy a poner aquí dibujó una caja y voy a poner aquí dibujó un círculo y aquí voy a poner aquí dibujó una luna para trabajar por la línea voy a hacer lo siguiente lo voy a acercar al código y voy a decir contexto punto move to move es un pequeño curso que hay por la pantalla y estoy diciendo 9 ese curso hasta ese punto a ver como si yo fuera a dibujar lo que estoy haciendo es mueble lápiz hasta el punto de inicio donde vas a empezar a dibujar mutu evidentemente a continuación el hombre por ejemplo 40 a 40 que son las coordenadas x y horizontal y vertical del punto que voy a dibujar y ahora voy a hacer contexto punto line y voy a hacer por ejemplo 80,40 que va a hacer esto vamos a verlo por último parámetro más líneas por último voy a poner el contexto punto stroke stroup es dibuja la liga repaso el código mirar y hacer esto no sé si lo veis es una línea desde hoy desde 40 40 perdón 40 40 hasta 80 40 es una línea que ha empezado aquí y ya ha acabado aquí empezando por tanto en 40 40 y acabado en 80 40 lo divertido es que yo puedo hacer tantas líneas como quiera si yo aquí copio esta línea y empiezo a introducirla en tu ahora quiero una línea que vaya hasta 80 80 ahora quiero una línea que vaya hasta 40 a 80 vamos a ver qué dibujado he dibujado con toda probabilidad una fe invertida de 40 a 80 x de 40 a 80 y de 80 40 x por supuesto no solo puedo dibujar rectas puedo dibujar diagonales puedo dibujar realmente la línea que yo quiera ahora amigo que voy a crear pues hasta 80 120 y esto evidentemente va a dar una línea diagonal desde ahí hasta ahí lo que más nos puede costar en un principio lo digo ya es acostumbrarnos a que en el canvas esto es 00 y cada uno de los puntos los tenemos que medir como distancia x a ese punto distancia y a ese punto en este caso la proyección es el x en este caso 80 en y en este caso 120 puede dibujar ahora un círculo de hecho mirar voy a dibujar un círculo copiando melo copiando el círculo anterior pero lo voy a convertir en una elipse por tanto voy a hacer lo siguiente el ibge voy a dibujar un círculo azul y por tanto lo que voy a hacer es cambiar el color por ejemplo a blue es más había dicho antes que se va a enseñar cómo cambiar el color con el g20 rgb 0 0 255 que equivale a azul y ahora voy a decir que quiero este círculo en 150 con más 50 es muy a la derecha pongo hacia abajo 50 y más un topping por 2 lo cual me va a generar un círculo de color azul ahí a la derecha bueno pues según parece una manera de dibujar elipses es escribir lo siguiente lo curioso de esta manera se escribe antes se escribe antes de escribir el círculo antes de escribir el círculo voy a decir que contexto punto es kyle escalo y pongo por ejemplo 0.75 como uno lo que estoy haciendo es escalarlo a 0.85 por hacer el 35 por ciento en x o por ejemplo 0.50 y el resultado en pantalla como veis es este lo que he hecho es un óvalo lo que he hecho es escalar el círculo al 50% el x qué pasaría si no quisiera escalar al 50% y bueno pues pondría 1.0 punto 5 y como veis lo esperaría al 50% y ojo cuidado si yo he puesto es que en este caso ojo punto y coma me podría haber dado un error no me lo ha dado ha sido suerte en este caso si yo digo con texto punto es que el 10.5 le estoy diciendo que todo lo que hay a continuación todo lo que venga a continuación me lo vas a escalar al 50% y y esto es peligroso porque si yo ahora continúo dibujando no sólo ese círculo sino todo lo que dibuje a continuación me lo va a escalar al 50% por eso es muy recomendable aquí al final poner contexto punto uno a uno para que todo lo que dibuje a continuación recupere su escala correcta es decir es claro el 50% dibujo la elipse y luego escaló al 100% escalo a la proporción correcta para que todo lo que dibuja a continuación y a continuación voy a dibujar una cosita más voy a dibujar un par de cositas más ese es que hable correctamente nos voy a hacer por tanto es dibujar un examen o un polígono de lados voy a poner aquí un peligro y voy a combinar canvas con lo que ya sabemos de la librería matemática y de crear variables así que digo voy a entrar en comentarios aquí pongo un examen y aquí lo que voy a hacer es escribir una variable mira como para centro es más el centro x es igual por ejemplo el 50 para diego para centro y es igual a 50 ahora luego podemos cambiar los parámetros de hecho ahora muchas gracias cambian los parámetros para comprobar cómo ese parámetro se lleva al resto del hexágono y digo cuál es la distancia cual es el la línea que hay desde ese punto de centro hasta el primer borde del hexágono que es el ángulo 0 la solución es muy sencilla mirar voy a voy a dibujar una línea todo esto es la línea y digo contexto move to move to que mueve el cursor mueve el cursor hasta donde hasta el centro x coma centro y estoy usando dos variables veis evidentemente si centro x equivale a 50 y centro y 50 mutu el que vaya a decir mueve luego hasta 50 50 bien ahora voy a poner lo siguiente con texto online a ojo ver crear otra variable bar rabia más el radio de el polímero si logra el puesto 50 por poner a 2 para luego cambiar con los parámetros y ahora digo atención en x aquí es donde la cosa se va a complicar un poco en x es el centro x más el radio x el consejo perdón más puntos del ángulo cuál es el primer ángulo el primer ángulo es cero el ángulo la esquina a la derecha es cero ahora lo que voy a hacer es poner voy a copiar esto de hecho y para el centro y más el radio del mar por el sí más al radio del seno de 0 que he hecho lo que he hecho es una línea que va desde el centro del hexágono hasta ahí vamos a comprobarlo vamos a comprobarlo haberse salido bien y por último si el estropeó tiempo guardo recargo y tengo como ahí como veis una línea voy a bajar un poco la línea voy a bajar un poco la línea o que ponerla en ciencia porque si no no se verá álex a gross no saldrá de la pantalla ahí la tenemos que bajarla un poquito más a 200 ahí la tenemos esa línea veis como esa es la línea que va desde el 0 desde el punto central lo difícil pero si superamos este paso ya tenemos todo el ejercicio resuelto lo difícil es el siguiente paso jr de devoción dibujar una línea desde el punto inicial hasta el primer punto del hexágono cuál es ese punto segundo con sencillo es el centro x más el radio del coseno del ángulo 0 no ya no es el ángulo 0 qué ángulo hemos dicho que es pues más punto para partido 3 tenéis ahí arriba y ahora vuelvo a escribir más partido 3 lo importante en este caso es que comprendáis o recordéis de secundaria que el coche no te da la proyección horizontal del ángulo la equis digamos y el seno te da la proyección vertical del ángulo guardamos recargamos y todo ha ido bien tendremos una pantalla vaya destruyendo a graves hacia abajo voy a volver a repetir ojo el skate ahora igual que el hexágono lo pongo detrás bueno voy a continuar pero probablemente les va a salir un examen un poco chafado ahora voy a decir te copio de esta línea atención mira con bielsa lineal cuál es el siguiente radio pues dos formas tardío 3 ya partir de aquí va a ser muy sencillo porque la siguiente será tres formas cuatro formas 2 x + partido 3 y tengo ahí esa línea insisto voy a comentar todo este trozo voy a comentar el skate porque me está modificando cienciano al estado mira a la atención el resto de vértices son muy sencillos son tres formas cuatro formas 5 formas y el último y no por ello menos importante 6 x + 6 partido 3 a que es igual a 2 y 2 pi es la vuelta entera luego como podéis comprobar lo que he hecho aquí es dibujar un hexágono dibujando cada uno de los elementos proyectados os puede parecer que lo he complicado un poco la estancia la mirada la pantalla sin embargo no es así os puede parecer que lo he complicado un poco porque todo lo que he escrito depende del parámetro centro xy el parámetro radio pero eso aunque os parezca una complicación al final es mucho mejor para nosotros porque si yo era por ejemplo cambio el radio no tengo que recalcular todos los puntos sino que el programa no se calcula por mi cambio el radio y me re calcula automáticamente el radio lo que hecho si cambio una variable me cambia automáticamente todo el uso de las variables si cambio el centro refiere a 120 automáticamente me cambia también todos los centros por tanto para dibujar formas completa y complejas aunque os pueda parecer complejo al principio suele ser mucho mejor trabajar con variables a continuación voy a hacer un trozo de código que pueda reutilizar en cualquier proyecto y que me sirva para generar un script que me diga a la fecha de hoy y que además me transforme la fecha de cómo me la hice javascript a como la quiero yo ver como ser humano voy a empezar y voy a empezar creando un archivo html que tiene mujer tenemos en la mujer voy a poner un script de tipo texto javascript ya que estamos incluso voy a cargar jquery por tanto contigo esto no pero que le digo que el sol es voy a el archivo esta es la librería jquery 7 copió así que tengo pero voy a decir lo siguiente voy a poner luego no simplificar acy creex parte x x hace referencia al documento y cuando x punto ready el segundo la función del inicio la función inicio para decir lo siguiente dentro del dentro del voy a poner un bip con i d fechas para que para que ahora ya no quiero poner documento puntos by porque menos te diría en cualquier parte no quiero ver un proyecto le ponga la fecha sólo en el día que se llame fecha para controlar mejor y ahora de la función de inicio voy a hacer lo siguiente voy a crear igual que en fechas creo que en un trozo voy a crear una instancia del objeto fecha y hago qué fecha es igual a nivel y básicamente voy a poner martillo voy a hacer una primera mano dónde pues voy a hacer por tanto es crear una nueva variable llamada y hacer que y apunte aquí el elemento que tenga el líder llamado fecha y decir que y punto html aquí voy a poner la fecha de momento de prueba simplemente para que comprobéis en la pantalla cómo se llama esto mi fecha voy a fechas como pone aquí voy a poner la fecha lo que pasa es que está poniendo avastin o lo está poniendo ml y ahora mismo concretamente la fecha va a tener este formato hoy es fecha estática cada día tendré que ir cambiando la fecha imaginaos y encima si pongo y son las 35 veis que tendría que actualizar eso cada segundo es imposible lo que voy a hacer es que javascript lo actualice entonces yo voy a hacer lo siguiente mirar yo puedo cambiar esto y poner que el lugar de 868 fecha punto el verín 7 junto a él y el resultado es que hoy sigue siendo fecha 8 día 8 pero ese número 8 ya no es un número estático sino que mañana ahí pondrá 96 y ahora hago lo mismo con el año y en lugar de que te será get fire ya no y pone 2012 pero 2012 ya no es estático ahora es dinámico ahora sí por lo que sea mañana cambiar el año esperemos que no porque eso quería que el mundo se ha acabado así pues cambiaría ese 2012 y para que lo veáis mejor ahí puedo poner 10 hours game in it gets corts aguas de minis eagles seconds y evidentemente ahora ya me dice que son las doce una y tres ahora lo que haremos es vamos a decirle bueno para luego lo cambiaremos para qué me diga me ponga a ceros delante sobre todo mi principal problema ahora mismo es el siguiente es que yo quiero que me diga viernes y hamás que no me devuelve viernes me dice que es el villero -5 acordáis con gameplay yo voy a hacer lo siguiente aquí a continuación voy a decir que aplicó una estructura de control que ya conocéis llamada suites el switch os acordáis es como un hito pero con muchos casos o con múltiples casos y digo fecha punto de d evalúan gameplay en el caso cero voy a crear una variable a quién y aquí arriba va al día de la semana en el caso 0 día de la semana es igual a lunes y no os olvidéis del break siempre que escribáis que escriba es un caso dentro del switch tiene que haber un break en el caso 1 en el caso 2 día de la semana es igual a martes en el caso 3 día de la semana es igual a miércoles paso 4 día de la semana es igual a fuertes caso 5 día de la semana es igual a viernes viernes caso 6 evidentemente será igual a sábado y caso 7 ser igual a domingo yo que estoy haciendo aquí pues lo que estoy haciendo es cambiar un número por una palabra así que por tanto ahora aquí en la escritura en lugar de viernes le voy a decir que dime el día de la semana y el resultado evidentemente al recargar es viernes pero es evidencia no es estático mañana no pondrá viernes pondrá sábados de la misma manera voy a proceder con el mes de junio voy a hacer otro suites donde hay cambiarios apariciones y van del 0 al once en lugar del 1 al 12 a otra cosa si pongo un switch aquí no va a empezar hoy perdón si pongo otro switch me van a empezar a aparecer muchas líneas de código una cosa que no recomiendo hacer pero que yo voy a hacer ahora es mirar es eliminar saltos de línea para poner todo más comprimido y ese suites pasa a ocupar 3 veces menos no recomiendo no recomiendo escribir así ya sabéis por qué el código al menos en mi opinión es más ilegible es menos fácilmente legible pero la cuestión es que fijaos que al final funciona igual los viernes se van cambiando los segundos y todo eso de la misma manera por tanto como os decía voy a hacer otros suites y diré en este caso el fechado me hace falta pero el día de la semana así voy a crear una variable llamada var mes del año recordad invito las señas y los acentos todo eso al escribir variables fecha get mons en el caso cero en el caso 1 en el caso de la reacción mes del año será igual a enero y ahora voy a eliminar todo esto y voy a pegar 1 2 3 4 67 8 10 vamos a seguir creamos el caso 10 el caso 11 el caso 12 hasta el 11 de febrero smartphone mayor juntos en junio agosto en septiembre x noviembre y diciembre dice ahora vamos a la fecha cambiamos junio por mes del año y nos dice que es viernes 8 de junio de 2012 y son las 12 y 7 y 41 apóstoles que fijaos que ahí hemos convertido una fecha de estática y dinámica el resultado es el mismo pero ahora de esa fecha va a cambiar automáticamente cada día de cada mes de cada año a cada hora minuto y segundo ya que estamos vamos a demostrar cómo podemos combinar html y javascript y css y voy a maquetar esto con un formato el que sea por ejemplo aquí en el head voy a hacer una etiqueta de estilo es tal y voy a decir que todo lo que sea todo lo que tenga la fecha va a tener lo siguiente va a tener un background black un fondo amarillo curiel un color gris y le voy a poner un text shadow de 0 píxeles pero píxeles 5 píxeles y vamos a ver qué aspecto tiene en esta parte tiene este aspecto de una especie como reloj de la segunda guerra mundial como reloj vegan lógico voy a poner que el color en lugar de ser verde sea rgb o más limpia ver vacío sea hereje p [Música] 202 55 200 y por tanto sus resultados eran un verde clarito y en el color del brillo voy a poner un 100,25 5,100 que sea un verde oscurito es que así pero si os fijáis pero lo que hace es que la letra brillo un poco no véis un poco el resplandor hablemos de la letra como simulando ese efecto analógico y luego font-size voy a poner no sería píxeles para que me quepa todo tiene una línea hoy es como un poco efecto de matrix efecto del negra the matrix pongo 12 y allí tengo una letra y luego pasa de poner un punto de parís de 5 personas por ejemplo el problema de esta aplicación problema por decirlo de alguna manera es que esta aplicación te da la hora para la hora pero ahí se queda en ese momento se queda entonces no se actualiza a la hora en tiempo real por ejemplo veréis que las horas minutos sobre todos los segundos se han quedado congelados al principio me dice la hora que es en ese momento y ya está ejecutando el código y se acabó lo que os voy a presentar antes de este realizar el código es presentaros una función que ya hemos estado usando previamente que voy a usar dentro de la función de inicio y es la función 6 time out 67 es ejecuta algo así que voy a decir lo siguiente mirad allí al final al final de la función de inicio y voy a decir ahora aquí aller hola curando y que se ejecute a los 5 segundos de cargar la página así funciona bien guardo recargo 5 es que realmente es es 5 milisegundos 5 mil son 5 segundos cuando recargo y en 5 segundos y todo ha ido bien mira para que sale el cartel de la atención rapid otra vez recargo me dice la fecha es 0 5 segundos y me dice ahora lo que voy a hacer en este caso es hacer que hamás que intenten un infinito pero este bucle infinito va a ser en este caso por nuestro bien y voy a hacer lo siguiente tengo una función de inicio la función de inicio ha sido la fecha así que lo que lo lleva a continuación es qué zettel aut mira inicio y que me lo ejecute cada 1000 milisegundos tú para qué quieres saber la fecha y la hora mil veces en un segundo si te va a decir lo mismo en lugar de decirle que me lo diga a cada milisegundos se lo digo que me tiene que medir a cada segundo guardo recargo atención recargo y me dice 29 30 31 32 yo que he hecho cuidado esto que he hecho es razonablemente peligroso lo que yo es un bucle infinito mira atención mirada pantalla tengo una función de inicio función de inicio función de inicio función de inicio y al final dice ejecuta la función de inicio dentro de un segundo lo cual equivale a volver aquí inicio pues cuando vuelvo vuelvo vuelve a ejecutar la función de dice dentro de un segundo la vuelve a ejecutar veis como he vuelto estoy ejecutando un bucle infinito insisto que en este caso es un móvil infinito beneficioso porque nos está dando las horas cada segundo hoy otra cosa mira supongamos que no lo quiero cada segundo sino que lo quiero cada dos fijaos que yo en lugar de ese time out me pongo dos mil atenciones a la fecha y me dice 23 25 29 31 33 veis cómo se cumple realmente ese intervalo 2000 son realmente dos son dos segundos en tres segundos evidentemente lo más recomendable verdad va a ser poner 1000 milisegundos y de esa manera como veis tengo un reloj que me está marcando las horas en un formato digital a continuación lo que voy a hacer es un reloj reloj analógico con manecillas de hora minuto y segundo que me diga que me permita saber bueno pues la hora en forma tecnológico así que mira voy a comprimir todo esto y ahora aquí abajo lo voy a hacer aquí un canvas el html canvas [Música] igual reloj os acordáis el canvas tenía que tener un nivel para que voy a copiar el telar para que al principio digo va estoy aquí abajo aquí abajo es más lo voy a comentar voy a ponerlo analógico para que sepáis donde acaba las cosas del mercado siguiente repite así no tenemos separados y digo viejo como antes bar documento que el e-mail no y sí y ahora vivo y atención el canvas le voy a decir que quiero una anchura de 200 píxeles y una altura de 200 píxeles y que quiero un que tenga un borde por lo menos ahora para verlo un borde de un píxel más para que para que veáis como ahí aparece el reloj por el reloj habéis qué voy a hacer en primer lugar voy a añadir un círculo así que copio y pego atención de coqueteo aquí dibujo un círculo pues me lo copio me lo pego y lo adaptó va a empezar en cielo como haciendo va a tener 50 de radio y va a tener más y por 2 y lo quiero rellenar de gris algo así y tengo notas que vamos a verlo con texto claro es que no he hecho el contexto pinto en 12 guardo recargo y ahora si tengo un reloj puedo hacerlo defiende radio a continuación lo que voy a hacer es dibujar las manillas para las horas minutos y segundos cierto voy a empezar si queréis con lo de los segundos que es la más difícil yo antes he podido dibujar como veis aquí un hexágono así que voy a recuperar el centro x el centro y el radio aquí dibujo los segundos el centro x es 100 el centro y es 100 el radio voy a ponerlo de 80 y al dibujo una línea va a empezar dibujando una línea muy sencilla prim una línea que vaya desde 100 crucial contexto punto line es más que va desde el centro de coma centro y hasta centro x + radio coma centro y que hace esto nos dibuja esta línea además han dibujado una línea exterior al círculo porque protege como en tiempo no está bien para lejos perfecto tengo esa línea son los segundos cierto no hagas cada segundo me están dibujando otra vez la línea bueno pues a continuación voy a hacer lo siguiente veréis arriba arriba del todo voy a decir que para segundo es igual a cero y ahora digo esta línea que vas a dibujar mirada me la vas a dibujar con los siguientes datos centro x + esta opción de la pantalla más rabia por el mar 12 kos de los segundos no tengo que partir 2000 partido segundos de 2 punto partido segundos más es la vuelta entera vamos a verlo no también lo he hecho mal es mac 24 el partido 60 y segundos multiplica a más el razonamiento qué ángulo barre cada segundo cada segundo se barre dos por partido pobre el número de segundos evidentemente el segundo cero es el ángulo cero voy a empezar con la derecha de la lengua para la fe el segundo uno es uno por partidos por el coseno y ahora voy a hacer que aquí centro y vida más radio por el celo de ese valor vamos a ver si funciona no ha funcionado hay alguna algún paréntesis que me he dejado incorrecto centro x radio pero y funcionan pero él parece estar el error el error está aquí sobre todo de feroz no es cortar paréntesis 1 2 3 4 en segundos es que segundo a variable el segundo un restaurar ese ya no funciona bien y ahora es decir que copio esto y los dejo aquí centro y más el seno vamos a ver lo que ha funcionado bien tengo ahí por fin el radio iréis porque no está funcionando porque no le estoy diciendo que cada segundo que pasa tengo que subir el segundo y ahora digo segundo más igual a uno y el resultado en pantalla vas a ver el siguiente ya no tengo un movimiento lo siento los segundos van al revés no pasa nada siempre les puedo decir que sea menos el celo más – más empieza a las 3 no pasa nada claro si invierto el seno el eje y está invertido está al revés buenos luchó al revés realmente no hacía falta poner el menos y así el reloj va en el sentido ahora correcto de las agujas del reloj y otra cosa otra cosa muy importante os estáis dando cuenta que realmente el reloj cuenta segundos sin fin es decir después de 60 no pasa a 0 segundos hay dos que en este caso coinciden con que los segundos le van dando la vuelta pero yo podría poner un ir donde en todo caso le dijera si segundo es igual a 60 en ese caso haz que el segundo sea igual a cero de esa manera reinicio el reloj le digo familiares 60 vuelve a cero pero eso sigue y sigue contando más cosas más cosas que voy a hacer si ya tengo esto es calcular los minutos en este caso bueno podría hacer básicamente [Música] poniendo y claro poniendo en lugar de dividirlo entre 60 los divididos entre 12 y que cambien con los segundos o lo divido en definitiva con lo que sea otra cosa que puedo hacer fijaos que de esta manera lo que ellos ponen un contador verdad nos estoy fijando pero lo que hecho es poner el contador de segundos pero es que ese segundo no es el segundo real fijaos que arriba y consigue con el real qué casualidad más que sólidos o mira porque es el segundo 5 el segundo 6 y no es el segundo 6 es el segundo 12 11 13 y ni de coña es el segundo 2013 yo he creado este contador realmente el contador me sobra porque no tengo una fecha get seconds pues en lugar del contador lo que voy a poner es poner directamente fecha get seconds es decir que me digan los segundos reales para que se ahora está en 39 sea realmente 39 ya sé que diréis pone 43 y no pruebas de 5 y está arriba porque recordad que ahora mismo para ordenador 0 les haya arribas que lo que voy a hacer es ángulo le voy a sumar pi así que fecha que seconds por 2 por más y más y más punto para ver si funciona massmart creo que era menos más punto pino esto es 2030 a ver – más no claro es que no es más un tópico es más por dos partidos porque son 90 grados cortados con 90 grados espí perdió dos menos es más partido 2 y ahora si ha habido suerte creo que tengo que hacerlo otra vez con más lo está haciendo mucho caso hay algo que no estaría bien cierro esto 31 no me está haciendo el tram su alma match.com todo esto más el más bueno ahora lo veremos claro pero efectivamente es que el más punto más punto pin viene después del partido presenta más espacio y partido 60 vamos a verlo ahora 56 da una 111 no tengo un curioso no dar un grafismo curioso pero no es lo que quería efectivamente vamos a ver es el coseno de esto massmart punto ping tendría que estar fuera del coche no realmente no creo que no porque el coche no tiene que incluir el pib pero bueno lo voy a quitar del momento y más adelante a la cumbre otra vez cuando recargo sí sí cómo lo puedo hacer voy a hacer ahora ya que tenemos los segundos voy a dibujar las horas los minutos el radio voy a hacer que sea fiel así los segundos serán los más largos de todos ya luego haremos que cada uno tenga un color diferente ya que nos hacemos un reloj un poco falso bien pues voy a copiar esto aquí dibujo los segundos pues mira comentó todo para que luego lo tengáis activo unos minutos y digo centro y disimula fiel esto no cambia radio es igual a 90 80 2 ya lo dijo el centro x igual a radio x fecha 10 minutos minutos mire cuántos minutos hay en un reloj 60 luego luego dejó igual que los segundos partidos 60 guardo o recargo y tengo ahí los minutos y los segundos recordad son las 11 45 son la una porque ahí lo pone las dos minutos claro son y 45 recordado que son veis ha cambiado el minuto 6 recordad que son 45 grados buenas para allá sino ahora luego conoce ese se lo puede transformarse vemos que nos es difícil con canvas y ahora dibujo atención y ahora dibujo las horas el radio en este 4 es en este caso es 40 y digo que las horas es 10 hours 10 hours partidos 12 porque creo recordar y hay 12 horas pues más cosas que voy a hacer ahora permitidme que haga un poquito de mini trampa es decirle a todo lo que tenga el reloj todo lo que tenga bieber no en el horno por lo que el webkit transform es brote – 180 vez y así de esa manera tengo el perdón de los 180 no menos 90 vez menos a 90 grados y así tengo un reloj que me está marcando correctamente la hora que me está diciendo que son las 12 y 45 largas 46 47 y los segundos que estoy dibujando veis como para esa tontería del reloj son prácticamente 100 líneas de código en javascript y unas poquitas más que nos quedan los quiero decir es que el javascript prácticamente hagas lo que hagas al final es mucho código que lo ves de un trozo y dices madre mía esto que es pero que si lo vas viendo en línea línea y todo se está comentando pueden saber que cada cosa cumple una función específica lo que voy a hacer ahora básicamente es voy a hacer dos cosas una voy a hacer líneas con mayor grosor y más color donde por ejemplo voy a hacer que las horas sean de un color rojo para hacer esto voy a poner con texto el contexto punto style es igual y la red dónde está el es igual no hace falta poner para entonces guardo recargo atención y mirad cómo todo el stroke se a puerto y se ha puesto de color verde no pasa nada en el problema de este caso es que el estro le va a poner verde para todo vale ahora veremos cómo arreglar eso otra cosa que os quiero enseñar es que cuando hago online tú le puedo poner contexto punto line width es igual a por ejemplo 5 píxeles de manera que las líneas no tendrán un píxel de grosor sino que tendrán este bien en este caso 5 píxeles de esta manera veis he conseguido cambiar el color rojo de ese stroke en este caso y el line with the ahora mismo de momento para todas las líneas cuando trabajamos con javascript puede llegar a resultar un poco molesto el tener en un mismo archivo tanto html como css como javascript sobre todo porque para llegar al body para llegar al cuerpo de html tengo que empezar a bajar y bajar y bajar y llegar un momento hasta el móvil lo que voy a hacer en este vídeo es externalizar el avastin externalizarlo en el mar chino externo y diferente la cuestión del truco determinado está en que voy a hacer un archivo nuevo lo voy a guardar como la carpeta javascript y lo voy a guardar como crear fechas punto js si un archivo tiene la extensión html puedo convertir puedo cómo pueden contener html css javascript y otras cosas pero si quiero hacer un archivo que solo van a contar en javascript debe tener la extensión j mira lo he hecho y ahora corto todo el código javascript y lo pegó entre las fechas y ahora lo que voy a hacer es en crear fechas que las fechas ahora siento un poquito solito porque ha perdido el código es decirle no es que tu código realmente está el src crea fechas js veis src y la ruta al archivo que contiene el archivo java speed se hará guardo comprobaréis como el archivo es el mismo ahora cosa muy interesante queréis ver cómo se ve esto en el código pues en el código no esto que sí pero para los poder que el hecho que sí si pongo control y fijaos que nos dice que esto vincula a crear fechas punto js y si pincho crea fechas punto j s me lleva al archivo javascript por tanto aunque es un archivo externo html lo carga automáticamente dentro como jquery jquery no mucho lo mismo pues lo que hemos hecho es convertir nuestro archivo en una especie de librería externa en un jquery entonces qué hacemos programamos dentro o programamos fuera eso ya depende de vosotros yo lo que suelo hacer es cuando empiezo un proyecto de mayo tengo la mala costumbre de meterlo todo junto en un mismo archivo cuando me hice un proyecto meto javascript dentro del archivo html y cuando ese javascript crece entonces lo externalizó fuera el vosotros trabajar como queráis o siempre dentro o siempre fuera oa veces dentro ya veces fuera vamos a hacer el juego de ponce y lo primero que voy a hacer es crear una carpeta dentro de la carpeta actual que voy a llamarle pons y dentro de la carpeta pons voy a crear una carpeta llamada uno ya que voy a desarrollar de manera secuencial este juego cada vez que haga algo al que haga algo nuevo lo que haré es tierra nueva versión de esta carpeta aquí voy a guardar esto que tengo preparado lo que es más actual con carpeta 1 y esto lo voy a guardar como index punto de hp y así progresivamente iremos viendo o no como index.hu y así progresivamente vamos a ir viendo cuál es el avance del proyecto además evidentemente para este proyecto voy a necesitar trabajar con jota acuario tanto voy a copiar la biblioteca jquery dentro de la carpeta pons dentro de la carpeta número 1 y de esa manera estaré preparado para comenzar el proyecto para desarrollar este juego tengo un archivo que se llama index html donde lo que voy a hacer es empezar trabajando con la lógica del juego y progresivamente convertir esa lógica del juego en el juego real para comprobar que lo más difícil en este caso no es programar el juego sino primero comprender lo que hace el juego y poco a poco transformar esa comprensión en un juego esto que tenemos aquí se llama la lógica del juego la lógica del juego son una serie de frases en castellano en inglés en francés en alemán el idioma que queráis que describen lo que tú vas a hacer y de esa manera te aclaran las ideas antes de que empieces a programar para que cuando empecé a probar no vayas a filas si lo observas en cada momento qué es lo que necesitas estoy ahora mismo en este oficio estamos haciendo sobre un videojuego esa lógica en el juego cuando hagamos una tienda online cuando hagamos una aplicación corporativa un portal de venta de coches de segunda mano esto ya no será la lógica del juego sino que será la lógica en el negocio que son las reglas en base a las cuales funciona esa tienda online ese portal de ventas de coches esa aplicación de gestión de negocios es lo que se vale pero lo que quiero marcar es que quiero remarcar es que lo importante no es la programación y lo difícil no es la programación se lo difícil es comprender qué quieres que haga la programación una vez sabes lo que quieres el resto ya es cuesta abajo por tanto lo que voy a hacer dentro de este proyecto es empezar a creando como siempre una estructura html dentro de la cual crearé una cabeza [Aplausos] y dentro del actual creó un cuerpo dentro del móvil voy a crear y voy a empezar a comentar esto dentro del bote y voy a empezar a crear un canvas y digo de poner unos cuantos comentarios el mismo el canvas es el escenario es el lienzo realmente canvas quiere decir lienzo donde ocurre el todo pero el canvas es estático el canvas digamos entre comillas porque luego de veras la pantalla de la televisión pero la pantalla de la televisión no es la que mueve el juego la consola la que mueve el juego que luego sabe por la pantalla de la televisión es como el pong en la tarja y de los 80 bueno pues vivo canvas y de igual a escenario por ejemplo y ahora el eje voy a hacer un script de tipo javascript y ahora voy a decir en javascript es donde ocurre todo y es donde el juego se mueve pero de manera lógica el javascript control lo que va a pasar dentro de dentro del canvas además recordad que mirar necesito otra etiqueta de script de hecho lo que hará que tenga vida escribe y le digo src j así que voy a copiar directamente el copiado de este hombre lo llamo y aquí voy a poner saberí para facilitar el desarrollo es por tanto donde hago de cada línea aquí voy a a esta etiqueta primero cargo jquery lo primero de todo para que yo disponible en el resto del proyecto para desarrollar para hacer las nuevas más fáciles a continuación en hab astilla es donde ocurre todo y dentro del botín dentro del canvas proyectar en aquello que estoy desarrollando el javascript por tanto ya que estoy usando jquery voy a hacer lo de siempre voy a desarrollar primero en versión extendida y luego ya caso comprimir e para hacerlo más breve también cuidado más difícil así que dijo bar x x es igual al y cuando el rey ejecutó la función de inicio esto podría ser perfectamente un copia pega lo que mostró hasta ahora siempre igual y cuando inicio entonces ejecutamos algo por ejemplo voy a decir por ejemplo bienvenido a palos ejecutó vamos a ver que tenemos hasta ahora no tenemos bienvenido lo que tenemos básicamente no es ni más ni menos que un juego donde hemos preparado jquery hemos cargado la librería jquery y lo que vamos a hacer es ejecutar voy a poner esto dentro del body tenemos hay un canvas porque el texto se ha empujado por que tengo un canvas si queréis lo que voy a hacer con el canvas es marcarlo como lo marcó por una etiqueta está el estilo estilo de tipo barra hamas trick texto garraf es ese y dijo todo aquello que sea canvas tendrá un borde de un píxel da este momento gray para que para que cuando ejecute mirad pase esto y vosotros vais a clase porque el texto se empuja bueno voy a hacer un canvas de con with week es igual a 640 píxeles y high que es igual a 640 x 480 veces una resolución típica de canvas y así hay dentro espacio suficiente para jugar de una pantalla pequeña que he hecho hasta ahora por tanto he preparado mi proyecto lo que he hecho es un proyecto html donde cargo javascript prepara una etiqueta de estilo y dentro de el escritorio dentro del canvas le pondré el juego si queréis voy a poner otro comentario aquí hombre de estilos donde sea es necesario todo este proyecto lo voy a desarrollar de manera incremental eso quiere decir que yo ahora atención vida de la pantalla pero mirad bien porque estos pueden causar confusión esto lo hago para que más habla no tengáis todo el proceso de desarrollo pero está bien hay que tener cuidado mirando que ahora escojo la carpeta a uno atención mirad por la carpeta 1 y hago copio y pego y aparece una copia y el renombre esta carpeta como ‘número dos’ de tal manera que yo ahora voy a empezar a trabajar con la carpeta número 2 y me dejó abandonada la carpeta número 1 porque porque cada cambio que yo haga lo voy a hacer una carpeta diferente y de esa manera al acabar el proyecto tendréis un histórico de cada uno de los pasos que hemos dado al desarrollar ese proyecto y así cuando más adelante porque el problema es que esto igual lo habréis dentro de un mes y dices muy bien veo lo juego ha acabado pero acuerdo por dónde empezó no me acuerdo por dónde acabó y no me acuerdo qué pasos dio lo que hacemos esta manera es crear carpetas no médicamente donde queda registrado como era el juego la primera fase con buena juego la segunda fase y así entendéis más adelante que hay que hacer primero que hay que hacer después pero ojo ojo si yo ahora he creado la carpeta número 2 tener en cuenta que atención a la pantalla ni eric ni microbús se están dando cuenta luego lo que tengo que hacer es en la carpeta número 2 y volver a arrastrar desde la carpeta número 2 index.html tanto a él como al navegador es decir no hagáis copia de la carpeta número 2 y sigáis desarrollando la carpeta número 1 porque entonces no hemos hecho nada más difícil es crear una carpeta número 2 y a continuación abandonar la carpeta número 1 y decirle a edith que cargue el archivo de la carpeta número 2 o las 3 o la 4 o la última carpeta que haya sigo con el proyecto y lo que voy a hacer ahora es decir que la función de inicio aquí ocurre todo el málaga oye todo todo es una palabra amarilla todo lo que me está diciendo el hamas ting decir la palabra reservada porque todo el castellano es todo en inglés cosas que hay para hacer igual que go to que es una función que hemos visto que vemos a donde en php es una función que en inglés dice ir a youtube vale por tanto lo que voy a hacer es poner el top todo el bacalao y así me aseguro otro decía el otro día preparamos en castellano además castellano castellano cerrado ya sabéis que nunca vais a hacer ninguna colisión con javascript y ahora yo aquí lo que voy a hacer es lo siguiente voy a parar todo esto todo lo que hicimos el otro día pero ahora voy a convertir cada una de estas cosas en comentarios ya que los comentarios realmente me van a indicar cuáles son las fases de programación del juego pero hay una fase que nos hemos saltado pero no pasa nada era difícil de considerar y es que la primera fase de todas va a ser realmente lo que realmente va a ser la última fase de todos más ver dibujar el escenario porque va a ser la última fase de todas lo voy a decir lo que vamos a hacer para cada vez que tengamos que calcular y dónde está la pelota y dónde están los marcadores y dónde están las barras es primero calcularlo todo dónde está la pelota está rebotando no está rebotando está marcando un punto no está marcando un punto siente que está pulsando el usuario dónde están las barras de rebote primero nos preguntamos todo eso en base a eso el programa internamente nos da unos datos pues mira la barra está aquí y otra barra está allá y el marcador estaba tanto y la pelota está por ahí en medio rodando en esta dirección y con esta posición y cuando el programa nos haya dado todos los datos lo que hacemos es los datos y convertirlos en el escenario y que el programa no dibuje la pelota donde sea sino que la dibujé según los datos que la primera parte del programa le haya proporcionado por eso dentro de esta última parte dibuja el escenario voy a hacer lo siguiente voy a decir para esther minúscula bar para que lo reconozca como variable igual documento punto de baile y de balbín estos acordáis que lo hicimos el otro día y nos sirve para decir que voy a dibujar en el canvas cuál es el ide del canvas se llama escenario el escenario ahora digo con texto es igual efe punto 10 context en dos veces que estoy diciendo en esta línea cógete el canvas además no cualquier canvas sino el canvas que tenga el iii de escenario en la siguiente línea como el otro día le digo vas a dibujar en 2d y en la siguiente línea voy a poner lo siguiente si queréis incluso es más voy a poner sangría para que veáis el desarrollo el ajuste de textos de lo activo cerrado mal atención señaló al canvas y si queréis incluso hagamos hungry es como si los comentarios fueran parte de la programación así esa manera lo que quiero es que entendáis el por qué hacemos cada cosa porque ya lo sabemos hace falta el por qué a continuación dibujo el fondo como dibujo el fondo pues digo contexto punto field style es igual hablar voy a dibujar con color negro y luego digo con texto junto a rec un rectángulo que va a ir desde 0 0 hasta 640 tomar 480 si todo ha ido bien vamos a comprobarlo vamos a ver que no tenga ningún error en java spirit nada parecido bien algún error debo tener porque además porque además voy a eliminar esto en minúsculas vamos a ver voy a seguir una cosa todo esto son comentarios además de los comentarios son alguna ocasión de darle y de no hace no hace falta para la almohadilla porque ya le estoy diciendo get elemento aire persona este caso no hace falta y probablemente sea el marco un texto ahora tampoco aunque eso era un error contexto feel style blacks voy a decirle en qué armonía 000 000 eso tampoco tendría que ser escenario escenario bueno vamos a ver por dónde puede estar aquí la cosa en lo que he hecho es copiar código del otro día copiar el código del ejercicio de canvas y básicamente debería ser ahora como un punto de alguna parte lo que estoy haciendo es tomar el elemento que se llama escenario poner su contexto en 2d probablemente era algunas mayúsculas por aquí lo que fallaba decirle que voy a pintar de color negro y que pintó un rectángulo de fondo por eso digo color negro y pinto del fondo aquí voy a comentarlo todo señaló el escenario y aquí dijo que pintó en 20 así luego tenéis todo antes de acabar esta fase número 2 del proyecto lo que quería hacer es dibujar tanto la pelota como el resto de elementos así que voy a hacer lo siguiente de momento estoy dibujando ya lo veis en estático estático dibujo elementos fijos en la pantalla luego con javascript los voy a ir moviendo dibujo el jugador uno que va a hacer el jugador el humano y digo el color va a saber que cf efe flc efe que es largo en hexadecimal y le voy a decir que voy a hacer un rectángulo que esté por ejemplo en 20,20 y que tenga 20 unidades en x y por ejemplo 80 unidades en y vamos a ver cómo queda esto cuando recargo mirar este va a ser el usuario 1 es muy grande es muy pequeño no lo sé a partir de ahí ya lo que tenemos que hacer es moverlo mirar por ejemplo digo 80 bien por the wrestler como grande o de poner en 10 beige he hecho ahí una barra más pequeña este es el jugador 1 con la misma lógica vía para amigo dibujó el jugador 2 y digo tú vas a estar tener en cuenta que el punto 00 esta esquina arriba a la izquierda tú vas a estar si es 640 tú vas a estar en 620 vamos a verlo ahí está que va a estar el 6 10 y ahora tengo el jugador 1 y el jugador de los lobbies 2 barras y por supuesto este juego no es nada si no tengo una pelota pues lo que voy a hacer ahora es lo siguiente dibujó la pelota y para eso voy a dibujar un círculo para dibujar un círculo voy a copiar el otro día las instrucciones de dibujo de un círculo voy a hacer un poco de hueco aquí dibujo un círculo aquí dibujo la pelota y digo ponme un elemento que sea blanco voy a dibujar plano empiezo un trazo que esté 320 240 donde está el centro de esa pelota ahí que tenga 50 de radio mambí falso finalizó el trazo y lo relleno que tengo mirar más y por dos y tengo esto quizás la pelota es un poco demasiado grande para este juego verdad pues lo que voy a hacer es decirle que el radio sea más pequeño y ahí ya por ejemplo lo tendría y ahora por último dentro de esta fase número 2 del juego donde lo que estoy haciendo es maquetar gráficamente cómo se va a ver esto en pantalla fijaos que el pongo el bong original vamos a ver se lo tengo por aquí en youtube recordamos que en el juego original en el congo originalidad atención a la pantalla había la numeración sí que la deja para css pero había una línea gratis continua de color blanco ahora pensar la cantidad de líneas y rectángulos que voy a tener que escribir bueno pues la verdad es que la verdad es que podríamos pensar que yo ahí me voy a morir poniendo los rectángulos pequeños pero realmente qué estructura de control conocemos el avastin que nos permita ejecutar repetitivamente algo por ejemplo un bucle form un bucle for repite 20 veces cada vez baja un poquito más hacia abajo y dibuja me rectángulos acordáis el bucle for lo que hace es repetir algo varias veces esto no es repetir un rectángulo varias veces pues lo voy a hacer con un bucle for me voy a hacer lo siguiente mirar voy a decir ahora dibujo esto es lo más difícil de esta parte del proyecto y digo form y mejor pongo la variedad de fuera va red en y es igual a 0 y digo mientras red y sea cero mientras red y sea menor 20 rectángulo y voy a hacer por ejemplo 20 rectángulos 2 blancos y digo cada vez que pasa por aquí estas redes y quiero querer y más le añade un valor a radio y este es el bucle four y ahora voy a dibujar un rectángulo aquí lo que estás aquí y lo pongo y digo hacia adelante pintó de blanco y voy a pintar un rectángulo que esté en 320 pero que esté en 0 y tenía 2 píxeles y termina 5 píxeles vamos a ver qué aspecto tiene esto guardó recargo nos es lo veis pero allá arriba hay un rectángulo nos lo veis aquí de hecho no hay 120 metros dentro uno dentro de otro lo que voy a hacer ahora es decir lo siguiente atención dirá en y y digo la y no va a ser cero porque para que todos estén en cero sino que voy a decir que red y por 3 y por tres que están vamos a verlo no voy a decir cero más andrés por revivieron vamos a ver qué hace esto esto en principio nos tiene que dibujar una secuencia de elementos dos rectángulos uno detrás de otro tres en este caso probablemente ha sido poco voy a hacerle cinco vale a poco a poco los voy a estirando bien y ahí poco a poco empiezo a tener los elementos incluso puedo decirle que en lugar de mente quiero tener 40 y me va a dibujar 40 elementos y a partir de ahí voy jugando hasta tener una red de elementos vosotros diréis exactamente qué quiere sexo aire no entiendo por qué ese bucle for me ha generado estos elementos en vertical pues lo voy a decir vamos a repasar el código en el código estoy diciendo que reding empieza sido cero a la vez es cero y siempre que sea menor a 40 añade un valor así que atención mira la primera vez donde está el rectángulo en 320 en x y en y está en 0 más 12 por red y cuánto vale red y ahora la primera vez cuánto vale 0 luego 12 por red y es igual a 0 luego cuál es el resultado de esta fórmula matemática la segunda vez que pasó por aquí cuánto vale y uno claro el resultado si vale 12 pero cuánto vale radio y 112 por 1 es igual a 12 y por eso me pone el segundo rectángulo 12 unidades más abajo la segunda la tercera vez que pasó por aquí cuánto vale red y revivir vale 2 luego 12 por 2 24 y por eso y no por otra razón es por lo que el primer rectángulo aparece en 0 el segundo aparece directamente en 12 el tercero aparece en 24 y el cuarto aparecerá en 36 y el quinto aparecerá en 48 y así lo que voy haciendo es dibujar una serie de rectángulos uno a uno simplemente con un bucle foro ya a partir de aquí el bucle for le digo empiezo de cero acaba en 40 mirad lo que he hecho antes se ve en 20 atención vida lo digo mente me quedo corto se le digo 10 me quedó más corto todavía pero me han dibujado 10 rectángulos se luego 30 igual todavía me quedó un poco corto por tanto le digo me aparece que el número correcto viene a estar en torno a 40 dibuja 40 y así tengo una red de rectángulos hasta abajo lo que voy a hacer a continuación es ahora sí empezar a crear la programación del juego empezar a crear las variables que van a gobernar el comportamiento del juego en todo momento para eso una constante a todo el desarrollo de cualquier programa sea un juego sea una aplicación de negocios o sea lo que sea atención mirada aquí arriba es un paso que se llama la definición de variables iniciales y las radiales iniciales se ponen arriba del todo porque pero en cuenta vamos a hacer hoy como hicimos el otro día que todo este bacalao se repita se repita varias veces para que el juego se ponga en movimiento y yo no quiero que cada vez y el tiempo nos la variables aquí pero quiero que cada vez que venga aquí las variables se vuelvan a reiniciar yo quiero que las variables aquí tengan un valor cuando empiece el juego pero a partir de ahí el valor vaya cambiando por ejemplo diréis bueno pero qué variables son esas os voy a poner ejemplos concretos hablando de los jugadores los jugadores que pueden hacer pues pueden moverse en y pueden moverse en vertical así que digo jugador perdón bar jugador 1 y es igual a 10 el nombre de la variable puede ser el que vosotros queráis pero evidentemente yo os recomiendo poner nombres de variables que los aporte de información que en un momento dado si habéis dentro del proyecto dentro de un mes y no os acordáis que hacía cada cosa pues digáis hombre si la variable se llama jugador y me imagino que está guardando el valor en y del jugador 1 no le llames variable uno variable 2 porque dentro un mes gris y que hacía cada cosa aquí creo otra variable que será jugador 2 y deberá inicializar abierto y ojo ahora necesito para la pelota necesito cuatro variables voy a hacer un juego de aceleración no hice un juego con posición y velocidad por tanto necesito parar pelota 2x que es la posición en x de la pelota que es igual al principio del juego a 320 píxeles porque porque me da la gana podría ser cualquier otro valor la cuestión es que son unos parámetros que definen la posición inicial de la pelota y que la pelota esté al principio en el centro de la pantalla pero estuviera donde yo quisiera lo de menos es el valor que le veis nos importa es un valor cree otra variable que es pelota posición y que es igual a 242 4a píxeles 240 y punto pero sabéis qué pasa es que este juego en este juego la protesta animada con lo cual la posición de la pelota en un momento dado es sólo la mitad de la información además de saber la posición necesito saber la velocidad perfecto saber si la pelota está subiendo está bajando está yendo hacia un campo está yendo hacia el otro por eso voy a crear dos variables más había dicho que para ver otra mención falta cuatro variables que son pelota del x velocidad del x que al principio es no sé voy a probar con 20 ibar pelota bell y qué voy a probar con 20 voy a asignar estos con reza la meditación y a partir de ahí ya hacemos la fase número 3 de este juego tengo ya estas variables iniciales y luego aquí comienza fota fuera veis desde aquí hasta aquí son las variables iniciales prácticamente cualquier programa escrito en el lenguaje que sea empieza declarando variables las variables es como si un juego fuera como si un programa fuera un juego de cartas las variables es el reparto inicial es las cartas con las que vas a jugar durante todo este juego digamos así que ahora vengo abajo mira adaptación en trabajo después de haber declarado variables y le digo mira el jugador 1 dibujo el jugador 1 la posición en y no va a ser 20 va a ser un jugador 1 y el jugador 2 no va a ser 20 va a ser jugador 2y y la posición de la pelota no va a ser 320 x 240 va a ser pelota 2x iba a ser pelota 2 y lo que estoy haciendo es convertir una maquetación estática en una maquetación dinámica ahora la programación de la posición de los objetos ya no depende de 321 es 40 si no depende de lo que valgan las variables cuando recargo mira tengo lo mismo aparentemente pero ahora fijaos que se ha puesto bien ya no depende de un valor estático sino de un valor dinámico como va a ser una variable lo que voy a hacer ahora antes de seguir es hacer la versión 3 de este juego por tanto me cojo la carpeta pon atención mirada y hago copiar y pegar hago la carpeta número 3 y ahora atención para mirar que lo que hago es cargar ese archivo tanto aquí como aquí es decir que estoy haciendo pues en todas partes dejar claro que estoy trabajando con la carpeta 3 del proyecto esto que estoy haciendo hay que hacerlo en todos los proyectos que desarrolláis hombre no es obligatorio pero es conveniente porque hace de esa manera vais a obtener luego un histórico un recordatorio de que hicisteis en cada versión de cada programa que es desarrollado es un poco más complejo porque decidí mantener varias carpetas pero al final puede ser beneficioso lo que voy a hacer ahora puede parecer un poco pronto pero más vale hacerlo así ahora exponer este juego en movimiento aunque de momento va a haber muchas cosas que funcionen mal pero el primer juego movimiento y en la carpeta número 3 lo que voy a hacer es aquí al final después de dibujo la red voy a hacer algo que ponga repítelo todo como lo repito todo pues yo lo repito todo poniendo el 7 aunque vimos otro día [Música] repítelo todo para poner elemento de todos vamos a time out es decir que hacía 7 y mauro es decir ejecuta la función de inicio dentro de un segundo recordad que de javascript en los segundos valen milisegundos por tanto 1000 equivale a un segundo lo cual quiere decir básicamente que da igual donde estés dentro de un segundo vuelve a recargar el programa qué va a hacer este juego ahora que tiene el esquema de hacer pues el momento no va a hacer nada por qué porque yo recargo y básicamente sin que vuestros lo veáis cada segundo se va a recargar el juego pero la posición de la pelota va a variar no porque yo todo momento no estoy diciendo la pelota que la pelota es pelota posición x pero otra posición y pero cambia la posición de la pelota no así que yo aquí ahora voy a decir lo siguiente atención pelota os x es igual a pelota 2x más pelota x la pelota tiene una posición pues para calcular la siguiente posición coge la posición actual y sumarle la velocidad y de esa manera y de desplazando la pelota en equis y en y y ahora cojo esto copio y pego y cambio x por y vamos a esa función esto es no voy a comentar para que luego tengan calcula la norma posición sumando la velocidad la posición antigua solo era muy primitiva de calcular nuevas posiciones pero la verdad es que funciona y cuesta bastante poco al programa de calcular qué es lo importante también recargo y mirad veis como estaba moviendo poco a poco porque sea moviendo en esa dirección y no en cualquier otra hora a continuación lo vamos a vamos a explicar pero de momento quiero que me aislo siguiente atención lo primero es que voy a ganar otra vez la pelota se mueve cada segundo porque porque yo aquí he dicho mil si yo aquí le dijera a 10 se movería cada 10 milésimas de segundo cada centésima de segundo por tanto me pasaría esto atención tengo un problema recargo y pasa esto nosotros la pelota se me ha ido corriendo mi problema es el siguiente mi problema es que si le pongo 10 milisegundos la pelota para fluida pero será muy rápido por la pantalla si le pongo un segundo entonces no se escapa rápidamente de la pantalla pero va muy a golpes lo cual tampoco me ayuda bueno lo que voy a hacer en este caso es bajar de los 10 iniciados acordes a los de inicial y dados era 20 perdón pues le pongo 2 recargo y ahí la pelota se empieza a mover ahora lo más importante una velocidad no me importa porque básicamente es fácil todo mundo entendemos que si antes con velocidad de igual a 20 rote más rápida si en lugar de 20 le pongo 2 va a ir más lenta eso digamos lo entienden cualquier persona el problema de estar en atención por qué la pelota va hacia la derecha y hacia abajo y no va hacia cualquier otra parte por una muy sencilla hasta acordados que esto es x apagar una flecha esto es x y esto significa yo he dicho cada vez que calcules la posición aumentados en x aumentados en y por eso la pelota se mueve en este lector y no en cualquier otro porque está aumentando en x y en y ahora mismo de momento lo que tengo ya es un juego mínimo qué es un juego donde la pelota salvamento pero tenemos un problema este problema lo habíamos previsto cuando vemos planificar la lógica del juego y este qué pasa cuando la pelota llega hasta aquí abajo desaparece porque yo he programado la colisión yo le he dicho cuando llegues abajo rebota hacia arriba no así que esto es muy importante no sólo de este juego sino de cualquier programa que desarrolláis y es que todo lo que tú no le digas al programa el programa no lo va a hacer sólo lo que tú le digas lo va a hacer esto es un clásico en informática de cuando la gente le echa la culpa a los programas que el programa ha funcionado mal ojalá vas muy rara vez funcionan mal cuando un programa funciona mal es porque el programador que no ha programado no ha previsto todas las posibilidades que tenía que hacer ese programa algún programa no es más que una máquina que es lo mismo que no es que llevamos rápido y el coche no es lo mismo en la vida de los casos con otras cosas que pueden pasar pero programando un programa hace lo que tú le digas que hará ninguna cosa más lo que voy a hacer ahora es programar esta parte de aquí fijaos esta parte de abajo prácticamente no se encarga de calcular pero lo hemos hecho a ello pero qué voy a hacer ahora es abrir esta sección del código y decir la pelota rebota contra la pared yo como hago eso para necesario vamos a pensarlo matemáticamente es más sencillo de lo que parece en dos partes aquí una aquí y otra aquí esto no son paredes porque esto realmente esas prendido el fuego o has ganado el fuego depende así que cómo puedo saber que la pelota ha llegado a esta pareja es muy sencillo cuando la posición y de la pelota sea mayor que 640 480 os acordáis esto es 480 píxeles de alto luego cuando la posición de la pelota sea mayor de 480 es que ha llegado aquí al final la porción en y para la pelota pues yo la tengo y digo una cosa más sencilla de lo que os podéis imaginar funciona mira la pantalla y vivo si es una condición sin la pelota cumple esa condición digo si la pelota y es mayor que 480 en la posición en vertical de la pelota es mayor que 480 en ese caso pelota el y la velocidad vertical de la pelota es igual a la menos pelota y es decir si la pelota iba así la velocidad iba así la menos velocidad hace así lo cual quiere decir que la plata llega ahí rebota hacia arriba si la pelota va así de repente hace así la velocidad vertical se invierte vamos a ver si funciona pero también y lo he puesto bien pero también y aseguramos que los hombres de las variables funcionan correctamente si pongo un paréntesis casi que mejor porque algunos lenguajes de programación no cogen correctamente o de poner un signo menos delante recargo y pasa eso habéis visto rebote en la pantalla yo voy a hacer otra cosa mira donde masa tendría que cumplir este caso arriba entonces le digo sí pelota y es mayor de 480 dos barras verticales pelota 2x es menor que cero en ese caso es decir se ha rebasado por bajo o ha rebasado por arriba en ese caso darle la vuelta a la velocidad permitirme hacer otra cosa permitirme hacer otra cosa lo siento pero estoy listo y un poco juguetón y es que esto luego lo voy a desactivar en el juego sabéis qué pasa es que se aguas el sismo se vive muy pronto es que la pelota hace así se pierde y no vemos más vamos esto está funcionando lo que está pasando por esto pero yo lo voy a hacer lo siguiente sí pelota os x es mayor que 640 o pelota 2x es menor pero en ese caso sí pero también x es igual a menos pelotas del x voy a corregir este pelota post x evidentemente equivocados pero tapó y y ahora qué va a hacer esta línea de abajo y de arriba lo que hace es detectar la colisión vertical la posición de la pelota en y pero que hace la posición que hace esta línea de aquí es decir si la posición en x en horizontal rebasa 640 exclamó la huelga para atrás y si la posición rebota en cero haz que vuelva otra vez para atrás vamos a comprobarlo la pelota rebota veis veis cómo va rebotando veis como tengo ya un juego la mente la pelota rebota nuestro contrato puntos de momento pero lo que quiero simplemente es comprobar como con esos simples y cuando veis en un juego una pelota rebota el sonido que le está diciendo si la pelota ha llegado aquí entonces haz que vaya para allá luego evidentemente en los juegos se usan mucha trigonometría que es según con el ángulo que rebote calcular alguno complementario y rebota así en este juego de momento nos vamos a meter trigonometría para mantenerlo sencillo si metemos trigonometría será al final cuando hayamos comprendido perfectamente qué hace cada parte y ya podemos permitir un poco ir a la crème de la crème del juego pero de momento page yo estoy haciendo que simplemente ir comentando cada parte e ir programando lo que me conviene voy a programar una cosita qué tendría que hacer yo si quisiera que la bola frenada pues es muy sencillo esto logró desactivar no quiero que la bola frene frenar simplemente quiero que piense un poco lógicamente frenar no es que a cada momento la velocidad disminuya un poquito pues le dimos cada vez que pases por aquí pero tal vez x es igual a pelotas del x por 0.8 cruces donde 8 sería un coeficiente de rozamiento cada vez que pasas por aquí tú velocidad quitar un 20% les dejan 0.8 lo mismo evidentemente esto de calcular que se y es un poco me hace no sé pero es que tiene que ser así porque no hay manera podría calcular el vector pero por ahorrar acabaría gastando más tanto al final es mejor trabajar con x y mirar si ahora recargo que hoy vaya se acaba muy pronto ha visto la pelota lo que ha hecho frena muy rápido le digo que cada vez que vine por aquí tu velocidad multiplicada por 0,99 veis como la pelota llega un momento que frena porque porque cada vez que paso por aquí le estoy diciendo tu velocidad italia un 0 1 % pero claro se repite tantas veces que al final ese 0,1 por ciento se acaba traduciendo en una frenada sólo para jugar sólo voy a comentar más adelante por lo que se volverá [Música] lo que hago aquí básicamente es decirle volver a activar la posición pero la velocidad de la pelota es igual a velocidad de la pelota por 0,99 en el primer momento ten en cuenta siempre que esto es un bucle que se va ejecutando pongamos que la velocidad es 100 digo tu nueva velocidad es 100 por 0,99 cuál es ahora tu velocidad 99 bien por 0,99 es 99 luego la primera vez que pasa esté por aquí tu velocidad gracias pero cuando llegas para bien pero muy bien lo que voy a hacer ahora es dentro del juego voy a duplicar la carpeta 3 copio y pego tres copias me llamo 4 y ahora sí y abro esa cartera 4 y cargo index.html tanto en el tanto en el editor como en el navegador y ahora voy a hacer una parte importante del programa que consiste básicamente en la interacción mira lo que quiero hacer ahora básicamente es que el usuario pueda moverse podrá mover el bloque para hacer que la pelota rebote de hecho os acordáis había dicho antes que vamos a hacer un juego de pong de usuario contra la máquina y yo voy a hacer un poco de trampa voy a hacer que la máquina sigue en todo momento la posición de la pelota y de saber a la máquina no podrá perder todo si queréis el podemos en una trampa para que se pueda perder yo voy a hacer que el de la izquierda atención es jugador 1 que soy yo y la derecha jugador 2 es la máquina voy a hacer lo siguiente yo he dibujado aquí ya un rectángulo he puesto dibujo al jugador 2 cuál es la posición y me jugador 2 pues voy a hacer lo siguiente esto va a ser prácticamente que la máquina siempre gana jugador 2 y es igual a posición perdón a pelotas y qué estoy haciendo pues que la barra automáticamente se mueva con la pelota porque en todo momento lo que decir es la posición y del jugador es igual a la posición y de la pelota lo cual se va a reducir en pantalla mira a que el jugador 2 va a saber en todo momento dónde está la pelota un momento voy a dramatizar un poco más el beige que hay un pequeño desfase porque lo presente realmente es que la esquina superior izquierda sea igual a la posición de la pelota por eso lo que voy a hacer aquí es decirle que el jugador 2 y va a ser pelota 2 más 30 por ejemplo ahí está escapando al menos 30 establezco un desfase para que la pelota más o menos caiga en el centro del jugador otra cosa que puedo hacer es la siguiente es que digamos que como es posible que el jugador no se está moviendo la pelota incluso cuando la pelota está en mi campo puedo decirle y aquí es donde el jugador dos pueden llegar a perder puedo decirle que solo voy a hacerlo solo cuando la pelota entre en este campo el jugador de os diga que viene hacia mí y entonces se mueva pero si la pelota está en mi campo el jugador 2 no se mueva como es esto pues yo le digo cuando la posición de la pelota sea mayor que 320 el campo mide 640 x 480 luego la mitad está en 320 sólo cuando la positividad pelota sea mayor que 320 entonces muévete vamos a verlo pero aún así voy a seguir haciendo trampa porque voy a decir lo siguiente mira sólo si la posición la mujer está aquí solo sin pelota 2 x es mayor de 320 solo en ese caso muévete cargas y más trampas porque algo así se mueve cuando llega a otro campo separa el problema está en que cuando llega a ser veréis como pero un salto y se adapta automáticamente en el momento a la posición que sea bien lo que tendría que hacer en ese caso pero sólo que más adelante es simplemente hacer que no vaya directamente a la posición sino que intente poco a poco ir a la posición a continuación voy a empezar a mover mi jugador con las teclas del teclado y voy a decir tenía por aquí un comentario que era cuando pulsó la tecla sube el palito y cuando pues otra tecla baja el palito me lo voy a hacer es juntar estas dos o poner aquí en el jquery voy a decir que van x donde el x es igual a html que se teme en la página html dentro de la página fíjate si pulso alguna tecla sólo quiero que solo te dice dentro de él dentro del canvas sino en toda la página comprueba si yo estoy pulsando alguna tecla le dijo lo siguiente x punto y tres cipreses que es que este clap press presionar cuando presiona una tecla es un evento de jquery como por ejemplo click o mouse up o magos down para quemar mis manos donde está pensado para el ratón siempre está pensado para el teclado y digo lo siguiente siempre es vamos a verlo por allí y hago lo siguiente aquí dibujo para nada ya no documento lo copio me lo pego y ahora vamos a comentarlo tengo la vez y la w vale voy a hacer la ail a ver ese tiempo voy a cargar la w y estoy haciendo aquí es decir cuando yo puse una tecla dentro de html en ese caso mira a ver qué tecla he pulsado si he pulsado la letra de dime algo voy a quitar todo esto si he pulsado la letra dime otra cosa voy a ver si funciona de dónde va estoy sacando esto hay un ejemplo en la página de jquery acá luego os enseñaré que básicamente me dices si tocas que teclas del teclado aquí código corresponde en este caso el código 100 corresponde a la letra de el código 97 corresponde a la letra jquery aquí 3 game 3 nou ciprés hay una demo pero jquery por aquí abajo que si yo pongo la s me dice la ss el 115 y por ejemplo la y es el 121 para cada tecla te dice que identificador tiene de hecho mirar voy a poner la que es el 97 y las busque solución 13 así que pongo aquí 113 y si todavía bien digo q expulsado la q si todo ha ido bien expulsado la vamos a funcionar con los dedos guardado después una tecla cualquiera no funciona pero sí puso a la que dice responsable cuidado y en esto es un problema vamos a retardar com porque me he metido dentro de un evento sin fin ahora veremos cómo podemos arreglar eso lo que voy a hacer es cerrar chrome porque se me ha robado o no libres y voy a volverlo a sacar 4 y lo cargo el documento ha visto cómo funcionaba o me decía la letra y ha pulsado que hace este trozo de código por tanto este trozo de código lo que haces aquí considera toda la web html es la mega etiqueta la gripe el amigo de poner un comentario del medio si pulsas una tecla de ponerlo aquí abajo si pulsas una tecla yo os digo pero qué tecla entonces impulsarla o lo que sea si pulsas la app afro que ser hay un pequeño problema claro se estará ejecutando muchas veces porque tener en cuenta que los tipos habla mínimo durante medio segundo pero este programa se ejecuta cada 10 milisegundos si yo mantengo pulsada la tecla 500 milisegundos y estoy en se ejecuta una vez cada 10 milisegundos quiere decir que había ejecutado el alero 50 veces es lo bueno y lo malo de trabajar con milisegundos que tiene básicamente buen arreglo mira voy a quitar la del cv visto que funciona y básicamente digo que jugador 1 y creado arriba una variable que es jugador 1 y que es la posición de la barrita jugador o no y es igual a jugador 1 y más nos hará menos 1 no le quitó un balón y al debajo le digo jugador y más uno vamos a ver si funciona un píxel no será poco creo que no es es lo que estoy haciendo problema cara y porque le preguntó que si le he dicho que eso va a uno porque le pregunto que insume tanto y se me va por la sencilla razón de lo mismo que he hecho con la ley por mucho que le pegue un toque como mínimo estoy 0,1 segundos pulsando la tecla a 0 como un segundos una décima parte de un segundo el problema es que como repito esto 100 veces cada segundo he ejecutado esa función 10 veces le voy a decir y digo ahí que hago pues es tan sencillo como decirle que simplemente en lugar de quitarle una habilidad le quito 0.1 es decir que tú vas muy rápido muy muy lento ya está ahora veréis como ahora así que puedo empezar a jugar race estoy moviendo el cacharro estre hola con la app y con la cobra ya lo estoy empezando a mover y eso le podría decir incluso podría decir 0.02 desde ya es una cuestión de buscar la velocidad es más podría hacerlo más lento para añadirle más dificultad para que me costará más llegar bueno ya estoy consiguiendo atención ya estoy consiguiendo mover a mi jugador con las flechas lo que tengo que hacer ahora es que la pelota reconozca cuando he ganado y cuando he perdido es decir que si rebota en la en el palito rebote y kissimmee la cuela por detrás pues efectivamente que él pierda la partida lo que voy a hacer ahora es que la pelota pueda rebotar contra mi palo fijaos que tenéis ahí la flota se mueve esto lo voy a cambiar la ruta se mueve le voy a decir qué posición esto lo pongo aquí porque porque estaba en la pelota dibujar la pelota la pelota se mueve realmente es pero otra posición y x es igual a x más la velocidad bueno ya ahora digo la pelota rebota contra los palos que es haber momento y me ha parecido ver para recibir un cambio velocidad la pelota rebota contra los palos bloqueamos lo siguiente sí pero está 2y pero está post x es menor qué pero tampoco x la x que es horizontal menor que 10 que esta ley quiebra del todo pero está post x es menor que 10 y jugador 1 y es igual esto es imposible de cumplir es igual a pelotas y es decir la posición del jugador es igual a la posición de la pelota en ese caso rebota pero es que esto es incumplible porque es incumplirle porque quiere decir que la posición del jugador tendría que ser exactamente igual a de la pelota no puede ser esto tengo que poner un margen da igual que la pelota de ahí que apriete ahí que apriete ahí lo puede hacer es lo siguiente vamos a ver lo que tengo que hacer es un rango y ahora tengo que decirle sin pelota y es menor jugador 1 y más 30 para su función y pelota pos y es mayor que el jugador 130 que estoy diciendo establezco un margen realmente el margen creo que es incorrecto ahora lo voy a ver en ese caso perdón sólo en ese caso solo en ese caso pero también x es igual a menos pero x darle la vuelta a la pelota vamos a verlo el programa acoge muy bien yo no vale mucho más bien lo que tengo que decir aquí es la posición de la pelota por ejemplo 50 es menor que esto menos 30 y esto más 30 voy a verlo ahora para mucha gente posición de la pelota es menor mx porque primó pelota post es menor que 10 y pelota post y de hacer una cosa voy a quitar todo esto voy a robar haciendo esto la pelota debe rotar si os para estar rebotando perfecto y ahora le digo posición jugador y cuando uno diga es mayor que 480 240 quiere decir que 480 240 esa calamidad por tanto si el palito está más abajo de 240 es que rebota se está por abrir a nos remonta vamos a comprobarlo si está por abajo rebota pero será esta prima me la cuela no habéis visto nuevo hacer si está abajo me da igual dónde estés está abajo aquí abajo remoto pero si está arriba rebote donde rebote en la escuela porque porque le estoy diciendo lo siguiente está aquí si la posición en y del jugador es mayor que los 40 entonces rebota si no se pierde no estoy considerando no estoy comparando la posición del jugador contra la pelota lo que estoy haciendo es si el jugador está en la mitad debajo entonces remontarse a donde sea rebota si el jugador está en la mitad de arriba no rebotan lo que voy a hacer ahora es decirle vamos a ver si la posición del jugador y es mayor pelota y es que tengo que darle un margen y el margen es lo que va a costar un poco de encontrar aquí le estoy diciendo que si la posición es mayor rebote pop remoto pero si la posición es menor que no rebote mira ahora ya nos remontará repito si la bola se me queda por abajo para arriba perdón rebota siempre hay que saber que la bola se me quede por arriba rebota ya lo veis rebota pero si la pelota se me queda por abajo se cuela si queda por abajo se cuela veis como con eso shift lo que estoy haciendo es marcar la posición o marcar la condición de la pelota así que digo si el jugador uno es mayor a la posición de la pelota a la posición de la pelota – x voy a pensar esto debemos aprobar la siguiente fórmula y vamos a decir qué esto rebotar a cuando se cumplan las siguientes condiciones cuando la pelota pos aquí se abre cuando ya estoy al borde y cuando la pelota posse y sea mayor que el jugador uno y y que la pelota y menor que una expresión que es el jugador uno y más la altura que recordamos que la altura estaba aquí abajo dibuja el jugador uno es de 80 la altura de la barra es del 80 no sé dónde voy estaba rápido más 80 horas se funciona pagamos recargamos algo ha rebotado ha rebotado rebotado claro claro qué bueno que la escuela perfecto ha rebotado aunque le rebotó hacia atrás no pasa nada y ahora os digo porque vamos a comprobar que funciona palo ha rebotado porque le he dicho posición x sea menor que 10 escribiente es muy poco cuando tiene bien es que ya está prácticamente allí voy a ponerle el 30 por ejemplo vamos probar ya si conseguiré que rebote realmente en la claro que está rebotando sí si se me cuela se me cuela y ahí no rebota y ahora lo que voy a decirle claro es que andrés hecho un poco de trampa es que sea algo así pero llegó al final cuando la posición sea menor que bien si rebota ya ha rebotado si es menor que si es menos 50 también cuenta pero claro yo tengo que decir que cuando se menos 50 es que ya has acabado el juego así que le digo que cuando la posición de la pelota sea menor que 30 am pelota 2x sea mayor que 0 que sean rebasados ceros que ya he sacado el juego para no para no tener que volver a recargar la página ente mente lo que voy a hacer es que si la posición de la pelota cuando está cuando la puntuación con nuestra puntuación cuando logra sobrepasar palito un punto más así que les digo pelota os x es menor pero decir que es perdido nunca tienes que dejar que sea cero entonces pelota 2x es igual a 320 es más los parámetros acordáis los reinicio qué quiere decir esto que se reinicia la partida vamos a comprobarlo algo más algo hecho mal alguna pero está pose x mucho más corto este cargo vale ahí había algo mal pelota 2x pelota tengo hay un claro no puedo definir una variable que ya está definida no tengo que escribir bar porque ya existe arriba juegos tengo aquí esto por aquí y llegó le doy y si ahora me dejó perder hoy vas a perder en principio la pelota tienes que volver a empezar la partida vuelve a empezar la volver a jugar ya tengo por el pong y ahora lo único que me hace falta estoy jugando una partida infinita contra la máquina y ahora lo que más urgentemente me hace falta es un sistema de puntuación algo que me diga cuántos puntos llevo y eventualmente pueda parar cuando llegue a un número determinado de jugadas voy a hacer ahora un sistema de puntuación para este juego por tanto aquí bajo y debajo del canvas justo abajo del canvas voy a poner vivir y ver aj 1 puntuación el jugador 1 vivir y ver p jugador 2 la puntuación del jugador de tenis me la puedo ahorrar porque ese siempre va a ser cero perdón la puntuación de los cuatro no pasa siempre cero ya que evidentemente si gana gana la máquina no no puedo ganar la máquina de aumento verdad más adelante y habremos para guardar y ahora tiene style y clash igual puntuaciones y digo todo aquello que sea de clase puntuaciones tendrá el wing de 320 píxeles el high de 50 píxeles o más bajando el background black el polo igual el font family hablar el fondo pues gol y el 3 lines qué hace esto pues esto lo que hace es poner ahí el momento cero pero debería marcar puntuaciones duraciones es que he puesto puntuaciones cómo ha funcionado bien ahora sí y luego el fondo size no quiero ver pues yo 72 píxeles para que ese cero aparezca bien grande y luego si queréis un poquito de padding top 50 pixeles más o menos para que esté separado de 50 píxeles y tengo ya un sistema de puntuación voy a poner aquí ahora y cuidado que está pasando aquí pues está pasando que le tengo que poner cloud inglés para que los vips flote en cada uno a la izquierda del otro trate como aquí vamos a verlo así 0 y ahora lo que quiero evidentemente es que cuando el programa me marque un punto aquí en lugar de hola pongan el punto que me ha marcado como lo voy a hacer bueno es realmente sencillo recordáis que marcar un punto era la pelota rebota contra la pared con los palos como era reiniciar la partida dónde estás aquí aquí cuando la pelota sobrepasa el palito un punto más dónde está la puntuación al principio la puntuación de preparar su puntuación es igual a cero y ahora amigo su puntuación más más y ahora aquí vivo para x x hace referencia a aquel elemento que tenga el i de puntuación jugador 2 vamos a verlo pero para dos compromisos hay mejores y ahora toco el mismo pj 2 pj 2 y ahora digo x punto html y pongo su puntuación esta vez que llamarte un punto actualiza el marcador vamos a ver si funciona guardo recargo ahí pone olas y expone dólar porque no marcó ningún punto vamos a hacer que marque un punto y ahora pondrá nada un problema y eso quiere decir que algún error cometido aquí para jota veis que se ha parado todo completamente luego un error style creo vamos a refrescar esto pues el error no está ahí sin pelotas menor que cero su puntuación claros puntuación más más más más tiene que ir seguido tardó recargo vamos a probarlo vamos a hacer que no marque un punto y se sigue colgando de su puntuación bajar su puntuación voy a comentar esto y vamos a ver vamos a ver dónde puede estar el fallo bien el fallo fijaos lo que he hecho porque esto lo veis vosotros hay muchas veces es diagnosticar al diagnosticar lo que hago es a legislar que es lo que está dando fallo mediante comentarios entonces vamos a ver su puntuación puede ser que esté en esta línea el fallo voy aislando veis como aisló su puntuación más más ahí falla su puntuación es que la variable se llama su puntuación y hay que poner su puntuación así que me faltaba una a veces lo que son los fallos en java sin programación es cambiar entonces es así es simplemente tener paciencia y localizar dónde está ese pequeño fallo bien y ahora me marca un punto y ahí ponen uno lo veis ahora pone uno ahora le marcará otro punto y pondrá dos pero si yo me molestó en responder a la máquina ya no pondrá tres porque he evitado el que llegue al final ya empiezo a tener un juego la adaptación estoy jugando y si en algún momento quiero poner puntuación lo voy a hacer en el siguiente vídeo lo que haré es hacer que 11 por ejemplo sean los puntos máximos recordamos que le hemos puesto una condición en la lógica del juego que era cuando llega a un ser se acaba la partida así que bueno voy a hacer de momento lo siguiente voy a decir sí su puntuación es mayor que 11 en este caso voy a hacer lo siguiente 1 alert la máquina agradó voy a hacer si queréis para no ser tan rollero voy a hacer el mayor que 3 porque si no me tendré que esperar 11 tiradas a perder karma los mayores y ahora reinicio la partida reinicio la partida básicamente quiere decir que cojo todo esto quito los bucks cojo todo eso termina donde está cuando llegaba a 3 se acaba la partida y digo que todos vas y vuelvo a empezar con la diferencia porque estoy siendo de los barras porque ya estaban definidos arriba bien y ahora copié tengo esto y digo por otra vez sus puntuaciones porque sus puntuaciones y para hacer con pepe vamos a ver ese funcionar a grado punto la máquina a dos puntos la máquina ahora va a ganar tres y cuando sea mayor que 3 ahora me voy a sacar un mensaje que ponga ya grado máquina y en cuando pulses se reiniciara la mañana grado y en cuanto pulso ok la partida se reinicia los 80 y realmente hasta ahora realmente es que era imposible ganar la máquina porque fijaos que cuando la pelota cambiaba de campo automáticamente era posible en la posición del palo se actualizará automáticamente era imposible que la máquina perdurabilidad poco se actualiza pero ahora van a cambiar un poco las cosas voy a hacer es que la máquina pueda perder y voy a hacer ahora voy a localizar el punto en el que decía que la posición del palo fuera igual que la posición de la pelota voy a encontrar cometido dibujo la red la pelota dibujo el jugador 2 y digo jugador 2 y es menor perdón jugador 2 y es pelota posible y menos 30 que directamente estoy cogiendo una posición de la pelota no voy a hacer lo siguiente sí será una condición vamos a ver que estoy pensando porque recordemos que a la altura de los 80 si jugador 2 y es mayor qué pelota 2 y en ese caso jugador 2 y más más igual 8 atravesarlo vamos a comprobar es decir sube un punto e intenta ir a por la pelota no vayas directamente sino coge tu posición y sube un punto sin jugador y es menor qué pelota posee y quitarle un punto igual lo ha hecho a través insisto soy jugador momento jugador es menor que la pelota sumar un punto si es mayor restarle y ahora tendría que decirle si jugador y – 40 180 partidos porque 80 porque quiero recordar que era la altura de la altura del este a la altura del rectángulo vamos a verlo intenta llegar veis como no llega y ahí puede perder fijaos y el voy a decir que el lugar de menos -2 jugador nos y es igual a jugador 2 y menos 2 esto será igual a 2 guardo recargo hoy se baja reflejados ahora como no va directamente intenta creo que no era menos 40 sino que debe ser más 40 sí porque si algo no es menos 40 si no es más 40 vamos a probarlo pues son está fallando igual ahora el acuerdo por bajo así que bueno voy a decirle sin el más 40 a ver qué pasa pero ahora falla estrepitosamente de los dos vamos a ver si a la cierta y casi efectivamente bien pues ahora ya puedo ganar y por tanto tengo que programar que cuando la pelota sobrepase ese límite en ese caso gane yo en ese caso yo sobre un punto de momento lo que quiero hacer es que le pueda meter el gol a la máquina abrams por tanto voy a hacer una variable llamada bar mi puntuación dar mi puntuación que se van a cero y le digo que cuando vamos a verlo dibuja el escenario cuando llega a 11 se acaba la partida cuando la pelota sobrepasa el palito que palito si pelota pos x es mayor que 640 en ese caso pero está pose x 320 pero tendrá pues x 240 mi puntuación más más y quiero poner en puntuación del jugador 1 mi puntuación y ahora le voy a decir que en los rebotes pelota dónde está el rebote la pelota rentada por la pared y todo lo que estábamos si la pelota es mayor de 460 de 450 realmente no porque ahora lo que tengo que hacer es lo mismo que he hecho para el jugador y digo señora la pelota rebota con los palos de esto a los 480 la pelota sí pero tampoco text es mayor que 470 vamos a ponernos y la pelota post x es mayor que 0 claro es menor y 480 y la pelota y es mayor que el jugador 2 y que el jugador dos videos ya no tengo vamos a verlo un punto para mí ella ya ha pasado algo ahora vemos suerte estabas está pasando algo porque el programa bien algo escrito llevan aquí y le digo claro si la pelota posición x 646 por ejemplo 6 20 es la posición x de la pelota vamos a verlo y un punto para mí otro punto para mí está perdiendo estrepitosamente madre mía cuando está perdiendo y voy a decirle ahora en la puntuación si mi puntuación es mayor que 3 entonces digo tú has ganado y vuelvo a reiniciar la partida pj 1 mi puntuación realmente es sus puntuaciones se van a hacer mi puntuación es igual a 0 y todo esto allí y por esto aquí que estoy haciendo es realmente en ganarle se realiza la partida 12 3 y en ese caso tu agrado y la partida de empezar lo que hecho es darle un poco de ventaja y decirle que si la pelota posición y es mayor que el jugador de 2 y menos 80 es decir le amplió el margen 80 píxeles más y le digo que el jugador 2 y diga más 160 no amplió por bajo la cuestión de darle ventaja es que aunque este palo tiene esa dimensión realmente el programa que considera que aunque la pelota es algo un poquito por arriba un poquito por abajo también a rebotar los 80 40 y 120 vamos a verlo un poco como veis para que podamos jugar en igualdad de condiciones y ahora lo que voy a hacer porque me deja grandes más 3 y 3 le da una ventaja demasiado fuerte me press – dos y más dos de velocidad y si quiere decir que no soy yo vamos a ver y ahora voy a hacer una cosa voy a hacer que pierda porque sea muy lento espera si puedo los dos vídeos verano se llenó 6 si le pongo uno es muy lento si le pongo dos es muy rápido el tema está en poner algo que haga la partida interesante la cuestión está en poner una velocidad que en algunos casos la barra puede llegar y el otro no puede llegar por ejemplo en 1.5 y esto ya es una cuestión de probarlo evidentemente no hay una fórmula matemática que te diga cuando la velocidad es óptima para que la barra llegue he puesto 1.5 y estoy probando de esa relacionada le da un poco de ventaja se está notando la ventaja en ese caso parece que 1.5 está allí ha llegado con su altura porque le pillaba acerca allí también estoy jugando un poco con la verdad para ser muy raro sigue jugando un poco con la velocidad y eso es una velocidad de refilón es casual bueno de refilón voy a reactualizar para eso he hecho una nueva carpeta he creado la carpeta 5 dentro del proyecto pong y ahora lo que voy a hacer básicamente es buscarlos buscar los contadores y simplificar los por ejemplo ahorro estas dos líneas y digo donde html express evidentemente ejecutó la función cada cada refactorización que haga va a ser muy recomendable 5 que compruebe que sigue funcionando correctamente y continuó aquí por ejemplo del elemento que tiene el pj 2 le pongo la puntuación hoy voy ahorrando voy simplificando todo lo que pueda sobre todo en aquello que sea jquery en aquello que no es pot acuerde lo que estaba escrito podría ahorrar simplemente quitando saltos de línea pero sólo sería refactorización sería simplemente cortar líneas aquí por ejemplo fijaos qué tengo hueco para algunas mejoras sobre todo de vez en cuando comprobamos que comprobamos que siguió funcionando continuó siempre que pueda siempre qué jquery me lo permita y luego ya a partir de ahí puedo simplificar el principio que en este caso si queréis no lo voy a hacer porque la función de inicio mucho voy a hacer esto cuando el documento esté preparado ejecutó la función de inicio pero voy a dejar la función de inicio ahí porque si no tenemos genes de paréntesis de pasarlo al final y quiere decir que todo estaría ahí metido y sería el texto un poco ilegible por tanto dicen sí caso específico sí que voy a seguir llamando a la función de inicio ahora por último lo que voy a hacer es acabar de estilizar y darle un poco de forma al juego lo voy a hacer ya es más realmente css voy a hacer una cosa dentro de este ejercicio de hecho puede cargar todas las fuentes personalizadas que había importado atención a todos abra en google chrome tengo dijo tacuary tengo a jquery mínimo mira lo que voy a hacer voy a abrir jquery lo que en principio no debe hacerse ahora os cuento porque hay que hacerlo he abierto y jota cuello en un salvaje y lo que haré ahora será lo siguiente este jquery yo lo estoy llamando desde la primera línea de javascript pues lo que voy a hacer es borrar esa llamada jquery [Aplausos] voy a copiar estas líneas es más incluso voy a evitar seleccionar todo copio comentó que está comiendo yo y a continuación lo voy a pegar si es que está copiando mucho qué va a pasar algo que le pega que yo lo que voy a hacer no es que lo recomiende para todos los casos pero yo lo que voy a hacer es dejar la librería de jquery dentro de mí era algo así y compruebo cómo funciona de hecho incluso comprobó como guardo borro jquery y si recargo siguió funcionando que he ganado y que he perdido he ganado algunas cosas he perdido otras lo que ha ganado ahora es que todo el juego del punk incluso más años enseña bien que podemos insertar imágenes enteras todo el juego del punk está en ese archivo index.html no requiere de ninguna librería no requiere de nada para funcionar porque lo contiene todo insisto que más adentro se debe que se puede meter fuentes se pueden vender imágenes se puede meter lo que quieras dentro de un archivo html esto quiere decir que si yo ahora quiero que esto funcione en internet únicamente le condujo en ese archivo y subirlo y funciona cuál sería la ventaja para publicar una página web de que ese archivo esté en un solo archivo o en varios la verdad es ninguna tiene ninguna ventaja ahora bien si de hecho esto es para comunicarnos una cosa os voy a decir una cosa comprobadlo en los próximos días las próximas semanas los próximos meses si esto es una aplicación al 7 media litro porque es una aplicación html porque yo no puedo descargar me esto a windows y simplemente hacer doble clic y ejecutarlo y tengo un juego de windows lo único que me está indicando que es un navegador web es esta cabecera de arriba si además le pongo un script que existe nos va a recomendar que abre pong en una ventana sin navegador una ventana sin datos de navegador es como una ventana de windows si os fijáis en las noticias insisto no digo comprobarlo lo que está haciendo microsoft con con windows 8 es apostar por html5 buscar desarrollo de aplicaciones para windows 8 fases de ml 5 qué curioso es lo que estás aprendiendo esto qué quiere decir que en principio establo están desarrollando aplicaciones web para internet pero lo divertido es que como cada día los sistemas operativos tienen más soporte para html5 con la combinación de html5 css javascript y más adelante php y mysql podemos no sólo hacer aplicaciones para internet sino también aplicaciones para escritorio y lo mejor con el mismo esfuerzo el mismo esfuerzo que sirve para probar un internet o para bajarlo a alguien a cualquiera y decirle mira doble clic y lo ejecutas oye pero no es ejecutable me da igual doble criterio ejecutas y me da igual que tengas un pc me da igual que tengas un marc me da igual que tengas linux doble clic y lo ejecuta que no tienes el plugin de flash instalado me da igual porque esto no requiere flash eso no requiere html5 y javascript como os dije la gran mayoría de navegadores por no decir todos llevan html5 css3 y javascript directamente incorporados en este vídeo voy a trabajar con matrices dentro del javascript las matrices nos ayudan a automatizar la declaración de múltiples elementos cosa que de vez en cuando puede llegar a ser frecuente como script de tipo para rato jamás field y ahora voy a hacer lo siguiente voy a crear una variable llamada agenda es el típico ejemplo de matrices y yo claro agenda nájera telefónica que tiene que en hombres que tiene teléfonos que tiene direcciones verdad y claro yo esto que que nombre la agenda la entrada soy yo jose vicente ahora sacamos la agenda porque ese es el problema que tienen las variables una variable admite únicamente un único valor el problema está por tanto que con variables yo lo puedo hacer agenda todas vosotros no podéis decidir hombre puedes hacer agenda el nombre agenda teléfono agenda dirección muy bien pero entonces en agenda nombre puede poner jose vicente en agenda teléfono mi teléfono y la agenda correo mi correo pero como dado ahora la segunda persona de la agenda porque hacen una agenda para estar sobre ellos un poco triste claro ya podría hacer agenda en nombre dos agenda nombre 3 se suman a las variables y variables y variables para eso precisamente están las matrices mira voy a hacer agenda y voy a decir par agenda es igual a una unión a reid es una nueva matriz y de esta manera voy a decir lo siguiente agenda 1 es igual a jose vicente pero la agenda 2 es igual a javier y agenda 3 es igual a juana agenda entonces que están aquí están guardando pues veréis lo que he hecho de esta manera es convertir llega vamos a hacernos una idea de que una variable es un cajón un cajón donde yo pueden meter una cosa una matriz convierte un cajón en un armario yo de repente tengo un super cajón de un armario donde puedo haber diferentes cajones y guardar diferentes cosas tengo armario donde en el cajón número uno y guardado jose vicente en el mejor número 2 y guardado javier en el cajón número 3 que guarda la agenda y ahora por ejemplo digo documento punto raid y quiero que me devuelvas en pantalla el valor de la agenda en el cajón número 1 y esto me devuelve el valor jose vicente si digo quiero que me devuelvas el valor número 2 esto me devuelve a javier quiero que me devuelvas el valor número 3 esto me revuelve juana y tengo como veis un principio de matriz unidimensional una madrid de una dimensión vamos a hacer en este caso una matriz de matrices una matriz de múltiples dimensiones en php es más fácil de declarar de la siguiente manera mirada yo tengo nombre nombre en la posición uno es josé vicente nombre en la posición dos es javier nombre en la posición tres es juana ahora lo que voy a hacer es definir ba nombre para teléfono de manera que puedo decir que el teléfono 1 es igual al teléfono 11 pero para complicarlo el teléfono 2 es igual a 2 2 2 y el teléfono 3 es igual a 3 3 3 técnicamente yo ahora podría hacer una matriz donde dijera agenda es igual a new 9 donde voy a especificar nombre como teléfono 4 recargo comentó no voy a sacar nada en pantalla y si vivo y quiero devolver la agenda 12 me devolverá 222 veréis porque podían doméstica para trabajar con una agenda para trabajar con matrices muy bien y dimensionales lo primero que tenéis que hacer es sacar una hoja de cálculo por ejemplo de excel o de ello pero fiscal y decir lo siguiente cuando una hoja de cálculo realmente lo que he hecho es aquí poner al principio cosa diferente javier y juan he puesto aquí que jose vicente tiene el teléfono 1 1 1 1 2 2 2 y 3 3 3 esto es una matriz y esto es otra ahora amigo hazme una matriz que lo contenga todo voy a hacer otra cosa mira voy a hacer baja emery es igual a y el registro 1 es igual a poco diferente a rojo causa puntocom con millas por supuesto porque es una cadera alfaro américa e mail 2003 nivel 2 es javier lajo cars.com y juan bajo captcha puntocom y metro aquí quimey lo que he hecho es meter fonso vicente bajo casa puntocom javier a casa puntocom y juan puntocom lo que he hecho por tanto es meter una matriz aquí una madrid aquí y otra madrid aquí ya continuación con esta línea bar agenda lo que le digo es que hazme una súper matriz hace una tabla realmente porque esto es como una tabla que tengas aquí abscisas y ordenadas digamos la tabla sabéis qué pasa que yo ahora quiero averiguar cuál es atención este valor esta valencia este valor de ahí cual deberíais qué esposa atención contar 1 2 y 3 en la primera dimensión 1 2 y 3 en la segunda perdón 1 y 2 en la segunda dimensión así que dime cuál es el valor de 2 y 2 en la pantalla de suerte y me dice javier erró bajo casa ojo porque es javier a lo bajo casa esos 22 21 josé vicente lacasa es 222 lo que estoy haciendo por tanto es recorrer la tabla en este caso para decir que el registro 1 realmente esto debe ser 0 y lo traemos javier 02 es javier martín nadal 02 es javier 12 32 22 la tabla 22 es javier erró bajo cansa puntocom ahora 1 2222 pues uno es jose vicente 0 2 javier por 01 11 es 111 es la dirección de teléfono el número de teléfono de jose vicente y 21 es jose vicente arroba jo casa fijaos que con los índices a ver yo estoy jugando al final a hundir la flota yo estoy diciendo h 8 agua y me coge la intersección entre esos dos elementos lo difícil en este caso es que no sé por qué uno ha empezado con cero otro apresado con uno es constante probando las matrices también os digo que avastin la media de las veces se hacen matrices de una única dimensión que se emplea che pero no se hacen multi matrices de múltiples dimensiones lo que vamos a hacer a continuación es hacer otro ejemplo donde estaremos trabajando con canvas en este caso para usar matrices y para crear matrices dentro de canvas y para que veáis para que nos pueden servir un bucle form anidado así que voy a hacer un archivo nuevo lo voy a guardar como dentro de la carpeta escritorio dentro de master web dentro de actual dentro de actual igual que otro día hice una carpeta llamada por hoy voy a hacer una carpeta llamada arkanoid arcade con kart donde este archivo nuevo que estoy trabajando lo voy a guardar como index.html además por tanto insisto atención estoy dentro de la carpeta arkanoid además dentro de arkanoid porque ya sabéis que bueno lo voy a usar prácticamente siempre así que casi no haría falta ni que no dijeran voy a usar voy a copiar el archivo jquery por tanto dentro de la carpeta arkanoid acabo de crear un archivo index.html y acabo de pegar ahora el archivo jquery punto j s voy a abrir el zoom y para poder hacer zoom en cualquier momento y en base a esto lo que voy a hacer es estar revisando pero no no no esto está mal porque igual que el otro día para que tengáis la progresión voy a hacer la carpeta 1 y así cada cambio que vaya haciendo lo iré poniendo en la carpeta 2 la carpeta 3 la carpeta el 4 mirada atención así que adentro del dentro de la carpeta 1 y el archivo index lo cargo tanto en editor como en el navegador y me aseguro que si aquí pongo poda guardo y recargo ahí pone hola lo cual quiere decir que obviamente estoy viendo el mismo archivo en los dos sitios ahora que ya hemos comprobado que el archivo la está viendo hola aquí yo la haya voy a hacer es crear mi estructura clásica html donde voy a poder entrar voy a tener un boeing recordamos que dentro de él dentro del gel lo primero que voy a hacer es importar la librería jquery y por eso pongo script type text javascript y digo que el sol es un archivo que yo voy a marcar ahora y el archivo evidentemente como os podéis imaginar vamos a verlo donde lo tengo el archivo es este de aquí es jquery así que copio su nombre y lo pegó directamente y así sé que es seguro que no me puedo equivocar ahora pongo otra etiqueta script del tipo bueno copiar al tanto lo dejáis texto javascript y lo primero que haré es decir que para x x es igual al documento y cuando takes punto red y ejecutó la función de inicio y así que seguro que el java script del canvas no se va a ejecutar hasta que el html haya quedado correctamente cargador y ahora hago una función llamada de inicio simplemente que va a tener el siguiente código donde voy a empezar poblando un capas bien lo voy a hacer antes de nada es crear aquí en el body un canvas voy a crear así a palo seko ya sabéis que luego ya lo maquetar ya le pondré el nombre y lo que sea y en este caso lo que voy a hacer es una aplicación web con una cierta orientación hacia dispositivos táctiles para que se puedan jugar en teléfonos en tabletas y cosas así un ejemplo para teclados con la aic con la que movíamos el el rectángulo y voy a decir que pide igual a lo que quiera igual al escenario por ejemplo escenario arcano wing mi escenario mi lienzo lo que sea ya sabéis explico lo mismo que cuando pongo una palabra en inglés es que yo no puedo elegir esa palabra es que es parte del lenguaje pero si la palabra pongo castellano es que la palabra me ha inventado yo y por tanto en lugar de poner inicio hubiera podido poner longaniza poniendo aquí lo analizaré aquí abajo longaniza evidentemente es mejor por el inicio ya que te estaba comunicando mejor para qué va a servir esa función de la prueba internamente igual lo que pongas cuando le pongo un castellano bueno ya tengo un escenario puede decir que el wef es voy a usar una construcción de teléfono móvil voy a usar que diría yo pues no se va a hacer la cosa si no lo tengo instalado y tengo por aquí un programa instalado que es el opera mobile emulator que tiene unos cuantos modelos de teléfonos móviles cargados y me dice las resoluciones que tienen lo hemos digo cómo se descarga pero básicamente por ejemplo las nuevas tabletas creo que ya tienen 1280 x 800 por tanto voy a usar esa resolución voy a usar 1280 x 800 píxeles así que en derecho de hecho voy a usar silva 1280 y el hype de 803 y ahora lo que quiere es usar un poquito del estilo esto no es imprescindible evidentemente pero así me texto la css me permite saber qué escenario como se ve en pantalla voy a decir que sea almohadilla de escenario porque es un idea y le voy a decir que tenga un borde de un píxel das de color grail y así ahora cuando ejecute el programa en pantalla no lo veo pero tiene vaya de este aspecto no lo veo es que he puesto es tecnología así que pongo escenario y así aparece la mejor bueno este base del mercado como veis el juego va a estar delimitado dentro de este rectángulo es un rectángulo en principio diseñaron para que se vea bien en las tabletas de última generación ya tengo la estructura lo que voy a hacer a continuación es la carpeta del proyecto y decir que copio pero hago la versión número 2 y ahora lo que voy a hacer mirar es dentro de esa carpeta número 2 cargar el index tanto el editor como el navegador y así me aseguro que en todo caso estoy trabajando sobre la versión dos días y luego cuando reviséis el código no solo tenéis el código final no viene todo a saco y no sabéis cada cosa donde ha salido si no que tenéis un crecimiento del proyecto y sabéis cada proyecto cada carpeta que se puso de nuevo bueno pues ahora lo que voy a hacer es simplemente empezar evidentemente dentro de la función del inicio vamos a ver aquí está y voy a decir lo siguiente mirar creo una variable c donde se es igual a document punto que viven en by haití coge el elemento que tenga el aire libre que derive escenario que le estoy diciendo con esa línea no estoy diciendo voy a trabajar por el escenario todo lo que haga a continuación lo voy a hacer sobre el escenario ahora esto es igual que otro día digo dar contexto es igual a 0.10 contexto y el contexto va a ser 2 d y ahora que ya tengo el escenario seleccionado miró seleccionó el escenario aquí abajo para no marear nos mucho vivo dibujo un rectángulo para asegurarnos que poco a poco veréis que yo no redactó autozone a líneas de código y entonces me aseguro de que funciona porque seguro que no funciona sino que hago 34 líneas y compruebo 34 líneas y compruebo y así se comete un error lo cazó al vuelo bien pues ahora digo que con texto punto fil style [Aplausos] es igual voy a empezar dibujando una cajita de color rojo simplemente para verlo para ver qué sale algo y ahora digo contexto punto filler punto también ha propuesto enviar los field trayecto que va a tener recordamos eran cuatro parámetros que era la primera esquina en x voy a empezar con 10 por ejemplo coma la segunda esquina en 10 coma la anchura en x evidentemente coma la altura en y le recordamos cuatro parámetros vamos a ver si esto funciona vamos a ver si sale correctamente en pantalla guardo recargo y sale un rectángulo acordaos que de esos cuatro parámetros el primer parámetro atención es la distancia desde este borde al eje x horizontal el segundo parámetro es la distancia al eje y en vertical el tercer parámetro es el grosor se me escapa un poco por allá en horizontal y el cuarto parámetro es la altura en vertical valero son los cuatro y veis por tanto que ha salido un rectángulo justo con los parámetros que yo he dicho pero ese rectángulo se va a convertir en uno de esos bloques del arkanoid que voy a tener que eliminar por tanto voy a hacer un rectángulo que tenga pues que te diré yo no se debe aprobar 30 x 10 píxeles igual me he pasado de poco si pues mira voy a ponerle 50 x 20 píxeles hasta que tenga un rectángulo propio durar cano vida que sí vale ya lo tengo ponemos el fondo negro porque no podríamos ponerlo lo que voy a hacer es lo siguiente que luego te habré hecho fondo negro el fondo negro va a ser copiar estas dos líneas y decir que el fill style va a ser black digo fondo negro porque el alcaloide original tenía el fondo negro no por otra cosa sino estantería y pongo aquí que empiece 00 y cuanto tenía mi capas y capas tenía 1280 x 800 pues pongo que vas a tener en 1280 x 800 veis aquí dibujo un rectángulo negro aquí dibujo un rectángulo del canvas guardo recargo actividad sale esto que no es nevada primeros que poner un fondo negro y poner un rectángulo rojo arriba del todo mi problema ahora mismo es que tengo que poblar todo un arkanoid de fichas rectangulares entonces claro yo sí bueno podría ponerme a a duplicar este código pero él podría volver loco duplicando código verdad lo que voy a hacer es lo siguiente voy a poner un doble bucle fort ya que mirad quiero un conjunto de fichas que se repita en horizontal pero también quiero un conjunto de fichas que se repitan vertical hacer un multi form en si es sencillo el doble de flores lo que no es tan sencillo de pensar es muy fácil de hacer pero no es tan fácil de pensar pero si cuando lo veáis yo creo que es sobre la mente para cualquier otro tipo de proyectos en los que necesitéis una matriz de dos dimensiones mira lo que hago es dibujar un bucle for un bucle for que va a tener las siguientes condiciones recordar que el bucle for lo bueno que tenía es que el mismo contiene tanto la condición de inicio como la condición de final como la condición del incremento y ahora creó una variable x donde x empieza a siendo que pues aquí se empieza siendo no se vierte porque recordar que empezaba aquí poniendo un blog que en 10 y ahora digo siempre que x sea menor que en 1280 porque 1280 porque os acordáis que el canvas mide mil 290 píxeles básicamente lo estoy diciendo en otras zonas del canvas dibujando rectángulos y cada vez que pase por aquí lo que quiero es que sea igual a x + 70 porque 70 bueno tengamos en cuenta que cada rectángulo tiene un grosor de 50 píxeles quiero que cada uno entre cada uno de ellos haya una distancia de 70 píxeles porque 70 los hombres para que todos los cuadraditos no estén pegados entre sí verdad sino que hay una distancia si queréis no 70 pero si 60 que haya una distancia de 10 píxeles entre ellos sabéis qué hace esto bueno pues esto lo que hace es prácticamente nada si yo recargo no tengo nada en la pantalla porque porque yo aquí tengo una equis que va creciendo pero me falta decirle aquí que pongo la equis que hace esto pues verá hace lo siguiente como es posible que haya hecho eso porque vamos a ver el código en el código digo x empieza siendo 10 la primera vez que pasó por aquí x es igual a bien así que contexto el rey x si la primera vez es 10 es igual a poner empieza en 1010 pero la segunda vez cuántos números le añado 61 así que la segunda vez en la segunda vez es 10 más 60 que es igual a 70 el segundo rectángulo lo dibujó en 70 10 50 como 20 y la tercera vez que pasó por aquí cojo 70 y le sumó 60 que me da a 130 y por tanto veis que voy dibujando rectángulos ojo hasta que x sea menor que 1280 en el momento en que x sea más grande que 580 es como decirle al código y cuidado que te ha salido las de la pantalla porque la pantalla recordáis que median 1260 y por tanto lo digo si ya te ha salido la pantalla no sigas dibujando para qué ya tengo la primera parte del problema resuelto la primera parte del problema consiste básicamente en poner una primera hilera digamos de ladrillos la segunda parte del problema es un poco más compleja porque básicamente requiere esta idea de ladrillos y repetirla a continuación aquí x veces la primera vez que programas esto y los programas de ‘motu propio’ lo primero que se te ocurre no se te ocurre otra idea mejor que decir bueno pues cojo este bucle font lo copio del juego bajo y le voy cambiando la y pues hombre es una solución válida lo cierto es que mal no está pero es una solución un poco arcaica porque te requiere trabajar manualmente lo que voy a hacer para automatizar este proceso efectivamente es sanidad exponer aquí dentro otro bucle for pongo otro foro y evidentemente si ya tengo la equis ya he trabajado con la equis la equis ya está solucionada no la voy a tocar voy a trabajar ahora con la y veis atención repuestos sangrías para que veáis correctamente que este bucle for perdón es teléfono está dentro de este bucle foro y digo bar y que empieza haciendo igual a 10 mientras que esta y sea menor que tuviere yo no sé 600 píxeles no es demasiado porque mi canvas tenía 800 pues yo que sé 200 metros se voy a probar a ver qué pasa y es igual al y más mi bloque tenía 20 unidades de alto pues le voy a decir más 30 y esto aunque nos parezca mentira cuando yo guardo y recargo a cuidado tengo que poner aquí y evidentemente aunque parezca mentira lo que voy a hacer con ese sencillo código es crear una rejilla de ladrillos porque lo que le estoy diciendo y el problema es cuando ingerimos este código la primera vez que hicimos cómo es posible que esas dos líneas hayan hecho todo esto pues lo que estamos aquí diciendo mira xy se iguala bien tenéis claro x igualmente no es igual a otra cosa x es igual a 10 y empieza vale pero es que y empieza siendo 10 dibujo el 10 10 pero luego y crece y dibujo x es igual a 10 y es igual a 40 y luego x es igual a 10 y es igual a 40 o 70 y luego 100 y luego 130 cuando haya acabado con la siss cuando este buque y se libera es vuelve a este bucle de aquí arriba y le digo ahora eres 70 hicimos 70 10 70 40 70 70 70 100 vale y así es como voy pasando entre los dos bucles para crear x y y simplemente ayudando a estos juntos estos dos bucles lo que tengo es una matriz visual de elementos lo que necesito a continuación es que javascript se acuerde de las posiciones de cada uno de los ladrillos para más adelante poder comparar con la posición de la pelota y poder saber cuando un ladrillo ha sido golpeado por la pelota y cuando el ladrillo desaparece y cuando pasa lo que sea por eso aquí arriba al principio mira antes de empezar la función de inicio voy a hacer lo siguiente creó una variable que es igual a ladrillo post x la posición x del ladrillo que es igual a 1 al rey sin parámetros y amigo ahí voy a dibujar una matriz ahora mismo que creó otra madrid-la brillo post y que es igual a òmnium a reid y ahora lo que haré es especificar bueno básicamente una visibilidad de gopar ladrillo por ladrillo visibilidad es igual a mí él de esta manera de esta manera yo puedo hacer lo siguiente a continuación digo la brillo 2x donde el índice x el índice es x será igual aires desde la posición en x de ese ladrillo para este índice se da ese valor básicamente ladrillos x en 50 será igual a 50 y algo así la brillos y y va a ser línea aunque no lo parezca lo que estoy haciendo me recargó no pasa nada no hay ningún cambio no hay ninguna diferencia lo que estoy haciendo es guardar una memoria interna de la posición de cada uno de los ladrillos porque es que si no o si los dibujos solo si más adelante el dibujo en sí más adelante le digo al programa la pelota está pegando un ladrillo el programa me dirá y yo que sé que nos has dibujado siempre olvidado de ellos lo que estoy haciendo aquí arriba es y vale aquí dibujo el ladrillo pero aquí abajo estoy guardando un registro interno en la memoria de cuál es la posición de cada ladrillo bien aparte voy a hacer una cosa mirada atención permite y va a hacer una cosa voy a crear una variable contador para contador que empieza siendo igual a cero y ahora lo que voy a hacer es decir lo siguiente la de ellos x del contador es igual a equis ladrillo posibilidad del contador es igual a y nos damos cuenta de lo que hago y ladrillo visibilidad del contador es igual a 1 es decir que está activado y luego como un contador más esto qué quiere decir lo que acabo de hacer es aquí crear un identificador y lo que voy a hacer es decir el primer ladrillo que pille es que es ladrillo post contador voy a decirle que empiece siendo 1 porque me gusta más contador uno su posición x será esta su posición y será ésta preste ladrillo porque al final fijaos del contador se le suma un valor este ladrillo será el número 2 este ladrillo será el número 3 este ladrillo será el número 4 este ladrillo será el número 5 cuando acabe aquí he dibujado 7 creo que son este sea el número 8 9 10 11 12 13 14 15 16 a ese contador lo que hace es ponerle un identificador es como un carnet de identidad del ladrillo es educar la identidad que nombre y apellido a qué dirección hay pues esto es en tu carrera identidad de ladrillo qué posición x ay qué posición y hay y qué visibilidad hay y por supuesto como os podéis imaginar cuando recargo y el resultado en pantalla es el mismo ya lo tengo por aquí y ahora lo que voy a hacer es una pequeña demostración simplemente para que veáis que el contador ha ido aumentando elementos mirar una pequeña demostración simplemente hay que al final fuera nada falta ni que lo hagáis voy a poner el document punto write contador y si todo iba bien aquí vendrá 155 document control bites lo que he hecho es quitarme el canvas y en su lugar poner el número 155 para decir al final he dibujado 155 ladrillos veis como de la manera no sólo estoy dibujando ladrillos educació guardando una memoria interna de cuánto se dibujar y eso va a servir a más adelante cuando recargo eso me servirá más adelante para saber qué identificador típica de ladrillo y para al final a la pelota preguntarle pelota te estás pegando con el ladrillo número uno sí pues quita lo no por sigue rodando te está explicando correlación número dos vale para eso necesito saber dónde está cada ladrillo para más adelante poder detectar si la pelota está colista dedo con ellos o no lo que voy a hacer ahora esto ya no es dibujo un rectángulo sino dibujo todos los rectángulos esto siempre voy a voy a crear un rectángulo y dibujo el rectángulo del jugador más adelante cambiaremos otros rectángulos por imágenes más bonitas para que nos empecemos con rectángulos y la persona visualmente más agradable y voy a hacer simplemente un come pega de este código el color ya no va a ser black va a ser comentó white hasta que estemos esto y voy a decir que el jugador va a estar en 10,750 por ejemplo y va a tener una anchura de por ejemplo 80 píxeles y una altura de 20 vamos a ver lo tiene esta pinta veis lo que he hecho con ese rectángulo le digo que dibujó un rectángulo blanco y luego le digo que el rectángulo está en 10 750 que está aquí abajo 80 20 muy bien muy bien pues lo que había ahora básicamente es usar un mouse move para así para especificar a dónde se va a mover ese rectángulo vamos a verlo vamos a verlo voy a decir para el x es igual quitar más y cuándo vamos a verlo cuando x punto malo voy a ejecutar una función permitirme porque voy a volver a funcionar y dentro voy a decir que la exposición en horizontal en lugar de ser 10 será poner aquí infusión de vélez event punto clientes yo la pruebo probablemente no pasa nada simplemente mira mis desapareciendo qué está pasando aquí lo que estoy haciendo es mover esa barra con el cursor de momento mirar muevo la barra con el cursor pero hay un problema y es que la nuevo perdón elimina a la anterior bueno lo voy a hacer simplemente es decirle que toda esta función ser time out la función de inicio se ejecuta se vuelve a ejecutar cada 100 milisegundos vamos a verlo y así es así es como puedo mover este elemento por la pantalla porque estoy haciendo si la función de inicio se ejecuta cada 10 milisegundos lo que estoy haciendo es que aunque el programa intentará dibujar el cuadro blanco me re dibuja también el me dibuja también el cuadro de color blanco desde el fondo negro portando el fondo negro acá va tapando al cuadro blanco anterior por ejemplo 10.000 segundos para que sea más rápido sabéis qué pasa es que siempre tengo el ratón se me re dibuja el fondo negro el fondo negro prevalece bueno lo que puedo hacer es algo tan sencillo como decirle bar para temporal y tics y ahora digo vamos a verlo temporal x es igual a 20 puntos clientes y al final o incluso al principio pongo esto cuando temporalmente para que en definitiva siempre me dibuje vaya no hay que ponerlo saberlo antes de y curioso no no está funcionando no está funcionando esta línea está haciendo que se detenga la ejecución algo de hecho aquí temporal x al principio tiene que tener un valor no temporal x algo ha puesto mal bar temporal x es igual a cero temporal x viven x no me está funcionando esta línea ahora veremos por qué a recomendarle aumento simplemente para que veáis que así funciona y de la otra manera no voy a estar con siguiente y aprobarlo guardo recargo abrazo balear así ahí no hacía falta declarar eso cada vez que muevo el botón lo que estoy haciendo es mover la barra y así el ratón podrá hacer clic en la bola y por tanto el que rebote lo que voy a hacer para que se entienda que hace cada línea de código porque nos podéis decir por hoy porque estoy dibujando aquí realmente un rectángulo y aquí estoy dibujando realmente otro rectángulo en cada momento en cada repetición del videojuego dibujando dos rectángulos a la vez os haréis no os digo que no vamos a tener dos rectángulos a la vez voy a quitar este rectángulo y lo que voy a hacer es que mouse mod simplemente me actualice el valor del cliente x puede hacer todas formas es dejar esto en la carpeta número no me acuerdo cuál era número 2 y voy a copiar la ‘número dos’ la voy a convertir en carpeta número 3 y voy a cargar es el número 3 tanto el editor como en el navegador ya si tenéis una copia de cada uno de los elementos bueno pues no hubiera ahora mirar es decirle y ojo al canal 3 lo que voy a hacer es decirle que voy a eliminar esa línea porque tenía hay un problema temporal x ahí está aparece y temporal x es igual a evento punto clientes cuidado aquí esto fuera lo que voy a hacer es lo siguiente comentar el código aquí ya no dibujó una barra aquí lo que hago es que actualizó en la actualizó la posición en x de la barra solo si el ratón se mueve y aquí abajo por último lo que hago es dibujo el rectángulo se halla actualizado o no ya voy por tanto es decir se mueva los amo al ratón dibuja el rectángulo dibujado con la última posición conocida de temporal x y cuando el ratón se empieza a mover ves cambiando de actualizando el valor de temporal x con el nuevo aparato ahora realmente el efecto es prácticamente el mismo lo que pasa es que en lugar de estar dibujando los rectángulos porque realmente en el fondo para que quería yo dibujar dos rectángulos pues se dibuja sólo cuando se dibuja un rectángulo la primera mitad del código se encarga de definir cuál es la posición en x del rectángulo en base a la posición x el ratón mientras que la segunda parte del código lo que hace es ese valor temporal x y dibujar un rectángulo empezando dentro de ese valor insisto una vez más que temporal x lo he creado para poder sacar de la función el valor de eb en punto cliente x porque si no lo puedo sacar y ahora lo que voy a hacer antes de empezar a crear la pelota y que la pelota se mueva y que la pelota rebote y todo el resto del videojuego lo que voy a hacer es entrar dentro de google dentro de google imágenes mira voy a empezar a poner a sacar algunas de internet voy a crear otras e en base a 5 al programa que sea así que voy a poner space serían grever sacarlos al primer spicy de sacar la actual y the space ya usan esta imagen a ver qué tal pero de éstos alguna grande o esa me ha gustado mucho y es grande nos guste esa imagen me da igual que os guste o no porque a mí me gusta así que la voy a evidentemente es una imagen de tres mil y pico por tres muy grande me la voy a guardar a la carpeta escritorio master huelva actual arkanoid son 4 y me la voy a guardar como forma fondo punto jpg y ahora abro ahora abro un programa de edición de imágenes ya va algo más adelante de esto con detalle de programas de edición gráfica voy a hablar al abrir el king como podría ser el photoshop da igual cualquier programa que trabaje con imágenes porque tengo un canvas de 1280 x 800 pero tengo la imagen de 3000 por 2000 así que tengo que meterla dentro de las dimensiones momento porque está abriéndose el yin y dentro de este programa el gimp lo que voy a hacer es pues básicamente la imagen de momento más adelante lo queréis crear una imagen nueva pero de momento lo que voy a hacer es esa imagen y bajar la de resolución momento porque está tardando bastante podría pasar pero también es posible mientras tanto se casó mina mientras se arranca el kit voy a arrancar interés que es el programa que me va a permitir dibujar los tantos del jugador como las las bolas que tengo que romper a continuación voy a abrir el quinto voy a abrir el archivo escritorio hasta el actual arcano y 4 y voy a imagen y mirad a escalar imagen voy a escalarla hasta 1200 creo que era por 800 no recordar que está la dimensión del canvas que estaba usando recordamos que era 1280 x 800 1280 escalo y ahora guarda la imagen tengo una imagen al tamaño real del canvas para no usar demasiado y ahora voy a hacer lo siguiente mi lado ahora dentro del código voy a escribir que en lugar de poner un rectángulo de color negro voy a decir lo siguiente mira para ing creó una variable llamada imagen para imagen que es igual al mío y mails recordado lo que está en castellano me lo estoy inventando yo lo que está en inglés son cosas son propias del lenguaje de programación ya digo la imagen imagen punto o no cuando la imagen se cargue ejecutó una función es un poco más complejo cargar imágenes próximo lo ha dejado para el final ejecuta una función donde digo contexto punto draw y mails pero no os preocupéis porque a partir de aquí vamos a copiar literal y copió la imagen en el 0,0 diréis esto es muy bonito pero tú realmente dónde has puesto aquí el como se llama la imagen donde has puesto el nombre de la imagen bueno por su nombre de la imagen lo voy a poner la imagen un load por cierto lleva punto y coma y ahora pongo imagen punto src es igual a fondo punto jpg voy a quitar el fondo blanco el fondo negro y lo he dejado así básicamente imagen es igual a una nueva copia de una imagen y digo básicamente que dentro del contexto dibujo la imagen empezando de cero cero cuál es la imagen fondo jpg funcionando correctamente y si todo ha ido bien fijaos que aunque tengo la imagen del fondo de todo ahí está la imagen se está todo que superponiendo por encima de todo lo demás y el par aún así yo creo que os quejaréis cómo se empieza a ver aunque muy a parpadeo que la imagen digamos está combinada está coordinada con el resto de elementos en principio podría parecer que una solución sería el cargar la imagen de fondo voy a comentar el código y vamos a ver por qué no se veía cargo la imagen y ahora por aquí mira digo un body hecha de solución es buena en realidad pero tiene un problema vivo y de igual clic y de igual a fondo tiene un week de 1280 píxeles jarc de 800 píxeles un background de url fondo punto jpc de aumento no va a funcionar porque me lo va a poner a continuación que ha pasado aquí aquí un punto y de igual a fondo claro por favor es que no es vuestra la almohadilla bien ahí tenemos por una parte del fondo ahí tenemos por otra parte el canvas ya no pasa nada porque además le digo posición absoluta y de esa manera en el principio se ha quedado o se debe quedado por detrás si no se ha quedado por detrás lo digo que z index es igual al menos 1000 para que me asegure que se ha quedado por detrás ya había funcionado pero tengo un problema y es que si ahora recargo comprobar veréis cómo la barra no está refrescando porque el fondo negro me servía para quitar lo que tenía antes y dibujar encima del canvas beige por tanto me daba lo de bajo la barra debajo se está no se está refrescando no estoy mojando la anterior y poniendo la nueva voy a probar a la imagen de fondo y ponérsela de fondo al calmas a ver qué pasa la pongo sí que la pilla vale perfecto pues entonces casi que me ahorro el fondo muy le ahorre fondo con css incluso dijo está clarísimo que había puesto directamente como fondo sigo teniendo el problema dibujando lo aquí de que fijaos en la barra blanca debajo se sigue estirando por tanto vamos a probar la solución que consiste en la función inicio antes de hacer nada más pongo el fondo con jquery y le digo selecciono permitirme hacerlo abreviado seleccionó el canvas y le pongo el método css donde ba cloud le pongo esta imagen url fondo punto jpg aquí está vamos a probarlo ahora bien no pasa nada dobles comillas pero delito el problema poniendo comillas sencillas recargo y de esta manera parece que no porque vamos a verlo aunque lo borré bajo eso lo borro bajo de aquí aunque los bordes bajo de alguna manera sigo teniendo el mismo problema claro porque estoy maquetando el fondo y el fondo siempre está en el fondo pero el fondo nunca borra la parte de delante es mucho más sencillo era muy sencillo voy a quitarnos de aquí voy a quitar esto que realmente no hace falta y os voy a decir que existe pero lo tengo que ver en mi servidor una función un momento que estoy buscando la función que permite al principio del documento borrar el documento es decir el documento que hubiera antes y borrarlo momento momento estoy viendo un código que había hecho un proyecto anterior bien y lo que voy a hacer es lo siguiente mirada atención se prevé en comentarlo borró el fondo y en borro el fondo voy a poner lo siguiente con texto punto clear rey no steel red es clear red no es un rectángulo relleno es un rectángulo borrador clear es de cerrar aclarar castellano se traduciría hemos borrado y dibujo lo siguiente un rectángulo es como un rectángulo que empiece en 0 0 y acabe en 1280 800 vamos a probarlo ahora recargo y ahora si tengo el fondo y clear red lo que está haciendo es cada vez que arrancó el programa lo que está haciendo es borrar lo que había antes pero no borrarlo poniendo un rectángulo negro que me causa problema para esto sino borrarlo borrando lo realmente y el foto del canvas cuando lo borro es transparente por tanto si es transparente me deja ver la imagen que he puesto de fondo que en este caso es pues la imagen que he bajado a internet ahora si no me queda muy claro que esa imagen está en la proporción correcta pero vale voy a hacer ahora la pelota y para esto lo que voy a hacer es en primer lugar una nueva versión d a ver el proyecto que es master web actual arkanoid y hago la versión 5 vamos a trabajar ahora con la pelota cargo atención esa versión tanto dentro del editor ya sabéis siempre igual siempre lo mismo como dentro del navegador no sé por qué me abierto firefox pero realmente una igual me abra luego de que ambas atenciones que en principio es independiente d independiente de navegador no hay modificadores de compatibilidad porque es que ambas camas no hay otra cosa lo cual está bien porque si sabes que se se ve bien en uno se ve bien en otro y en móviles y en tabletas y en donde sea bueno voy a crear ahora ya sabéis cómo el otro día a partir de aquí el procesos van a resultar bastante familiar voy a crear ahora una variable llamada posición o pelota post x para hacerlo igual que otro día pero está post x la pelota 2 y para pelota del x velocidad de nx de la pelota bar pelota del y es decir posición y y x de la pelota velocidad y y x de la pelota si queréis es que incluso ya que estamos les podéis dar un valor el valor inicial por ejemplo que te diré yo será 400 en x 400 en y la velocidad inicial será 1 la velocidad inicial en el link y será 1 hacia dónde se mueve una pelota que se mueve en x 1 y 1 hacia abajo a la derecha porque equivale evidentemente como ya sabéis a sumar valores aquí sumar volverse aquí lo cual equivale a hacer un vector de dirección así bien vamos a comprobarlo voy por tanto a dibujar una pelota dibujo el rectángulo bueno pues por último lo comento dibujó la pelota y casi que ya que estamos voy a abrir voy a copiar directamente el dibujo de otro día me pongo a versión 5 cuesta un poco de abrirse porque me dijo de acuerdo pero básicamente cojo la pelota y digo dónde estás pelota la pelota copio pero y no tenemos un misterio básicamente es voy a dibujar de color blanco empiezo un trazo dibujo una pelota en pelota post x pero está post y con 10 de radio 0 must be y foros vamos a ver lo guardamos recargamos y si todo ha ido bien tengo ahí la pelota porque está ahí y no está en cualquier parte porque recordamos que le he dado una posición inicial de 400 400 y ese punto de ahí ocurre que es 400 en x y 400 son y videos bien hasta ahora voy a hacer igual que el otro día voy a la pelota y aquí arriba luego los agregaré aquí arriba voy a hacer pelota 2x es igual a pelota 2x más pelota del x coge la posición su manera velocidad y tienes la nueva posición pelota 2 y copio y pego pero está post y es igual a pero está posibilidad más pero también y guardo recargo cuáles en nosotros en pantalla beige plato que quiere que a ello se quiere pero sin embargo cuando recargo la pelota sea para allá y aunque yo le intenté la pelota me atraviesa hola recoger pero no puedo cogerla de momento lo que usted dice porque la pelota se mueve voy a repetir lo del otro día porque la pelota se mueve porque cada vez que pasó por aquí tener siempre en cuenta que esto es un bucle infinito cada vez que paso por aquí a la posición x le sumó la velocidad cuál era la velocidad 1 y 1 por eso cada vez dice heras 2 100 personas 400 pero cuando pasó por aquí 400 es igual a 400 más 1 400 1 402 403 y así la pelota se va moviendo bueno voy ahora a hacer que se detecte la la exposición en que colisione con el jugador no escribo aquí colisión con el jugador y ahora es cuando empieza la diversión digo sí sí qué a ver realmente yo os voy a decir una cosa me doy cuenta que todo esto es lógica no es más que lógica hace falta que yo pregunte por la comisión cuando la pelota está aquí arriba o sea cuando estoy arriba es imposible que haya colisionado con el jugador por tanto voy a decir solo cuando la pelota post y es mayor que 700 es decir solo cuando la pelota esté aquí en el tramo final sólo entonces pregúntate si está colisionando en el jugador porque para qué voy a gastar recursos del programa preguntando a la pelota si aquí aquí arriba aquí donde estoy marcando ha colisionado con el jugador la pelota medida pero cómo voy a coleccionar si estoy muy lejos todavía vale así que ahorro ahorro cálculo haciendo que no solo pregunta ahora si la posición de la pelota en y es mayor que 700 en fin ya está cerca entonces pregunto digo sí posición terror pelotas pelota 2 x la x de la pelota es igual no es igual no porque sería muy difícil acordaos que para ser igual tendría que ser que el ratón estuviese justo en el mismo bits el que la pelota no lo que hacíamos es si la pelota post x es mayor que el que es que la posición del jugador y dónde está la posible de jugadores temporales temporal recordáis que temporal x la posición del jugador amplia 2 ampersand y voy a ponerte otra condición y sí pero está 2x es menor temporal x + 80 80 es lo que tenía vean sobre el jugador sólo en ese caso sólo en ese caso y no en cualquier otro caso haz que la velocidad martín estoy sólo en ese caso haz que la pelota bell y sea igual a menos pelota bell y es decir solo en ese caso lo que hago es que la velocidad se invierta aquí pongo dos condiciones de ponerle un poco más lejano la condición es que la pelota sea mayor que temporal x que es la esquina izquierda y que la pelota sea menor que temporal x más 80 que es la esquina derecha es decir estoy abriendo un rango de píxeles en ese caso por tanto pelota del y será igual a menos pelotas y en lugar de sumar dos restaurados vamos a ver si funciona esto guardo recargo bien algún error hay porque no se dibuja nada y si no se dibuja nada es decir que aquí dentro de esas hay algún error vamos a verlo una manera de comprobar que esto es así es que si ahora comento ese código si ahora desactivo ese código el juego funciona luego ahí en ese código que he escrito hay algún error vamos a ver primer error que la variable no exista pero está post y sí que existe así que parece que ese no es el error pero está apple y es igual a menos pelotas y vamos a ver si es esto aunque en principio no debería serlo sí pero está post x es igual por mayor no ahí está el error guardo vamos a ver tenía un error ahí en el igual mayor prueba es que yo igual estaba separado puede que tenga otro error vamos a ver guardo recargo y parece que ahora sí ya veis tengo suerte sí por lo que sea nuevo la pelota al jugador pumas rebotado ha rebotado no sea pronto no pasa nada voy a volver a repetir si no pongo esto por aquí la pelota se cuela con la pelota se cuela pero si pongo esto por aquí veréis como pong rebota porque ha rebotado antes pues por la sencilla razón por la sencilla razón de que he dicho cuando la pelota sea 700 tenía margen ahí murió me presten 250 para hacer que la pelota rebote justo contra la barra ahí lo tengo pam se ha metido un poquito de la dentro de la barra ve listo buenos pongo 740 pongo allí lo que sea en definitiva para detectar cuando la pelota rebota contra la barra tengo un problema muy justo a la vista y es que rebota contra la barra bien pero éste no rebotan y contra la pared ni contra el techo ni contra nada más por eso en el vídeo siguiente lo que voy a hacer es recordar como dice el otro día yo era un nuevo de hacer para que la pregunta revol también contra las dos paredes y contra el techo voy a calcular ahora la colisión con las paredes por tanto mira al código conexión con las paredes y digo otra vez atención sí pero está 2x es menor que cero real que el menor que viene por qué pelota 2x es mayor de 1.270 voy a dejar 10 píxeles de margen atenciones o uno u otro siempre ha esperado contra una pared o te has pegando para tratar para ver no pongáis andy porque es incumplir es imposible de cumplir si te has pegado contra una pared y además te espera de contra la otra quiere decir que la plata para velocidad de la luz o que es la nota gigante vale por tanto voy a decir porque estoy poniendo hop y digo pelota del x es igual a menos pelota x y ahora mismo conexión solución no colisión con el techo que estamos en un menor y digo pues mira es que realmente me lo puedo copiar de ahí copio si pelota 2 y es menor que 10 pelotas mel y es igual a menos pelotas pero y ahora vamos a ver si funciona esto completa guardo recargo la pelota caería le voy a dar voy a dar yo le doy y ahora va a ignorar completamente los los bloques pero si te ha contra la pared rebota rebota en el techo y me vuelve a llegar me vuelve a llegar me vuelve a llegar van poco lenta ahora lo pondré más familiar y rebota veis ya tengo un arcano el de momento no tengo el el rebote con los bloques pero ya se están moviendo lo que voy a hacer ahora es críptico de este refresco lugar de producirse en 10 milisegundos se produzca en 0 milisegundos con lo cual estoy diciendo les ves todo lo rápido que puedas ves todo lo rápido en el ordenador del eje recargo crear va más rápido pero aún así va un poco lento porque más adelante a otra cosa que puedo hacer ya sabéis que el arquero va aumentando la velocidad con el tiempo verdad y bueno pues lo que voy a hacer es lo siguiente atención voy a hacerlo muy bestia creo una nueva variable para contador tiempo contador tiempo que es igual a cero cada vez que pase por el bucle le digo contador tiempo más más ahora qué hace con todos los tiempos no hace nada contador tiempo básicamente lo que hace simplemente es contar el tiempo pero yo le puedo poner un ir que le diga mira aceleró y le digo sí pero no si contador tiempo es mayor que un millón no ser un millón mil cien mil lo que cada ex prueba del cielo pelota del x es igual a pelota del x por 1.1 por 2 voy a aumentar la velocidad por 2 para que se note para que veáis el cambio pero también y es igual a pelotas bell y por dos vamos a vamos a ejecutarlo y ahora no sabemos dudas recargo mirar a una velocidad a ver si no está ahí es cuando empieza y el doble de loción le he dicho que en 100.000 cuando ha hecho 100.000 pasos tiene 100 mil bucles la velocidad irá ajuste al doble voy a ponerle mil porque con cien mil parece que no se ve que tarda voy a poner 1000 guardo recargo a ver ahora la pelota pelota pelota alguien bien que ha pasado ahí porque de repente ha entrado en el hiperespacio es muy sencillo yo he dicho que es el contador de tiempo es mayor que 1000 la posición perdón en la sociedad es esta por dos el problema es que se la velocidad era dos en contador 1000 se vuelve 4 pero en contra 2001 se vuelve a ocho en contra 2002 vale por tanto te hago aquí simplemente decirle que contador como es contador tiempo es igual a cero es decir pone otro metro a cero vuelve a contarme comprobamos ahora que esto va a ser muy difícil empiezo por ahí y ahora de repente veréis que la velocidad se vuelve multiplica por dos no habéis visto por dos bien para pero yo sigo jugando y ahora de repente veréis que cuando le ve volverá a contar mil y las dos y dificultad y ahora la velocidad es x 2 y ahora está y ya no lo pillo casi bueno evidentemente he hecho una multiplicación por 2 para que se note el efecto no sería tan salvaje multiplicada en multiplicar y a la velocidad por 1.2 lo que se definitiva a cada uno con un juego que ponga la dificultad que quiera lo que voy a hacer ahora es medir el rendimiento de esta aplicación para saber el número de milisegundos exacto que tarda en acelerar cada núcleo y generar cada repetición por eso dentro del escenario o mejor dicho fuera voy a hacer un día con él y ver rendimiento y dentro el rendimiento sin mayúsculas es posible y dentro del rendimiento y dentro de javascript voy a escribir lo siguiente atención donde lo escribo donde quiera porque esto como no depende del canvas realmente lo voy a escribir por ejemplo mirar voy a poner calculó los milisegundos desde etc etc que es lo de el 1 de enero de 1970 y ahora como no me acuerdo de moria lo que hago es sacar la 1923 schools saco javascript zhang el objeto day y sacó el completo de offset reference mirar ya que estamos nivel aquí pero esto es que no quiero para aquí tarde es igual a mí ud y ahora amigo el número de milisegundos de tarot midnight ya no era water que time the time y vivo vamos a ver en el hecho lo podría copiar directamente no es mala si es de y ahora digo ahora lo simplificó y una tipo cualquier elemento que tiene que vivir rendimiento le quiero poner en html el valor de n a refundir recargo y aparece eso en pantalla es la cantidad de milisegundos que han pasado desde el día 1 de enero de 1970 que he hecho aquí pues lo que estoy aquí es primero crear una nueva fecha y luego decir que la variable n de la fecha de la fecha cojo el método que time sabéis qué pasa que directamente en lugar de poder multiplaza podría haber puesto directamente allí que el time y me hubiera ahorrado lo mismo veis o martinete y le cojo quieta y el resultado en pantalla es exactamente el mismo ahora continuación lo que haremos es averiguar la diferencia entre los tiempos para sacar los milisegundos que pasan en cada google ahora lo que voy a hacer para averiguar el rendimiento mira voy a hacer qué la variable tiempo anterior es igual a de punto que tal esto lo pongo aquí por cierto esto lo pongo tiempo anterior es igual a punto vital por tanto ahora vivo tiempo actual es igual qué tal menos tiempo anterior y aquí pongo tiempo actual vamos a las funcionar y ahora veremos el por qué y ahora sí recargo ponen nota number en el momento notarán bertrand el tiempo anterior es de metal claro es que el tiempo anterior claro efectivamente por eso tengo que declarar tiempo anterior bar tiempo anterior es igual a 0 por aquí arriba para tiempo anterior y ese número es bajo es la cantidad de milisegundos que están pasando entre un fotograma y otro hay veces que son pues en torno a 67 me está pareciendo bien en la pantalla 678 hay veces que llega hasta 15 16 milisegundos depende de lo que reina insisto que es y ejecutó esto en un orden o del antiguo podrán más milisegundos si lo ejecuta un ordenador más potente pondrá menos milisegundos la cuestión es cómo lo he calculado como lo he calculado fijaos puede parecer un poco raro pero pongo tiene un siguiente mirada función tiempo actual tiempo actual es el tiempo de ahora y le digo el tiempo de time es el tiempo actual menos tiempo anterior cuando haya tiempo anterior antes 0 así que tiempo actual menos ceros igual a tiempo actual cierto ahora digo tiempo actual y digo tiempo anterior igual de punto que tal [Música] así que el tiempo anterior es igual a ahora son las 1334 a las 1335 le vuelve a preguntar esto en vigo tiempo actual es igual a 10 time las 1335 menos tiempo anterior 13 34 13 35 24 cuando ha pasado un minuto dime tiempo actual en html ese es el truco al final al final del bucle porque esto aquí acaba aquí tiempo anterior es igual a 30 y es como diciendo coge el tiempo y recuerda lo que te pregunte y la siguiente vez te digo cuánto tiempo ha pasado desde la última vez que te pregunté y ese es el valor es el rendimiento que nos está dando en milisegundos con respecto a sabéis qué pasa tiene una cosita bien yo tengo hay un problema tengo muchos pero tengo uno grande y es que esto va tan rápido que se me dice cuál es el rendimiento de tu aplicación y no sé es matrix sabes porque corren tan rápido que parece matrix así que yo lo que puedo decir es mira no me ejecutes estos mil veces cada segundo esto me lo calculas solo cuándo solo cuando aceleras porque porque he metido esto dentro de ese bucle porque si os fijáis son los ejecutores tengo un clic una vez de cada 1000 veces así que tengo una métrica de mil veces ejecuta mente ya que te pones aumenta la velocidad ejecuta men también lo del cálculo del rendimiento guardo recargo el caos que ahí me da no me lo dije tengo que esperar mil dentro de mí veréis que en el mismo momento en el que vaya más rápido aquí abajo para hacer el rendimiento la pelota veis ya aparece algo así vale no pasaba el primero es tiempo menos 0 que es igual a tiempo el siguiente me dará el rendimiento no el problema es que sólo me preguntan cada 1000 milisegundos a cada militado bueno realmente es eso partido mismo la respuesta de sexo partido mismo por tanto cada 8.5 milisegundos y 8.5 mil en segundo es lo que tarda en refrescar cada vez la pantalla junto con 56 pero bueno calcular que así que mejor que me lo que el publicada mil ocho salas y me hace un promedio porque habéis visto antes que a veces me decía ocho veces me decía 14 que es 8 14 es pues yo pregunto cada mil seguro que me está haciendo un promedio veis cómo va más rápido cada vez multiplicada por 1.2 6 y ahí permitirme y ya para acabar la sesión de hoy permitirme decirle ya que estamos proyectos de dónde ha salido no se la pelota ha solucionado como acabáis de ver en total mensuales no sé bueno si voy a decir ahora antes de dibujo a la pelota te voy a decir pierdo el juego pierdo los juegos quiere decir qué sí pelota todos y es mayor que 800 quiere decir que reinició los valores y digo pelota posee x es igual a cero pero trapos y si vuelan 0 contador de tiempo se va 0 tiempo anterior y segundo el cobre cortado lo que voy a cortar te voy a copiar vamos a comprobarlo y esto quiere decir que si pierdo el juego si la pelota cae bien algún error cometido al error el cual quiero de cometido el otro día cometió el mismo error no puedo volver a declarar una variable que ya existe puedo asignarle valor pero no volverla a declarar guardo recargo vamos a comprobar que el juego funciona mira la canción si la pelota se cae vuelve a empezar si la pelota se cae vuelve a empezar si evidentemente le doy colisión de alguna manera pero está pose x de alguna manera no sabe qué estamos hablando sí pero está post x no y qué fallo es la posición y de la pelota ha sido casualidad que funcionara pero tacos y pasan 800 se mueven pelota pos y no pasan los 800 siguen jugando dentro de la carpeta de javascript lo que voy a hacer es crear me un archivo nuevo un documento de texto llamado jquery white es decir jquery un punto html donde jquery huila y quiere decir y user interface interfaz de usuario jquery white es un framework que se basa de jquery que a su vez más en javascript para automatizar la creación de elementos de interfaz de usuario se transforma que yo cuando hago un botón a la haremos una pequeña demo cuando hago un botón yo no tenga que decirle un botón ancho alto radio sombrita y todo eso pero yo jn igual diga quiero un botón y jquery by me diga mira cómo tomamos tu techo para eso sirve básicamente para ser más productivos a la hora de programar interfaces de usuario pero eso sí usar jquery white requiere que descarguemos jquery diréis pero si bien tengo jquery muy bien más muy bien chavalote pero necesitas también el hotal woody igual quiere decir que tengo visitar jquery no jquery es el motor y jquery wine es la presencia por tanto necesitas las dos librerías de donde saco puede igual pues mira dos alternativas o bien entra directamente en la web jquery puntocom punto hereje el perdón jquery punto hereje y en el selector elegís aquí abajo en lugar de james eric orr el filial y yo hay estoy en jake wear y punto o hereje del cuero o bien entraréis directamente en la página web que es jake uruguay puntocom yo prefiero entrar en james bond y punto hereje y luego desde ella hacer clic en toca veréis que el primer el primer enlace es el enlace de descarga yo puedo o bien descargar directamente el hot away wilde o bien crear una descarga personalizada realmente los dos iban al mismo sitio viene clic aquí arriba hago clic en descarga y atención momento porque ahora vamos a jugar se preguntan dos cosas estoy en el botón de descarga encontrar por el punto o hereje he hecho clic en j puede llegar y ha hecho clic en descargar se me dicen que quieres que tenga a lo cual nosotros diréis y yo que sé bueno claro efectivamente si no sabemos lo que debe tener se lo podemos todo básicamente tenemos el núcleo tenemos los widgets tenemos los comportamientos de ratón tenemos cómo tener una posición y luego tenemos cosas como son interacciones que sea dragón que sea drop a ball que sea risa y samuel widgets efectos cada cosa de éstas va a pensar por tanto al principio yo bajaré todo conforme pasa el tiempo y el gran momento diré por ellos mis proyectos me he dado cuenta de que uso del árbol pero ni vosotros mismos donde saiz ambos miembros electivos y nsué nada de esto para que me lo quiero bajar y que ocupe memoria para eso no lo descargar lo podría quitar y sobre todo lo que más divertido me parece es tema que te myers usar por defecto se te propone el tema you by line es el tema de interfaz de usuario clara puedes trabajar con like girls con darkness con smoothies con esta redmond que es como windows que es de tierras de momento más adelante veréis que se pueden personalizar los temas de momento lo que vamos a hacer simplemente es pulsar sobre dar blog descargar atención a os dice que quieres la 1.8 11.7 que es la antigua área que están aprendiendo vamos a aprender con la nueva la normal estable a día de hoy la 1.8 punto 21 a la sala que viene igual son 22 el dentro de tres meses iguales a 1.9 vale pero descargamos la última que hay ahora pincho doble ya se empieza a descargar y me lo bajo en la carpeta actual javascript está en fin y tiene que estar en fila porque mira actuación guardo me voy a dar carpeta y lo que voy a hacer es descargarlo en la carpeta no extraer aquí no extraer el jquery hay 1.8 juegos me gustó y atención porque así como más de descargas jquery se te descarga únicamente el archi mito cuando descargas jquery white que te descarga el archivo y el hamas team necesario y el css que necesita y se te descargan también ejemplos de desarrollo así que mantenerlo todo ahí es decir descargar esa carpeta jamás intentaría descomprimir la y dejar la carpeta descomprimida no saquéis nada de esa cartera lo que voy a hacer ahora es demostrar el funcionamiento básico con una pequeña mini demostración de jquery white y por eso voy a meter el hotal por igual dentro del editor está vacío yo creo que lo podéis comprobar y lo voy a abrir dentro de una dentro de un navegador mira reid pequeña comprobación si pongo aquí hola allí aparece hola luego tengo lo mismo en los dos sitios bueno crear un archivo de ejemplo crear un archivo de referencia para jota con igual es prácticamente como cualquier proyecto que hayamos hecho hasta ahora creo un archivo html crea un archivo help tener un archivo móvil y el gel si antes importábamos scripts ahora importa uno al revés si antes importaba un script harán por todos mirando todos a la pantalla ahora voy a decir que entro dentro de la carpeta esta de aquí barra que entró dentro de javascript barra y que seleccionó ese archivo lo habéis visto porque porque tengo este archivo aquí jota uruguay tengo que decirle entra dentro de esta carpeta dentro dentro de la carpeta js coge ese archivo repito copio y pego y ahora le digo que entro dentro de la carpeta jquery y uruguay 1.8 21 dentro de la carpeta js js y cojo el archivo jquery white jon 1.8 punto 21 en fin que era me complico les copio y pegó y ya está y me hace falta una cosita más me hace falta una cosita más y es el link martín aumente creamos link ahora red es igual a esta el sí porque voy a cargar un 13 es externo y digo h lo que sea tal css y ya está dónde está es pss pues está en esta carpeta css barra new line es el rollo y un eyeliner barra el nombre del archivo que estoy importando es decir que tengo que hacer en definitiva es llamar a los tres archivos mínimos que me hacen falta para trabajar con james bond y jugar el primero es jake wear y que es la librería pero mueve todo sigue igual y no hay james bond igual el segundo es igual ahora los elementos visuales y el tercero jake uruguay no lo sabéis todavía pero yo os lo digo que os confiéis en mí yo lo demostraré que gateway necesita css pero no que eso lo digáis nosotros ya lo trae él así que ya más al css que trae tu jaguar igual donde lo sacaba estaba el archivo 100 lo que voy a hacer ahora es que la pelota reconozca la posición con respecto a cada uno de los ladrillos mirad entonces en la función de inicio el problema de este juego mirada el problema de este juego es que necesita una reactualización o una reestructuración porque tengo una función de inicio esta función de inicio lo contiene todo contiene todo el juego y yo con los ladrillos tengo un problema y es que yo necesito que los ladrillos se declaran al principio pero no se vuelvan a declarar cada vez y quiero decir con esto fijaos que cuando digo dibujo todos los rectángulos yo realmente realizan dos operaciones que son primero dibujar los rectángulos y luego meter sus valores en una matriz mi problema en este caso que es un problema que veis que es relativamente fácil de solucionar es que cada vez que se repite la función de inicio la visibilidad de los ladrillos se pone a 1 luego allí tengo un problema asegurado y es que por mucho que yo realmente llegue a destruir un ladrillo cuando se vuelva a repetir la función de inicio su visibilidad volverá a ser 1 así que lo que necesito es realmente subordinar esto lo que necesito es decirle al programa que ejecute una vez y una sola vez la propiedad de exposición x y z perdón x y invisibilidad y luego que ejecute periódicamente la comprobación de si los ladrillos se rompen o no esto básicamente consiste en separar esta función de inicio en dos funciones una vez inicio y otra de juego lo cual va a ser más sencillo de lo que os podéis pensar mira de pantalla tengo aquí la función de inicio de hecho si queréis incluso lo voy a separar la voy a poner con sangría para que veáis exactamente cuánto familia la tenéis en azul y ahora a continuación de la función de inicio lo que voy a hacer es una función una función llamada como queráis por ejemplo juego inicio son las condiciones iniciales y juego es el juego propiamente [Música] así que paréntesis llaves mira tengo una función vacía lo que hecho es crear aquí esta función llamada función juego qué hace de momento esa función momento su función no hace nada por eso se hará guardo voy a hacer una cosa voy a cerrar esto y lo que voy a hacer en este caso es crear la versión 6 la versión 6 de este juego y así no sobre escribimos la versión 5 así veis el cambio que será esta versión calcula 66 y mirad lo que voy a hacer ahora atención es simplemente no solo para cerrar o vaciar la función de inicio lo cual quiere decir cortar todo su contenido al inicio y juego y pegar todo su contenido en juego y decirle que cuando se repita no se repite el inicio sino que se repite a fuego es decir mira la función de inicio en lugar de bucle a ello sola lo que va a hacer es hacer que el bucle de juego la que va a hacer un bucle es juego el problema principal ahora es que es un problema grave es muy fácil de solucionar es que si ahora guardo y recargo sabéis qué pasa en la pantalla pues no pasa nada y por qué no pasa nada aparte de que ha puesto el fondo pero eso recordad que éste ss no es jamás team porque pasa nada porque no pasa nada miremos el código cuando el documento esté preparado arranca la función de inicio y la función de inicio le dice vale aquí estoy qué pasa si quieres no le estamos diciendo nada a la función de inicio es cierto que hemos creado a continuación una función llamada juego pero recordad que definir una función no quiere decir usarla quiere decir que la definimos y ahí se queda en la memoria ya sabemos cómo se define una función cómo se llama una función llamar a una función es algo muy sencillo de hecho lo estamos haciendo constantemente mira sigue crear una función juego lo que hago simplemente es decir juego paréntesis con esto le digo a inició hoy ejecuta la función juego y java script irá a ver quién es la función juego mira tú eres la función juego pues vamos a ejecutar lo que haces vamos a verlo guardamos recargamos y veis como ahora el juego vuelve a funcionar básicamente lo que he hecho lo que he hecho es decir cuando el documento estoy preparado ejecuta la función de inicio y ejecuta la función de inicio y la función de inicio que dice ejecuta la función juego luego inicio salta hace juego y luego juego si os fijáis aquí abajo recordáis lo he cambiado para decirle que en el set de mouse ejecuta el juego y no al inicio es liberar llegado a juego quédate el juego sigue repitiendo el juego ahora lo que voy a hacer es porque recordemos que yo he creado esta función de inicio con la sencilla razón de realizar dos declaraciones primero una declaración inicial de donde cada ladrillo que posición x que postrera y que posteriormente de visibilidad tiene y luego dibujar los ladrillos así que mira voy a copiar esto ya mirar de hecho me voy a cortar todo este dibujo los rectángulos atención lo voy a cortar y lo voy a pegar aquí en la función de inicio qué hace esto pues esto lo que está haciendo básicamente es decirle primero mira a ver cuántos ladrillos hay meteros en memoria recordáis que por eso hicimos una matriz para meterlos en memoria y luego si acaso cuando empieza el juego ya los dibujar as luego teniendo en cuenta esto no hace falta mirar poner este fil style voy a hacer una cosa de atención atención dibujo todos los rectángulos voy a hacer esto he puesto mira ese mirar el código de dibujo los rectángulos en el juego y el código de vecinos los rectángulos en la función de inicio es decir aquí dibujo los ladrillos desde el punto de vista de la memoria hasta aquí no he dibujado ningún ladrillo en pantalla sino que lo que he hecho es crear una matriz que los mete en memoria y aquí abajo por fin los dibujo me falta un poco de código por supuesto lo que voy a hacer ahora es meter esto en un force y decir y decidir por qué mar es igual a uno siempre que uno sea menor que yo que se 350 y más más es decir voy a repetir esto 150 veces y le digo y le digo que esto va a ser ladrillo post en x b la brilló con su y de esto es lo que probablemente entenderéis menos esperadas lo voy a explicar primero vamos a comprobar que funciona guardo recargo y funciona ahora voy a explicar que he hecho aquí y por qué lo he hecho en este doble bucle four lo que hago es meter meto los ladrillos en la memoria como matrices acordáis del amigo de la agenda lo que estoy haciendo es lo mismo de la agenda pero para los ladrillos ladrillo con el índice uno equivale a una posición x ladrillo con el índice 2 equivale a otra posición x pero de momento aquí no nos estoy dibujando simplemente nos estoy metiendo en la memoria porque porque antes de meternos la memoria para que luego pueda colisionar para que el programa sepa dónde he dibujado cada ladrillo así que hasta ahora los he metido en la armonía como matrices y aquí abajo lo que hago es dibujar todos los rectángulos la cuestión es que mirad si aquí lo que he hecho es crear una doble matriz y llegado un contador abajo ya no vuelve hembra doble matriz no un doble núcleo forma abajo ya no hace falta que vuelva a dibujar el doble bucle forma porque básicamente cada ladrillo ya tiene un contador así que usa ese contador donde aquí pone el contador aquí poner para decir llamar al ladrillo que tiene el índice 1 como decir llama a la agenda a la primera nada de la agenda y me das de la primera entrada de la agenda su posición en x y su posición y que es como decirle de la primera entrada de la agenda me dices el nombre y el teléfono ahora está un bucle foro continuamos por el número 2 de la segunda entrada de la agenda me dices el nombre y el teléfono de la tercera entrada de la agenda me dices el nombre y el teléfono y ahora cambiar agenda nombre y teléfono por ladrillo posición x posición y es decir tengo como una especie de gente telefónica de ladrillos y cada ladrillo tiene tres propiedades las cuales de momento estoy usando dos que es la posición x y la posición y por eso lo que he hecho aquí mirad por tanto es definir este doble uve doble núcleo for que meten los ladrillos en memoria no nos dibuja sino que el programa nos tiene como digamos en la cabeza no tiene con una agenda telefónica y aquí abajo digo mira posada te vas a repasar la sala telefónica una a una me vas a sacar la exposición de los ladrillos y los vas a dibujar en la pantalla y los dos de beige y todo esto porque no hemos hecho pues lo hemos hecho por la sencilla razón de que lo que necesito es que el programa tenga en la memoria los ladrillos para que cuando la pelota se esté moviendo por la pantalla en cualquier momento le pueda preguntar a la pelota pelota estás colisionando con la posición del ladrillo 1 no estás conexión ando con la posición de ladrillo 2 no estás posicionando con esa nueva posición d’addario 3 y cuando nace cuando me dice que sí ahora veremos qué hacer cuando me diga que sí en definitiva es que antes lo que había hecho únicamente era dibujar los ladrillos tras él prueba dibujar los ladrillos es que están dibujados el programa se olvida de ellos y si se olvida de ellos no puedo preguntarle por la colisión así que necesito que no se olvide de ellos necesito no sólo dibujarnos sino que los tengan en memoria para poder preguntarle cuándo la las coordenadas de la pelota son iguales que las coordenadas de un ladrillo técnicamente aunque la declaración de las variables se puede hacer antes de la función de inicio ahora mezclador problemas también te lo digo pero técnicamente la manera correcta sería declarar las variables declaro las variables no creo que no funcionará ya sé por qué veras lo recargo vamos a ver lo guardo y lo funciona por una razón muy sencilla y veréis cuando yo declaro variables estarás encima de metido del x debajo del todo y por eso para empezar es imposible que funcionara pero aún así no funciona bien lo que voy a hacer es lo siguiente no declarar fuera por las otras por la siguiente razón cuando yo declaro una variable fuera de todas las funciones esa variable se llama nivel global y es visible en todas partes del programa cuando yo declaro una variable dentro de una función esa variable sólo es visible dentro de una función en este caso tenemos una situación un poco rara y es que tenemos una función que llama a otra función así que podríamos pensar que aunque esté el inicio inicio está llamando a juego pero este inicio es la función y jugamos en la función por tanto en definitiva lo pongo fuera para que esas variables se convierten en variables globales y no hay variables locales de una función y poder estar disponible da igual las veces que yo entre y salga de una función a otra ahora que ya tengo las variables y ahora que ya tengo los ladrillos en la memoria y ahora que ya he dibujado los ladrillos es cuando llego a no llego a la parte final pero empieza a llegar a la parte final que es donde hago que la bola detecte la colisión con los ladrillos fijaos ahora mismo que la bola atraviesa y ahora tengo lo siguiente atención mira por aquí vemos que un hueco dibujos rectángulos pues mira ya a continuación voy a decir compruebo si la pelota colisiona con los brillos y ahora vuelvo a decir mira fort para cada uno de los ladrillos por mar efe es igual a 1 siempre que sea menor de 150 temas más porque esté formada por ellos una variable que acabamos de crear lo que dice esta línea es para cada uno de los ladrillos digo sí voy a decir si la posición de la pelota es igual la posición de ladrillo rebota esto es lo que voy a decir como lo digo si post pero está x no creo que era pelota post x vamos a verlo como son la variable era pelota post x muy bien hay que escribir las variables correctamente espero que no me encuentro aquí pelota con x es mayor que como os llaman ladrillo ladrillo post x [Aplausos] pero no cualquier ladrillo sino el ladrillo efe el ladrillo que esté mirando en estos momentos en la villa uno en ladrillo dos todos los vacíos si la posición es mx es mayor que la posición del ladrillo y pelota post x de hacer un poco de hueco es menor qué ladrillo pos x d efe – 50 por qué pero que ese estudio escrito aquí ahora no voy a decir ahora no marcó la pantalla y además es cierto qué pelota post y es mayor que el brillo voz y y además es cierto qué pelota 2 y es menor que ladrillo pos y df – 20 perdón perdón demás 20 es más 20 vamos a asegurarnos aquí ponían siempre comentó este error más de juego y además si esto nos hubiera parecido suficiente le digo que y además que también sea cierto que el ladrillo visibilidad df sea igual a 1 si todo eso es cierto recordáis los clips con múltiples certezas ahora veréis para qué sirven si todo eso es cierto quiere decir que la pelota ha rebotado contra el ladrillo y vosotros diréis en qué universo pone ahí que la pelota rebotó contra el ladrillo pues yo os lo voy a decir pero de la pantalla voy a dibujar y voy a hacer un ladrillo veis el ladrillo y ahora voy a hacer una pelota la pelota ha colisionado contra en ladrillos yo no la flota está dentro del ladrillo recordad que la pelota es el centro de la pelota y el ladrillo es esta posición os acordáis del rectángulo crece desde la esquina bien yo le digo que si la posición recordad que esto es x y esto es y cuerpo no dibujo al revés y donde esto es 0 y crece hacia abajo y hacia la derecha cierto dios pregunto vamos a hacerle preguntas la posición del ladrillo perdón la posición de la pelota es mayor que la posición del ladrillo es cierto parece que sí pero en la posición en x de la pelota es mayor que la posición en x del ladrillo parece que si vamos a verlo por qué esta es la proyección en x esta es la proyección en x la proyección de la pelota es mayor si muy bien sigamos la posición de la pelota es menor que la posición del ladrillo más 50 vamos a verlo esta es la proyección de ladrillo más 50 esta es la posición de la pelota es cierto que es menor si digamos la posición la proyección en y del ladrillo perdón la proyección en y de la pelota es mayor que la proyección y del ladrillo si es este número es mayor que este cielo y ahora la proyección de la pelota es menor que la proyección del ladrillo más 20 esto es 20 y esto es 50 luego fijaos que desde el punto de vista geométrico cuando es cierto todo eso quiere decir que la pelota está colisionando yo sé que vosotros me diréis no pero es que más preparado es claro más preparado para qué de cierto vamos a volverlo a hacer mira tengo el ladrillo y ahora la pelota no está colisionando si queréis que esté por bajo igual que éste por bajo a la derecha arriba lejos cerca me da igual veis que no está coleccionando vamos a preguntarle cosas el programa recordad que el ladrillo es esto y la pelota es esto la proyección en x si queréis ahorramos la equis porque la vista que lo que da cierto la proyección en y del ladrillo es ésta la proyección y de la pelota es ésta es cierto que la pelota es mayor que la posición de ladrillo es cierto esta coordenada es mayor que está acordonada de aquí ahora bien el problema esta es cierto que la pelota es menor que la posición del ladrillo más 20 no es cierto esta posición es mayor que esa proyección luego quiere decir que si alguna de esas verdades no se cumplen la pelota no está tocando el ladrillo podéis comprobarlo a cero este gráfico en un papel haceros todas las posibilidades y veréis que sólo cuando la pelota está dentro del ladrillo es cuando todos no todas cosas que he puesto dan ciertas si la pelota está fuera del ladrillo al menos una de las cosas es falsa y recordad que poniendo andy con que una de las cosas sea falsa todo el chorizo ya es falso y luego evidentemente lo que ellos poner y que la visibilidad sea igual a 1 para que cuando rompa un ladrillo la visibilidad ya no se llama la 1 es la vida desaparezca si eso es cierto si la pelota está dentro del ladrillo lo que voy a hacer es decirle en el lead dos cosas una pelota bell y es igual a menos pelotas bell y lo que en castellano quiere decir vete por donde han venido en fin rebota y 2 lo que voy a hacer es la isla brillo visibilidad de f es igual a cero es decir ha tocado en el ladrillo la visibilidad de ladrillo ya no es uno ahora es cero el que vale decir que ya no es visible vamos a probar este código a ver qué pasaba guardo el cargo a ver si todo ha salido bien recargo bien algo escrito mal probablemente alguna frase se me aire pelota 2x ladrillo post x pero está posee x ladrillo en poses efe efe 1 pelota pos x es menor que el ladrillo posee x df más de 50 pero está post y es mayor que la de ellos y pelota pose y es igual a ladrillo y que siempre cometió el mismo tipo de errores ladrillo post y y ladrillo visibilidad es igual a 1 guardamos recargamos de moscardó fondo funciona bien rebota la pelota y ahora veréis que cuando la pelota llega a un ladrillo se suerte placa rebota veis esto como remota ya no rebota pero no desaparece la pelota lewis sólo desaparece perdón el ladrillo bien es muy sencillo básicamente internamente la memoria del programa los ladrillos ya no tienen visibilidad pero fijaos que si voy a dibujar los ladrillos dibujo todos los rectángulos yo no he preguntado a la de ellos y es visible o no yo he hecho dibujado sí o sí todo dibuja lo expulsara digo aquí dentro sí y pongo aquí un código si la brillo visibilidad es igual a 1 es decir sin su mismidad es 1 entonces dibuja al ladrillo que su visibilidad es cero porque la pelota lo ha tocado y la visibilidad es cero entonces no lo dibujes guardamos recargamos vamos a comprobar la opción pico luego voy a pegar y para ladrillo desaparece porque porque la memoria del ordenador le he dicho que ese ladrillo tiene visibilidad es igual a cero veis por tanto como ya tengo en funcionamiento un mismo arkanoid ha sido importante ha sido difícil de programar eso sí comparativamente con todo lo que hemos hecho hasta ahora ha sido más difícil de programar que otras muchas cosas pero vamos en definitiva que lo que hemos hecho es que el programa recuerde en todo momento cuál es la posición de cada ladrillo y si está activado está desactivado es decir si la visibilidad es verdadera o es falsa y en base a eso calculamos la colisión y la visualización de cada uno de los ladrillos en este caso yo lo que he hecho es recurrir a una buena costumbre de programador que es que siempre que algo sea verdadero o falso uno equivale a verdadero y cero equivale a falso pero es una convención que yo he usado porque yo he querido la cuestión está en que la convención puede ser la que vosotros queráis por ejemplo yo voy a decir que cada vez que creé una un ladrillo visibilidad en lugar de ser igual a 1 es igual a visible y por esa palabra en el lenguaje que quieras por la palabra que quiera es una palabra que tú eliges lo que he hecho es que cada vez que define un ladrillo el ladrillo en ladrillo visibilidad en la propiedad visible evidentemente sobre ejecutó el programa no va a funcionar los ladrillos porque porque abajo dice 0 aquí esté visible y abajo dice uno y no sé qué es esto para ahora digo que si ladrillo visibilidad es igual a 1 es igual a visible en este caso vuelven a funcionar y ahora el problema es que si hago clic ahí veréis como no lo hace invisible porque porque ahora le digo si las pelotas coleccionan eso quiere decir que la bio visibilidad es igual a visible entonces rebotar a y si no es que al ladrillo heredado cero donde está acero ladrillo visibilidad es igual a invisible recargo y fijaos cómo era el alcaloide vuelve a funcionar pero el cambiado 0 y 1 por visible e invisible cambia lo cambia visible e invisible por lo organiza el chorizo por lo que quieras solo cuando un ladrillo sea longaniza entonces que se vean y cuando se ha hecho hizo que no se vea la emoción es que el nombre de las variables lo decides tú yo te recomiendo poner 1 y 0 porque 1 y 0 todos los programadores entienden que unos verdaderos y 0 es falso pero que en definitiva esa parte específica no es más que una convención puedes poner lo que quieras voy a hacer otra versión de este proyecto es la versión la última era la 6 por tanto 67 y ahora mira me aseguro de haber cargado el 7 tanto del editor como en el navegador no sea que esté trabajando realmente con la versión 6 bueno mira ahora lo que hago es compruebo si la pelota colisiona con los ladrillos digo sí la pelota la pelota post y es menor que los ladrillos estaban dibujados hasta 200 recordáis y sea menor de 200 si la posición de la pelota en y es menor que 200 sólo en ese caso podría hacer preguntas para el 2002 20 si queréis para darle un poquito más de margen si la pelota la posición de la pelota es mayor lo que quiere decir si la pelota está desde aquí hasta aquí no te pongas a hacer preguntas guardo recargo y ahora si todo va bien veréis cómo la pelota ralentizará menos todavía ralentizará porque hay todavía demasiadas preguntas pero habréis que conforme va avanzando el juego no se quedará tan enganchado como se quedaba hasta ahora bien voy a hacer otra pequeña refactorización veréis me pasa lo mismo si os fijáis a ver el juego tienes los conos sensibles tiene la zona de los ladrillos y la zona del jugador así que lo que hago es lo siguiente dónde está la colisión con el jugador pierdo el juego dibujo la pelota dibujo el rectángulo momentos le dibuja a la jugadora conexión con el jugador ahí está mira ahí sí que estaba hecho si la posición de la pelota en y es mayor que 740 entonces mira a ver si estás posicionando o sea no te pongas a mirar si está presionando con el jugador si la pelota está arriba del todo es imposible te estás contando con el jugador si todo va bien ahora el juego deberá ir no ni más rápido ni más lento sino regular igual siempre de rápido que de lento pero todo bien no e irá más regular pero todavía no porque hay alguna cosa que todavía podemos arreglar en este juego vamos a darle un poco de aleatoriedad de este juego y para eso voy a hacer la versión 8 del juego copio y pego hago versión 8 y esa reacción 8 la meto tanto en el editor como en el navegador lo primero que voy a hacer mirar a la función es que la bola siempre rebota porque es que en este juego no puesto trigonometría la bola siempre remota con el mismo ángulo siempre es más 1 o menos 1 bueno una manera de ponerlo aleatorio es lo siguiente mirar cuando la bola rebota en el jugador compruebo la posición del jugador colisión con el jugador mirar cuál es la ventaja que al haber comentando el código así luego sabes qué hace cada trozo si la posición de la pelota de y es mayor a 740 y si la posición es mayor que temporales equis y menor que temporales x más 80 le digo la velocidad de la pelota es menos la velocidad de la pelota más más punto random por lo que queráis realmente por ejemplo voy a prender los 0.5 a ver qué pasa vamos a verlo esto lo primo guardo recargo y probamos ya veréis que poniendo eso cada vez que la pelota rebota veis como la diferente ahora es más horizontal ay perdón pero yo quería hacer esto he cambiado la posición y freno yo lo que quería realmente era decirle que la posterior y se quede como estaba que era menos velocidad y ahora pelota ver x es igual pelota x más horas y más punto random por lo menos 0.5 para que vaya los 3.511 – 1 para que vaya de al menos 0.5 a 0.5 vamos a verlo ay es un ángulo diferente un ángulo diferente para fijar más deprisa en el mismo ángulo venga venga poco a ver veis como ha rebotado por ángulo diferente se ha visto vamos a verlo otra vez y no han cambiado mucho el ángulo pero a medida que vayas jugando pues como está más inclinado abriré que veréis jugando lo que va a hacer es ir variando poco a poco el ángulo otra cosa aleatoria que se puede hacer estamos como respirado otra cosa que se puede hacer es que cuando pierdo el juego pierdo el juego pelota post x la posición sea 400 más más punto random – 0.5 y todo esto multiplicado por 100 por ejemplo por 200 si lo probamos comprobaremos como al perder el juego de perder el juego cada vez va a aparecer en un sitio veis ahora ha aparecido más cielo izquierda vamos a verlo veis le he puesto este puesto no me he puesto 200 le puedo poner 600 para que se note más el efecto me dejo esto aquí y mirad ahora como la variación va a ser mayor vamos a verlo veis ahora incluso incluso le puedo decir en lugar de ser y hacia la derecha hacia la izquierda vamos a ver voy a crear una variable en todo lo que sea juegos la aleatoriedad se usa como me queráis dar dirección inicial de momento no voy a dar ningún valor beige bar dirección inicial y digo vamos a ver aquí está pierdo el juego la atención aquí pero papel es si abren sí más puntos round de más puntos ratón es decir realizó un número aleatorio y lo redondeó recordad que el redondeo de 1 a 0 es igual a 1 entonces velocidad de la pelota es igual a 1 sí no es en ese caso velocidad de la pelota en x será igual a menos 1 lo cual teóricamente hará tiene el 50% de los casos la pelota salga a la derecha y el otro 50 que salga de la izquierda comprobamos voy a dejar que caiga allí izquierda luego la derecha igual que el bloque y ahora vamos a la izquierda a eliminarlo izquierda izquierda derecha y al final es el momento de que bajó a la calle y juego al número cero de la lotería porque como negra uno era cero directamente personalidad de la izquierda así que en definitiva todo lo que sea azar en juegos siempre suele añadir emoción al juego voy a hacer una nueva versión del juego en este caso verso 9 en este caso voy a digamos diseñar una pantalla y para diseñar una pantalla del arca de noé voy a hacer lo siguiente mira voy a ayudarme había una pequeña grieta de un programa de diseño de imágenes lo que voy a hacer es el proceso al arcaico de crear pantallas personalizadas nada nos enseñará el proceso nuevo que es tratando directamente con la imagen pues el proceso todavía no lo podemos ver aquí 10 supongamos que yo en lugar de dibujar un empedrado quiero dibujar digamos un corazón para hacer los ladrillos dibuje en un corazón así que vamos a ver voy a hacer una nueva imagen de no ser 400 por 400 y hago un corazón así que no tendría que buscar un corazón interstate un segundo que me tienen jugar sobre la pantalla y empiezo a contar cuadros creo que aquí había un corazón dibujado la forma las formas estuvimos voy a hacer así algo así ahora sí no y tengo un corazón y ahora quiero dibujar es el tema es el caballo lo pinto de color rojo melo limitó en cuanto a la página del contenido y lo exporta y exportó mapa de bits lo exportó muy bajo bale exportó lo voy a examinar en el escritorio y master web actual al que no hay personal nuevo mi corazón por todo y mira la función melo abril se ha abierto por ahí bajo que no parezcan esto fuera una parte de ésta estoy yo 9 el corazón este alcance y tengo aquí un corazón en píxeles voy a crear una capa nueva estos son cosas que estaremos viendo más adelante en el retoque fotográfico aguas y la capa de fondo las hubo no me deja subir la asignado explicó tampoco dejo subirlas a las bravas con vino hacia abajo con vino hacia abajo y ahora con color brillo contraste para generar allí al final beige corazón a partir de ahí lo que voy a hacer es usar esta parrilla que me dibuja un corazón para averiguar dónde tengo que poner cada uno de los ladrillos bien me voy a dejar el momento se conocen a un lado y voy a retocar él código evidentemente ya no tengo una ya tengo una parrilla de ladrillos así que voy a hacer lo siguiente voy a eliminar el doble núcleo foro y voy a crear variables variable ladrillo anchura es igual a 50 creo recordar iba ladrillo altura es igual a 50 perdona mente a toda la ley otro recordar que a débil pero bien pues lo puede hacer a continuación qué es lo siguiente ladrillo visibilidad mete los ladrillos como matrices realmente no hace falta vamos a parar ladrillo 2 x 1 será igual yo podría decirle el primero por ejemplo donde contamos 1 2 3 4 así que hay 44 píxeles aparecen 4 x el ladrillo anchura el i es igual a 11 por la brillo altura sí no es el primer ladrillo el segundo ladrillo cuento este es un proceso manual e insisto que más adelante se puede automatizar pero no se enseña donde unas herramientas para automatizar lo más adelante veréis que con php puedo una imagen detectar los píxeles que en esa imagen y decirle automáticamente tienes pixel ladrillo no tienes pixel no lo pillo para el procesamiento manual 1 2 3 4 5 pues ahora 5 5 por altura poder 6 por altura y esto lo que ha hecho si todo ha ido bien y ahora ejecutó el juego estamos la versión 9 pero recordad es que mira tengo un ladrillo raro aclaró extra dicho por favor le dicho índice 1 todo el rato índice 2 índice 3 vamos a verlo mirad ya tenemos allí los tres de un ladrillo rojo quedan 60 y 30 porque había que dejar un poco de margen veis y convertido vamos a ver dónde está la imagen aquí está he convertido los tres primeros píxeles en ladrillos o sigamos insisto este proceso manual bastante se puede automatizar esta es la posición 3 4 5 6 7 y 8 creo así que cope 32 estos 4 incluso si podría hacer un bucle forma creo que un segundo quien efectivamente ha llevado un corchete y ni vuestros 3 estos 4 y así con cada uno de los ladrillos esto sería 5 junto a estos 5 5 y 5 666 y va hasta 8 creo recordar 777 y bastante cuando recargo y si ahora vemos en la pantalla bien algo tengo mal dos por lado visión altura algo me he comido aquí también me he comido se corta guardo recargo e mail veis lo tengo casi el 8 vamos a verlo aparece que los primeros no han funcionado 1 2 3 4 4 empezaba en 3 esto debería el aparecido claro es que estos cuatro 5 56 65 6 77 78 88 99 y 9a guardamos recargamos gasión es a esas dos hileras de píxeles esta y esta de aquí son las que acabo de dibujar creando una matriz de manera manual la manera antigua de hecho la manera a la que está programada al mario bros transbordos 30 es esta es crear una matriz donde un diseñador gráfico le pasaba la plantilla a un programador y el programador empezaba a crear una matriz después alguien crear otros meses poniendo números la verdad moderna pero que todavía hemos enseñado el código suficiente como para hacerla es hacer un mapa en una imagen megapíxel adda donde por ejemplo en verde equivale a suelo azul equivale al cielo amarillo equivale de dibuja y un malo naranja equivale a y dibujo no tubería y con un programa que procesa la imagen píxel a píxel y píxel a píxel diciendo es verde suelo es azul acumulada porque es el cielo es naranja dibuja una tubería es amarillo pongo un malo para hacer esto mismo pero de manera porque en cuanto lo veáis tocando la imagen de diréis no hay una manera automatizada dije un programa coja píxel a píxel le pregunté y lo ponga sí pero todavía no lo hemos visto

vamos a trabajar con el gym que es un programa de manipulación de imágenes como podéis ver ahí arriba pero es un programa de manipulación de imágenes basadas en píxeles hay dos imágenes hay dos tipos de imagen que podéis usar en internet unas son las imágenes basadas en vectores y otras son las imágenes basadas en píxeles que son de las cuales nos vamos a ocupar dentro de este programa os voy a hacer una pequeña demostración una pequeña demostración que podéis utilizar con cualquier ordenador mirad en mis imágenes voy a las imágenes demuestran y voy a abrir la imagen por ejemplo del koala pero la imagen del koala una vista previa vista previa por el visor de windows incluso esta imagen está en cualquier windows en cualquier windows 7 y windows vista creo también y la podéis abrir en cualquier ordenador vuestros parece que estáis viendo un koala que parece que visión koala pero no veis koala lo que estáis viendo realmente es una matriz de x y de píxeles que te hace entre que tú ves un koala pero sin embargo cuando yo me acerco al ojo del koala lo que me doy cuenta desde que estoy viendo una matriz una rejilla en x ian y de rectángulos de color cada uno de estos rectángulos es la mínima unidad de construcción de una imagen que se llama pixel y una imagen no puede tener un número infinito de píxeles sino que tiene que tener un límite un número determinado ilimitado de píxeles en este caso fijaos que al acercarme es cuando noto cuál es realmente el efecto que pasa que cuando los píxeles están muy lejanos confunden a mi ojo y le hacen creer que lo que estoy viendo es el ojo de un koala la nariz de un koala la mano de un koala cuando lo que realmente estoy viendo es una rejilla horizontal y vertical de píxeles y así es como funciona cualquier imagen basada en píxeles que podéis encontrar en internet en un ordenador o donde sea de hecho permitirme hacer un inciso tecnológico barra comercial cómo funciona lo que se llama la pantalla retina display de hacer la pantalla de retina display de apple no es más que una pantalla tal que tiene los píxeles tan juntos que tu hijo no es capaz de distinguir los se llama retina display porque teóricamente la pantalla tiene una resolución que tú diste tu retina teóricamente luego la del display es que no nos distingue a x centímetros pero acercas ahí pues evidentemente o lo miras con una lupa evidentemente sí que vas a poder ver los píxeles pero al final la tecnología humana en cuanto a displays desde hace unos 20 30 años funciona en base a píxeles no sé si será el mejor peor método pero el caso es que es el que hay igual en 50 años de otro método pero hoy el que tenemos omnipresente mente es en píxeles y déjame demostrarlo si me decís estamos internet si me decís una imagen defienden algo para buscar coche si buscamos un coche buscamos al que sea vamos a ver vamos a mostrar un coche por ejemplo de este igual que sea oeste para tener un poco de estilo y fijaos qué sé yo ahora amplio la imagen al final es una imagen basada en píxeles aunque chrome esté suavizando los clics él es si os fijáis hombre derecho se me permitís voy a guardar la imagen en el disco duro voy a poner vista previa ya que windows no me hace suavizado si os fijáis como donde yo creo que estoy viendo un coche realmente estoy viendo píxeles vale por tanto hemos visto que las imágenes que hay en internet o están en vectores o están en píxeles así que nos va a permitir el gimp lo que nos va a permitir es editar imágenes basadas en píxeles nos va a permitir dejar de ver imágenes y empezar a trabajar con imágenes o bien modificar imágenes previamente existentes o bien crear desde cero nuestras propias imágenes lo primero que vamos a hacer es descargar el game por tanto para descargar el game si entramos en la página un punto hereje veremos que alva estamos de suerte porque acaba de lanzarse la versión 2.8 que trae algunas novedades con respecto a la versión anterior que la versión 2.6 del anterior de a 2.8 no sé la 2.7 no me funciona un poco para el arma en criatura establecida la de linux y es que las versiones estables tienen numeración parc y las nociones de desarrollo tienen numeración impar por tanto ha habido versión 2.7 pero 2.7 no era para el público sino para desarrolladores por eso digo en los usuarios generales pasamos de la versión 2.6 a la versión 2.8 el caso es que pulso town load me reconocerá automáticamente si vengo desde windows mac o linux otra vez una noticia hay versión de jean para tanto para amar como para linux como para como para windows hay que decir que la versión de mac tiene los mismos que la opción de linux que la versión de windows pero visualmente por la máscara de windows que se va a hacer luego las herramientas son las mismas así que le digo ir o descargar game 2.8 punto 0 instalador para windows xp service pack 3 o posterior hago clic uso este lazo directo y me lo bajo en descargas ocupa poco 72 megas como un poco comparado con el photoshop otros programas parecidos pero volver aquí tras lo cual en cuanto acabe la descarga en cuanto al gym quede completamente descargado en mi equipo procederé al proceso de instalación una vez que hemos descargado y vamos a hacer es pero la térmica de descargas con doble clic empezamos a ejecutarlo empezamos a ejecutar la instalación tras lo cual lo más probable es que en unos pocos segundos nos diga que sí estamos seguros de que queremos ejecutar ese programa bien nos dice como siempre evidentemente que este archivo no tiene una firma digital de microsoft por tanto tenemos que confirmar que lo queremos ejecutar ya que si no de lo contrario este archivo puede destrozar nuestro ordenador y nuestro alma y nuestra alma también pero evidentemente como sabemos de dónde ha salido hoy vamos a decir que sí que confiamos en el editor y que queremos ejecutar a partir de allí elegimos un lenguaje de instalación elegimos el que menos nos duela en este caso mi nivel de inglés es mejor que mi nivel de esloveno así que voy a elegir inglés y voy a elegir install tras lo cual el programa se instalará en este caso en inglés copiando todas y todos los archivos que contiene dentro de la carpeta de instalación que está en archivos del programa windows y los archivos que sean más vamos a ver como la primera vez que instalemos ejecutemos el yen después de instalarlo esa primera vez tardará una barbaridad en arrancar porque porque se podría dar de alta tanto las tipografías que están en el sistema como los plugins que van encontrando pero sin embargo eso no debe asustarnos porque no quiere decir que todas las veces que lo arranquemos voy a tardar tanto como la primera realmente a partir de la segunda vez arranca prácticamente la velocidad del rayo pero es la primera vez vamos a pulsar finish que cuesta bastante de arrancar por tanto acabamos de instalar voy a ejecutarlo lo acabo de ejecutar desde el menú inicio como la pantalla de inicio en el otro monitor ahora lo pongo en este aquí no responde como ya os digo esta primera vez que estoy arrancando puede tardar un poco pero también insisto eso es porque está dando de alta tanto los plugins como las tipografías a partir de ahí la segunda vez sucesivas tardará cada vez menos lo primero que vamos a ver en esta versión 2.8 hace tiempo que se esperaba esta versión es que jim desde siempre prácticamente ha sido un programa que se diferenciaba de photoshop en cuanto a que todas las ventanas son flotantes y eso quiere decir que en el game de inicio hay tres ventanas que son la ventana del proyecto la ventana de caja de herramientas y opcionalmente la ventana de paneles acoplables como por ejemplo capas pinceles o en el deshacer o trazos otra vez y nuevamente trazos vectoriales o proseguir o el extra historia deshacer o capas con canales sin embargo esta manera de trabajar con tres ventanas flotantes a mí desde siempre me ha gustado mucho pero hay gente a la que le molesta bastante y hay gente que echa de menos la manera de trabajar de photoshop donde todo está integrado dentro de una única ventana bueno pues empiezo contando una novedad de esta versión 2.8 y es que si me voy a el menú de ventanas encontraré al final que hay un modo llamado un modo de ventana única el modo de ventana única en lugar de mantener los paneles flotando unos por encima de otros lo que hace es asegurarme a que los paneles crack automáticamente se quedan aliados dentro de la ventana principal de esta manera no tengo ventanas flotando y una para las otras sino que tengo en las ventanas anidadas dentro de una misma ventana a la vez tampoco es demasiada diferencia porque normalmente la gente no trabaja en el gym lo que hace es que se pone la ventana de caja de herramientas por aquí y la ventana de capas para interesar por aquí así que al final es la misma distribución tener un poco automatizado otra cosa que os voy a decir como veis es salir del modo de ventana única voy a usar el modo de ventana flotante del tradicional es que a mí me gusta más el método de entrada tradicional porque miran a diferencia de photoshop por ejemplo que esta ventana se puede redimensionar y al redimensionar según el monitor que tenga yo puedo elegir cuántas filas y cuántas columnas de herramientas quiero ver de aumento lo voy a dejar en tres herramientas por columna cada uno que elija en la interfaz que quiera cada uno que elija a la altura de herramientas que quiera pero voy a trabajar con esta interfaz que básicamente consiste en tener en la parte principal del fondo la caja de herramientas a la izquierda la caja de ventanas acopladas y tal vez más adelante cambio de interfaz según se desarrolle el curso si por lo que sea habéis perdido la capa de la ventana de paredes acoplables como capas pinceles porque por lo que sé a vosotros u otras personas en un momento dado ha hecho clic aquí mira la ha cerrado no pasa nada porque la podéis abrir en cualquier momento así que voy a ventanas y voy a empotrables cerrados recientemente oa diálogos empotrables y en este caso lo que voy a hacer es el botones cerrados recientemente y en principio de distraer por ella y capas canales rutas y deshacer nos lo cual abro y lo vuelvo a recuperar lo que estamos voy a contar otra novedad para los que vengáis de gym 2.6 era antiguamente la ventana real de jim era la ventana de caja de herramientas eso quiere decir que si tú cerraba la caja de herramientas se cerraba el programa sin embargo ahora ya no ocurre así sí ahora cerró la caja de herramientas el gym no se cierra porque ahora la verdad real de jim es la ventana del documento si me apuráis como tenía que haber sido siempre pero bueno así que en cualquier momento si perdéis también la ventana de herramientas siempre puedo encontrar el seleccionado recientemente volver a abrirla como en caja de herramientas básicamente siempre que cerráis una ventana la podéis volver a abrir desde ventanas momento lo que ha hecho vamos a abrir el pack no lo vamos a usarlo hasta dentro de un rato pero veréis que de otras formas en ventanas en llegamos empotrables tenemos capas canales rutas colores punteros tenemos todo aquello que contiene esta carpeta anidada de momento insisto dejarlo a la derecha y está dentro de un rato nos los haremos vamos a empezar trabajando con el gym y lo que vamos a hacer en primer lugar como prácticamente en cualquier proyecto de kim es hacer un archivo nuevo o abrir un archivo previamente existente evidentemente aquí es un programa que sigue la filosofía de cualquier programa basado en ventanas donde encontraréis un menú de archivo un menú de editar seleccionar vista y luego ya evidentemente menús específicos del programa como imagen capa colores etc voy a ir a archivo y aunque podría empezar creando un archivo nuevo que así que me interesa más empezar abriendo un archivo previamente existente para que veáis las cosas buenas y las cosas no tan buenas que tiene el game voy a pulsar por tanto archivo a abrir cuyas teclas rápida es control pop las teclas rápidas como veis están estaba en inglés control logo de opel y lo primero que voy a abrir que lo primero que voy a ver en principio malo es que el gym tiene su propio menú para abrir archivos veis que no es el típico selector de archivos de windows sino que es un típico un selector de archivos específico de jim pero a la vez es bueno porque este es el lector específico es igual en windows el mar y en linux quiere decir que luego te cambias de dar la forma y el selector de archivos es exactamente igual tenéis a la derecha eso si vamos a entrar en pitchers hacer click dentro de pitchers para entrar en las imágenes de determinadas voy a entrar para allá no tengo no tengo las imágenes determinadas enfermar con sangre cuando comencé para hacer la cosa atención de haber prosperado de windows voy a entrar en imágenes tengo las imágenes de muestra las voy a copiar en el escritorio parece una carpeta llamada imágenes de muestra y ahí voy a copiar todas las imágenes que hay dentro de esa carpeta imágenes de muestra de manera que ahora podremos ver mira a escritorio imágenes de muestra pudiera recargar archivo abrir escritorio y puedo ir ahora imágenes de muestra donde podría haber cualquiera de las imágenes que tengo te dentro de esa carpeta ahora sí os voy a decir que si es esta la noticia y es la interfaz específica por cierto que si queréis importarme a imagen y antes de importar la imagen ver una vista previa simplemente tenéis que hacer clic en la imagen hacer clic pulsar para crear la vista previa y se crea por tanto veis pulso de ser no se creara esta previa pero hago clic aquí y se crea automáticamente por automáticamente no manualmente una vista previa bueno lo que os decía atención mirad es que abajo en principio no tenéis porque seleccionar el tipo de archivo porque se detecta automáticamente sin embargo podéis hacer clic aquí dentro para poder visualizar la gran cantidad de archivos a gran cantidad de formatos de archivo que soporta alguien voy a hacer un pequeño resumen pero básicamente os diré que el formato nativo el formato específico del jin así como el photoshop es el psv engine es un formato de imagen llamado x cf siempre que veis en la imagen xtf es una imagen propia del equipo aparte de eso podemos abrir archivos de intercambio como por ejemplo la animación flick de autodesk hace como cosa de 15 o 20 años que nosotros en formato así que tampoco os preocupéis demasiado archivo en windows meta file de microsoft datos de imagen en bruto binario documento en pos de escribir enlaces de escritorio iconos de microsoft windows esto es una cosa que hace qué hace bien que no hace el photoshop y es que photoshop crea iconos de microsoft windows e iconos del favicon de páginas web y podemos por supuesto trabajar con formatos clásicos como el formato ppp el poner formato tiff el formato y disney silicon graphics que no recomiendo usar para nada imágenes en jpg un clásico imágenes en jp es 2009 usa que si está bien imágenes en png en plm imágenes picks de alias no se usan hace 15 años imágenes the sun – todavía imágenes svg tipo targa x bitmap y un montón más de formatos que no os vais a acabar quiero decir básicamente es que no creo que tengas las imágenes en un formato que no soporte el bien primera igual en qué formato tenía las imágenes porque lo vas a poder meter y trabajar dentro de iu y fijaos que es incluso jim hasta acepta archivos pdf y sobre todo lo que me interesa enseñaros para que os quedéis tranquilos que se me ha perdido un poco por aquí y por aquí debe estar hoy y si con gimp vais a poder tanto a abrir como guardar archivos en formato psd es decir archivos en formato photoshop que pase si estoy haciendo un archivo en photoshop y lo quiero continuar engine vos te abres el archivo psd y continúas qué pasa si empieza un proyecto en el gym y de repente se me queda pequeño y quiero seguirlo el photoshop pues los guardas como psd y el photoshop lo vale si continúas trabajando a partir de ahí así que no hay mucho problema específicamente con los formatos bueno en este caso lo que quiero hacer por tanto es seleccionar una de las imágenes de arriba voy a seleccionar por ejemplo los pingüinos que me gustan mucho ojo no puedo decir que ven los pingüinos y que es un formato psb por tanto voy a un formato jpg en wind en jpg pulso sobre abril tras lo cual en un segundo quizás menos el programa me haya abierto los pingüinos en la pantalla como veis dea pero no lo voy a cambiar simplemente deciros que las cajas de herramientas se me quedan flotando por encima de los pingüinos hay a quien le gusta hay a quien le molesta si elijo ventanas modo de ventana única veis como nada flota encima del otro sino que tengo una ventana otra ventana y otra ventana previa opinión al final al final básicamente es lo mismo quiero decir en definitiva es que escojáis la interfaz de trabajo que más os guste para que tenemos esta imagen en la pantalla vamos a trabajar con ella y vamos a empezar haciendo las dos operaciones más básicas y más necesarias que realizaremos durante nuestro trabajo en fin es en primer lugar el zoom el zoom localiza dentro de este icono de lupa no me voy a molestar en deciros en que en fila y columna está porque filas y columnas pueden cambiar según el número de herramientas por por fila que tengáis simplemente os voy a decir que busquéis una herramienta como ésta lupa donde si pongo el ratón encima pone herramienta de ampliación ajustar el nivel de ampliar fuerte equivale a la herramienta de lupa de hacer zoom sobre la imagen simplemente cuando tengo la herramienta de lupa activada atención mira cada herramienta que seleccione jce daos cuenta que aquí abajo tendrá unos parámetros qué parámetros tiene esta herramienta tiene ampliar y reducir por si yo hago clic me acerco es apolítico del pingüino más grande hasta que evidentemente ya un mentón que veo los píxeles si yo me quiero alejar la opción más sencilla es pulsar reducir y hacer clic voy a traer a hacer clic la imagen se me ha quedado un poco de esta entrada bueno os voy a decir a continuación teclas rápidas para manejar la panorámica y para manejar el zoom no es que recomienda trabajar con teclas rápidas todo el rato en el equipo pero hay herramientas que se usan mucho por las cuales sí que voy a recomendar estas teclas rápidas mirad igual que en photoshop si yo estoy aquí impulso y mantengo pulsada la barra espaciadora del teclado pulso y mantengo pulso a la barra espaciadora y ahora nuevo la imagen si os fijáis no queréis ver la imagen de un abajo como lo he hecho otra vez lo que es pulso y mantengo pulsada la barra espaciadora y ahora sin hacer clic con el ratón no hago clic con el ratón nuevo la imagen el ratón y la imagen se mueve junto con el ratón pero no hace falta hacer clic con el ratón sólo hay que pulsar y mantener pulsado la barra espaciadora y saberes como veis la tecla rápida para la herramienta llamada panorámica la panorámica ojo realmente nos ha metido un poquito no estoy moviendo la imagen es que se está moviendo soy yo pero este momento de la imagen estoy moviendo mi cabeza alrededor de la imagen la herramienta rápida para hacer zoom mirar voy a hacer clic dentro de este rectángulo dentro del primer rectángulo que es la primera herramienta la primera la herramienta rápida para hacer zoom miran es letra zeta si yo pulso la zeta automáticamente cambio a el zoom y mirad mirad mirad si hago clic me acerco si me quiero alejar no hace falta que pulsa aquí reducir simplemente pulso control clic y control control clic hacer el contrario sí con clic me acerco con control clic me alejo otra cosa muy divertida del zoom es que si en lugar de hacer clic pincho y arrastró a una zona de selección y me acerco justo a aquella zona que quiero ver y esto es lo que tenéis que hacer con una máxima soltura quiero ver el pico tiene el ojo de este pingüino ni siquiera un click arrastro y veo el ojo del pingüino y luego si me quiero alejar control clic y me alejo y luego a recordar que estéis donde estéis si pulsáis letra zeta de zoom entráis automáticamente en la herramienta de la lupa a continuación voy a alejarme un poco de la imagen y voy a empezar a pintar para pintar usaré algunas de las herramientas que encuentro dentro de la caja de herramientas de la izquierda no voy a empezar por arriba porque la parte de arriba son las herramientas de selección de las cuales hablaremos más adelante pero voy a empezar por estas de abajo que son las herramientas de pintura la primera es con la que voy a empezar esa herramienta del lápiz -evidentemente beer decidido por un icono que es el lápiz no confundir con la brocha que es el icono que hay a continuación elegir el lápiz el que aparece como un lápiz de madera y lo que voy a hacer en la pantalla simplemente voy a destrozar un poquito el dibujo de los pingüinos voy a hacer clic y arrastra atención clic y arrastro y dibujo un trazo voy a explicaros cuáles son los parámetros que gobiernan el comportamiento de ese plazo por supuesto eso sí que lo sepáis atención en el gym deshacer es como en cualquier programa o editar deshacer la bici en este caso o pulsar control z pulsar control z para deshacer ese trazo mira siempre que dibujo tengo aquí dos recuadros de color que me indican el color del frente arriba a la izquierda y el color del fondo abajo a la derecha si dibujo con el lápiz estoy dibujando con el color del frente por eso voy a elegir un color aquí dentro como puedo elegir un color simplemente para cambiar el negro por cualquier otro color hago un click dentro del color negro y sale el selector de color que voy a encontrar dentro del equipo el selector de color de gimp como prácticamente cualquier selector de color de cualquier programa que conozcamos trabaja con varios sistemas a la vez tenemos por una parte el selector manual tengo por aquí dado un color tengo su negrura y su blancura y tengo por supuesto aquí el selector de tonos de color de esta manera puedo seleccionar un color de manera intuitiva rápida pero poco precisa directamente habéis observado que cada vez tiene un color aparece también cómo va cambiando en tono saturación y valor hig saturación y valium o bien mediante los componentes de rojo verde y azul y además también veréis cómo incluso para web nos dice cuál es la anotación de html del color que hemos elegido por defecto tenemos el sistema de color de jim que es el que usaremos prácticamente en la gran mayoría de ocasiones tenemos también sistemas relativos como color de impresora ya que podremos trabajar en sueña y acá pero si la gran mayoría de ocasiones lo que hacemos es convertirlo a régimen así que por eso os recomiendo trabajar con el sistema rgb de kim podemos trabajar también con sistema de color el sistema de color saturado con la rueda de color que es lo mismo que este sistema pero en una rueda de hamás aquí tenía cojo un azul azul saturado azul negro azul blanco y aquí cambio colores pues aquí en la rueda aquí cambió colores y si cojo el azul azul va hacia negro azul va hacia blanco es lo mismo simplemente de otra manera y evidentemente todo no saturación y valor rojo verde azul se mantiene igual y luego una paleta de colores predefinidos que podemos usar para reaprovechar colores dentro de un proyecto de gimp lo que vamos hacer por tanto es seleccionar un color usando el selector de color de jim por ejemplo que seleccionar un piano veis que hacían es rojo a nada verde y azul a tope y aceptamos tras lo cual a partir de ese momento todo lo que dibuje se dibujará del color que haya seleccionado hemos hablado de cómo seleccionar un color dentro del selector de colores pero a partir de aquí os voy a decir que los parámetros que tenemos aquí abajo los parámetros gobiernan el comportamiento de la herramienta que esté seleccionada así que por ejemplo si seleccionado el lápiz veremos cómo tengo un modo de selección normal puedo disolver puedo pintar detrás puedo solo clarear veis como no pinto si no aclaró lo que hay detrás puedo dibujar por pantalla también aclara puedo multiplicar veis solo dibuja en las zonas más claras no en las zonas más oscuras más adelante veremos cuál es la diferencia del significado de la mayoría de estos métodos de trabajo solapar pintas sobre las zonas oscuras no en las zonas claras voy a dejarlo de un momento en normal la opacidad si están haciendo el trazos completamente o pactos si bajó la opacidad el trazo será transparente lo veis el trazo se funde con el fondo cuanto mayor sea el valor de opacidad menos transparencia elijo al pincel que quiera puedo pintar con peter le pinta pinceles redondos puedo pintar con pinceles cuadrados puedo pintar con pinceles de ruido puedo pintar con o sole mio’ puedo pintar con pepinos como no si no alguien no serviría para nada puedo pintar con brochas puedo pintar con prácticamente cualquier cosa voy a dejar la brocha redonda puedo cambiar el tamaño fijaos puedo decir un tamaño más grande puedo elegir un tamaño más pequeño si me cuesta afinar puedo hacer doble clic y edito directamente el valor del pincel puedo reiniciar o dejarlo al tamaño nativo haciendo clic en ese botón puedo cambiar la proporción de aspectos veis como el pincel es redondo absolutamente redondo si yo cambio la proporción de aspecto veis cómo lo hago más ovalado puedo hacerlo ovalado puedo hacerlo ovalado vertical y luego evidentemente con ángulo puedo girar los 45 grados todo definitiva tocar cómo se comporta ese pincel y luego además podremos observar como si tengo una tableta digitalizadora podría usar los parámetros de presión de la tableta para que se interprete como opacidad como anchura como lo que yo quiera tres parámetros últimos que se aplicó jeter mejor dicho si no aplicó jitter el parámetro es completamente recto en cambio si aplicó jitter el parámetro del trazado un poco de mientras un poquito el trazo tendrá un poquito de aleatoriedad la brisa y luego tenemos incrementar la atención recoger un color rojo voy a pintar a un tercio de la transparencia miraba atención pintó s1000 transparente de cierto voy a decirle que más incremental pinto es transparente pero pasó por encima y no voy añadiendo más color eso no puede ser así si le pintó con acuarela y pasó varias veces por un mismo sitio ya terminó por incrementar lo que hace es esto precisamente incrementar lo que hace es que si yo vuelva a pasar por aquí se pone más rojo lo veis más rojo más rojo para que las zonas por las que pasó varias veces se pone más rojo es un poco modo plastidecor por tanto incremental suele ser bastante recomendable cuando quiere obtener efectos realistas una pregunta muy común suele ser cuál es la diferencia entre el lápiz y la brocha la diferencia que queréis que os diga es bastante poca voy a pulsar el siguiente botón que es el botón del pincel que es el que tiene evidentemente un trazo de un pincel así que clic aquí dibujo y si ustedes hayas parecido pero no es igual al lápiz porque mira si yo dibujo con el lápiz veréis que los trazos del lápiz son muy duros o es rojo pues la imagen original pero no hay términos medios en cambio si selecciona el pincel y pinto veréis como el pincel tiene unos bordes difuminados suavizados en los límites del pincel por tanto cuando queráis pintar con dureza seleccionado el lápiz cuando queráis pintar con suavidad si queréis producir una manera con más control usar el pincel en la gran mayoría de los casos acabaréis dibujando con el pincel y no con el lápiz una herramienta que tenemos también por aquí cerca del dibujo es la herramienta de aerógrafo arian que no lo he dicho los parámetros del pincel son los mismos que los del lápiz por eso no me para dominarlos porque sin salirnos del lápiz ya sabéis también los del pincel el aerógrafo nos permite pintar simulando un aerógrafo de tinta y aire gran canción pinto utilizamos como la veremos a fondo y la característica a mirar a la pantalla es tiempo para pintar de rojo heladero grafos con una pistola que va lanzando poco a poco pintura sobre el papel mira lo que hago atención pinto pinto pinto y se de repente me dejo el cursor parado ves cómo voy pintando más voy como echando más pintura pinto pinto dejó el botón quieto pulso el ratón el botón del ratón pulsado y veis cómo voy dejando hay una mancha de pinturas a diferencia de el aerógrafo con respecto a en el pincel o el lápiz es que estoy simulando este aerógrafo mediante aire va dando tinta poco a poco al papel veréis que además se añaden unas cuantas opciones un par de opciones tales como tasa y como un flujo hecho mucha poca o mucha poca pintura bueno pues fijaos que aquí si le digo que aumentó el flujo en poco tiempo he hecho más pintura si redujo el flujo produzco el flujo es que reduzca la cantidad de pintura que estoy lanzando son dos parámetros por tanto que me ayuden a simular la cantidad de pintura que estoy usando con este aerógrafo vamos a trabajar sobre la herramienta de texto que es la herramienta que nos permite crear tantos rótulos de texto artístico como texto de párrafo dentro de una imagen y para usar el texto tengo que usar esta herramienta que tengo aquí representada por una letra a mayúsculas hago clic dentro de la herramienta y para empezar creando un texto voy a hacer clic y arrastrar para dibujar el área de texto con la que trabajar en pantalla dentro de ese área de texto lo que había simplemente es escribir mira hola soy un texto y al empezar a escribir al empezar a escribir dentro de esa área comprobaréis como aquí arriba se rellenan los parámetros que gobiernan el comportamiento del texto empezando atención por la fuente la fuente le permitirá ahora en cuanto se puede editar cambiar la fuente tipográfica que también podré cambiar aquí en tipografía esto representa el tamaño si la fuente es negrita exclusiva o las distancias que tiene la imagen esto de todas formas atención lo vas a poder cambiar mejor mira dentro de los parámetros que tenéis en la ventana de la izquierda por tanto si quiero cambiar la tipografía del texto voy a hacer bien termina la función para ti que te lo cambio assange bolt lo cambio a itálica veis está impulsando en esta letra a saltador doble a y cambio por tanto la tipografía cambio la familia tipográfica del texto cambio la familia tipográfica evidentemente entre aquellas familias tipo gráficas que estén instaladas en mi ordenador que pueden ser diferentes de las familias tipo gráficas que estén instaladas en vuestro ordenador cambio también el tamaño por defecto en píxeles lo puedo también cambiar en pulgadas milímetros puntos ticas prácticamente nada de eso tiene valor lo que mis valores cambiarlo en píxeles puedo elegir si quiero usar la antigua editor voy a decirle que no si el texto lo quiero alisado es decir si los píxeles se funden con el fondo por defecto es decir que sí si quieres recalcular el ginting de la letra por defecto poner el completo el color de la letra por supuesto azul cuando cambia la letra a cualquier color la justificación centrada izquierda-derecha o justificada sangría interlineado sí hecho texto de párrafo y separación entre letras como veis herramientas que nos van a permitir crear prácticamente cualquier tipo de texto que tengamos en mente dos herramientas de dibujo un poco agresivas pero que luego las completamente haremos con las herramientas de selección son las herramientas de rellenado la primera de ellas la podéis encontrar dentro de este cubo de pintura así que seleccionó el cubo de pintura y ahora selecciona el color rojo y relleno ya puestos cruza un poco los dedos lo que hace el programa es que me rellena todo eso de rojo y a partir de aquí nos empezar a surgir preguntas porque me ha rellenado eso porque no me ha rellenado más que este color azul porque no me ha rellenado toda la pantalla bueno voy a pulsar control z para deshacer y la respuesta la tenéis aquí abajo por supuesto opacidad relleno con color de frente rojo no me tenéis con color de fondo blanco relleno con patrón lo veremos más adelante pero sobre todo aquí abajo atención me dice rellenar área afectada yo puedo elegir si quiero rellenar la selección completamente atención hago clic se me rellena todo de rojo hola amigo por la mano no me lo rellenes todo completamente rellena me con las similares claro pero sabéis qué pasa que es similar y que no es similar sobre esto el kilo de fides así que yo nombrar de blanco y negro que es el que prince para ti que es padecido y que no lo es mirad porque creo que ustedes dando cuenta que aquí hay un azul y conforme vas cayendo hay otro azul diferente no vaya momento bien o similar luego os voy a decir otra cosa pero no os preocupéis por esto demasiado y el remo está delante de ello y es que nosotros lejos podéis creer que este color azul es igual pero no no hay dos píxeles que sean iguales de azul bueno pero esto ya lo trataremos más adelante voy a por tanto rellenar y decir que el umbral es muy alto y pincho y veréis como cada vez voy llegando más hacia abajo pero como voy a pasar no pues bien está bastante bien llega un momento que es que incluso el pingüinos aparecido aquí ya hay que tener cuidado evidentemente hay eso es un infierno de pingüinos hay otro rojo bien le puedo decir que el umbral sea más pequeño con lo cual me reconocerá sólo aquellos píxeles que sean exactamente iguales así que bueno básicamente deciros qué podéis elegir la similitud de colores para rellenar ya sabéis que cuando queréis deshacer lo que tenemos que hacer es control z para deshacer el último o los últimos cambios y ya que estamos aquí y mirad hay otra herramienta que a mí me gusta mucho la atención qué es la herramienta que tenéis al lado que pasa muy desapercibida que es la herramienta de mezcla que realmente se debería llamar herramienta de degradado a un clic y atención atención todo es la pantalla la herramienta de viagra dado funciona haciendo clic y arrastrando para dibujar una línea donde hará un degradado desde rojo hasta blanco en este caso porque el degradado está de rojo a blanco lo veis lo divertido por supuesto se puede jugar con opacidad evidentemente lo divertido de una parcela de acción es que el yin tiene una barbaridad de degradados preconstruidos mirada la pantalla seamos clic en él se degradó podría obtener la gran cantidad de degradados que brillan incorporados dentro de kim muchos de ellos nos pueden servir para muchos proyectos mira tengo un color de frente a fondo un color de hb seguro hsv por aquí puedo dibujar de frente a fondo del color que tengo en el frente y en el fondo que tengo rojo y blanco por rojo y blanco que tengo azul y blanco azul y blanco que tengo azul y verde post azul y verde pues todos elegidos se han degradado no voy preconstruidos como por ejemplo abstracto abstractos 2 3 y 4 tengo blind que es como las persianas son estas playas americanas que son persianas que se pueden girar para que entre más o menos luz azul marino papel que se quema a cero frío no penséis que ellos compartidas sino que esto para diseñar botones para la web os va a ser de una utilidad increíble verdad o por defecto ahora lo vamos a una demostración flores cuatro barras horizontes te encanta y horizonte de mar tierra horizonte de tierra y luego empezamos con ojos por ejemplo vaya han quitado lo han quitado me lo está pareciendo a mí dorado antes estaba la bandera alemana la bandera de méxico y alguna otra bandera veo que esta 2.8 han quitado las banderas para ver que esto es lo que se dice no opone todas las banderas una parte ninguna realmente no se dice así se dice más grosero pero voy a decirlo así así que bueno en definitiva y ahora luego veréis más adelante como las herramientas de degradado nos pueden servir para hacer elementos para internet voy a hacer un ejercicio en el cual los voy a demostrar porque el gym en una primera demostración de porque alguien os va a servir para hacer cosas para nuestras páginas así que hubiera un archivo nuevo un archivo nuevo y voy a hacer una imagen que tenga que ver con la forma de un botón fijaos que en este caso no quiero abrir una imagen sino que me tiro yo pre construir una por tanto un botón yo puedo decir que más o menos podría tener pues que divide yo unos 100 por 50 píxeles más no porque para que también depende del diseño opciones avanzadas qué color quiero de fondo pues como un color de fondo no tiene el color de fondo quiero blanco y espacios de color evidentemente beige aunque los problemas parece que me permitan trabajar ingeniería al final el jeep se puede trabajar en el región euro escala de grises evidentemente quiero trabajar en el relieve acepto tengo ahí la imagen y ahora voy a seleccionar los degradados dónde voy a seleccionar por ejemplo un gol de style y lo voy a dibujar con una capacidad menor dos opciones pues algo así y tengo y tengo por aquí el fondo de una vez así que ahora yo voy a archivo ya que estamos atención a la pantalla anteriormente en el game 2.6 y anteriores para guardar una imagen en cualquier formato tenía que ir a archivo guardar como pero ahora ya no en esta versión de quintos punto 8 yo elijo guardar como solo voy a poder guardar en formato xtf o formato comprimido como guardo yo un jpg como guardo yo un png ahora tengo 2.8 se hace con exportar cuando guardas guardas en el formato nativo de día cuando exporta se exporta a cualquier formato que tú quieras así que elijo exportar voy a la carpeta escritorio master bueno actual voy a crear gran carpeta llamada aquí y voy a guardar esto con el nombre fondo fondo png después yo ahora lo que voy a hacer es lo siguiente vamos a revisar esa carpeta en esa carpeta escritorio en master web actual llamada de un fondo prg cierto tengo una imagen y voy a hacer un archivo index.html un hábito bolt en el body digo que será un botón y de botón ya sabes que con javascript cualquier cosa se puede convertir en un botón hola soy un botón y ahora al gel aplicando una etiqueta de estilo [Aplausos] digo todo aquello que tenga el botón me lo vas a maquetar con wheat es igual a 200 píxeles height es igual a 50 píxeles y el background va a ser igual a de l cómo se gana esta imagen fondo punto png aplicó a bruce a la imagen en el navegador fijaos ahí hola soy un botón pero es que no ha acabado porque yo ahora digo que el phone 6 es igual a 32 píxeles del font family es igual a areal el text align es igual a center creo que me pasaba 16 píxeles 24 píxeles el pavimento es de 5 píxeles y lo que es más divertido incluso podré decirle por de radios de 15 píxeles border de los píxeles sol y dubai y pulmón salud pero persones interdicciones 25 píxeles [Aplausos] lo que hecho por tanto hoy tendréis conmigo es un botón como podía yo hasta ahora dibujar el fondo degradado pues no podía realmente es que podría propongamos pero lo que he hecho es crear un fondo degradado la imagen engine y usarla en css para en este caso crear un botón en un botón y luego evidentemente en javascript haré que haga lo que yo quiero realmente no has hecho un botón para recordar es igual a este nombre 2 con jota juego y ahora vivo voy a hacerlo a lo difícil si queréis ya que estamos digo cuando el documento que esté preparado ejecutas una atención sin parámetros se va a decidirte cuando haga clic en aquello que tiene el botón ejecutas sobre tu otra función qué iba a hacer a leer hola y si todo ha ido bien cuando hago clic decía hablando veis por tanto como combinando html css y javascript consigo un botón pero es usando guim donde voy a poder crear los recursos de imagen de diseño que necesitaré para esos elementos lo que voy a hacer a continuación es jugar y aprender a manejar las herramientas de transformación por eso voy a ir a archivo voy a abrir y voy a abrir una de las imágenes con las que quería trabajar como por ejemplo pues voy a trabajar con él jellyfish de trabajar con la medusa así que seleccione la medusa mirada atención de la pantalla clic y puede parecer que la medusa no se ha abierto esta es una mala costumbre que tiene el ying y es que hay veces que cuando va robando de loable por detrás formando cuartos pase simplemente iros al menú de inicio y los al menos de inicio y mirar si alguien esconde más ventanas allá abajo donde ponga alguien y pedir pulsando hasta encontrar la ventana que corresponda a la que nosotros habéis pedido abrir bien con esta imagen abierta mirar voy a trabajar sobre unas herramientas llamadas transformación empezando por esta herramienta de aquí de hecho me voy a alejar me voy alejando y voy a empezar por esta herramienta de transformación representado con cuatro flechas esa herramienta si yo hago clic arrastró mirando la pantalla luego que el que arrastro lo que hago es mover la imagen ya no me estoy moviendo yo ya no estoy moviendo mi cabeza ahora realmente estoy moviendo la imagen veis por tanto como la herramienta de mover la herramienta del cruz de flechas es una herramienta que me permite desplazar los objetos esta herramienta va en combinación con otras herramientas que pensé a continuación como por ejemplo la herramienta rota la herramienta de rotación hago clic en esta herramienta es como una caja que pega la vuelta dentro de la otra le permite atención pinchando y arrastrando rotar la imagen fijaos que al hacer clic y arrastrar aparece una rejilla de rotación y además aparece una ventana flotante con la cual puedo elegir tanto el ángulo con precisión y puedo elegir o elegir para rotar como el centro de rotación como las coordenadas x y del centro de timote del centro de rotación para esa imagen si estoy contento con la rotación pulsos con rotar si quiero volver a empezar pulso reiniciar y si directamente me arrepiento pulso sobre cancelar para cancelar la anotación otras herramientas de transformación de las que disponemos mirado son por ejemplo a continuación la escala la escala me permite hacer un objeto más grande o más pequeño fijaos que tengo deslizadores en las esquinas y deslizadores en cada esquina y deslizadores unidimensionales de altura y de anchura una vez más cuando queráis o bien pulsáis reiniciar o bien cancelar o bien si estáis de acuerdo con la escala pulsas el botón de escala para que se apliquen los cambios voy a pulsar control z para volver a la imagen original el siguiente botón es el botón de si es el botón de distorsionar de forma real este es de los que menos se usan simplemente hago clic arrastro y parece que la imagen coge velocidad este social en x y si queréis incluso venir bien en este caso aparece que la fifa ya no es tan cierta mucho la siguiente herramienta es útil cuando es útil te quiero decir que no se usa casi nunca pero cuando se usa viene bastante bien que es la herramienta de perspectiva atención con las galletas de perspectiva en cuanto hago un click aparecen cuatro deslizadores de perspectiva que van a permitir simular una perspectiva tridimensional de esa imagen veis parece que la imagen esté situada sobre un plano simplemente porque estoy trabajando esa perspectiva con cuatro puntos pulso sobre transformar mira y parece que la imagen esté en un plano en perspectiva sobre la pantalla no se usa demasiado pero para cuando se usa para cuadros desde realmente viene bien porque verón era muy fácil te permite transformar te permite dar perspectiva a ese objeto y luego dentro de la última herramienta para este vídeo es la herramienta simetría la herramienta simetría te permite haciendo clic y arrastrar hacer una simetría en este caso en x ahora veremos cómo también se puede hacer incluso en y hace un rato que accidentalmente he perdido los parámetros del cuadro de diálogo de potable por tanto cuando estoy en simetría aquí me podría decir si quiero elegir entre simetría horizontal o simetría vertical por el caso es que he perdido el cuadro de diálogo probablemente nuestro siglo secas básicamente yo os voy a decir que cuando perdáis algo cuando se os cierre algo y no sepáis de dónde sacarlo ir a buscarlo a ventanas están en ventanas así que fijaos que en este caso de diálogos empotrables voy a encontrar vamos a ver pudiendo encontrar por ejemplo caja de herramientas la tengo aquí voy a poner capas pinceles y en caja de herramientas diálogos empotrables voy a encontrar aquí mira en diálogos empotrables opciones de herramientas me aparece por tanto las opciones de la herramienta que siempre han desaparecido pero claro me aparecen como una ventana diferente fijaos lo que pone puedes soltar aquí los cuadros los diálogos encontrables pincho arrastro lo suelto aquí vamos a ver aquí suelto aquí y bueno si no siempre puedo vale sobre eso vamos a ver el botón aquí muy bien fijar la pestaña de empotrable vamos a probarlo no claro en este empotrable no pasa nada debe ser un fallo del sistema sino lo que puedo hacer viral es algo tan sencillo como la ventana y dejarme el aire bien ahora lo que haré ahora así como vosotros es puedes pulsar sobre vertical y fijaros que ahora si me permite dar la vuelta a la medusa en vertical por tanto con esta herramienta puedo elegir voz de horizontal o board o volteo vertical para el elemento de imagen con el que esté trabajando vamos a orar a trabajar con selecciones las elecciones en principio no sirven para nada porque no son herramientas en sí del dibujo pero son herramientas de apoyo al dibujo las herramientas de selección las tenemos arriba de todo en la caja de herramientas y vienen representadas para empezar con la herramienta recta q la mirada atención selecciona la herramienta rectangular y en la imagen en la que está trabajando en estos momentos no queremos pinchar y arrastrar para dibujar una zona rectangular lo que tengo aquí no es una zona de selección es una zona de preselección se me está preguntando si realmente quiero esa zona o gracias a los tiradores de esquina si quiero redimensionar la bueno en mi caso lo que voy a hacer mirar es convertir la zona de preselección en una zona de selección simplemente pulsando el botón enter el botón enter me permite aceptar la zona de selección pero ahora tiene una buena noticia una mala noticia por parte del gym y es que esa zona de selección se puede rehacer se puede modificar si yo ahora hago un clic dentro de la zona de selección le estoy diciendo el programa que quiero volver a editar la selección en cuanto vuelva al pulsar enter volvería a aceptar la selección es decir no tengo por qué rehacer sino que puedo modificar la selección tantas veces como quiera simplemente haciendo un clic dentro del recuadro de selección para entrar y pulsando enter para salir dentro de la zona de recuadro en toda la zona rectangular de selección voy a encontrar que mira voy a encontrar que hay unos modos de selección normal selección sumada selección restado o selección interceptada abiertos la pantalla con la selección reemplazada si yo dibujo otro cuadro de selección pierdo el anterior con la selección sumada si yo dibujo a otro cuadro de selección se suma a la anterior no veis cómo se sube con la selección resta da si el dibujo una selección se resta a la anterior es un restador de selecciones y con la selección interceptada la selección es la intersección entre la antigua y la urbana veis por tanto como gracias a estos cuatro modos de reemplazado suma resta intersección puedo llegar a dibujar zonas de selección rectangular complejas aparte podría elegir difuminar los bordes escribir redondeadas en definitiva una serie de opciones pero mirar la atención a la pantalla pero todo me interesa que sepáis exactamente para qué sirve una zona de selección porque parece que quiero dibujar la bandera no estoy haciendo nada la zona de selección recordad que os he dicho antes que nos sirve para dibujar sirve como apoyo al dibujo si yo ahora seleccionó la herramienta del pincel y dibujo podréis comprobar como dibujo únicamente sobre la zona de selección por tanto las herramientas de selección me permiten aislar zonas de la imagen para que luego cuando dibuje dibuje sólo en aquellas zonas que es seleccionado voy a pulsar control z mente cuando hago esta demostración la gente lo primero que me suele preguntar es pero si yo no quería pintar dentro de ese recuadro sino que quería pintar fuera os voy a decir que las zonas de selección van íntimamente ligadas a este menú llamado seleccionar el menú llevado a seleccionar me permite seleccionar todo no seleccionar nada cuando quiero perder la selección e incluso en este caso te permite invertir la opción de inversión en este caso lo que hace es que no esté pintando dentro sino que está pintando fuera y control z de esa cuando no quiero seleccionar nada tengo que ir al menú seleccionar y elegir seleccionar ninguno hago clic y pierdo completamente la selección la herramienta de selección olímpica o selección circular es igual una rectangular básicamente gran opción al tri y arrastró y dibujo un rectángulo que a la vez selecciona una elipse de la misma manera que el rectángulo tengo la selección de reemplazado el nuevo la nueva elipse sustituye a la anterior o bien puedo realizar una selección sumar o bien realizar una selección restada o bien puedo realizar la selección de intersección por lo demás la selección es exactamente igual a la rectangular en cuanto a que luego puedo venir y puedo dibujar y como veis estoy dibujando en base a la selección que previamente es realizar la cosa se complica cuando empezamos a trabajar con herramientas voy a seleccionar nada como el lazo el lazo va a permitir dibujar mirar va a permitir dibujar a mano alzada el problema del lazo mira es que dibujo a mano alzada atención o dibujo con las rectas voy haciendo clic haga lo que haga porque si me acercó me daré cuenta de que al dibujar con lazo no estoy acertando ni una y si voy haciendo clic y dibujo ahora estas manos son rectas porque no me estoy perdiendo zonas para estar precisamente la herramienta de selección por color la herramienta de selección por color es como el lazo pero veréis mirar pop que lo que hace es seleccionar todo un grupo de colores tanto de los que están aquí como de los que están por aquí dentro de esa forma me ahorro el seleccionar poco a poco también os tengo que decir atención andinos tengo que decir que diréis hemos desordenado azul pero te has dejado unos cuantos píxeles ahí arriba esto es por el umbral el umbral cuanto más aumente el umbral más píxeles parecidos cogen final fijaos que me ha quedado ahora pero no veis mira si cojo umbral y aumento el umbral con un color azul y me coge todos los parecidos con cuidado hasta que recoja todo el azul hay que jugar por tanto el secreto la magia el truco está en jugar con el umbral hasta seleccionar unos troles que sean parecidos y que no sean iguales a los de aquí también os digo que esto se puede hacer nada con la varita mágica la varita mágica también tiene un umbral otra cosa que puedo hacer mira tiene mucha gente lo pasa por alto es que con la varita mágica yo puedo usar el modo de fumador y puedo ir sumando colores y puedo ir haciendo una zona compuesta el problema está que la manera más rica como veréis no coge esta zona interior lo estáis viendo para eso está la selección por color si quiero cualquier color esté dentro de éste fuera cojo en selección por color si no cojo varita mágica en este caso me vendría mejor selección por color que la varita mágica seleccionó nada otra herramienta de selección bastante interesante pero que nos puede dar algún que otro disgusto en este caso esta imagen no porque es una imagen muy clara es la herramienta de la selección por recorte mira yo lo puede hacer es dibujar puntos atención dibujo un punto aquí y ahora dibujó otro punto aquí y el programa aquí está el problema el programa ha intentado detectar cuál es la zona que quiero marcar un momento que seleccionada voy a empezar por aquí por aquí por aquí por aquí y fijaos lo que hace el programa e intenta como veis diferenciar los colores para intentar averiguar cuál es el contorno de ese objeto fijaos que más o menos no lo hace del todo mal es están intentando o estudiando unos puntos pero en lugar a dibujar líneas rectas entre los puntos lo que hace es intentar averiguar cuál es la curvatura del objeto entre esos puntos en este caso insisto en este ejemplo es fácil porque es fácil saber cuál es el color del límite que hay entre la medusa y el fondo medusa naranja fondo azul pero en otras imágenes donde el fondo es más difícil de diferenciar en el color es donde podemos tener más problemas a la hora de separar unas imágenes y otras un ejercicio de aplicación de máscaras y aplicación de esta selección y luego degradados podría ser el siguiente supongamos que yo quiero dibujar voy a pulsar zoom la zeta para dejarme un poco yo quiero dibujar un pez por aquí arriba así que voy a no seleccionar nada y a continuación seleccionó con elipse pero una elipse pero además voy a usar el método de suma para decir que por aquí vayan a solución a la elipse vamos a ver una primera elipse y luego una segunda elipse que sería la cola del pez no tengo yo y suerte unos métodos seleccionan pasada ya tengo aquí la cola del pez y el pez y ahora selecciona el método de resta y digo de aquí voy a quitar veis la cola del pez es un poco pero tipo pescanova verdad pero y luego para para quitar la boca voy a hacer así porque no es un pez es un tiburón furioso un libro con forma de pescanova pero un título que al fin y al cabo y ahora incluso voy a ponerle por aquí con la forma de sumar unos dientecitos así es como somos si no lo veis me acerco y poniendo allí una espiral la espiral de violencia dibujará y varios dientes ya tengo por tanto la zona del pez con la que quiero trabajar lo que había ahora para que se funda un poco con para que segundo en el fondo escoger un degradado y por ejemplo voy a ver escoger un degradado tips y grabado del fondo del mar dibujar un pez tal que dibujar las aves tal que si luego quito la zona de selección parecerá como de fondo voy a poner selección sustituir para hacer como que de fondo de la medusa hay un p todavía más peligroso que ella para el final manejando las selecciones de menos degradados en los rellenos de las pinturas podemos obtener resultados curiosos voy a hablar ahora de las herramientas de cloración que básicamente son las herramientas de tampón y la herramienta de curación representadas por el tampón mecánico y por él las tiritas para la curación hoy por tanto archivo abril voy a abrir vamos a abrir una imagen ahora que podemos crear algo mina voy a el koala canción miran todos voy a el cuadro abro no aparece pero no os preocupéis porque ya sabéis que esto es porque el quinto a veces nos oculta las imágenes que abrimos la busco por aquí y por aquí tengo ya el cuadro la cloración lo que hace básicamente explorar una parte de la imagen dentro de otra voy a seleccionar el tampón y vais a ver vais a comprobar como si atención como si hago clic y dibujo no pasa nada porque porque el tampón necesita un punto de origen y un punto de final el punto de origen es que copio el punto de finales donde lo copió por eso lo que voy a hacer para este ejemplo es pulsar veis que el tampón me pone como un pequeño símbolo de prohibido como víctor ya no puedes voy a pulsar la tecla control voy a pulsar y mantener pulsado la tenía control desaparece el signo de prohibido y a continuación voy a hacer un solo clic un toquecito un clic en el ojo clic ya está suelto la tecla de control y a partir de ese momento el programa ya sabe que quiero copiar el ojo donde dibuje a continuación mira los voy a hacer voy a convertir este koala en un animal mundialmente extraterrestre porque si ahora dibujo por aquí atención pincho y dibujo y dibujo otro ojo para la cavada lo veis no lo habéis visto lo vuelvo a repetir ahora quiero copiar este ojo aquí luego pulso control mantengo pulsado el control y hago clic aquí suelto control ya tengo el punto desde el que quiero copiar y ahora hago clic arriba arrastro y empiezo a dibujar el ojo de esta manera como veréis puedo pasar de tener un koala a tener un koala araña en el que son con seis ojos que me causa más repulsión que otra cosa pero en definitiva el objetivo de esta lección es enseñarnos cómo funciona la ética de tam por el problema de la herramienta de tampón es que si os fijáis poco a poco quiero destino se ve el truco porque no se integra nada bien dónde empieza la clonación y dónde acaba para eso está precisamente la tecla de curar la tecla de curar drá la tecla de curar funciona igual el local del tampón seleccionó las tiritas pulso control hago clic a continuación suelto control y empiezo a dibujar curar cuesta un montón más de procesar pero como podéis comprobar tiende a funcionar mucho mejor aquello que estoy copiando con el entorno donde lo estoy copiando pero cuidado cuando intentéis curar con él con radios grandes comprobaréis cómo curar usa muchos más recursos que la herramienta tampón es decir va más lento hace que el ordenador vaya más lento vamos a ver cómo podemos usar las láminas de tampón por ejemplo en este caso para realizar un retoque sobre michelle pfeiffer entonces voy a escritorio he bajado una imagen de michelle pfeiffer vamos a ver en minúsculas en pfeiffer me lo pongo por abajo y fijaos que por ejemplo tenemos una foto más clásica foto donde la edad se va notando y ya tenemos algunas arrugas verdad bien pues lo que voy a hacer es hacer uso de algunas herramientas que tengo por aquí abajo en este caso pero me hace falta de momento ni siquiera la en este caso las arrugas la clonación porque voy a usar una herramienta llamada el desenfoque el desenfoque me permite simplemente desenfocar zonas de la pantalla y me dan lo que voy a hacer el desenfoque es la gota la gota que colma el vaso lo que voy a hacer es buscar una cerda tenga arrugas atención voy a pasar el desenfoque y voy a hacer de ticketek veis cómo ha desaparecido un poquito la arruga voy pasando el desenfoque si no lo veis no pasa nada porque ahora le doy más caña y fijaos cómo poco a poco a verlo pasando vamos a ver no tengo incrementar de parecer esta parte pasando verlo pasar o verlo pasando hasta que poco a poco vayan desapareciendo si no quieren desaparecer no pasa nada porque voy a usar el tampón voy a bajar el tamaño del tampón hasta que tenga un tamaño así y ahora por ejemplo el pulso controla aquí arrastro y mira mágicamente la arruga como que empieza a desaparecer tan por aquí lo que estoy haciendo como veis es copiar la piel debajo en la parte de arriba con lo cual poco a poco le vamos quitando las arrugas paso del tiempo que pueda tener eso unido a el desenfoque pulido a todo aquello que podamos desenfocar vamos a conseguir al final quitarle arrugas de la frente pero que vamos a decir significa es que vamos a decir de las bolsas de los ojos esas horribles bolsas de los ojos menos mal que tenemos aquí un buen trozo de piel de sobra para el tampón y aumentar el tamaño con cuidado ya sabes siempre con cuidado creo que le estoy quitando la gracia a todos los catálogos de modelos y voy a decir que voy a copiar este trozo de piel aquí y fijaos cómo el problema en este caso como en este caso es que el tampón de un reto demasiado duro se nota dónde está el recorte por eso lo que voy a hacer es la la tirita y poco a poco fusionar mucho mejor yo creo que se nota mucho mejor como hemos quitado la bolsa del ojo esto era antes esto es ahora y veréis por tanto como madre mía horribles bolsas pues hago así dónde está la sombra empieza a funcionar y veis cómo poco a poco la juventud queda restaurada hay una lancha de pasada amar hasta no pasa nada porque te la restauró poquito a poquito para que quede allí bien funcionado habéis allí los hoteles una sombra natural y por tanto como veréis al final la fotografía de modelos por ejemplo cuando aumenta la edad de una persona tienden a aumentarse estas arrugas que tenemos aquí verdad bien no pasa nada porque una vez más usando los trozos de piel que tenemos alrededor podemos disimular esas zonas y por tanto devolver lo que se me ha quedado ahí una vez las cosas que salen cuando sonríes y el caos por ejemplo cojo aquí esta zona la pego aquí y poco a poco poco a poco estamos curando cuidado ahí a ser una cuestión de ir jugando y bueno le tengo que quitar unos cuantos años del cielo en esta por otra parte de la señora fijaos que el tampón una mezcla de tampón y herramientas de sanear y en usado nos puede ayudar a realizar retoques de una manera sencilla y que quedan bastante bien integrados igual si lo miramos a nivel de pixel se notan tres le veremos desde lejos suelen dar un resultado bastante bueno en la clase de hoy vamos a estar hablando de capas las capas es una característica común a prácticamente cualquier software de retoque fotográfico ya que nos permiten anidar varias capas transparentes una encima de otra vamos a verlo voy a ir a archivo y de hecho ni siquiera voy a ir hoy a abril si lo que quiero abrir una de las imágenes que he abierto recientemente como por ejemplo el pingüino el koala o una imagen parecida si yo lo que quiero es abrir una imagen que ha abierto recientemente no iré a abrir sino que lo quiere es usar el menú abrir reciente abrir reciente me dirá qué imágenes he abierto últimamente con este programa por ejemplo en este caso voy a abrir la imagen que abría ayer llamada jellyfish llamada medusa de mar así que hago clic en jellyfish o en definitiva en cualquier imagen que aparezca dentro de ese menú muy comprobaréis como no hace falta ni ir a buscar esa imagen al disco duro sino que la puedo llamar directamente con el acceso rápido que existe dentro del menú archivo vamos a hablar por tanto a continuación de las capas las capas deberían aparecer en un cuadro de diálogo situado dentro de esta ventana llamada capas pinceles etcétera vemos aquí un botón que aparece de color blanco pero supongamos que por lo que sea no tenéis esta ventana supongamos que por lo que sea la vez cerrada entonces si hemos cerrado es a ese grupo de ventanas recordáis que está la opción de decir ventanas empotrables cerrado recientemente capas cada vez ser rutas pero sin embargo hoy quiero deciros porque en alguna ocasión no puede pueden no aparecer eso que si nos vamos a pillar amos empotrables tenemos cada uno de los diálogos que pueden existir en el game en la clase de hoy insisto no quiero ver ni canales ni rutas niño del histograma no quiero ver nada solo quiero ver capas así que si en algún momento os han desaparecido de las cebras simplemente que sepáis que tenéis que ir a ventanas diálogos empotrables capas y las vais a poder recuperar y las vais a poder sacar así que si en algún momento esa ventana desaparece no hay que preocuparse en absoluto además otra cosa que voy a hacer hoy es en ventanas voy a ponerlo del modo de ventana única para que se me acople a la derecha en plan photoshop muy bien vamos a empezar a trabajar y vamos a empezar a trabajar diciendo que aunque vosotros no lo queráis cuando abrís una imagen o cuando hacéis una imagen nueva por defecto se crea una capa cero por defecto estáis trabajando con una capa cero que podéis ver aquí las capas además tienen la propiedad de poderse ocultar podéis ver que cada capa tiene un pequeño simbolito que es un ojo que os permite mostrar y ocultar la capa y tiene otro simbolito que es una pequeña cadena que os permite bloquear la capa por defecto lo que voy a hacer es ver el ojito y desbloquear la capa dejarla ásí la cabeza pero además evidentemente además de poder trabajar con una capa podemos crear más capas así que voy a ir aquí abajo aquí abajo del todo y voy a ver que existe una página en blanco la página está en blanco atención mirad es crear una capa nueva hago clic en la página nueva y me dice el menú de creación de una capa nueva como quieres que se llame esa capa voy a llamar a esa capa segunda capa voy a hacer que tenga la anchura y la altura por defecto de la imagen voy a dejar en 1024 768 y por defecto voy a decirle que relleno con transparencia es decir lo dejo como esta pulso sobre aceptar y aparece aquí una segunda capa las capas para aclararnos y para entendernos son como papeles de acetato transparente tienes una capa de base y encima por encima le pones un papel de acetato transparente y dibujar sobre ese papel no estás dibujando sobre el fondo estás dibujando sobre esa capa vamos a hacer una demostración quiero que cojáis el pincel por ejemplo cogemos el pincel hacemos click en color y elegimos otro color el que queráis me da igual yo por ejemplo voy a elegir el color azul el color rojo perdón o el azul me da igual voy a hacer el rojo porque azul ya tengo mucho en esta imagen atención mirada y ahora voy a pintar voy a pintar de hecho un título en rojo algo así con el pincel dibujo un tiburón parece una pescadilla más con tiburón pero bueno el caso es que dibujo algo dibujos por aquí dibujo por aquí dibujo por aquí incluso lo que voy a hacer una aleta y ya estaría tengo un tiburón lo importante en este caso es que veáis que yo no he dibujado en la capa de fondo como estaba haciendo hasta ahora sino que yo lo que he hecho es dibujar en la capa llamada segunda capa comprobaremos por tanto si habrá oculto la segunda capa se oculta solo el tiburón es la demostración de que ese dibujo lo he hecho en una capa superior en una capa independiente vemos por tanto como las capas nos permiten ejecutar el divide y vencerás debemos tener cuidado y esto es muy importante porque solo por crear una capa automáticamente no pasó a dibujar dentro de esa capa atención siempre hay una capa una sola capa que es la capa activa la capa activa es la última capa en la que yo he hecho clic veis que si hago clic entre el edificio y el ific pasa a ser la capa activa y se vuelve de color azul si hago clic en segunda capa segunda capa pasa a ser la capa activa y se vuelve de color azul saber cuál es la capa activa es muy importante porque cuando yo dibujé algo nuevo no lo voy a dibujar en cualquier capa sino que lo voy a dibujar en la capa activa por tanto mirar si yo hago clic en jellyfish todo lo que dibuje a continuación lo voy a dibujar en jellyfish será dibujo una medusa de color rojo esto también está en plan mariscal hacer y yo ahora oculto el tiburón veréis que la medusa no se oculta pero si yo en cambio oculto jellyfish veréis que la medusa si se oculta si yo he puesto jellyfish como capa activa la medusa la he dibujado dentro del edificio así que en definitiva es muy importante antes de empezar a pintar a asegurarnos cuál es la capa activa encima de la cual vamos a dibujar dentro de estas opciones vamos a ver otros recursos que podemos usar con capas por ejemplo yo quiero crear un segundo tiburón yo quiero a este tiburón y duplicarlo las capas se pueden duplicar para duplicar una capa voy a hacer lo siguiente primero hago clic en segunda etapa hasta que se quede de color azul a continuación voy aquí abajo y localizó un botón que tiene como dos ventanitas un botón que si pongo el curso encima dice crear un duplicado de la capa y la línea de la imagen mira atención a hot y en el botón y poner segunda capa y copia de segunda capa luego ahora tengo un tiburón y encima tengo el mismo tiburón cómo puedo saberlo porque realmente los dos están a la vez bueno es muy fácil mirar la herramienta que ya conocéis de mover y transformar pincho arrastro y veis como tengo hay un segundo tiburón veis tengo la segunda capa que me da un tiburón y la copia de segunda capa que me da otro tiburón veis por tanto como este botón de aquí abajo nos sirve para la capa que esté activa y duplicarla y ahora por último dentro de este vídeo quiero enseñaros como si queréis eliminar una capa tenemos el botón de la papelera que nos sirve para eliminar protección cuidando una vez más muy importante en este vídeo no vais a eliminar cualquier capa vais a eliminar la capa que esté activa por tanto antes de pulsar el botón eliminar hacer clic en aquella capa que queráis eliminar por ejemplo yo quiero eliminar la copia de la segunda capa y a continuación sólo a continuación un solo botón suprimir que es el botón de la papelera borra esta capa hago clic y como podéis comprobar esa capa y solo esa capa es la que ha quedado eliminado una de las novedades que yo más valoro de esta versión 2.8 de jim es que por fin han puesto carpetas de capas o lo que es lo mismo grupos de capas veréis yo voy a hacer una nueva capa ya sabéis que a una nueva capa usando este botón que bajo de la página en blanco y esta es esta nueva capa sobre llevar pez parecer un pez pequeñito voy a hacer un pez de color dorado con la brocha refrán un color dorado puedes aceptar y por aquí dibujo un pez un pequeño pescadito hay lobbys lo ves en la pantalla pero yo ahora quiero dibujar varios peces mirad así que hago un duplicado y tengo un segundo pez hago otro duplicado es copia de pez copia de copia de pez nombra aquí tres perfectos esta capa tiene un pez esta capa tiene otro pez y esta capa tiene otro pez el problema está en qué pasa si yo quiero con un solo clic ocultarnos tres veces os digo más qué pasa si yo quiero mover los tres peces a la vez no tener que mover pez a pez bueno pues en esta versión 2.8 por fin han introducido un concepto que son las carpetas de capas mira yo clic en la última capa y ahora hago clic en este segundo botón es nuevo no estaban las versiones anteriores que es crear un grupo de capas así que hago clic en esa carpeta y esto porque llama grupo de capas por supuesto nosotros podemos nombrar las capas como queramos para comprar una capa si la tengo seleccionada simplemente hago doble doble clic y paso a nombrar la capa esto se va a llamar veces las capas funcionan igual si hago doble clic esto es 0 1 brad doble clic pero dos doble clic 3 lo que yo quiero ahora es que estos peces estén dentro de la carpeta peces por eso lo que voy a hacer es muy sencillo pero debes tener cuidado mírame la pantalla pulso por ejemplo en ver tres lo arrastró y lo suelto cuando compruebe voy a gastar desde aquí lo suelto cuando compruebe que ese pez está dentro de esa carpeta vamos a hacerlo desde aquí bueno no se deja a ver en principio debo soltar y arrastrar y reconocer cuando la capa está justo encima de la carpeta y cuando esté justo encima de la carpeta deberá meter ese objeto en la carpeta voy a ese objeto obviamente la capa peces por aquí bueno pasamos con sus funciones bien probablemente funcionará voy a crear una nueva carpeta un grupo de capas pinchó arrastró ya mí no me está dejando probablemente haga falta por inicio del programa pero esto probablemente si bien una cosa voy a guardar esto como jellyfish el escritorio voy a cerrar y volver a arrancar y a ver si así vamos a ver a continuación los botones tenemos aquí la medusa y los peces los botones de orden de los peces para mostrar por aquí mira el orden de aplicación de elementos en el gym es igual el orden de aplicación infor y quiere decir que el elemento que está más arriba se muestra por encima de los demás elemento que está más abajo se muestra por detrás de los demás de esta manera mira de hecho pasa al revés que un profesor de esta manera pasa los siguientes yo quiero mover jellyfish hacia arriba cojo la capa de hielo fish es decir se queda me color azul y ahora empiezo a mover con la flecha hacia arriba los elementos empiezan a desaparecer no es la medusa que estaba dibujada allí porque estos elementos han desaparecido del dibujo no protesten en cuenta que lo que ha hecho es poner jellyfish por encima de todo lo demás por tanto jellyfish tapa en este momento a los peces y a los tiburones o bien moviendo a mano alzada o bien con las flechas a mí ahora mismo parece que no va muy fino podremos mover podemos desplazar la capa y elegir qué es lo que se me delante y qué es lo que se ve detrás y ahora voy a explicar cómo podemos mover objetos que hay dentro de capas mirar yo cojo el edificio y quiero mover el pp así que el tiburón de la nación cojo la herramienta de mover le digo que nuevo el tiburón no estoy cogiendo veis muy arrastro pero me coge el tiburón ahora quiero ver por ejemplo un pez me mueve en red quiero mover por ejemplo el fondo perfecto si me voy a mover os daréis cuenta cómo mover tiene dos opciones y es escoger la capa obvia o mover la capa activa si yo me aseguró que quiero mover la medusa pincha donde escojo mover capa activa la capa activa del chelís y aunque yo del tiburón como la capa activa del fis podemos mover la medusa sin embargo esta es la opción que venía hasta ahora por defecto con gimp hasta 2.6 pero si ahora le digo escoger capa o día lo que voy a hacer es independientemente de la capa que esté seleccionada que gene detecte el objeto sobre el que he hecho clic si has hecho clic sobre el tiburón es porque mueve el tiburón si hecho clic sobre un pez en este caso detecta el pez y por tanto da igual que estéis sobre la capa de difícil porque me mueve únicamente ese quiere decirse en definitiva todo ello depende de la herramienta mover y seleccionar una de las opciones o bien escoger una capa obvia o bien mover la capa activa independientemente del objeto en el que haya pulsado voy a hacer un nuevo ejercicio en el que voy a demostrar cuál es el funcionamiento de la opacidad de la capa y los métodos de fusión de caja para hacer este ejercicio voy a crear un archivo nuevo de 1024 x 768 el tamaño puede ser correcto y voy a poner un fondo de color negro y lo voy a llamar fondo negro voy a el color negro ya estaba cogido voy a usar el bote de pintura y voy a hacer clic para que todo el fondo se rellene de color negro verdad ahora hago nuevas capas así que alguna nueva capa soy yo el diálogo un poco separado que se llama círculo rojo que básicamente consiste en que alguna selección circular elíptica selecciona el color rojo no cualquier color rojos en el color rojo puro y con el bote de pintura pinto esa selección de rojo beige que tengo un fondo negro y tengo un círculo rojo cierto pues ahora hago otra capa que en este caso se va a llamar círculo azul en esa capa círculo azul dibujo otro círculo y lo pinto de color azul puro ahora tengo una capa círculo azul círculo rojo y fondo negro cierto hago por último una capa llamada fondo verde círculo verde dibujó un círculo un último círculo seleccionó el color verde puro y por último pintó ese círculo así que por último seleccionada tengo una capa de fondo un círculo rojo un círculo azul y un círculo verde y con esto vamos a empezar a trabajar en este ejercicio en el que voy a explicar cómo funcionan los métodos de fusión de las capas tengo ahora por tanto en cuatro capas una detrás de otra y lo que voy a hacer es la capa del círculo verde y voy a empezar a jugar con estos dos elementos que tengo aquí arriba que son la opacidad y el modo donde pone en modo realmente es un modo de fusión si yo cojo el círculo verde y cojo la opacidad de abajo fijaos que el círculo verde poco a poco se hace es semi transparente luego que hace la opacidad la opacidad lo que hace ni más ni menos cambiar la transparencia de ese objeto sino de todos los objetos que estén dentro de esa cama la opacidad realmente es algo bastante fácil de comprender significa realmente transparente lo que os puede resultar más difícil de comprender pero yo os lo voy a explicar numéricamente es que hace el modo de fusión mirar atención olvida la pantalla si el modo de fusión tengo varios modos de fusión yo elijo un modo como por ejemplo uno que me encanta llamado suma resulta que en la intersección de verde y negro tengo verde en la intersección de verde y azul tengo este color que la gente identifica como azul clarito que realmente se llama fiar y la intersección entre verde y rojo tengo este color que evidentemente es el color amarillo sin embargo si en lugar de poner su mar pongo multiplicar tendré una sorpresa un poco desagradable ya que todo se vuelve de color negro porque su mar ponía el colores y multiplicar lo pone todo de color negro por ejemplo la multiplicación entre verde y azul es negro y la multiplicación entre verde y rojo es negro porque ahora lo vamos a demostrar hay otros tantos modos de fusión básicamente mirad estos cuatro modos son modos basados en la suma estos cuatro modos son modos basados en la multiplicación estos se basan en la división y estos se basan en la diferencia en la sustracción y ahora voy a hacer lo siguiente les voy a demostrar por qué su mar deja los colores yang y amarillo y por qué multiplicar os deja el color negro para eso voy a abrir una hoja de cálculo la estoy abriendo voy a ver una hoja de cálculo lo voy a hacer con operador fiscal lo podéis hacer con excel no hace falta que lo hagáis en pantalla simplemente quiero que miréis a la mía y yo pongo el color rojo el color verde y el color azul ya sabéis que cualquier color está compuesto por una suma de rojo de verde y de azul que va desde 0 a 255 así que decidí américas cuál es el valor rgb cuál es el valor que recibe de rojo rojo es 255 0,0 cierto no me creéis no pasa nada porque nos vamos aquí y digo si cojo rojo comprobaréis como es 25 500 me creéis ahora cuál es el valor de perder verde es 0 25 50 cuál es el valor de azul azul es 0 0 255 así que qué pasa si sumo rojo más verde realmente estoy sumando 25 25 500 con 0 2 550 haber 255 más 0 255 02 55 255 y 0 0 así que la suma de rojo y verde da el color 255 2550 cuál es el color 255 25 50 el color 255 25 50 es el color amarillo comprobamos por tanto como en la suma de rojo y verde tengo el color amarillo no es matemática pura y dura vamos a verlo con el verde y el azul verde más azul es 0 25 5000 255 que era un resultado de 0 25 52 55 qué color es el color 02 55 255 pues el color 02 55 otros 55 que es el color día no veis el grave el problema y es que decirle qué pasa si multiplicó el color rojo por el color verde el color rojo es 25 500 el color verde es 025 50 así que defiende cuando multiplicó 255 por cero que sale cuando multiplico 0 por 255 sale 0 y cuando multiplico cero por cero es determinación pero digamos que el programa para no complicarse lo redondea a cero así que decirme cuál es el color 000 es el color negro así que qué son estos métodos de fusión estos métodos de fusión lo que hacen realmente es realizar operaciones matemáticas con los colores que hay en los píxeles de las capas donde insisto hoy para ver la solución a operaciones más sencillas solo quiero que entendáis de momento suma que suma apeló los valores de las de los colores y multiplicación que multiplica los valores dentro d esos pixeles si cojo los dos podréis comprobar como al sumar al sumar los tres tengo blanco porque es muy sencillo si yo cojo la suma de estos tres cuanto da la suma de estos tres 25 525 525 5 255 y colores 255 unos 55 255 es por eso podéis comprobar que realmente la suma de los tres colores en la pantalla me está dando el color blanco en esta siguiente parte lo que vamos a hacer esta parte va a ser mucho más divertida es aprender a manejar colores dentro de la imagen por eso voy a cerrar estas dos pestañas voy a guardar voy a dejar y lo que voy a hacer es archivo abrir para abrir uno de los archivos que haya en el escritorio voy a abrir que imagen modificado creo que me decido por aquí una carpeta bonitos no creo imágenes de muestra y voy a una imagen llamada cristante y pulso sobre abrir por lo cual esta imagen llamada al crisantemo sea revés que es una imagen que tiene una fotografía cercana de un crisantemo con unos tonos bastante rojizos anaranjados a continuación una vez que la imagen está abierta lo que voy a hacer es ir más riendo uno a uno los modificadores de colores que tenemos dentro de la propia del propio menú llamado colores vamos a trabajar por tanto con correcciones de color por eso a mostrar todo el ratón dentro de el menú de colores vamos a empezar uno a uno vamos a empezar con balance de color el primer elemento es balance de color la primera corrección de color por tanto que vamos a ver es el balance de color atención a la pantalla cada corrección de color que yo abra me sacará una ventana flotante con la cual podré trabajar los colores de esa imagen mirad qué ajuste de balance de colores me permite trabajar sobre las sombras tonos medios y puntos de luz voy a en este caso mirar la canción más rojo este tiene un montón de rojo le doy más ya no hay solución pero fijaos que el cian no ha salido y en las zonas brillantes ni en las zonas de sombra ha salido en los tonos medios de cada pétalo si yo por ejemplo elijo sombras estaría modificando solo lo veis las sombras la imagen mes las sombras más oscuras veis las zonas más oscuras si yo le digo es que no se ve mucho aquí en mi monitor se ve mucho más pero veis cómo se modifican las olas oscuras vamos a ver con magenta año mes fijaos que las zonas claras prácticamente no se han modificado o los puntos de luz cuando yo digo que modificó un punto de luz realmente estoy modificando únicamente la punta del pétalo ahí prácticamente no se ve ahí veis mirad lo que he hecho la punta del pétalo es la que modifica su color se ha modificado el tono medio no el tono medio sigue siendo rojo se ha modificado la zona de sombra no la zona de sombras sigue siendo rojo oscura veis puedo cambiar colores entre zonas de sombras esto de seguridad tonos medios y puntos de luz por supuesto cuando tenga una corrección de color seleccionada cuando haya acabado de configurar la elegir el sí quiero reiniciar lo que equivale a no cerrar esta ventana pero reiniciar los parámetros aceptar si quiero aceptar los parámetros o cancelar si quiero escaparme de esta ventana sin aplicar ningún parámetro para este ejemplo voy a usar cancelar lo cual me devuelve a la imagen original sin haber aplicado ningún cambio la siguiente corrección con la que vamos a trabajar es la corrección de tono y saturación todo en saturación me permite tocar mira de estas tres cosas el tono la luminosidad y la saturación el tono es como ese color está en la rueda de color si yo selecciono el tono y lo muevo fijaos como la flor de rojo va cambiando a naranja a amarillo de amarillo cambia a verde de verde cambia a azul de azul pegamos la vuelta a la rueda cambiaremos a azul oscuro cambiaremos a magenta rosa a violeta hasta que al final llegamos otra vez a rojo que hace tono lo que hace tono es dar la vuelta en la rueda de color a la imagen con la que estamos trabajando todo por tanto cambia el color no cambia la luz cambia el color luminosidad no cambia el color cambia la luz si yo bajo luminosidad hago la imagen más oscura si yo subo luminosidad hago la imagen más clara y por último saturación no cambia el color cambia la fuerza del color para que os hagáis una idea si yo quiero pasar una imagen a blanco y negro lo que hago es quitarle saturación y esta imagen la cojo y bajo saturación podéis comprobar como pierdo el color el color pierde su fuerza si yo cojo esa saturación y la subo el color dará todavía más fuerza este es el color original fijaos como con saturación se gana más fuerza en el color por tanto que acepto no en saturación toda la saturación nos permite trabajar con los colores de una imagen la herramienta que tenemos a continuación dentro de colores es colorear dentro del coloreado lo que hacemos es primero convertir la imagen a blanco y negro y segundo cambiar el tono podemos cambiar el tono podemos cambiar la saturación podemos cambiar la luminosidad ahora mismo que estamos trabajando con el crisantemo y vosotros os podéis preguntar cuál es la diferencia exactamente entre esta operación y la anterior la diferencia es muy sencilla mira voy a cargar una imagen que tenga varios colores por ejemplo voy a cargar en lighthouse puede cargar los tulipanes perfecto tulipanes mira la diferencia entre las dos está en que si yo cargo otra situación carga de los tulipanes voy a continuar con los tulipanes si yo cargo todo en saturación si yo modificó el tono modifica cada tono independientemente eso quiere decir que el amarillo se convierte en verde y el azul se convierte en magenta a cada color le ha aplicado un cambio a cada color le aplicado un desfase pero si yo uso la opción de colorear lo que hago es convertir toda la imagen a blanco y negro y por tanto colorear toda la imagen y fijaos que todo se convierte azul o todo se convierte a azul marino o todo se convierte a rojo o todo se convierte a lo que sea veis que no es lo mismo colorear está coloreado todos los colores a la vez mientras que tono y saturación lo que está haciendo es cada color independiente a los demás por ejemplo colorear se usa mucho cuando tengo una imagen en color mirada y la quiero pasar a color sepia la quiero envejecer pues lo que vamos a hacerla así le bajo saturación y tengo una imagen en color sería lo ves esta es la original y esta es la imagen final colorear es muy bueno por ejemplo para hacer tonos sepia blanco y negro o cosas así una cosa muy importante de gimp es que las las operaciones se aplican de manera que no se puede deshacer si pulsas control z después hacer una operación sí que se puede deshacer pero en cuanto guardes el archivo ya se ha quedado así guardado para siempre esto quiere decir por tanto mirad que si ahora voy a colores y le digo colorear y pierdo los colores si acepto y guardo esta imagen y mañana la vuelvo a abrir no hay manera de que yo recupere los colores los colores han desaparecido digamos que se han destruido por tanto dado que jean tiene esta manera de aplicar defectos de manera destructiva suele ser una recomendación bastante común con el trabajo en gimp y con el trabajo en cualquier programa que tenga filtros destructivos hacer lo siguiente yo tengo la imagen original atención me algunas copias de seguridad y esa copia de seguridad es la que modificó y así si en cualquier momento me arrepiento de haber coloreado la imagen de esta manera siempre puedo eliminarla o ocultarla y recuperó la imagen original básicamente siempre que apliques una operación no la aplique es sobre la imagen original sino aplícala sobre una copia vamos a ver más correcciones de color sobre los poli panes y para ello voy a borrar esta copia de seguridad y para ello voy a ir a colores y voy a entrar en uno de los que se usan bastante como es brillo y contraste voy a hacer clic en brillo y contraste para hacer una ventana en mi caso ha aparecido un poco de esta entrada que va a permitir aplicar una operación de brillo que básicamente el summa blancos a la imagen donde atención si lo subo por encima de cero le estoy sumando blancos si lo bajo por encima de cero le estoy restando a blancos beiges lo mismo de canvas pero en tiempo real contraste lo que hace atención no es poner blancos ni quitar blancos fijaos que yo tengo mirar unos tonos oscuros unos tonos claros y entre los tonos oscuros y claros tengo una gradación de grises bastante agradable si yo en cambio aumento contraste lo que hago es obtener tonos muy claros o tener tonos muy oscuros pero no tengo términos medios veis por tanto contraste contrasta más la imagen qué quiere decir el castellano que quita tonos intermedios de color deja los extremos con los muy claros o los muy oscuros quita el contraste por contra lo que hace es intentar homogeneizar demasiado la imagen quita los muy claros quita los muy oscuros y me deja son los tonos medios lo cual se suele traducir en que la imagen se queda como veis asia voy a alcanzar y voy a continuar con el siguiente corrector de color que es el corrector de umbral este es muy curioso umbral pasa la imagen a blanco y negro pero no como os pensáis cuando digo que pasa la imagen a blanco y negro es que realmente quiero decir que pasa la imagen a blanco y negro y por tanto me pasa la imagen a blanco oa negro no a todos los intermedios umbral utiliza una cosa que se llama cuchillo todo pixel que se quede más alto de claridad se convierte automáticamente en blanco todo pixel que se quede más oscuro de claridad se convierte automáticamente en negro de tal forma que en la pantalla sólo el blanco y negro evidentemente el cuchillo se puede controlar usando esa aplica de tal forma que podemos controlar que se convierte en negro y que se convierte en blanco digamos que el umbral a veces se llama el efecto fotocopiadora porque la foto que adora hay veces que cuando os voy a antigua se come los dos los medios y yo te pinta negro otra vez a blanco mire muy bien también a veces para estilizar fotografías como eres si lo que queréis es convertir una imagen en tonos grises tenéis que usar colores de saturar de saturar es la que no te la convierte en blanco y negro sino que te la convierte en tonos grises se convierte en 256 tonos de gris o bien por claridad o bien por luminosidad o bien por un promedio de las dos fijaos que el efecto muchas veces puede llegar a ser diferente a continuación todavía dentro del menú colores vamos a hablar de niveles y de curvas niveles nos permite controlar la diferencia entre claros y oscuros de la imagen fijémonos que es como un brillo contraste pero mucho más amable por una razón muy sencilla atención si yo entro en el brillo y contraste si aumento el brillo me cargo los colores oscuros beige dejan de existir se convierten en claros si yo bajo el brillo eliminó los colores claros se convierten en crisis en cambio con niveles si yo muevo esta pica oscurezca la imagen pero los colores oscuros siguen siendo oscuros y los colores claros siguen siendo claros si yo aclaro la imagen los colores claros siguen siendo claros y fijaos que los oscuros han desaparecido el efecto es mucho mejor que aplicando brillo y contraste por tanto aplicando niveles podemos cambiar el brillo de la imagen pero sin afectar o afectando lo mínimo posible a los colores por eso mi consejo usar brillo y contraste para lo menos que podáis y usar sobre todo los niveles algo parecido mirar hacen las curvas colores curvas en lugar de tener una gráfica horizontal lo que tengo mira es una curva cuando voy a hacer lo siguiente atención mirando si yo cojo esta curva hago clic y arrastro hago lo mismo que con niveles oscurecer si yo cojo esa curva y la arrastró hacia arriba hago lo mismo que con niveles aclarar y vosotros os preguntaréis entonces cuál es la diferencia entre niveles y curvas la diferencia es muy sencilla con niveles yo tengo una única pista que puedo tocar pero con curvas tengo de todo con curvas yo puedo crear atención diferentes nodos mira y puedo establecer una corrección de color completamente personalizada por ejemplo en ese punto ahí en la sombra yo quiero sacar justo ese color pero sin modificar los colores claros y ahora por ejemplo quiero que se vea el cielo pero sin modificar los colores oscuros puedo hacer una corrección de color completamente personalizada evidente medio también os digo que las curvas es la corrección de color más compleja de usar una corrección de color que no sirve para nada es la corrección de póster izar foster izar mirad lo que hace es limitar el número de colores que tenéis en la imagen la atención le digo dos tengo dos tonos de que no es la imagen más el blanco y el negro si le digo 3 tengo el blanco el negro y tres colores más le digo 4 tengo cuatro colores intermedios 56 lo que voy haciendo es elegir el número de pasos intermedios que quiero que le hicieron entre la oscuridad y la claridad veis que el uso de poster izar es básicamente como el uso de umbral me sirve como para hacer dibujos animados a partir de una imagen no ha aparecido a lo que íbamos a lo que íbamos vamos a seguir dentro de colores vamos a volver ahora a invertir invertir lo hemos visto antes l