Hola bienvenidos a una nueva clase y si el capítulo anterior tenía algún sentido.
Bienvenidos a Bootstrap.
Qué es esto Bootstrap.
Es un framework.
Vamos a explicar medianamente qué es un framework o marco de trabajo medio que se va describiendo solo
un framework se aplica no solamente a los lenguajes de programación se aplican también a esto que no
es del todo un lenguaje es vamos a decirlo como un lenguaje de marcado o un sistema de etiquetado para
el diseño visual de una página web.
Entonces los frameworks orientados a un lenguaje son un set de herramientas son una serie de reglas
que me ayudan a trabajar de una manera mucho más ordenada y que me faciliten el trabajo porque ya vienen
un montón de funciones pre hechas bueno para HTML también sucede lo mismo hay varios Freund Works o
libre como librerías a donde Yai funciones o partes ya hechas.
Cuando hacemos HTML y diseñamos páginas web.
Bueno yo no te desalientos que estudies y profundice sobre el tema vas a ver que es todo.
Por ejemplo esto que estamos viendo acá en pantalla hacer de que este pedazo de texto este párrafo salga
a una cierta distancia armado en lo que yo veo aunque es invisible.
Veo que hay como una especie de caja invisible que contiene todos estos elementos hacer que esta imagen
salga calado acá que veo veo tres columnas todas de la misma altura todas del mismo ancho veo un pequeño
margen que se respeta tanto verticalmente como horizontalmente veo un pie de página veo una barra arriba
que queda como pegada Ben se llama Sticky bars muchas cosas que si no las tuviera que hacer a puro HTML
por mi cuenta para mi proyecto cada vez que hago un proyecto no sé demoraría años por cada por cada
trabajo.
Así que Bootstrap está para que lo usemos.
Miren qué beneficios o ventajas me trae.
Vamos a lo más evidente lo más necesario hoy en día la mayoría de la gente que navega por sitios normales
salvo excepciones ingresa desde un teléfono móvil.
Uy qué lío que era cuando no existiera esto y necesitábamos de que las cosas se acomoden solas como
está pasando acá o miren yo ya tengo una configuración de un ancho de pantalla propia de un teléfono
y miren cómo.
Qué pasa ahí.
Miren cómo ese botón se transforma automáticamente.
Es una web responsive.
Y qué pasó con las columnas se transformaron en filas.
Miren cambia y cambia.
Son filas esto es un frontend lo que mire el usuario una aplicación web que puede ser nuestra responsivo.
Miren qué importante todo este ordenamiento.
Todas estas funciones que les aseguró escribirlas programarlas desarrollarlas nos tomaría muchísimo
tiempo muchísimo trabajo.
Y cuando vamos a hacer nuestro programa nuestra aplicación se nos va a ir todo en esto ya viene hecho
muchachos amigos amigas.
Ya está desarrollado esto para qué vamos a gastar energía en algo que ya viene hecho y encima es gratis.
Vostra apps.
Miren qué bueno que esta fue desarrollada por Twitter y lo hizo libre.
Así que si lo hice.
Twitter tiene que estar medianamente bien desarrollado.
A decir verdad hoy el 90 por ciento.
La verdad no tengo el dato cierto pero casi todo está basado en Bootstrap.
Así que vamos a usarlo vamos a usarlo porque nuestra calculadora veía Emecé lo merece.
Me voy a venir acá estoy en otra carpeta curso volvemos a nuestra calculadora
lo que voy a hacer para que tengamos todas las versiones
voy a crear una nueva carpeta.
Rápido rápido para no perder tiempo en esto vamos a ponerle de nombre y Emecé yo de vostra para que
nos quede identificada y vamos a venir acá el código.
Lo voy a copiar todo a la versión sin Bootstrap y acá vamos a crear vamos a crear las nuevo archivo
y se va a llamar y en ese punto de HP.
Listo.
Bueno por eso no voy a pedir el código.
Vamos a hacer lo siguiente mirá a este framework que yo lo podría bajar acá de su página oficial pero
voy a venir acá a Google que recuerdo voy a venir a Google Líbia a buscar.
Simple acá lo tengo recién estuve buscando simple Bootstrap template o plantilla.
El primer resultado y volví a dejar el link ahí en el área de contenido del curso.
Y acá hay un montón de ejemplos ya de pequeños sitios desarrollados con este framework a los cuales
nosotros vamos a poder acceder para ver un preview de éste.
Por ejemplo vamos a ver un previo en vivo son cajas típicas cajas que vienen con una imagen para que
se ponga una descripción y miren el orden que tiene.
Vienen páginas esto es hacernos la vida un poco más fácil.
Necesitamos tiempo para hacer lo nuestro que es programar nuestra aplicación así que esto ya viene hecho
sí señor vamos a aprovechar esto.
Bueno elijamos una que se adapte a nuestra calculadora no tiene muchas funciones así que con algo bastante
simple no nos podemos arreglar.
Haber visto algo puede ser esta verdad.
Miremos rápidamente y si puedo ser cualquiera podamos poner imágenes texto recomendaciones.
Pero bueno vamos con algo simple por ahora y cualquier cosa yo puedo irme y buscar elementos de otra
y ponerlos acá que va a funcionar.
Vamos a empezar mejor no hay cómo hacer las cosas y así se entiende mejor ya la vimos en vivo.
No le veamos le veamos.
Tiene un gran encabezado Miren tienen menú acá arriba.
Y con este efecto cebra se le suele llamar esto blanco gris blanco.
Tiene un pie de página y abre el menú.
Cómo responde esta barra de arriba.
La verdad que me lo he hecho nunca voy a achicar a Miren esto acá tengo tres
menúes o tres opciones en el menú.
O mejor dicho que hacen scroll en la web que avanza o no.
Que cuando yo lo Hachiko y lo veo en un celu miren en qué se transforma el menú en el típico botón de
despliegue.
Qué bueno que está.
Si esto es para nosotros es lo que le va dice un amigo mío.
Listo.
No más palabras.
Vamos a bajarlo porque es lo que quiero.
Me lo voy a bajar.
Vamos a ver primera vez que lo hago y me tengo fe.
Vienes hypeado yo lo voy a descomprimir.
Bueno acá descomprimido todos los archivos por lo general estos tres componentes pueden venir en una
carpeta que diga Bootstrap o pueden venir por separado.
No es habitual que vengan dentro de una carpeta vendor.
Les cuento que viene dentro de una carpeta vendor porque probablemente esto se armó con un manejador
de repositorios.
Suena muy raro pero no es tan difícil que se llama Composer que nos ayude a instalar estas librerías.
La verdad no sé por qué usaron Composer ACaP cuando era más fácil copiar pero bueno no importa.
Lo dejamos tal cual viene.
No es nuestro interés ahora va a funcionar bien entonces vamos a copiar todos estos archivos los copiamos
acá tengo copiar tengo copia de los nueve elementos y luego me voy a ir a HT Docs
vamos a ir docx.
Yo lo tengo acá curso y vamos a buscar programas en el centro.
Voy a buscar y Emecé larga aquí está perfecto voy a copiar todo esto acá pero me voy a pegar todo esto
acá listo yo tengo todos los archivos transferidos.
Miren que hay un índex punto HTML bueno para que me quede.
Que al final no tenía mucho sentido pero por las dudas agarra el código de nuestra calculadora original
y le voy a pegar en este PHP nuevo que tenemos por acá que es el MSI hombe punto PHP y listo ya lo grave.
Bueno miren qué interesante tengo ahora la carpeta y Emecé y hombe.
Bueno esto tiene varios archivos dignos de un proyecto interesante no más proyectos de un solo chivito.
Ya estamos a otro nivel.
Entonces por qué este archivo se llama índex.
Bueno esto es algo básico.
Cuando creamos un índex punto HTML sucede lo siguiente Voy a venir acá ahí estamos.
Voy a salir para atrás y acá está la carpeta y Emecé be larga que si fuera uno de los ejemplos que venimos
haciendo.
Cuando yo ingrese acá a su vez voy a tener que ingresar al archivo o al programa PHP para que se ejecute.
Cuando tenemos un índex HTML en cuanto ingresa a la carpeta se está o se va a ejecutar ese índex si
es un HTML se ejecutará el HTML y si tenemos un índex punto PHP se ejecutará por defecto sin necesidad
de que lo escribamos en la web de un R.L a ese archivo.
Miren yo voy a entrar Guala tengo la plantilla que me acabo de descargar funcionando en la dirhams y
la dirección y si ustedes se dan cuenta cuando yo escribo índex punto HT HTML es lo mismo.
Para eso sirven los índex vienen a ser los archivos que se ejecutan por defecto.
Cuando entro a una Uré o R.L cuando entro por ejemplo a la página web y a entrar a una página de noticias
de Argentina yo entrar a una página de noticias argentina no habíamos amargar sin sentido podemos entrar
a Samsun puntocom.
Bueno aunque yo no lo puedo ver acá hay un índex no sé si será punto PHP o punto HTML que se está ejecutando.
Bueno por eso ahora.
Por eso ahora simplemente con poner esa parte ya se ejecuta el índex.
Bueno bueno bueno acá van a tener que trabajar ustedes.
Lo voy a hacer una propuesta y el resto espero que lo desarrollen y lo compartan ustedes.
Quiero ver sus compañeros también quieren ver qué hacen qué podemos compartir vamos a aprender.
Bueno acá tengo el Index puntuó HTML y yo voy a aprovechar voy a renombrar el archivo y lo voy a cambiar
a PHP.
Viene un problema menos que esto va a funcionar igual.
Yo calculo que sí presionó Enter.
Perfecto.
Ninguna variación.
Bueno acá tenemos tendríamos que poner calculadora y Emecé para que salga en la pestaña el título.
Miren acá dice vendor.
Dice Link HR-V.
Esta línea es a donde estamos trayendo o vinculando la librería o en realidad el free work.
Bootstrap a esta página vean que es un archivo sé ese es si no se olvidaron todo lo que es CSS.
En realidad está haciendo referencia a archivos de estilo.
Ya vamos a entrar acá ya vamos a entrar sigo ya es ya vamos a entrar CSS y se llama dice Bootstrap.
.1.000 puntos es bueno está lo que se llama minimizado está todo el código uno al lado del otro para
que ocupe menos espacio.
Entonces no quiero entrar ese vamos a entrar a ver acá.
Esta es la versión que no está compacta es más legible la otra versión está para que el sitio cargue
más rápido y pesa menos bueno mira esa persona que decía me acuerdo a mi colega por qué no profundizó
en CSS porque yo quiero desarrollar toda la página.
Bueno en este curso tampoco vamos a aplicar a fondo porque me estás diciendo que te vas a poner a desarrollar
a mano esto vamos a sigo sigo bajando.
Bueno le voy a meter Gass porque me voy a demorar un buen rato si ya vamos por la línea 2000.
Vamos vamos.
No quiero ser malo sé a lo que se refería ese alumno quería aprender nada más que un poco de CSS y se
lo estoy tomando de punto para este ejemplo.
Pero ustedes también me entienden CSS lo básico lo vamos a aprender a la fuerza lo vamos a aprender
si o si porque de tanto trabajar te vas empapando.
Obvio.
Pero yo sigo bajando mientras hablo con voz mostrándote todo el CSS que compone Bootstrap para que ande
así tan lindo como lo vemos que anda todas las opciones que tienen sigo bajando vamos por 7000 líneas.
Bueno es tramposo porque hay muchas líneas en blanco pero no importa son unas cuantas no.
Entonces si nosotros nos vamos a dedicar a hacer todo eso.
Obviamente para nuestra aplicación capaz que se use el 1 por ciento de lo que hay acá pero igual se
viene hecho y por gente que la tiene muy clara.
Entonces bueno en todo caso te quieres dedicar al CSS y bueno te puedes especializar en eso.
Bueno de todos modos quería cumplir con mostrarles lo que hay detrás de semejante herramienta y no son
los únicos archivos y archivos hay mucho más en Bootstrap mucho más bueno.
Así que ya nos queda claro que estamos incorporando todo este framework.
Con esta línea sigo bajando sigo bajando y me encuentro con estas tres palabras que ya me suenan a que
son del menú las tres palabras del menú.
Ya veo esto que dice acá estar vostra también.
Bueno me vuelvo al código y empiezo a buscar bebamos start vostra.
No tienen que decir
calculadora y Emecé.
Bueno lo del menú no lo voy a tocar.
Qué hace el menú.
Se acuerdan.
El menú lo que hace es es trolear la web.
Entonces quiero ver qué se les ocurre a ustedes qué información se puede poner acá.
Ya vamos a ver dónde ponemos la calculadora ahora para este ejemplo simple quiero poner la calculadora
acá pero podría haber información consejos y en base a eso cambiar lo que dice cada uno de los items
del menú cada una de las opciones del resto.
No toco nada porque eso es lo valioso.
Es un problema cuando nos dedicamos a destruir la propuesta que nos hizo la persona que desarrolló esta
plantilla.
Bueno Bienvenidos a escarola lindaba que obviamente si estoy acá vamos a editarlo.
Voy a poner bienvenidos calculadora y Emecé y acá abajo nuestro eslogan no es belleza es salud veamos
cómo luce
me encantó está buenísimo bueno.
Dijimos que íbamos a poner en esta primera sección nuestra calculadora.
Entonces me vuelvo y como dije sección.
Miren a partir del logo del encabezado olvidé mencionar esto dentro de las etiquetas Gelder no confundir
con él Geb con éste a veces nos confundimos dentro del jefe se ponen sobretodo estas inclusiones palabras
claves varias cosas que con el tiempo vamos a ir aprendiendo pero esto es propio ya de Bootstrap.
El Jer con su clase es lo que representa esto que está acá esta parte azul es un encabezado digamos
entonces ahora vienen las secciones que están en etiquetas que oh casualidad se llaman sección.
Bueno cada etiqueta sección Beam que tiene un Heydi.
Para qué usamos.
Y de los IDE sirven para darle una identificación con usos múltiples sobre todo para cuando usamos JavaScript
y hacer alguna operación alguna acción dinámica que necesitemos.
Vamos a ver eso pero por lo pronto yo sé que esto está siendo usado por el menú para que cuando hacemos
clic en Abat lo que hace por detrás un programita en JavaScript es hacer scroll leer la web hasta la
sección que tenga como Heydi Abat.
Así funciona esto de los menúes donde yo hago click en servis.
Le estoy diciendo en este HR-V anda escarola hasta la sección Servicios que está por acá.
Ahí está bueno.
Esta es la primera sección a donde queremos poner la calculadora.
Entonces veamos cómo luce cómo podemos adaptar justo voy a cambiar este título y le voy a poner calculá
tú y M se bueno miren que cada sección tiene un Dib que se llama container muestra son cosas que yo
vi respetando pero acá sí me animo a tocar más se acuerdan de los Dib que les dije que son son divisiones
que yo puedo hacer para uso general.
Bueno lo que sucede es que a cada Viv yo le puedo poner una clase cada clase ya viene presentada por
Bootstrap y por ejemplo las clases vostra de tipo Row quiere sin fila generan eso una fila para agregar
contenido.
Entonces miren si por ejemplo yo puedo copiar todo este pedazo este abre la fila este de acá abajo la
sierra.
Entonces siempre con prolijidad no pueden ni sobrar ni faltarme un Dib que habrá un DIM que cierra tiene
que estar todo con coherencia.
Vuelvo a pegarlo acá lo grabo.
Miren lo que sucede acá actualizo ven y aparecen dos uno abajo del otro en el mismo orden miren esto
qué interesante.
Dentro del rock dentro de la fila estaba va a ser mi fila.
Entonces acabo de separar tengo el contenido.
El contenido está metido en un vip que tiene una clase que se llama Cool.
El eje 8.
Vamos a resumir esto en que vostra ordena las cosas en una especie de GRID o grilla de 12 columnas o
sea desde acá hasta acá hay 12 columnas imaginarias.
Bueno lo que estoy diciendo es que el ancho de este pedazo de acá tiene un ancho de ocho columnas.
Miren esto vamos a ponerlo acá que es de 6 o sea la mitad de dos me vuelvo Bootstrap actualizo y se
achicó.
Miren lo que pasa ahora tengo una fila y este abre y cierra columna.
Entonces dentro de la misma fila voy a poner dos columnas de seis.
Entonces como la total es de 12 tendrían que entrar una al lado de la otra.
Si tuviera que hacer esto yo a puro HTML escrito Jahr codeado sin necesidad de recurrir a Frend Word
y sería trabajoso no lo haría tan rápido.
Esto también me permite que yo puedo poner y miren si es de tres tres por cuatro doce entonces voy a
poder poner cuatro columnas.
Hoy puse las cuatro creo que con dos se entiende.
Ahí tenemos Virenque práctico bueno así de a poco van a ir aprendiendo cada una de las clases y de las
utilidades.
Bueno volvamos a que teníamos una ocho.
Yo esto no lo quiero tocar.
El título está en un H2 de estas etiquetas pe determinan un párrafo.
Entonces dejan un espacio para abajo estas etiquetas o l contienen adentro una lista y cada elemento
de la lista la tengo que poner un Lehi que abre y otro que cierra.
Miren el huele abre acá el huele cierra acá este huele lo que contiene esta lista voy a actualizar porque
ahí está es esta lista de acá ven cuatro puntitos por cada L'Illa te aparece el puntito miren qué fácil.
Bueno yo no voy a necesitar este huele pero si calcula tu VMS acá podemos poner algunos consejos de
cómo pesarse y medirse para que hagas algo que se me ocurre a ver
a mi me gusta me gusta como hackeando y acá a donde estaban el contenido el LQ.
Vamos a poner nuestra calculadora propiamente dicha.
Entonces voy a venir al archivo y Emecé punto PHP.
Se acuerdan a donde teníamos la calculadora y vamos a poner.
Por lo pronto el formulario.
Vamos a ver qué hacemos con copias solamente el formulario.
Acá me equivoqué y me vengo a índex acá a dónde va el contenido pego el formulario ahí lo tengo.
Lo primero que debía tener cambiar antes de que me olvide es esto porque no apunta ahora a m se tiene
que apuntar a nosotros mismos.
Nuestro archivo es índex punto PHP.
No se preocupen ya vamos a peor arriba de la parte del PHP.
Pero por ahora vamos a hacer el HTML índex junto a PHP porque esto está llevando tiempo porque es mucho
trabajo estamos haciendo nuestra primera aplicación en serio.
Paciencia.
Bueno miren qué lindo se ve ahora la red que me gusta mucho pero esto podríamos mejorarlo.
Me iba a venir acá donde tenía todas las plantillas y a ver si me puedo robar algo de acá de otro ejemplo
a ver denme un segundo por favor.
Estoy viendo algo acá interesante vamos a ver el previo voy a ingresar al preview para verlo en vivo.
La verdad me está gustando un poco esta caja más que lo que tenemos toda esta caja
a ver si le podemos aprovechar.
Voy a ver vamos a hacer click derecho.
Lo voy a hacer por acá.
Inspeccionar.
Voy a ver el código y miren si voy pasando se va pintando a mi izquierda acá verán qué parte estoy seleccionando.
Entonces como tengo costumbre y ustedes están bien porque vienen de ver esta misma plantilla en otra
versión a ver a ver quiero seleccionar toda esta
este es el título.
Esta es la columna entera no lo quiero ver bueno creo que si copio esta parte va a estar bien voy a
dar click derecho acá.
EDIT as HTML y acá tengo todo el código que necesito.
Lo voy a copiar aunque hayamos trabajado más sin necesidad esto no me importa.
Acá a ver si es donde lo quiero.
Voy a reemplazar la columna No a donde empieza el título.
Aquí es donde Terme el formulario.
Ahí está déjenlo limpio a donde empieza la columna y la que cierra en el medio vacío.
Y acá voy a pegar esto que acabo de rescatar.
Bueno veamos que sucede.
Volvamos a nuestro proyecto.
Esto me gusta esto me gusta.
Entonces volvamos a nuestro código
no sé si tengo muy agrandado esto si lo que sí se ve demasiado grande a esta este rectángulo que tenemos
acá tiene una imagen para poner acá arriba de esta caja.
Entonces bueno yo voy a agarrar y me voy a buscar una imagen buena salud
a ver qué imagen puede ser vamos a buscar esta o es de muy poca resolución quizás veamos otra a ver
que puede ser esta
cargó la voy a guardar guardar el vínculo cómo
me equivoqué no es el vínculo es la imagen que guarda mi imagen cómo lo vamos a poner salud y vamos
a guardarla por ahora la voy a guardar en el escritorio y la voy a la voy a copiar acá la tengo en el
escritorio la copio copio la imagen mojarle copiar no lo pueden ver porque yo tengo un costado pero
sé que ustedes no van a tener problema.
Y vamos a grabarlo a ver en la carpeta y Emecé y hombe la verga vamos a grabarlo vamos a crear una nueva
carpeta y le vamos a poner imágenes y acá dentro de imágenes Grandal para que vean acá adentro imágenes.
Vamos a pegar la foto.
Salud puntos JPG.
Entonces ahora me puedo volver y acá a donde vamos a donde se pone la dirección de esta etiqueta.
Recuerden las etiquetas y M.G. que no tienen son una de las pocas que no tienen etiqueta de cierre tienen
una propiedad que es SRC un atributo a donde yo pongo a donde está guardada la imagen.
En este caso está guardada en nuestro propio servidor y puedo poner algo así como ya directamente a
ver si es así salud punto.
JPG miren cómo queda
muy bueno ahora vamos a poner la calculadora acá.
Ahora sí voy a copiar el formulario me vuelvo de este lado.
Ahora me olvidaba de poner acá calcula tu y Emecé.
Nuestro eslogan nuestro eslogan
Esto es todo el texto de la tarjeta así que acá vamos a poner el eslogan que era no es belleza es salud.
Vamos viendo como queda
bueno está bueno y este es el botón lea más el botón azul que está más abajo.
A mí esto no me interesa demasiado por ahora pero hay algo que sí me interesa el botón pego el formulario
pego el formulario el formulario y veo como queda ver Guau qué bueno que está quedando a mi me gusta.
Ustedes me contaron si les gustó o no.
Qué feo que es mi botón Y qué lindo que está este botón de acá abajo porque este botón es de Bootstrap.
Entonces voy a venir acá y le vamos a robar el botón A ESTA GENTE.
Miren dice es un link en Reddit.
En realidad el botón las etiquetas a son links para que apunte a una R.L que yo tengo que poner en el
HR-V HR-V es a donde voy a ponerla.
R.L de este link yo acá puedo poner por ejemplo HTTPS dos barra no sea una página local Cadena 3 junto
con puntuará.
Entonces ahora si lo refresco era
a mi me llevó a la web en cuestión que yo puse en el link vuelvo
no me interesa nada de esto pero si me interesa la clase que le aplicaron a este link para que parezca
un botón así redondito azul muy bueno estaba entonces copiar toda la clase y esto se lo voy a poner
a nuestro botón.
A este imput de tipo submit por acá le da.
Es más apropiado ponerselo que adelante
veamos cómo queda esto.
Wow está muy bueno
esto no lo necesito.
Vamos a bajar acá voy a poner prolijamente un Verea ahí porque ya no me gusta tanto el botón A la derecha.
Incluso le vamos a poner uno más y yo disfruto muchísimo con ustedes porque no hago más que mostrar
cómo programo todos los días cómo armo los paneles y las web de mis emprendimientos con los que me gano
la vida así paso a paso porque la realidad no es como muchas veces se da en los cursos que es todo compacto
y así mediocre como por arte de magia.
Bueno esto de acá abajo Miren
podemos poner con consulta más información es un ejemplo quiero ver qué se te ocurre o qué pensás que
es más apropiado poner acá en y acá voy a poner un link
clínica Salud y acá iría la dirección de doble WWD clínica Salud puntocom.
No se olviden que importante que es el marketing de contenido.
Estas son ideas que le pueden dar Uds. a sus clientes de decir hoy clínica vos podés ofrecer a tus futuros
usuarios a tus futuros pacientes a tus actuales pacientes la posibilidad de que calculen Swain y Emecé
y si necesitan hacer una consulta.
Bueno la verdad que a mí esto me está encantando.
Bueno sigamos avanzando.
Si vamos avanzando debes saber que puedes y debes si consideras necesario hacer pausa en cualquier momento
y seguir más adelante.
Sé que esta clase es larga sé que te estoy demandando un esfuerzo Bueno de eso se trata.
Bueno no nos olvidemos no nos olvidemos que acá tiene que aparecer el resultado me gustaría que aparezca
acá no más abajo que cambió algo.
Si recién se acerca Gaby y ella me preguntó si yo estaba enseñando con un ejemplo de recetas de cocina
por la foto que tenía antes.
La verdad me ofendió me hirió el alma y por eso cambié la imagen.
Voy a volver y cómo podemos hacer para que aparezca acá.
Bueno identifiquemos qué es esta caja en donde la tenemos acá en el código.
Veamos veamos que estamos acá estamos a donde tenemos el Forum es donde yo al lado quiero que aparezca
el resultado.
Entonces miren me voy a valer de esto esto que hacía una columna de tamaño 8 yo tengo una gran columna
de tamaño 8 hecha con 8 columnita pequeñas que determina el tamaño de todo este ancho todo este ancho.
Entonces se me ocurre volver a establecer un sistema de columnas dentro de este espacio cada vez que
yo tengo un sistema de columnas dentro de otro sistema de columnas aquí adentro se vuelven a generar
12 columnas imaginarias pequeñas y si yo pudiera voy a colocar dos columnas de seis bueno mi universo
lo delimita la columna principal de 8.
Entonces lo vamos a entender mejor con un ejemplo voy a copiar esto lo voy a reciclar acá a partir de
aquí verá ahora si esto no esto lo voy a borrar no lo necesito.
Esta una columna de 8 esta columna no la quiero de 8 lo voy a querer de 6 acá necesito una etiqueta
de cierre bien y acá de copiar y pegar y ahí tengo la otra columna.
Como sé esto.
Miren vamos a poner cualquier cosa acá adentro y vamos a poner cualquier cosa acá adentro grabo
y como ven no obtuvimos lo que esperábamos.
Por qué.
Por qué los sistemas de columnas se establecen siempre dentro dentro de etiquetas.
Yo primero tengo que generar adentro del espacio a donde quiero poner las columnas una fila.
Entonces vamos a poner Dir..
Ya me prepara vez abre y cierra el Elim clase fila un robo.
Bueno esto tiene que ir un poquito más adentro porque estamos inventando ordenando el código.
Si lo dejara como estaban igual pero es para que quede ordenado nada más.
Entonces ahora si estas dos columnas las voy a cortar y las voy a meter adentro de la fila olvídense
del formulario.
Veamos estas dos columnas a esta vuelvo voy a actualizar qué tengo acá.
Ahora si dos columnas listo puedo sacarlas X que puse como prueba entonces ahora sí yo voy a poner el
formulario que tan lindo nos quedó acá adentro.
Miren ya me lo pone inventado a Tom un poquito más adentro y acá vamos a poner algo de momento una prueba
al resultado.
Bla bla bla listo.
Dentro de la segunda columna.
A ver si esto está mal.
No acá me equivoqué.
Hay
ahora si Tordera.
Entonces voy a dejar algunos espacios que por lo general no se dejan pero quiero que se note.
A donde yo determiné que tendrían que ir estas dos columnas.
Bueno primera tarea abro y cierro una Rou una fila un div de tipo fila.
Dentro de esa fila voy a generar dos columnas imaginarias para llenarlas con datos y que se vuelvan
reales.
En la primera columna el formulario.
En la segunda el resultado del cálculo.
Vamos a probar si esto funciona.
Es otra cosa esto es otra cosa.
La verdad que me gusta muchísimo cómo está quedando bueno entonces ahora vamos a trabajar un poquito
más
voy a venir acá y voy a copiar todo el código PHP.
Lo copio vengo acá arriba.
Voy a abrir un poco de espacio.
Ahí está y lo vamos a pegar.
Ya tenemos arriba todo el código PHP.
Tendríamos que cambiar algo acá.
Creo que no me vuelvo de este lado y vamos a reciclar esta parte vamos.
Esto es el resultado bueno pero yo lo corte no quiero romper nada acá lo volví a dejar donde venía el
resultado acá bajamos acá en la segunda columna
veamos cómo funciona esto.
Voy a actualizar a ver ya desapareció probemos nuestro invento 80 Mi altura es de unos 75
algo funciona mal.
Un motivo me apuntó al viejo y Emecé nos habremos equivocado hay un error clásico Sí sí claro que nos
equivocamos.
Acá es índex punto PHP.
Ahí estaba el error me vuelvo para atrás actualizo y vamos de nuevo 80 kilos 1.75
qué tal cómo lo ven.
El resultado apareció al lado increible vamos con 72 kilos uno con 75
y ahí tenemos el resultado.
La verdad que estoy muy contento con lo que hemos logrado.
Espero que a ustedes también les parezca lo mismo.
Me encantaría leer también cómo se sienten creando una aplicación de que en poco tiempo ya excedió ese
ejemplo.
Lo que sí es muy útil pero triste aburrido seguir mucho tiempo haciendo ejemplos o proyectos a donde
sólo usamos HTML plano no le ponemos nada de vida así te dan más ganas de seguir adelante.
Bueno seguramente si se me ocurre algo nuevo se lo vamos a ir agregando pero por acá terminamos esta
clase que sin lugar a duda ha sido un desafío para mí desde luego.
Y para vos también por ponerle tanto empeño y tiempo y paciencia.
Muchísimas gracias.
Nos vemos en las siguientes.