EMAE | PROGRAMACION I | 05-05

y en cambio un ide el nombre que se inventaba para el líder podría ser aplicado solamente a un elemento html esta es la única diferencia de una clase y de lo que hace es agrupar un conjunto de formatos de estilo separado por punto y coma escrito como con con el lenguaje css entonces vamos a crear un nuevo archivo le vamos a llamar ahora creo que ejemplo vamos a guardarlo cuando estamos por ejemplo y habíamos llegado creo hasta el 6 ejemplo 7 cs punto html voy a copiar la estructura básica si no la tengo que escribir bueno entonces le vamos a poner acá ejemplo 7 y dentro del head la cuenta y no podía hacer si es para esta página en particular sino podría ser un archivo css aparte tenía que la etiqueta style tenía que especificar un type pero igual a text siempre se ponía con una sintaxis css bueno entonces ahora voy a poner clases distintas clases para se acuerdan que yo podía poner una lista viñetas por ejemplo un punto relleno un punto hueco un cuadradito números 1 2 3 4 podría poner números romanos con minúscula con mayúscula letras abs de con minúscula con una soltura bueno eso lo que vamos a hacer crear distintas clases para estos distintos de este tipo para poner un estilo a esas listas entonces se acuerdan que las clases se empezaban con un punto así que le voy a decir por ejemplo el nombre de la clase que se va a llamar vacío y que va a tener style ay ay sería la propiedad de estilo y le vamos a poner el valor land o sea que no va a tener nada o sea que va a estar la lista pero sin ningún ningún simbolito ninguna numeración nada por el estilo otra clase vamos a ponerle círculo relleno nuestro estaria ay y se acuerdan que lo en su momento habíamos visto que para poner por ejemplo circulito relleno por defecto la palabra la disco bueno acá se tiene que poner el valor disco después vamos a poner decimal con esto si pierdo buenos tiempos y le vamos a poner el tipo y valor se llama decimal eso me va a dar números 1 2 3 después vamos a poner los números romanos en minúscula así que mi clase se va a llamar romano minúscula esta sería mi clase y entonces le vamos a poner lo bueno román blower román después vamos a hacer lo mismo pero romano mayúscula otra clase iba a ser a ver frauman después vamos a tener el círculo vacío que era sirve después vamos a tener el cuadrado ruedas después tendríamos por ejemplo letras en minúscula eso se llamaría lower alfa y mientras mayor cura tras las letras mayúsculas después toma los nombres seguramente que va a saltar el pelo ya pero alfa y después cerramos la estructura está en la etiqueta style ahora vamos a poner en el body una lista que se va a repetir varias veces lo que pasa que en esa lista le vamos a aplicar distintos de distintas clases podríamos decir no se acuerdan que si era una lista acá no importa si en la lista ordenador desordenada porque en realidad después solo aplicó la clase y la clase puede ser o aplicar un formato de viñeta o aplicar un formato de numeración así que la lista la voy a poner como huele ahora vamos a poner acá la primer plaza blas igual vacío se llamaba mi primera clase se acuerdan que los heat es de una lista se ponía con etiqueta li y vamos a poner tres países brasil uruguay y argentina entonces estoy cerrando cada ítem realista después cierro la lista bueno y esto lo voy a copiar para aplicarlo varias veces hacer una dos tres cuatro cinco seis siete ocho nueve son nueve en total hoy tenemos dos tres cuatro cinco seis siete ocho nueve pues se agarra el voley entonces en la primera voy a poner class vacío en la segunda voy a poner círculo relleno de clase círculo relleno en la otra a ver qué sigue decimal la próxima después de firmarlo hermano mío romano minúscula después de los números romanos círculo vacío y después cuadrado después del cuadrado ya venía letras minúsculas y más oscuras bueno ahí estamos o sea que a cada grupo a cada lista que es definitiva siempre es la misma en un caso no le aplique la clase no sea ninguna viñeta ninguna numeración puse vacío que exponer el valor nada al atributo de estilo lista y type y después en las otras puse las distintas clases círculo relleno en esta nueva venían numeritos decimal romano minúscula mayúscula círculo vacío cuadrado letra minúscula y mayúscula vamos a ver si entonces esto anda hemos aplicado a cada lista una clase determinada donde cada clase tenía un estilo diferente y acá estamos nunca tenemos la lista es una regla lista de siempre es la misma lista sin nada con disc o sea con viñeta rellena con circulito relleno decimal romano minúscula romano mayúscula con círculos huecos eso era círculo con square para cuadraditos letras en minúscula y letras en mayúscula entonces de esa manera le damos un cierto formato a una lista no poniendo justamente de distintos tipos de listas time time está bien si todavía no tome lista miguel es antonio la tendencia no hay preguntas entonces bueno vamos a seguir entonces y con respecto a poner por ejemplo fondos no fondo nosotros poníamos background color y poníamos un nombre de color o un número de color teníamos el fondo de una página oa un párrafo le poníamos durán color pero también podríamos usar una imagen entonces yo usé una imagen que como una pared de ladrillos una imagen que es cheque es muy grande chica si la tengo la misma carpeta donde voy a crear este nuevo ejercicio entonces vamos a ver la propiedad background y más tenemos background y más vamos a tener otro atributo de estilo background repeat si se va a repetir esa imagen ahora background position si se quiere especificar que la imagen de una determinada posición y background size qué es lo que aplicaron en su momento sus compañeros cuando presentaban algunos de los ejercicios que tenían ahí para las páginas que tenían que ver con la música creo que fue la última vez para un vídeo y entonces usaron el background 6 y el valor como entonces vamos a ver eso de hacer una vez una página en realidad no tiene nada casi nada es simplemente bueno vamos a tener una imagen que la vamos a aplicar este como destino como fondo o sea que no va a tener nada a mi página va a tener un fondo nada más bueno entonces estos vamos a hacer es el ejemplo 7 1 por ejemplo siempre por ejemplo 8 porque les voy a tener nada pero sí en el style voy a especificar un background con una imagen entonces vamos a poner style ay [Música] entonces para el etiqueta body no para ninguna otra vamos a aplicar background color va gran y máximo estás y le vamos a poner la imagen para eso tenemos que especificar el web rm que yo podría sacar la imagen de internet y traerme la buscar el enlace de esa imagen o haber guardado la imagen como yo hice la guarde como archivo jpg en algún lado de mí de mi computadora y entonces ahora la estoy usando bueno mi archivo se llama pared jpc vamos a usar un atributo de estilo background pitt donde le vamos a poner el valor repeat voy a cerrar acá las aves de los estilos del body y después voy a cerrar esta y hoy vamos a cambiar cosas bueno entonces quiero que mi imagen [Música] se repita obviamente que me va a poner el formato mosaico vamos a guardar puedes pasar mente como la imagen es muy grande y no se me ve al mosaico o sea si se ve si achicó la página no pero en este caso le le cambiaría el tamaño de la imagen para que se vea sin tener que achicar el tamaño de la página sin tener para achicar la imagen claro sea nekatur yeso puse una muy grande entonces no se ve como un mosaico saludos de shows de la lupita del navegador que para que se haga más chiquito no sea como que se aleje claro la máquina en este caso se le tendrá que cambiar tamaño foto no para que harper ahora aunque claro originalmente se viene con un determinado tamaño es algo que le diste de tal manera que la que las chicas no sé ahora cuando uno quiere mirar ver una imagen determinada le podría poner un hate you y uruguay de este de menor cantidad de píxeles aunque en familia bueno fíjense que a mí bueno a mí me imágenes chiquita se instale esta entonces claro se repite en forma de mosaico se repite en toda la página eso sí pongo repeat ahora soy yo te pongo hay otro repito es repeat x quiere decir que se va a repetir y en el eje x o sea en el eje horizontal o sea en la parte superior de mi ventana se va a repetir horizontalmente la imagen como si estuviera recorriendo el eje x el eje horizontal esto sería repeat x así como existe repite x esta repeat y que sería cuando estamos en el eje vertical entonces me lo va a repetir la imagen un abajo de la otra acá pegado al margen izquierdo siguiendo nuestro eje x en extraer y que sería vertical no entonces si yo acá escribo en vez de repeat x pongo repite y pero pone acá de esta manera utilizando el eje después proponer que no lo repita no repite y en ese caso tendría que especificar una posición donde ponerlos entonces tendríamos que poner el valor sería 9 y en este caso tendría que poner un back gran posesión como para decir bueno donde lo que disponer si no se repite imagen chica entonces va chrome position podría poner por ejemplo arriba a la derecha por ejemplo entonces vamos a poner dos en la parte superior y este raid para que vaya derecha donde le digo que no repita pero que se ponga acá en el ángulo superior derecho y ubica también no puedo especificar con píxeles no decirle tanto de separación del borde izquierdo y del borde superior tantos píxeles entonces supóngase eso acá le digo [Música] primero o sea se separe ahí va a tomar primero el borde izquierdo o sea de el borde izquierdo hacia la derecha cuanto por ejemplo no sé 400 píxeles en ese punto desde desde arriba desde el top que se ponga 100 píxeles entonces también puedo especificar la posición en píxeles acaba contar desde la izquierda cuando se desplaza y desde arriba cuanto se desplaza a cadencia cambio acá hay 400 de separación primero se pone a la izquierda y después se pone el de arriba entonces ahí yo le digo no repita pero bueno hay que indicarle una posición y después tendríamos background size pero en el caso mío si yo pongo esta imagen de chiquita esto se lo voy a comentar porque ya no me interesa y pondríamos el background size y si pongo cover por ejemplo que estaría tomando se extendería a toda mi página claro como es muy chiquita me la va a poner el mosaico cambios y elijo otra imagen se acuerda de eso tenía una imagen de los que fui yo tiene una imagen grande bueno busque esa imagen entonces acá en vez de poner esta de pared voy a poner una que era mucho más grande era el archivo se llamaba imagen queen y entonces ahora puede ser que tenga la posibilidad si no está en chica va a extenderse a toda mi pantalla a toda mi página y me lo tomo medio mal otra vez se lo he probado y no me lo tomo así pero esto lo comenté así que no tiene nada con los pixel en la posición nada es raro que nos ha tomado así profesor si el comentario no me lo tomo como comentario será que está pasando lo mismo era por esa tipo que a mí no me lo tomamos si fuera un comentario pero si de tomadores pero ponen verde sin embargo no sé si no que se le ejecutará igual lo voy a borrar gracias a los comensales [Música] con esto te pones como comentario a secas [Música] bueno previa igualmente ahora lo saque para qué a lo mejor no guarde los cambios a mí me lo tomo ahora lo tomo sé porque lo saque y si no este estado de estado está bien el comentario yo pensé que desee comentar lo que pasa que claro el comentario que uno pone en el eje dentro de un style va a ser ignorado por navegadores que no entiendan ss ese pero por navegadores que entiendan el css lo va a tomar igual entonces pero estaba ejecutando sobre el olvidado de eso entonces por eso no me lo estaba tomando como como comentario o sea para una otro navegador más viejo que no reconozca comando css eso lo va a ignorar ahora mi navegador porque conoce comandos ese señor ya que él no está tomando ese pc comentario entonces por eso teníamos que poner como lo dijo que lo dijo eso que me marcó la charla la materia lejana bueno muy bien [Música] bueno solo saque tuve que poner el comentario pero claro que estaba haciendo lío eso se había puesto una ubicación me estaba ejecutando esos comandos bueno entonces ahí tenemos el background size si la imagen se ve más o menos grande podríamos extenderla a que ocupe toda la pantalla entonces distintas cosas o sea cuando yo tengo una imagen y quiero poner esa imagen como fondo como repetirla como ubicarla en una determinada posición o como extenderla como se llama al tamaño de mi página eso es con respecto a este atributo de estilo background y más que tiene algunos otros atributos de estilo como bra background size repeat por season también se entiende una pregunta hasta ahí vamos bien bueno no hay preguntas específicamente a una reclamación el viaje no no lo que pasa que osea donde eso estoy especificando un style o sea la etiqueta style está dentro del eje no es un momento les decía generalmente cuando pongan un style y empiecen a escribir cosas en css para que esos navegadores por si alguien abre tu página y esos hay navegadores que no reconocen css les va a aparecer ese código ahí en la página y ahora deciden todos de donde salió por qué por qué no lo reconoce como como instrucción válida para decodificar lo por ejemplo para interpretarlo como un comando que tiene que hacer algo en particular entonces esos navegadores viejos que nos reconocen css estaría interpretando no no y no pudiendo interpretar esas instrucciones entonces como que escribe en ese texto en mi página para evitar eso generalmente lo que uno pone en style cosas que a veces yo no lo pongo para hacer más rápido el ejemplo me olvido de ponerlo no obviamente hay que tenerlo presente eso supusiera distintos comandos como hoy que hice la clase distintas clases para las listas todo tenía que haberlos encerrado en comentarios como hacíamos antes no en comentario si el navegador reconoce el css pero va a ser si no lo reconoce como va a estar como comentario lo va a ignorar o sea lo va a pasar de alto no me lo va a escribir en la página ahora lo que decía ezequiel era si yo quería hacer un comentario comentar algo que no sé tomar en cuenta con css en vez de poner menor signo de admiración menos menos y después volver a cerrar con menos menos mayor era poner barr asteriscos asterisco barra para decir esta instrucción en css no se va a ejecutar se va a ignorar porque porque es considerado un comentario ahora para los navegadores de vista y melanie para los navegadores viejos siempre se pone el otro comentario como diciendo bueno mira si estas instrucciones están en formatos ese es el que te estoy diciendo que están en formato de css es un text con con ocurrió con sintaxis ss bueno si no lo entiendes yo acá tendría que poner comentario de hecho que tendría que poner así al revés pero esto es prospecto y los hierro acá porque son instrucciones en css un compilador un compilador un navegador viejo no entiende instrucciones ss entonces esto lo va a ignorar va a pasar desapercibido y no pasa nada si yo no le pongo el comentario todo esto que escribí acá va a salir en mi página va a quedar como horrible si yo todo lo que juntó mi navegador si entiendes ss no no así que ejecuta o sea no no es que lo considera un comentario lo ejecuta pero si hay navegadores que no lo entienden bueno esto lo van a tomar como un comentario por eso generalmente lo que estamos metiendo acá en style que son instrucciones ss bueno comentemos la para que no lo lamente a nuestra página pero este no es un comentario como decía aquí un comentario de instrucción css el comentario de instrucción css es barras de discos de disco barra había con respecto a los 12 minutos de bajón estás trabajando son todos el sí para manipular un señor y más que yo podría del fondo para el fondo sí porque evite que dice para q la factura de mt es la imagen y después éste está repeat por sí solo tiene que ver con la imagen que puedo pusiste con el báculo no se para para fondo así fácil se aplicaría a todo elemento objeto pero si sólo aplicó un párrafo bueno no se vería olvide la imagen pero usted podría poner un valor o aún y más y le pongo el archivo entonces un color que sea como fondo que tenga rojo voy a sur pero sin ver de suponer acá 0 0 y acá a ponerle no sé si será un medio rosa este y después letras le vamos a poner también letras blancas y por último está la otra pseudo clase que se llama active cuando eso presionó pero sin soltar pero tres vamos a ponerle el fondo rojo regar de gasol de un color entonces con rojo mezcla y verde bueno baja cierro entonces acá me faltó cerrar todas las aves para cada clase y después de no se cerrará pero lo podría comentar como hicimos hoy para que sea un navegador no lo reconoce no me ponga ese código en el body entonces vamos a poner un h 1 a un párrafo entonces en el body vamos a poner h1 por ejemplo formatos resumidos para rajoy e vamos a poner forma resumida de escribir las propiedades de estilo cerramos el párrafo y ponemos otros h1 dónde vamos a escribir otro título pseudo clases y ahí vamos a poner los hipervínculos se acuerda que se empezaba con la etiqueta a atributo h ref vamos a hacerlo a distintas páginas voy a poner su póngase la página de clarín y de la nación [Música] http dos puntos no sé si será puntual de la noche nos lleva bien a esa dirección como suscribir por ejemplo clarín después otro presión bueno ya estamos bueno vamos a ver si anda esto que pusimos entonces para ejercicio 9 bueno ahí tenemos los formatos resumidos bueno a ver el tipo de título no habíamos puesto con los rojos [Música] habíamos puesto cursiva un tamaño grande verdad bueno color rojo hay un cierto pequeño margen lo que pasa que no fue no están abrupto no de 10 y de y de 5 píxeles y después en el párrafo y pensé que le había puesto un borde color azul sólido de 5 píxeles y era de color verde el texto y había un página y dando vuelta también así que hay una separación del contenedor de mi párrafo que el padre en 15 y 20 píxeles y acá está entonces otro h1 y acá están cómo se llama pseudo clases cuando habíamos puesto el link así como así solo tenía fondo verde y letras de color rojo y es lo que estamos viendo acá si yo me acerco con el mouse sin visitarlo me acerco nada más es el h over aparece con ese color medio rosa porque le había puesto color el rojo mezclado con azul me da ese color y letras blancas así que el cb es eso soy suavecito el enlace me lleva a clarín vuelvo para atrás ya está visitado entonces el visitado tenía fondo negro letras blancas a cambio en cambio éste todavía no fue visitado pero este de este cuando me acerco toma el color este rosa no está en h v ahora este que ya está visitados y yo presionó me que cambia de color cuando rojo y el otro le habíamos puesto letras que tenía mezcla de rojo y verde de amarillo entonces de presionando pero no solté el mouse entonces da ese color entonces una cosa es cómo está el link o originalmente cuando está visitado cuando me paro arriba sin presionar el mouse y cuando presionó el mouse no ahí está entonces haciendo efecto el sol del mouse y lo visite este no fue visitado todavía es entonces lo que tiene que ver con estas pseudo clases que son presos especiales y que tienen ese nombre ya están definidas lo único que tengo que definir yo es el formato que les quiero poner y están aplicadas a un elemento en particular como en este caso es la etiqueta se entendió entonces el tema de formatos resumidos y está un ejemplo de pseudo clase alguna pregunta puede ser que haya otras pseudo clases pero bueno la más común es esta de la referencia a los enlaces puros el código te muestro víctor sé acá tenés el código no sé si queréis en la parte está en la parte de abajo además o menos involucra todo la parte la parte de abajo ahí estamos vamos a decir es cuando quieras que no nos cambiar bueno esos entonces algunos formatos que vimos para distintas cosas no quiere decir que sean los únicos vimos para fondos para letras para padding para bordes bueno t por otro lado vamos a ver un pantallazo que tiene que ver a veces con posicionamiento donde a veces uno antes para ubicar ciertos elementos en una página creando una tabla y ubicaba y una imagen o un texto un párrafo ubicándolo en las celdas de esa tabla para distribuir los elementos de una página nosotros vimos que teníamos de etiqueta div que servía para agrupar etiquetas por ejemplo si yo quería poner un style ha aplicado una etiqueta de este bueno todas las etiquetas que estuvieran encerradas en ese día se les iba a aplicar ese estilo de formato que yo había había puesto como está y no dentro de div aplicado a di entonces libre realidad es como que agrupa varias etiquetas y podría hacer h1 varios párrafos o alguna otra etiqueta que queramos poner como que toda una porción de mi página ahora esas etiquetas divisiones que yo puedo hacer puedo aplicar varias divisiones en mi página y entonces aplicar a esas divisiones ciertas propiedades o atributos de estilo me van a permitir esas divisiones se comporten como cajas a veces estaban cajas donde yo puedo tomar como esa parte o esa división y tratarla como forma independiente de tal manera de poderle dar un movimiento o no de una ubicación dentro de mi pantalla y de esa manera tener con distintas cajas donde yo tendría incorporado incluido ahí algo de alguna imagen un texto un hipervínculo o lo que sea de esa manera convertir esa división en una caja usando ciertos atributos uno de los atributos es el atributo posesión donde esté yo voy a dar un posicionamiento y es como que esa división tiene un comportamiento independiente [Música] con respecto a mi a mi página y eso podría encontrarle una ubicación entonces vamos a ver que existen cinco tipos de posicionamiento y entonces vamos a probar ese posicionamiento con un ejemplo sencillo donde en realidad yo voy a tener varias divisiones cada división voy a tener una h1 h2 lo que sea y voy a aplicar esos posibles 5 posicionamientos que tengo entonces lo vamos a llamar ejemplo 10 entonces yo voy a aplicar varias divisiones voy a hacer como pequeñas cajas que van a tener todas un ancho y un alto de 10 de 100 píxeles le voy a poner un color [Música] color también de texto y un color de fondo vamos a ubicar esas cajas y vamos a ver el posicionamiento de una de ellas respecto de las demás entonces voy a aplicar acá un style se le vamos a aplicar al etiquetado hoy vamos a ponerle un ancho es un píxel live también decía los puntos no igual después son un background color y vamos a poner la fe de distintas los colores aunque de internet es un color celeste después vamos a poner con saiz de 30 píxeles pues pongamos un color de texto todo blanco bueno eso es lo que van a hacer mis inicios y vamos a cerrar entonces el hostal y ahora crecen y divisiones pero mediciones van a tener todas van a ser voy a poner varias divisiones pero división voy a hacer un h 2 le voy a poner el número de la caja numeral 1 por ejemplo la sierra del h 2 voy a cerrar el libro bueno así lo voy a repetir diez veces y le voy a cambiar después del numerito voy a poner un montón de gris o sea que esta sería la número dos número 3 a 4 a 5 6 [Música] 89 otras y después se re directamente el boli cada vez tiene un formato y vimos que eran como cajitas de cien por cien de un cierto color con letra blanca no sabes entonces qué hace esto todavía no puse ningún posicionamiento ni nada por el estilo pero son todas las divisiones que dicen están las cajas se las ubica un abajo de la otra pegado al margen izquierdo cada una con su h 2 este post o no ahora lo que vamos a hacer es poner justamente para una de las cajas de posicionamiento o sea de tal manera de que lo aparte de ahí y dijimos cinco posicionamientos el por defecto es el estático entonces lo que voy a hacer es crear acá una voy a crear acá dentro de style una clase que la vida es amar caja el proceso le voy a poner el atributo por seis horas vamos a ver el primero es el estático es eso no lo específico o lo específico en realidad no va a cambiar nada o sea que si yo esto lo dejo así especifique una clase y esta clase la voy a aplicar por ejemplo en h 2 en la división que tiene que ver con el h2 justamente acá baja en la caja pero aplico solamente a esta caja a la que tenía al numeral 2 para ver que no cambia nada porque por defecto se ubicarían de esa manera al margen izquierdo una continuación de la otra o sea que a pesar de suponer un posicionamiento no hubo ningún cambio ponerlo no ponerlo es lo mismo o sea que por defecto existe un posicionamiento que se llama de esa manera táctica ahora voy a cambiar el posicionamiento en vez de que sea estático lo voy a poner relativo cuando yo pongo relativo es relativo a la posición donde se ubica esa caja entonces si yo le digo desde dónde está moverte a la izquierda tantos píxeles oa desde arriba tantos píxeles es de su posicionamiento desde su ubicación relativa desde dónde se encuentra en este caso la caja 2 se encuentra detrás o debajo de la caja 1 entonces en esa ubicación donde va a estar si yo pongo posicionamiento relativa y estamos en el segundo posicionamiento clima prueba que entonces cuando especifico eso ya me interesa poner otras cosas más o sea por ejemplo cuántos píxeles se va a desplazar hacia arriba desde arriba o hacia la derecha sea tomando el lado izquierdo entonces yo pondría por ejemplo dentro se desplace 100 píxeles y que en dos o sea tomando en cuenta el lado izquierdo c [Música] se mueva de pulsera igual acá te mueva por ejemplo 16 200 píxeles o 300 píxeles porque cuando te pongo regla te digo desde la posición que le toca estar ubicado además es bueno desde esa posición relativa vamos a mover 100 píxeles desde donde se encuentra para arriba o sea que va a ir avanzando va a ir para abajo esas cajas y les no sea que se desplace tomando en cuenta el margen izquierdo de 300 píxeles hacia la derecha entonces vamos a ver que la cámara esta la que corresponde al numeral 2 que tiene aplicada la clase caja vamos a ver que se va a mover se movió pero no estoy contando los 100 píxeles de acá arriba esté contando los 100 píxeles de su ubicación acá estaba ubicada a la caja 2 y desde su ubicación fue a parar desde acá desde top 100 píxeles y desde dónde se encontraba o sea hubo un desplazamiento de 300 píxeles para la derecha ósea y fíjense que quedó el hueco no se desplazaron las otras cajas y rellenando el hueco que dejó la caja 2 no sea ése sería el posicionamiento relativo de vigo bueno desde tu posición 90 90 desde la izquierda moverse desde arriba pero no tomando desde arriba sino desde donde te encontrabas tú arriba bueno avanza 100 píxeles ese sería el relativo posicionamiento relativo entonces ahí le dio un tratamiento especial a esta caja ahora podríamos poner otro tipo de posicionamiento el posicionamiento absoluto absoluto y ahí la diferencia es que los 100 píxeles del top y los 100 y los 300 de leds se van a tomar desde el ángulo o sea tomando la página en la parte superior y la parte izquierda de mi página no desde el lugar donde me encontraban con la caja 2 sino que va a tomar el desplazamiento respecto del ángulo superior izquierdo y éste desde la parte bien superior de mi página y entonces ya la ubicación de la caja va a ser diferente si el posicionamiento es absoluto lo que pasó con el hueco que dejaba h 2 se movieron todas o sea con el absoluto las otras se reubican mientras que ésta quedó retomando los 100 píxeles desde el pse a la parte superior de mi página no desde su ubicación que tenía antes y los 300 píxeles desde el borde izquierdo y vemos que la diferencia con el relativa además que este el hueco que dejaba el h2 ahora no se ve ese hueco sino que todo se desplazó y se reubicó y ese sería el absoluto el absoluto eso es que uno siempre tiene en cuenta desde los bordes de nuestra página teniendo en cuenta la página después vimos tres tipos de posicionamiento tenemos otro el cuarto que sería el que se llama fíjense que toca un scroll y obviamente que en el 2 también se va se va para arriba según es color y se me mueve todo ahora vamos a ver otro posicionamiento solo voy a cerrar porque tantas ventanas abiertas acá qué otro posicionamiento que se llama pixel efe es un posicionamiento también de alguna manera fijo en el sentido que lo va a tomar como a solo un punto desde el borde no desde desde la parte izquierda por ejemplo desde la parte superior de la página como el absoluto pero el fixer lo que está diciendo es que quede fijo aunque sea un scroll y entonces ese siempre se va a ver y lo que se van a mover sea nosotros o sea supongo fixer vamos a guardar ejecutar entonces parece como no hubiera cambiado nada pero yo hago el scroll y fíjense que lo que se mueve son los otros valores pero él quedó clavado en esa posición y está fijo y no se mueve de mi vista cambio cuando lo que se mueve son los demás antes se movía todo cuando se oponía absoluto en cambio con fixed queda fijo por más que se haga un scroll que sería el cuarto posicionamiento y después hay uno más que es el más complejo hay mucha bibliografía como para leer como que sólo predijo que existe se los muestro más o menos cómo funciona eso tampoco profundice mucho sobre este tipo de posicionamiento es el que bastante se usa en los diseños de las páginas web para ubicar los distintos elementos pero bueno desplace algún ejemplo para que vean su comportamiento de hecho en algunos tutoriales dice como que es el más difícil de aprender y de encontrarle la vuelta es el flex box y te preguntan es el flow no sé si por eso encontré que es el flow ya no se pone como posicionamiento no pongo position flow si no pongo 10 de mis de la palabra flor que puede ser left o right quería hablar algo así porque como se va corriendo no lee no se vale todo dolores de cabeza o sea es como que aparentemente es el más complejo de ver desde habitar bastante complicado de entender como como encontrarle la vuelta de cómo aplicarlo sueles traje algún ejemplo para que vean las ventajas que tiene pero no mucho más o sea no no tengo un conocimiento profundo de esos acuerdos que yo le decía que no era la especialidad de esta materia a hablar de este diseño de página web en el sentido de maquetación no esté de ubicación de formatos o sea teníamos que ver un pantallazo general tenía que se tengo que llegar a javascript todavía para programar un poco una página que está con html e incrustarle código javascript o sea que lo mío con un pantallazo habría que ver qué materia se podría profundizar donde tengan que hacer una el diseño de una página web y ya les digo en algún tutorial que yo he visto decían que el flow era el más utilizado para hacer este tipo para hacer páginas diseños web los y lo más actual para utilizar pero como que tenía sus vueltas no era tan sencillo bueno entonces te dijimos que con este era el famoso píxel si su ahora por ejemplo digo bueno con estas cajas por ejemplo le voy a agregar a esta etiqueta de que mis d sean flow sean flotantes ya no se pone posición o sea que esto lo voy a lo voy a sacar no lo voy a comentar vamos a poner bueno en realidad no quiero que lo vean la realidad confunda porque el flow no necesita position así que vamos a sacar el tema es que le vamos a acercar lo de la caja y acá [Música] y voy a agregar un atributo más que va a ser cloud y que puede ser right goles y yo pongo por ejemplo leaf o sea que todas las cajas para hacer flotantes o sea que si yo le pongo les cada una se va a ubicar del lado izquierdo de mi página pero como está un abajo de una continuación de la otra si la primera se ubica a la izquierda la segunda se ubica también a la izquierda pero a situación de la 1 la 3 se ubica a la izquierda pero a continuación de la 2 y así sucesivamente entonces hay que así quedan fueron flotantes en ningún momento especifique coordenadas ni nada por el estilo simplemente por poner flow mes ubicó la primera etiqueta bien tirada para la izquierda a ella le seguía el numeral 2 que también se ubicó a la izquierda pero como ya estaba a la 1 se puso al lado de la 1 el otro al lado de la 2 y así sucesivamente si eso hubiera puesto real hubiera hecho lo mismo pero si hubieran ubicado del lado derecho entonces la 1 se ubicó del lado derecho la que le continuaba estaba del lado derecho pero al lado de la 1 la que le continuaba que era la 3 se puso del lado derecho al lado de la 2 y así sucesivamente de esta manera pusimos todas las cajas flotantes esto a veces dicen que se usan para hacer columnas el hecho de ubicar cajas así con left o con raid un al lado de la otra ese sería un posible ejemplo otro ejemplo no tengo armado que lo vamos a analizar sería de tener por ejemplo una imagen y este [Música] querer que por ejemplo un texto rodee a la imagen entonces eso acá bueno tengo el estado se aplique una imagen un formato para la imagen que va a ser de 200 píxeles de una imagen acá insertada que de un perro cocker que no lo habíamos usado en otro en otro ejercicio y acá copie cuatro párrafos que tienen un texto que en realidad no tiene ningún tipo de significado y también en latín y muchas veces se usa como para rellenar cosas pero en realidad no tiene ningún significado en loren ipsum cómo se llama google en esto van a ver que es un texto que en realidad sirve para rellenar pero para hacer ejemplos de relleno pero no tiene ningún tipo de significado puse cuatro párrafos copiando eso entonces así como está mi imagen se va a tener un ancho de 200 píxeles como va a salir se ejecutó esto el ejemplo se llama uso flow no tiene número determinado uso flow yo lo tenía hecho vamos a ver si lo tengo acá estás pero que me pone como siempre una imagen todo pegado al margen no le puse que estuviera centrada ni nada y a continuación el texto si yo hiciera esta imagen 2 pusiera justamente cloud en la imagen y por ejemplo pusiera left el texto va a rodear a la imagen como que se queda la imagen flotante y el texto debe de ubicarse abajo se ubica al lado entonces supongamos que yo ahora cambio y le agregó acá cloud 2 el reto fíjense que el texto rodea a la imagen este no lo pudo rodea porque se me terminó el tamaño de la imagen como que todo se reubica como esto estaba a continuación de la imagen y esto quedó flotante este texto queda como pegada a la imagen pero en otro lugar rodeando a la imagen y después se les eje en un ejemplo que estuve mirando que tenía que ver con esto si yo digo bueno hay ciertos párrafos que quiero que esté alineado a la imagen que esté bordeando la imagen pero por ejemplo estos dos no quiero que estén rodeando la imagen en realidad quiero que sigan abajo que se corte el flow de alguna manera y que sigan uno abajo del otro como estaba puesto cada párrafo uno abajo del otro entonces para lograr eso hay una voy a pelear una clase que se la voy a ir de aplicar el tercer párrafo es el que realmente a partir de acá quiero que se ese es el flow que deportado de alguna manera el efecto del flow de cortado y entonces vamos a poner una propiedad que se llama clear entonces voy a crear acá en style voy a poner una clase llamar con el mismo nombre que él que después que el atributo clear usted tiene el atributo utilidad el atributo de estilo y se pone box esto va a provocar que en realidad a partir del párrafo donde se aplique esta clase lo vamos a aplicar en este no en este no en el tercero acá voy a poner class riera y a partir de ahí es como que no va a entrar en ese ceros en rodear la imagen sino que se va a cortar podríamos decir el flotante y se van a ubicar uno abajo del otro entonces si lo ejecutó ven que este párrafo que antes estaba ubicado acá y todo seguía en la línea del flow de mi imagen ahora éstos empezaron a ubicarse uno abajo del otro entonces esa sería una de una aplicación me parece interesante debe haber muchas más cosas que se pueden hacer con este con el flow para ubicarlos las distintas distintas cajas o divisiones a la vuelta y que esto es así se es el valor de clear y se lo aplique a mi tercer párrafo use class clear que es el nombre que le puse a la clase podría haber puerto clase pp o cualquier cosa nada bueno entonces eso es con respecto a algo para que para que tengan una idea de algo de flow alguien ha mostrado algunos ejemplos más pero ya usando el mejor posicionamiento absoluto por ejemplo este officer donde éste use columnas por ejemplo o sea ubique de ciertas ciertos textos por ejemplo en dos columnas entonces ya dejé de usar el flow o sea para el floor del día tendrían que investigarlo ustedes o en alguna materia y se especializó un poco más en diseño de páginas web maquetación cómo ubicar las cosas cómo quedar una página hermosa además específico de otra materia acá les doy una idea de lo que se puede hacer entonces tenemos cinco tipos de posicionamiento podríamos decir el static es por defecto que aunque no lo ponga es así siempre lo tiras para la izquierda uno abajo del otro el relativo que en base a donde esté ubicado hay un desplazamiento de izquierda a derecha al desde arriba desde donde esté ubicado el absoluto teniendo en cuenta en los bordes de la página el fixer también teniendo en cuenta los bordes de la página la diferencia con el absoluto es que con el scroll queda fijo no se mueve y después no se pone position pero es también para ubicar las cajas o las divisiones el posicionamiento front aunque no se ponga por 6 jones se usa la palabra flow y el valor asociado sería right o left bueno vamos ese sería el uso del flow sería nuestro ejemplo 11 ahora voy al ejemplo 12 de estos ejemplos ya los tengo armados así que se lo voy a mostrar vamos a mirar el código y vamos a ver la solución para hacer un poco más más rápido y ahí están escribiendo en el chat al el bueno al principio confunde un poco con display a qué te referís con display es un atributo nunca lo vi en display arriba y abajo de los dos niños de una misma línea claro exactamente ok párrafos por sí solo baja box o sea es lo mismo in line que in line box porque el box sería el contenedor y después y eso te sirve para ubicar las cosas de bien distintos lugares también si se puede bueno antes seguíamos entonces con el ejemplo con el ejemplo 12 acá la idea es que yo voy a tener acá de fin en vez de clases definir identificadores y de una gaza me caja 1 caja 2 y caja 3 que va a tener distintos valores el posicionamiento para los todos va a ser absoluto o sea que cuando acá bueno el color va a ser rojo él les va a ser de 10 píxeles y el top va a ser de 10 píxeles o sea se va a separar de la izquierda a 10 píxeles y se va a separar de arriba 10 píxeles el ancho va a ser de 200 y el alto también la caja 2 también el posicionamiento absoluto es de color verde pero o sea el distanciamiento de arriba y digita izquierda es de 50 también va a ser de 200 píxeles su ancho y alto la caja 3 va a ser también absoluto color azul va a ser de 30 o se estaría en el medio sea la más cercana a la que tiene menos separación podríamos decir que la roja la verde la más distanciada y la azul sería la del medio y tiene un cierto el mismo ancho las 3 acá puse las tres divisiones cada división tiene un párrafo y cada división le aplique un y de ver y de no acuérdense que no se puede repetir no sé qué bueno cada división tiene su nivel si lo ejecutamos como esta para mí era el ejemplo 12 me quedan así acuérdense que la más distanciada era la verde tenía de 50 tanto top como leaf ésta tenía de 30 y ésta tenía de 10 así que esa sería una osea en los tres casos que estoy usando posicionamiento absoluto todo se está midiendo a partir del borde superior y del borde izquierdo tantos píxeles este lo que se podría hacer es el tema hay un atributo que se llama zeta index que se si vos le pone ese valor más grande es él o sea que caja se iba a ver poca casta superpuestas entonces cuál es la que quiero ver primero cuál es la que quiero que esté más frontal más adelante entonces ese es el que iba a tener el atributo zeta index mayor así que lo que voy a hacer e la roja este último pero la verde que esté adelante o sea les voy a poner tres y ahí estaré ya poner dos y éste le voy a poner uno para que para que quede al frente la tres y la azul que en el medio y la roja que de último o sea que el que tenga un zeta index que es una propiedad éste cuando se superponen de decir bueno cual quiero que venga en prisa en primer plano bueno se usa el zeta inglés entonces vamos a modificar le vamos a agregar acá a esta vamos a poner para invex y ahí está el color rojo y vamos a ponerla al final así que le voy a poner 1 después a ésta a la 2 a la que era verde pero que vas a primera así que voy a poner un 3 o el valor más grande ya está intermedio entre las dos voy a poner un 2 o sea que la verde tendría que estar en primer lugar vamos a dar al principio de todo y ahí quedaron al principio de todo se reivindicaron la verde que tiene un set a index mayor quedó en primer plano esta quedó en segundo plano porque tenía el valor 2 y esta última que tenía el valor más chiquito que tenía un 1 eso si hiciéramos en algún momento que se superpongan las cajas bueno quisiera hacer algún efecto de este estilo como las reubicó cuál es la que va en primer plano teniendo en cuenta este atributo z index que suponga sé que ahora no sé por algún motivo una de las cajas las quiero poner invisible entonces hay un atributo que se llama avíseme visibility novísimos visibility que le puedo poner el hi para que éste quede oculta entonces lo voy a hacer con la azul azul donde estás acá entonces le voy a poner vamos a ponerle haider para que desaparezca se haga multa entonces acá en el medio estaba la azul y ahora desapareció no se ve o sea que de esta manera hicimos un ejemplo con posicionamiento absoluto superponiendo y ahí vimos dos atributos más que se pueden llegar a usar z index y el recibir y t se entendió no hay preguntas pero sus cosas hay un montón de cosas y vamos adelante adelante el que es la que tiene valor mayor es la que va adelante por eso a la 3 le había a la verde le había puesto 3 el valor mayor a la verde la roja que quedó última le he puesto 1 y la del medio que era el azul le puse 2 pero la verde que la que está en primer plano en seta inglés el que tiene el valor mayor y se quede en primer plano de ahí tenés que jugar con todos los demás valores para decir bueno que quede anteúltimo último o lo que sea no es un formulario con recursos y siempre está dentro de él por ejemplo yo la etiqueta four y lo que pasa que si no se ha visto que el formulario tiene distintos componentes tiene distintos controles ahora sí voy a vas a dar en forma uniforme yo lo pondría en la etiqueta forma se tendría que extender o sea tendría que estar asociada a la etiqueta form si bueno se puede ponerle un fondo o algo algo que tenga que ver con eso y abarcaría todo el formulario en el formulario que está formado por un montón de controles nosotros no habíamos puesto live en este caso habíamos puesto una tabla para ubicar los controles no sé cómo voz en otra materia pones los controles del formulario sí y ahora sigo después bueno todo de ese bloque de formulario lo metiste en un día bueno después con ese día es mucho más general que el formulario pero en este caso si el dip tiene tiene solamente al formulario no sé que este tipo de atributo le quieres poner pero si fuera de color bueno esta aplica el formulario yo creo que sería lo mismo aplicarlo al dip que aplicarlo al foro porque el foro está contenido en el libro y lo único que hay si en realidad el forma estar metido en un día pero tiene un título tiene otras cosas bueno si lo metes en el día va a aplicar a todo si lo metes si no lo va a aplicar al foro no al título dije había 2 [Música] otro ejemplo tengo acá preside barra superior barra lateral el contenido si nos fijamos un poco me voy y en realidad tengo una división que es la barra superior que va a tener algo que van a ver que acaba arriba para ver una barra superior después va a ver una barra lateral acá al costado a la izquierda y después un contenido que en realidad no dice nada dice acá el contenido y lo repite un montón de veces eso es mi body está metido dentro de este tercer día de la de twitter service entonces me puse acá fixer en vez de poner absoluto porque puede cuando se hago un scroll quiero que la barra superior quede fijo y la barra lateral quede fija entonces en el top y en el left que se pegado bien al margen bien arriba bien a la izquierda la barra superior un ancho de un total de el 100% de mi página un alto de 50 píxeles un fondo negro y color letra blanca el lateral también va a ser fixed o sea que cuando hago un scroll no se va a mover en el les va a estar pegado bien al margen pero fíjense en el top del top yo no quiero que sea si yo a éste le puse que tenía una altura de 50 píxeles yo quiero que esté debajo de ese debajo o sea que se tiene que desplazar 50 píxeles para empezar el otro 12 por eso en top le digo que se desplace 50 píxeles para que quede pegado a la barra lateral a la barra está superior que tenía un alto de 50 píxeles bueno que se desplace 50 píxeles para que quede comience a y un ancho de 200 un alto de 100 o que me ocupe de acá para abajo todo y un color gris y el contenido que sería ese texto que se repite un montón de veces va a estar en la otra división en la división que no es fija o sea no es fija y el desplazo sea donde la voy a ubicar el texto lo voy a ubicar teniendo en cuenta un pago pero el padre no va a tener que tener en cuenta la altura de la barra superior la barra superior tenía 50 sentidos que quiero no quiero que quede ahí pegado al 50 si no quiero que haya una separación de 20 más entonces le puse 70 píxeles paddington o sea del contenedor que haya 50 de respecto de la posición superior ahí se va a saltear los 50 píxeles de la barra superior y la parte del mes para saltear la barra lateral la barra lateral tenía un ancho de 200 píxeles solo quiero que quede pegado a y quiero que hace una pequeña separación por eso le puse 220 para que sea 20 píxeles de separación para que empiece el texto entonces por eso a la división primera le puse barra superior la otra división en la barra lateral y la que tiene el texto con el pad y es la que tiene contenido y se ejecutó esto acá tenemos la división superior que está la de 50 píxeles de altura no tenía 0 2 y 0 leds y la división lateral tenía un top de 50 píxeles por eso empieza exactamente donde termina la otra un ancho de 200 píxeles una altura hasta el final diferente cuando hago el scroll que se mueve el texto pero las barras laterales superior quedan fijas porque que le puse fixed y esto lo repetí un montón de veces para que quede así y fíjense también los 20 píxeles que yo le puse en el padding el padre héctor era de 70 entonces agarró los 50 más 20 más y el padding leaf también tenía 220 o sea 200 ocupaba esto más 20 acá están los 20 de pal inglés entonces por eso el texto no está pegado acá sino que hay una cierta separación entonces para acá es un ejemplo del posicionamiento pixel y que permitía hacer un scroll de la otra división donde sostenía el contenido entiende son distintos ejemplos de posicionamiento no vamos con dos ejemplos más y ya terminamos ya están escritos los dos ejemplos porque así ya la clase que viene viene el parcial y la otra se empezamos con tema nuevo que es javascript qatar aguanten un ratito vaso son dos ejemplos más y listo después tenemos bueno entonces este era el ejemplo que vivimos usted va a tener dos columnas la primera columna va a ser absoluta o sea que voy a medir bien pegado arriba a la izquierda un ancho de 200 píxeles pero a pesar de que le digo que el tope 00 de pixel acá va a haber un margen a la hora de escribir porque fíjense columna 1 mil en todo el texto que tiene y columna 2 todo el texto que tiene bueno para escribir eso va a haber un cierto margen entonces el doc martin va a ser de 10 píxeles y un determinado color la columna 2 más tarde a la derecha acá tengo la columna 1 y acá tengo la columna 2 la columna 2 en realidad qué margen más de para tener y si ésta tenía un ancho de 200 esta va a tener un margen de 200 + 20 para que no quede pegada va a haber una pequeña separación margen list 220 va a haber un margen rayita por acá un pequeño margen de 20 píxeles el mar sin top o sea si la primera columna empezaba con 10 píxeles de separación esta segunda columna también empieza con 10 píxeles arriba de separación y otro color o sea que tenemos la primera absoluta y a partir de ahí me estoy moviendo con margen left imagen right marcel top para ubicarla al lado de la otra y acá cada división tenía un montón de texto división y de columna 1 y división y de columna 2 ejecutamos es el 14 y tenemos las dos columnas hasta la separación esto grado de 207 arrancó en 220 no había padding acá así que fíjese que está pegadito o sea lo único que puse es un smartphone y un top mar sin fin es decir que aquí hay una pequeña separación blanca que son los 10 píxeles y acá a la derecha aunque no se vea muy bien porque es un color rosa pálido acá hay también una separación de 20 píxeles porque puse un raid margin-right de 20 píxeles este acá estar todo el contenido de una columna acá no es fixed así que hago el scroll y se mueve todo esta es absoluta y a partir de esta me moví con el martín les martín top y ubique la otra columna y ahí está el texto en cada una entonces otro ejemplo y acá fue con absoluto yo publiqué dos columnas siempre que tener en cuenta cuando las ponemos pegadas bueno que el ancho de una va a significar bueno qué margen dejó de la otra no tiene que ser ese tamaño y algo más o ese tamaño exacto para que quede pegadito es entonces sería el ejemplo 14 con absoluto y por último en este ejemplo tengo también dos columnas izquierda y derecha pero es como que tengo más cosas puestas en esas columnas en la columna izquierda imagen de a renglón puse un párrafo donde acá es un link al teatro colon está dentro de un párrafo el párrafo también en el style tiene una alineación centrada y eso fue en una división en la columna izquierda en la columna derecha de que dos renglones puse un párrafo pero puse una imagen acá que también postal en un párrafo está centrada esa imagen piedra de vida la imagen del teatro colon en estas dos divisiones la imagen también es de un formato acá cierto ancho un borde estay sólido y un ancho de un grosor de d de borde y acá lo que me interesa es esto qué bueno la posición absoluta en las dos columnas alto 400 píxeles ancho el 50% de mi pantalla el 50% va a ser para una columna el otro 50 para la otra columna un color como voy a escribir texto en esa columna formatos del texto elefante tamaño color subrayado cómo se llama itálico cursiva negrita y borde de oro le voy a poner a esta parte de mi columna borde superior borde izquierdo y borde inferior y después un ancho de borde y un color de borde no le puse borde derecho porque porque si no me estaría dividiendo en dos lados columnas entonces acá el borde derecho no lo tengo para la columna derecha también es absoluto ahora fíjense tiene que estar pegada a la otra la otra tenía un acto del 50% entonces ésta tiene un margen les martín le fue un margen izquierdo del 50% para que salte la columna izquierda y ahí empiece la columna derecha también el mismo alto el ancho es el otro 50 de la pantalla otro color y borde que borró le voy a poner superior derecho e inferior no le pongo izquierdo porque acá en el medio no va a haber borde y le puse un determinado color para el texto porque iba a haber un texto perdón un color de borde y un color de un ancho de borde o sea que vamos a tener en 1 en una parte en una columna un texto que va a ser un link hacia otra página y en la otra una imagen entonces si ejecutamos cuando puse absoluto y ahí está pero es que me muevo para allá y se ve el último borde entonces acá tenemos el borde del primer borde de su especie sinde que fue superior izquierdo y abajo no el derecho y para esta columna tampoco especifique el izquierdo especifique arriba el que está a la derecha y el que está abajo no el izquierdo cada uno columna izquierda con un color con una derecha con otro color esto está dentro de un párrafo opuesto están tan centrado y esto es un párrafo has entrado quiero un link así que todo si anda bien tendría que llevarme a la página del teatro colón bien ahí me lleva a la página sí o sea que la vida divide y puse en este caso una imagen puse acá un link podría haber puesto cualquier otro elemento y separé esos de son como porciones para ubicar las distintas las distintas componentes entonces vieron ahí distintos ejemplos con absoluto y relativo y no luce casi nada el absoluto o el fixer para hacer un scroll para plantear por ejemplo columnas como lo plantea la a las columnas en base absoluto y después manejándome con el mar sin texto margin top según como quisiera para que quede una a continuación de la otra no bueno eso entonces tiene que ver con el posicionamiento como ubicar obviamente que hay mucho más para mucho más para practicar para profundizar como decía ezequiel hay muchas cosas más para ver es muy extenso no hay libros completos que tienen que ver con maquetación o sea el diseño de páginas web cómo poner la mejor más lindas con mejor formato obviamente hay muchos más comandos de css este vimos algo de un panorama alguna pregunta voy a subir primero con respecto al parcial y es como no vamos a decir nosotros con qué formato posicionamos o o sea el otro puede ser el segundo parcial porque este espacio no va a tener posicionamiento con el segundo no vas a poder hacerlo como vos quieras desde abajo te digo así en dos columnas o que quede como como esta imagen y entonces vamos bastante te vas a dar cuenta que hicimos con columnas mejor o sea con la absoluta santa a lo mejor puedes mal puedes crear dos columnas sin meterte en posicionamientos raros o sea del frío no no les voy a exigir para nada de hecho yo éste tampoco profundice sobre ese tema y el relativo lo usamos muy poco así que puede ser fix eso puede ser sólo el más usado para nuestros ejemplos si te preguntan a mí en el primer parcial que entra el primer parcial entra hasta formulario incluido formulario donde esté nosotros aplicamos a través de atributos de las etiquetas formatos daba el formato color en forma 2 en font estaba el formato está ballet y que el atributo face de o sea todo el formato estaba metido en el html no había style no había archivo css no había comando css en lo que aprendimos antes del csc todo html exactamente incluido formulario como hicieron el trabajo práctico con trabajo práctico en ningún momento les dije de hacer nada con comandos ss este sermón donde se le pregunta al mundo si va a ser por mail por link o cómo va a ser más el examen por clase en clase lo voy a publicar como una tarea ustedes se hicieron tareas bueno el trabajo práctico que ven y pero en otras materias hicieron tareas decimos bueno entonces saben subir tareas y bajar las tareas bueno este examen es como una tarea más lo que pasa que la vamos a hacer en el tiempo de la hora de clase es decir vamos a estar todos conectados en mí vamos a estar todos con las cámaras prendidas cuando empieza el examen yo habilitó o público la tarea todos descargan la tarde