Acuerdo 4_Formacion 2 - Curso Web Acelerado
Categoría
📚
AprendizajeTranscripción
00:00:00Bueno muchachos, siendo las 6 y 10, pues, damos inicio a la formación de hoy, ¿listo?
00:00:17Pues la formación pasada ya habíamos visto todo lo de la base de datos, hoy vamos a ver
00:00:21la estructura como tal de HTML y CSS.
00:00:26JavaScript lo vamos a dejar para lo último porque JavaScript vienen siendo las validaciones,
00:00:32los efectos y todo este tipo de cosas, pues, uno lo hace a lo último cuando ya todo funciona,
00:00:37¿listo?
00:00:38Entonces, hoy les voy a explicar HTML, CSS y en la próxima formación ya comenzamos
00:00:44a construir nuestro pronome, ¿listo?
00:00:48Entonces, hoy solamente les voy a explicar todas para que ustedes la tengan presente.
00:00:55Creo que yo se las había enviado a todos por chat, se los he enviado a todos por acá,
00:01:01entonces, muchachos, vamos a ir acá, no se preocupen.
00:01:09En cualquier grupo yo los he enviado a todos, ¿listo?
00:01:13Entonces, vamos con HTML5, ¿vale?
00:01:20Entonces, vamos a descargar el archivo que les envía a todos y lo vamos a revisar, vamos
00:01:26a analizarlo.
00:01:27¿Listo?
00:01:28Entonces, otra cosa, les sigo diciendo, no me escriban por interno, muchachos, que no
00:01:40les voy a contestar, se van a desgastar innecesariamente, ¿vale?
00:01:44Entonces, no hagan eso.
00:01:46Entonces, acá dice que es el libro, el alcance, esto no es, acá, el entorno, la id, el holamundo,
00:01:56bueno.
00:01:57Vamos a la configuración.
00:01:58El entorno, dice que para simplemente instalar un navegador web, para trabajar con HTML necesitamos
00:02:07un navegador web.
00:02:09Todos sabemos cuáles son los navegadores web, ¿listo?
00:02:12Está Chrome, está Mozilla, está Edge, bueno, todos los que ustedes se puedan imaginar.
00:02:18Aquí está, como les digo, Chrome, Firefox, Edge, Safari, etcétera.
00:02:24Esos son los navegadores.
00:02:25El que no tenga un navegador, pues, tranquilamente lo puede descargar.
00:02:29Cuando ustedes les hablen de id, id, acá, cuando ustedes les hablen de id, id es, digamos,
00:02:45el editor con el que van a trabajar.
00:02:47Está Bracket, está Atom, está Sublime Text, está Win, está Visual Studio Code.
00:02:55Cada quien instala el que quiera, ¿listo?
00:02:58Para trabajar.
00:03:00En este caso, voy a trabajar las páginas con Mozilla, ese va a ser mi navegador.
00:03:05Y mi editor de códigos va a ser Sublime, ¿listo?
00:03:11¿Por qué?
00:03:12Porque me siento más cómodo trabajando con Sublime, no es por ninguna otra cosa.
00:03:17Igual, ustedes pueden hasta hacer una página web en un blog de notas, eso no habría ninguna
00:03:22dificultad.
00:03:23¿Listo?
00:03:24Ya depende, pues, de lo que nosotros vamos a trabajar.
00:03:27¿Listo?
00:03:28¿Qué más hay por acá?
00:03:31Bueno.
00:03:32El hola mundo.
00:03:33Vamos a hacer un hola mundo.
00:03:34Un hola mundo simplemente es el saludo que nosotros podemos hacer cuando empezamos a
00:03:42trabajar con nuestra web.
00:03:45¿Listo?
00:03:46¿Importante?
00:03:47Voy a crearla en el mismo proyecto.
00:03:52Ustedes lo pueden crear en cualquier lado, no hay ningún problema.
00:03:59No vamos a necesitar SAM por ahora, pero quiero crearlo de una vez acá.
00:04:08¿Listo?
00:04:09Entonces, cena, base de datos, ayuna, text, un momentico, voy a ir a SAM.
00:04:23O sea, como les digo, no hay que aprender como tal SAM, o sea, PHP se puede trabajar
00:04:28sin necesidad de SAM, o sea, ustedes lo pueden trabajar en cualquier lado.
00:04:33Yo simplemente lo voy a colocar acá, porque acá tenía mi, tengo mi carpeta, que se llama
00:04:39web prueba.
00:04:40¿Listo?
00:04:41Y tiene un index HTML, si yo le doy doble clic, él me va a mostrar acá, no, este no
00:04:49es.
00:04:50Y vamos a crear nuestra propia carpeta.
00:04:54¿Listo?
00:04:55Es más, la voy a crear acá, nuevo, carpeta, la voy a llamar web, como llamé el video
00:05:11pasado.
00:05:12Vamos a mirar como llamé el video pasado, que yo había subido, esperen un segundito.
00:05:17Yo no me acuerdo como se llamó el video pasado.
00:05:24Y ya, un momentico, acelerada.
00:05:30Entonces, vamos a llamarla solo web, vamos a llamarlo curso web, ahí ya se llama curso
00:05:59web.
00:06:00Ustedes lo crean donde ustedes quieran, y abren el editor de código, el editor de código,
00:06:07ustedes lo instalan, buscan subline, voy a ir acá, ¿listo?
00:06:14Y les voy a mostrar.
00:06:16Según el archivo que yo les envié, y me gusta trabajar con los archivos que les envío,
00:06:24en los editores, está bracket, abrimos bracket, abrimos Atom, abrimos Sublime, abrimos Visual
00:06:39Studio, aquí están todos, simplemente se le dan descargar, siguiente, siguiente, siguiente,
00:06:45este es Atom, igual, Sublime no cargó, aquí está Sublime, simplemente se descarga, siguiente,
00:06:55siguiente, siguiente, Visual Studio Code, se descarga para Windows, entonces realmente es
00:07:02muy fácil, listo, ahora continuamos, después que se descargan en el editor, dice que tienen que
00:07:13tener un navegador, ya yo lo tengo, listo, mi navegador va a ser Mozilla, aquí está, listo,
00:07:23para hacer mis pruebas, y la voy a colocar aquí, simplemente sería darle la ruta,
00:07:30y ya estaría, ahora vamos a cerrar esto que no me aporta nada,
00:07:35listo, ahora voy a abrir el editor de código,
00:07:44cerramos un par de cosas, este lo necesito porque con este vamos a trabajar, este fue
00:07:49el que les envié por correo, por whatsapp, listo, es importante que lo tengan a la mano,
00:07:55ok, ¿por qué? porque con él voy a seguir el paso a paso para poder hacer esto, entonces
00:08:03verificamos que este sea el que necesito, no, este es el de php, necesito el de html, listo,
00:08:10acá está el de html, listo, vamos a ver dónde estaban, estaban en el id, listo,
00:08:29ya me llegó al id, ahí está, supongamos que ya lo instalaron, entonces empezamos,
00:08:40listo, entonces acá yo creé la carpeta, la creé en esta partecita y se llama cursos web,
00:08:49listo, y simplemente arrastro la carpeta a sublime, ¿qué hace sublime? simplemente me
00:08:58crea una carpeta y todo lo que yo ingrese ahí va a funcionar, ya como mi página web,
00:09:06ahora, lo primero que necesita una web cuando ustedes empiezan a trabajar es un archivo que
00:09:13se llame index.php, ese archivo es importante, bueno en este caso como estamos trabajando html
00:09:22se va a llamar index.html, ese va a ser la extensión, por lo regular todas las extensiones
00:09:31html la reconoce con el navegador, entonces si ustedes verifiquen que están bien, van a vista,
00:09:39van a extensiones, si yo le quito las extensiones, mire que no me muestra el html, solamente me
00:09:46muestra index, pero si yo muestro las extensiones ya él me coloca .php html que es lo que necesito,
00:09:55si yo miro el sublime ya ese archivo tiene que estar cargado, miren acá,
00:09:59index.html, darle doble clic para abrirlo y con eso sería suficiente, ahora,
00:10:12vamos a hacer la estructura html, entonces html
00:10:202.5 tab
00:10:242.5
00:10:302.5 y esta es la estructura html, listo, todas las páginas html deben de tener esta estructura,
00:10:43estas no se van a repetir mucho, doctype nos sirve a nosotros para decirle al navegador que
00:10:50lo trate como html 5, listo, html acá está etiqueta que abre, etiqueta que cierra,
00:10:59luego viene como tal, geat etiqueta que abre, etiqueta que cierra y body etiqueta que abre,
00:11:06etiqueta que cierra, todo lo que vaya dentro del geat va para el navegador, todo lo que vaya
00:11:14dentro del body va para el usuario, para la vista, entonces eso tienen que tenerlo muy claro,
00:11:25según nuestro archivo o lo que les pase, lo primero que nosotros tenemos que hacer es un
00:11:30holamundo, holamundo se coloca, supuestamente lo quieren que lo coloquen dentro de una etiqueta
00:11:36párrafo, entonces ¿cuál es la etiqueta párrafo? la P, PHP tiene algo y es que la gran mayoría de
00:11:46las etiquetas tienen un cierre, algunas y otras no, muy raras son las que no tienen cierre y ya
00:11:52las vamos a ir mirando, listo, entonces este párrafo tiene como tal un cierre, listo, ahí
00:12:00tiene entonces, vamos a abrir la etiqueta, aquí dentro del body, listo, si no está dentro del
00:12:08body quedaría mal, entonces voy a colocar párrafo tab y mire que el solito ya puso etiqueta que abre,
00:12:15etiqueta que cierra, entonces lo voy a decir holamundo, lo que yo coloque acá en este holamundo
00:12:24me va a aparecer acá, si yo actualizo, bueno me toca mirar dónde está la ruta,
00:12:33entonces voy a copiar todo esto para saber dónde está mi ruta
00:12:41y lo voy a pegar, listo, mire que aquí está mi index, como no estoy utilizando SAM,
00:12:49no lo he encendido porque no lo necesito ahorita, para encender SAM es cuando voy a trabajar con
00:12:55PHP y ahorita no estamos usando PHP, pues no veo la necesidad de sobrecargar mi máquina pues
00:13:01prendiendo programas que no voy a utilizar ahorita, entonces le voy a dar clic en index.html y él ya
00:13:08me está mostrando holamundo, listo, así de fácil podemos crear un holamundo, acá donde dice document
00:13:16esto es para el título superior, entonces lo voy a llamar curso
00:13:24curso web, listo, guardo, actualizo
00:13:32y miren que ya en la parte de arriba me aparece el nombre de curso web, listo
00:13:38hasta ahí vamos bien, mire que aquí curso web, acá me aparece en el título curso web,
00:13:44vale, aquí tenemos el holamundo y en el otro tenemos curso web, para que lo tengan en cuenta,
00:13:53listo, qué más dice nuestro pequeño librito para que ustedes vayan analizando,
00:14:01esto lo podemos llevar acá,
00:14:02los primeros pasos, entonces ya tenemos el holamundo, aquí hay un holamundo,
00:14:10bueno aquí dice el tema de gramática, que las partes, todo esto es para que lo lean,
00:14:17las etiquetas P pertenecen al párrafo, entonces él está colocando esto,
00:14:22es un párrafo, entonces aquí pues voy a colocar esto es un párrafo,
00:14:27que si yo coloco esto mismo fuera y no lo colocó dentro de ninguna etiqueta,
00:14:35igual me lo va a leer, pero lo mejor es colocarlo dentro de cada etiqueta,
00:14:41colocándolo, listo, mire esto es un párrafo y esto es un párrafo,
00:14:45uno está dentro de la etiqueta y el otro está afuera, entonces esto es un párrafo fuera
00:14:51y esto es un párrafo dentro, no habría ninguna diferencia, pero es mejor que esté dentro de una
00:15:01etiqueta, para que lo vayan, se vayan acostumbrando a meter, a colocar todo dentro de las etiquetas
00:15:07como tal, ¿vale?
00:15:09Listo, seguimos, acá nos habla del párrafo, la idea es seguir mirando todas las etiquetas,
00:15:21lo mismo lo que ustedes coloquen ahí, pues va a aparecer dentro de la etiqueta P,
00:15:26¿listo? acá están los símbolos, estos símbolos así como ustedes los ven ahí,
00:15:33así mismo les van a aparecer, entonces, por ejemplo, si yo los coloco acá y quito este,
00:15:41quito este, quito este, quito este y quito este, si yo guardo, actualizo,
00:15:53¿sí ven todos los símbolos que me aparecen? Entonces, por ejemplo,
00:15:58les voy a mostrar otra etiqueta, la etiqueta BR, esta etiqueta no tiene cierre,
00:16:04muchas personas la colocan así, otras la colocan de esta manera, cierran,
00:16:10pero sin abrirla en ningún lado, acá la colocan así, BR, ¿sí? la cierran sin abrirla en ningún
00:16:21lado, en lo particular, pues yo no le doy la necesidad, yo siempre la cierro y esto
00:16:24simplemente es como si fuera un Enter, como si ustedes le estuvieran dando un Enter a cada línea,
00:16:30mire que aquí me las dejo todas de manera horizontal y pues yo necesito que algunas
00:16:36me aparezcan hacia abajo, entonces, cuando necesiten que dé un Enter,
00:16:40colocan un BR, si ustedes guardan, actualizan,
00:16:48mire que ya las colocó hacia abajo, en este caso solamente me reconoció 3,
00:16:53estas dos no las reconoció, según lo que está diciendo el libro que las reconoce,
00:16:59¿listo? pero después les muestro cómo las colocamos todas, eso no hay ningún problema,
00:17:04¿listo? yo me estoy guiando para mostrarles a ustedes lo que ustedes van a encontrar en
00:17:10este libro que tienen aquí.
00:17:11¿listo? entonces mire que acá me reconoció varias, otras no,
00:17:21entonces seguimos bajando, acá me está hablando de imágenes,
00:17:26entonces ¿cómo cargamos nosotros una imagen como tal a nuestro archivo?
00:17:31utilizando IMG con SRC, este que está acá, este SRC es donde está la ruta,
00:17:41entonces, algo que ustedes me deben, quiero que me entiendan,
00:17:47entonces por ejemplo voy a crear una carpeta y esa carpeta se va a llamar IMG,
00:17:53como de imágenes, para ir ordenando todo, o sea, lo que yo guarde en imágenes me
00:17:58debería aparecer en imágenes, o sea, mejor dicho, las imágenes las debo
00:18:03guardar en esta carpeta, entonces vamos a bajar una imagen,
00:18:11quiero una imagen y la voy a guardar directamente en esa carpeta para no
00:18:16estarla buscando, ¿listo? entonces aquí voy a copiar la ruta y voy a buscar una
00:18:22imagen, es decir, Itachi, Itachi Uchiha,
00:18:33listo, bajemos esta imagen, le voy a decir
00:18:38guardar imagen como, y simplemente la voy a guardar en la ruta que ya tengo
00:18:45cargada y la voy a cortar y la voy a dejar solamente como Itachi,
00:18:52importante la extensión, entonces voy a decirle que la extensión quiero que sea
00:18:57.png y la guardo,
00:19:03listo, entonces aquí ya tengo la imagen, mire, es la imagen de Itachi, si yo le doy
00:19:09click él me muestra la imagen que tengo y la quiero cargar desde el índice para
00:19:15que me quede dentro de mi archivo, entonces voy a colocar la etiqueta IMG,
00:19:24listo, él solito me coloca CRC donde está la ruta, entonces, importante,
00:19:31yo necesito entrar a esa carpeta para poder encontrar la imagen, eso es como
00:19:37cuando ustedes le dan una dirección, o sea, tiene que ser exacta,
00:19:41listo, ya entré a la carpeta IMG y voy a buscar la imagen de Itachi, ahí me
00:19:47aparece Itachi.png y copio Itachi.png, guardo,
00:19:55actualizo y ya tengo cargada la imagen de Itachi,
00:20:01bien, acabamos de cargar la imagen de Itachi.png,
00:20:05vale, listo, bueno,
00:20:12según nuestro librito pues que conseguimos,
00:20:17es como para explicarles el libro, entonces mire que acá también me habla
00:20:23como tal de vídeos, sí, entonces yo quiero ir a la W3School,
00:20:29era la que yo siempre les he mencionado, les tengo la introducción, tengo el código,
00:20:36bueno, todo lo que ustedes puedan imaginar y aquí está el resto de la
00:20:40información que ustedes necesitan, formularios, por ejemplo, aquí está el
00:20:45vídeo, entonces allá me habla de vídeo, aquí
00:20:49está el vídeo, están todas las partes del vídeo, cómo funcionan,
00:20:53vale, esto yo lo puedo pasar a español en el caso de que quisiera,
00:20:58no me acuerdo si aquí me deja y si no lo hago directamente desde el archivo,
00:21:04me tocaría ampliarlo, por aquí dejan en alguna parte,
00:21:09cambiarlo a español, pero igual no hay ningún problema, no tengo lío por eso,
00:21:13pues aquí me habla como tal de esa información, de audio, de vídeo, aquí está
00:21:19la etiqueta stack, todo lo que ustedes puedan necesitar, necesita información de
00:21:23una etiqueta, aquí está la etiqueta como tal,
00:21:27¿qué etiqueta necesito? vídeo, le doy clic a vídeo,
00:21:33y él aquí me dice, me habla sobre el vídeo, entonces ¿qué necesito? aquí me
00:21:39dice etiqueta que abre, etiqueta que cierra, width, de una vez está poniendo el
00:21:47CSS, porque esto CSS debería ir dentro de un CSS y me está diciendo que el ancho va
00:21:55a ser de 320, el alto va a ser de 240, esto me sirve para los controles, si
00:22:01ustedes no le ponen eso, no les va a tomar un control, ¿qué control? el play para
00:22:07pararlo, bueno ahorita hacemos digamos esa esa partecita, aquí está el tipo con
00:22:14el que van a utilizar y aquí está el CSS, listo para que ustedes lo puedan
00:22:19cargar, vamos a mirar si yo tengo un vídeo,
00:22:23vamos a mirar si acá tengo el vídeo de la formación pasada, no hay ningún
00:22:27problema, le doy la ruta de ese vídeo, lo voy a dar a copiar,
00:22:32vuelvo como tal al navegador, voy a
00:22:39perdón, vamos a darle un comentario a esto,
00:22:43para poder cargar nuestro vídeo, entonces yo pego la información, guardo, actualizo y
00:22:50se va a ir la imagen de Itachi, y ahí me está diciendo, tengo la
00:22:55estructura de un vídeo, pero como no tengo un vídeo cargado,
00:23:00aquí este nombre no me coincide con ningún vídeo que yo tengo, pues él no me
00:23:05lo va a cargar, ¿listo?
00:23:09ahora necesito darle la ruta de donde se encuentra el vídeo,
00:23:14vamos a borrar esto,
00:23:18listo, y aquí está la ruta, vamos a darle la ruta a nuestro vídeo, y necesito ir a
00:23:26mi vídeo y conseguir la ruta exacta, o si no, me tocaría mover el vídeo, pero no
00:23:31quiero mover el vídeo como tal, voy a la propiedades, aquí está la ruta,
00:23:39la voy a pegar, y aparte de eso, le voy a dar el
00:23:44slash y el nombre del vídeo, ¿qué vídeo quiero? este que dice mp4,
00:23:52y pego mi vídeo, voy a reemplazar todas estas que están de marque slash, las voy
00:23:58a cambiar por un slash, con control, listo,
00:24:03y todas las voy a cambiar por un slash, las reemplazo y ya todas cambiaron, si yo
00:24:09guardo y actualizo, miremos a ver qué pasa, dice que no se encontró vídeo que
00:24:14tenga un formato de tipo, ¿qué formato tengo?
00:24:21formato mp4
00:24:27no está recibiendo el formato y si no me está poniendo problemas por la ruta,
00:24:33vamos a ir acá y vamos a pegar el vídeo por fuera, necesito saber qué pasa,
00:24:44vamos a ir acá y vamos a cargar nuestro vídeo, vamos a quitar toda esa
00:24:50ruta y dejemos sólo la ruta del vídeo, quiero mirar si me lo cargan
00:24:55y ahí ya me está cargando el vídeo, el problema es la ruta, no lo encontró, y
00:25:01aquí está el vídeo, este es el vídeo de la formación pasada, ahí ya nosotros lo
00:25:08hemos colocado en la página, como les dije, esto que está acá es CSS, entonces por
00:25:14ejemplo, si yo le digo que quiero que sea un ancho de 500, voy a dejarle el
00:25:21alto proporcional, actualizo y mire que ya va agrandando el vídeo como tal,
00:25:28entonces ya si depende pues del tamaño que yo lo necesito,
00:25:33actualizo y mire que aumenta, estos controles que era lo que yo les
00:25:39decía, si nosotros los quitamos, desaparecen estos controles que están en
00:25:43la parte de abajo, ya no tienen control sobre el vídeo, es por eso ustedes deben
00:25:48de poner control,
00:25:53si ustedes quieren que el vídeo inicie, apenas ustedes abren la página, le
00:25:58colocan autoplay y así pues ustedes van a van colocando cosas dependiendo de la
00:26:04necesidad del vídeo, aquí están los atributos, de lo que es lo que se
00:26:08necesita en el vídeo, ya cargaron una imagen, cargaron un vídeo por ahora,
00:26:15qué más se necesita saber así importante, bueno vamos a
00:26:21a volver a nuestro librito a ver qué dice,
00:26:26bueno aquí ya me empieza a hablar de clases, estas clases que ustedes ven acá
00:26:35esto es CSS, de esa manera nosotros cargamos a un párrafo, le ponemos una
00:26:42clase, entonces todavía no vamos a mirar eso porque necesitamos llegar a CSS para
00:26:48poder hacer las clases, realmente empezar a mirar clases desde aquí sería pues
00:26:54mezclar todo, necesito primero que ustedes aprendan qué es html y qué podemos hacer
00:27:00con él, listo aquí tenemos un br
00:27:06listo, que es el salto de carro que yo les decía, que es un entero, aquí pues
00:27:11aquí nos hablan de los comentarios, con esto se abre un comentario, con esto se
00:27:18cierra un comentario, en la parte de abajo pues le están poniendo el ejemplo que
00:27:22yo coloqué acá, bien aquí abro el comentario, aquí cierro el comentario, lo
00:27:27que esté dentro de eso pasa a ser como si tuviera
00:27:34comentado y pues ya no va a aparecer, y más sin embargo el editor que
00:27:41estoy utilizando me lo pone en gris, entonces ya él sabe que eso no es un
00:27:44comentario y si yo actualizo pues no va a
00:27:48aparecer mi comentario, listo, si yo actualizo acá, miren todo lo que está
00:27:53dentro del comentario pues desaparece
00:27:56la sintaxis, todo tiene que terminar en .html que era lo que yo les decía
00:28:02cuando nosotros empezamos a crear el archivo, miren acá está .html, listo
00:28:08para que todo le quede organizado ustedes van a colocar también una
00:28:13carpeta de vídeos y todos los vídeos, yo en lo personal lo
00:28:18guardaría en esa carpeta, para que todo le vaya a quedar ordenadito, como acabo de
00:28:24mover la carpeta de vídeos a esta carpeta de vídeos, él no me va a encontrar el
00:28:29vídeo, primero tiene que entrar a la carpeta de vídeos
00:28:33acá, entraría a esa carpeta
00:28:38vídeos y ahí sí encontraría el vídeo, listo, para entrar a una carpeta se
00:28:45coloca el nombre de la carpeta y se colocan las, de esa manera ustedes ya
00:28:49entran a una carpeta, independientemente de la carpeta que es, si está una carpeta
00:28:55dentro de otra carpeta igual van poniendo la ruta, listo
00:28:59no desde la raíz sino de donde están trabajando en este momento, ahora
00:29:06vamos a seguir con el libro
00:29:09bueno, entonces aquí ya empieza a colocar una estructura, miren que la
00:29:14estructura que está colocando es el .html que les había dicho, el .html
00:29:18el .geat con el .title, el título es mi página web, que es el que aparece arriba
00:29:23en la cabecera, un .h1 que dice bienvenidos a mi página web y una
00:29:29etiqueta de párrafo, párrafo se utiliza pues para colocar párrafos como en
00:29:35Word, esto es un párrafo, ustedes lo colocan como si fuera un párrafo, las
00:29:39etiquetas h si son diferentes, listo, les voy a mostrar las etiquetas h
00:29:46entonces por emet yo puedo colocar h1 y lo voy a multiplicar por 6
00:29:54y le doy tab, listo, entonces está h1, si yo presiono control d
00:30:02selecciono el otro uno, le digo 2, bajo, está h3, está h4, me permite escribir en 5
00:30:11en varias partes al tiempo, listo, entonces este a todos los voy a
00:30:19llamar títulos
00:30:23título
00:30:28lista, más la etiqueta, vamos a ir acá, vamos a copiar
00:30:36y la voy a colocar acá, título más la etiqueta, para que ustedes vean qué hace
00:30:43cada etiqueta, entonces miren que estos títulos cada uno tiene un tamaño
00:30:48diferente, h1 es más grande, h2 más pequeño y así sucesivamente hasta
00:30:55h6, los h sirven para colocar los títulos, vale, entonces vayan a colocar un
00:31:01título pues lo colocan de esta forma, el título 1 solamente debería aparecer en
00:31:07una página una sola vez, listo, entonces eso más que todo pues se hace por co, co
00:31:14es la forma que uno encuentra para posicionar su página, listo, entonces
00:31:20ahí tendríamos el tema de los h, vale, ya conocemos los h, conocemos los párrafos,
00:31:27los body, los head, los html, listo
00:31:33aquí les habla del doctype, es importante porque el navegador web
00:31:38utiliza esta información para determinar cómo demostrar el contenido
00:31:42de la página, lo que le dije, esa le sirve para que diga que es html5, las
00:31:50etiquetas de html4 son mucho más largas, entonces no hay ningún problema, es este
00:31:54doctype que está aquí, listo, acá pues coloca el doctype y aparte de eso pues le
00:32:01está colocando esta información pública, listo
00:32:06ahora qué más vamos a encontrar, van a encontrar el head, que ya se lo expliqué,
00:32:10van a encontrar el body, van a encontrar el header, el nav, el main, el
00:32:18article, el section, el aside y el footer, listo, estas etiquetas por lo regular
00:32:25ustedes las pueden repetir, no es lo mismo este head que este header, estas
00:32:32etiquetas que están acá, todas van dentro de
00:32:38todas estas etiquetas que van acá, van dentro de
00:32:44body, listo, entonces volvamos a la estructura, vamos a borrar todo esto que
00:32:48está acá, entonces en el body yo puedo colocar
00:32:56el header
00:32:59este es para la cabecera pero, vamos a ampliar esto para que lo puedan ver, este es para la
00:33:14cabecera pero del body, listo, también podemos
00:33:21colocar un footer
00:33:25esto es para el pie del body, todas estas etiquetas van dentro de body, fuera de
00:33:31body no va ninguna etiqueta que no sea este header, listo, de resto todo va
00:33:37dentro de body, luego podemos colocar article, section, entonces si
00:33:46quiero una sección puedo colocar el section, acá como para armar el cuerpo
00:33:51listo, esto pues realmente no influye mucho
00:33:57pero visualmente, pero cuando ustedes empiezan a trabajar con el tema de
00:34:04deseo, si influye muchísimo en las páginas, para el tema de las búsquedas
00:34:08visualmente pues no va a tener nada diferente, por ejemplo voy a decir
00:34:13acá está la cabecera
00:34:27listo, en el footer acá va el pie
00:34:35y este es el cuerpo, no es malo, si nosotros actualizamos
00:34:43realmente no va a influir, como les digo, vamos a actualizar, miren que dice acá va
00:34:49la cabecera, acá va el cuerpo y acá va el pie, realmente pues más o menos esa es la
00:34:55estructura, si ustedes no quieren usar section no hay ningún problema, pueden
00:35:00utilizar barra post, pueden utilizar div, la etiqueta más utilizada es div, listo,
00:35:06esa es la que las personas se acostumbran a utilizar mucho más
00:35:11el nav es para encerrar todos los botones, como decir navegación, casi
00:35:17todos los botones deben de ir dentro de un nav, como para que tenga una
00:35:23para que en el SEO no vayan a tener más, digamos, sean mejor posicionados, no
00:35:30los vayan a panelizar al momento de subir su página, listo, acá todavía les
00:35:37hablan de barra post, les hablan del title, aquí les muestran, digamos, y aquí se
00:35:42intenta crear la estructura usando los blocks, que fue lo que les mostré ahorita,
00:35:47también tenemos spam, en caso de que ustedes quieran utilizar, está la
00:35:54etiqueta spam, está la CNC, aquí están todas las etiquetas que
00:36:00ustedes quieran muchachos, esta es la que yo les digo que más utiliza, div, todas las
00:36:05etiquetas por lo regular traten de escribirlas en minúsculas, si ustedes las
00:36:11escriben en mayúsculas no hay ningún problema, él las va a aceptar, pero pues
00:36:16traten de hacerlo en minúsculas, listo.
00:36:24¿Qué más vamos a nosotros a encontrar acá? vamos a encontrar los elementos, bueno
00:36:29aquí está, ¿qué otra etiqueta hay por acá? me hablan de las mismas.
00:36:37Los metadatos, los metadatos son los que se utilizan en, como tal el geart, listo,
00:36:44el meta, coloca el nombre de la página, si, como, no sé, si tengo una tienda de
00:36:51mascotas, pongo, mascotas
00:36:57azules, si, en el contenido pues vendo comida, vendo comida para mascotas, si,
00:37:04o sea, ¿qué contenido tiene la página? esto es importante para el buscador,
00:37:07información que le sirva al buscador para mostrar su página, y cuando terminen
00:37:13esto les recomiendo un curso de SEO, así como suena, SEO, el nombre, las
00:37:21keywords son las palabras claves, entonces, por ejemplo, ustedes en las
00:37:25palabras claves
00:37:29ustedes en las palabras claves, ustedes simplemente
00:37:34colocan comida para mascotas, colocan, no sé,
00:37:42mascota, no sé, todo lo que ustedes se puedan imaginar de palabras para que
00:37:48hagan referencia a su página, con eso pues simplemente el
00:37:53buscador las va a encontrar y las va, les va a dar una buena calificación, con
00:37:59eso los va a encontrar mucho más rápido, ¿listo?
00:38:03Tenemos, bueno, todas las palabras deben de ir separadas por comas, estos que
00:38:08ustedes ven acá, link, rel, href, es para, así se cargan los CSS, ¿listos? ahorita pues
00:38:17vamos a mirar cómo se cargan un CSS y cómo podemos utilizar nosotros un CSS,
00:38:24¿listo? y bueno, ya les mostré como tal el gead, el body ya también lo, ustedes lo
00:38:31vieron, el title pues es el que le coloca el nombre en la parte de arriba, esos
00:38:36nombrecitos que ustedes ven acá en la parte de arriba, se colocan dentro del
00:38:40title para que aparezca, como acá
00:38:47¿listo? entonces vamos a continuar, seguimos acá bajando
00:38:53y bueno, este target bank es para abrir, digamos, en otra, en otra parte, acá está
00:39:04haciendo una referencia como tal a una subcarpeta, ¿listo?
00:39:09¿qué más podemos encontrar? cómo cargar una imagen, ya ustedes vieron cómo se
00:39:14cargó una imagen, el link pues para llamar a un CSS, ¿listo?
00:39:27de esta forma se cargan los íconos, aparte del nombre
00:39:35con el ref, cargan ustedes el ícono como tal, mire que acá él está cargando una
00:39:42x, una imagen pequeña, ¿listo? de esa forma ustedes lo pueden hacer, bastante
00:39:48sencillo, aquí pues están todas las prácticas que ustedes puedan imaginar
00:39:54¿vale? entonces seguimos bajando, encontramos elementos, aquí están los
00:39:59tipos, los links, entonces mire que este link icon, ref icon
00:40:08aparece como tal para poder cargar la imagen, esa imagen que está en la parte
00:40:13de arriba que les mostré ahorita, ¿si? entonces de esa manera cargamos también
00:40:18un icon, ¿vale muchachos? entonces ahí está como tal toda la información, aquí
00:40:26están los styles
00:40:30hay formas de cargar CSS, muchachos, esta es la menos recomendable, ¿por qué? porque
00:40:37ustedes cargan este CSS, por ejemplo, párrafo y color blue, entonces vamos a
00:40:44hacer el ejercicio, ¿listo? voy a borrar, bueno, vamos a trabajar acá donde dice
00:40:51cuerpo, voy a crear varios párrafos, entonces este párrafo
00:40:59voy a colocar párrafo por 5
00:41:05le voy a decir punto para la clase y la clase se va a llamar azul
00:41:12no me gusta, vamos a llamarla roja
00:41:17listo, así se va a llamar la clase y le vamos a dar
00:41:24le decimos clase
00:41:30varias, lo que está en blanco es lo que me va a aparecer en pantalla, lo que está
00:41:38acá esto es para CSS, ¿listo? entonces si yo guardo pues solamente me va a
00:41:45aparecer esa información, no va a aparecer absolutamente nada
00:41:50vamos a cerrar esto acá y eso también, lo que estamos es acá
00:41:59miren que acá me aparecen clases varias, ¿sí? voy a
00:42:07voy a venir acá y simplemente voy a darle un comentario a este
00:42:16casi siempre me confundo de comentario, el comentario en html es esto, ¿listo? para
00:42:23que no me aparezca esta información que ustedes ven ahí
00:42:28¿vale? ok, entonces aquí tengo las clases, entonces ¿por qué no recomiendo que
00:42:36coloquen digamos el CSS aquí? los CSS casi siempre deben de ir separados
00:42:42entonces si yo le digo a este style
00:42:52todo lo que yo coloque aquí lo va a tomar como CSS, pero realmente no
00:42:57deberían de ponerlo acá, entonces si yo le digo acá color
00:43:02y lo voy a llamar red, guardo, actualizo, ya tengo todas las
00:43:09clases en rojo, pero las clases como les digo no deberían de tomarse de esta
00:43:16forma, siempre deberían de llevar digamos su archivo, ¿listo? entonces vamos a
00:43:24continuar acá, ¿vale? aquí pues se carga para los
00:43:29párrafos, ahí estoy afectando, ahorita les explique el CSS, les digo cómo hay
00:43:36varias maneras de afectar, está por etiqueta, está por párrafo, perdón, por ID
00:43:42y está por clases, entonces ahorita ya miramos ese temita, ¿vale?
00:43:49como les digo, aquí siguen apareciendo las mismas etiquetas que ya les había
00:43:53mostrado
00:43:56bueno, aquí hay digamos algo un poquito más complejo, ahí se las explico rapidito
00:44:04todo esto pertenece a la etiqueta body de la que ya habíamos hablado, aquí está la
00:44:09etiqueta body, ¿listo? dentro de la etiqueta body está el header, este header que está
00:44:15aquí, esto es para el título como tal, en la parte de arriba, como digamos la
00:44:21botonera, que le llaman la mayoría de las personas, aquí están colocando un main
00:44:26como si fuera el cuerpo, pero estamos hablando de ya del body, ¿listo? y aquí
00:44:33me están colocando un footer, ¿vale? y en el footer también me están colocando un
00:44:40están colocando una lista, ¿listo? están las listas ordenadas y las listas
00:44:44desordenadas, ¿vale? entonces en este caso pues aquí tengo ya la estructura de una
00:44:51web, que fue lo que les pasé en ese archivo, miren que este archivo es larguísimo, aquí
00:44:56empiezan a explicarles a ustedes cada una de ellos, poco a poco, lo que está
00:45:02aquí en la parte de arriba, cuando ustedes hagan el ejercicio le debería
00:45:06mostrar esto, el título principal, unos botones, los títulos, información, otros
00:45:14botones, todo lo que les van a mostrar acá va a ser sin color, sin nada de eso
00:45:19porque simplemente eso es html y el html es sólo estructura, el css es el que le
00:45:27da para visualizar, ya les acabé de mostrar cómo se cargó una imagen, ahora
00:45:33rato pues ya cargamos la imagen de Itachi y ya se encuentra la imagen de Itachi
00:45:38acá y ahí se van cargando, esto realmente ya la forma de
00:45:45construirla son las mismas etiquetas article, o sea si ustedes tienen un artículo
00:45:51pues métanlo dentro de la etiqueta article, o sea si tienen varios artículos, si
00:45:56tienen varios productos, a cada producto le quedan una etiqueta article, entonces
00:46:01al artículo, más o menos es así, cómo funciona la etiqueta
00:46:06article, realmente pues la etiqueta es como para SEO, como les dije eso es para
00:46:11posicionamiento, si no la colocan, no la colocan, no va a ser ninguna diferencia
00:46:17sección, sección como les digo se utilizan para colocar secciones, entonces por
00:46:23ejemplo, esa sección va a hablarme de cursos de cocina, listo, todo lo meto
00:46:30dentro de esa sección, le pongo cocina, esta sección me va a mostrar todos los
00:46:35artículos de SEO, ahí esa sección la llamo SEO, o sea es como para ir dando la
00:46:40estructura como tal a la página, listo
00:46:45y como les digo aquí en la W3school están todas las etiquetas que
00:46:50ustedes necesitan, si les hablan de una etiqueta que ustedes no se acuerdan cuál
00:46:56es, vienen acá a la W3 y aquí están todas y están en orden alfabético, entonces
00:47:00por ejemplo me están hablando a mí en este momento que está acá sección,
00:47:04entonces vamos a sección, acá está y aquí está toda una charla sobre
00:47:14sección, sin ningún problema
00:47:19vale entonces muchachos ahí está toda la
00:47:23información para que ustedes realmente se dediquen a explorarla porque si no, no
00:47:28van a comprender, listo, y CSS en este caso HTML pues HTML como ustedes pueden
00:47:36dar cuenta, da la información tal cual como ustedes la ven, no va a darle ningún
00:47:41sentido, la idea mía es explicarles una etiqueta que ya no hayan visto, por
00:47:45ejemplo ya aquí todas las hemos visto, a site
00:47:49qué tiene la etiqueta, qué tiene la etiqueta site
00:47:56la etiqueta site es como cuando yo quiero hablar de una digamos de una
00:48:05digamos yo tengo una empresa de tecnología, pero yo tengo un conocido
00:48:12quiero mostrar información de otra persona que no es mi empresa, entonces yo
00:48:19la coloco dentro de una site, con eso para que digamos cuando el
00:48:24navegador lea que está dentro de una site, lo único que va a hacer es que no
00:48:31le va a dar tanta relevancia, no lo va a dejar tan relevante como a las
00:48:37demás etiquetas, por eso se coloca todo dentro de una site, listo, pues no sería así
00:48:43pues para colocarlo pues tan tan fuerte, entonces cuando es algo no
00:48:51tan importante, cuando es muy importante pues siempre colocan un title, ya
00:48:55nosotros habíamos hablado de los titles que van desde h1 hasta h6, les mostré el
00:49:00ejemplo ahorita y les coloqué todos los h, vale
00:49:07mire aquí está haciendo el mismo ejemplo, le está colocando h1, h2, h3, h4 y a
00:49:15medida que vaya bajando el h, pues va disminuyendo el tamaño, aquí está el
00:49:19título principal, subtítulos, subtítulos, subtítulos, los demás están dentro de un
00:49:25párrafo, y los párrafos pues no va a pasar absolutamente nada, vale, este hgroov
00:49:33este me sirve para agrupar, si yo quiero agrupar información bastante
00:49:39relevante dentro de los h, entonces lo coloco dentro de un hgroov y dentro
00:49:45coloco los h que son relevantes, vale, ahí tendría pues esa información, ahí se
00:49:51colocaría como tal dicha información, vale muchachos
00:49:57ahora, el header como les digo es la
00:50:02cabecera, pero no es la cabecera de la página sino de lo que va a ver el
00:50:08usuario, de lo que está viendo el usuario, listo, todas esas etiquetas
00:50:14que les estoy nombrando ahorita, van dentro del body, antes ya habíamos visto
00:50:18las etiquetas que van dentro del header, pues acuérdense que se dividen
00:50:24solamente en esas dos partes, aquí pues mire que todas van dentro del body, para
00:50:29los usuarios no debe haber ninguna etiqueta que esté por fuera del
00:50:34body, listo, de las etiquetas que están acá que no hemos visto, el ul, el nav y el
00:50:41ul, listo, estas simplemente son listas ordenadas, entonces por ejemplo vamos a
00:50:47replicar lo que está aquí, así como para mostrarles rapidito cómo se hace, entonces
00:50:53vamos a ampliarlo para acá
00:50:57importante, a mí me gusta utilizar mucho algo que se llama mt, eso es una
00:51:04extensión, ustedes acá en b...
00:51:09acá en referencias, en packs control, aquí aparecen todas las extensiones que yo
00:51:17tengo, yo tengo autofill name, que esta es la que me ayuda a completar rutas, tengo
00:51:22esta que dice bracket, esta es la que me muestra dónde inicia y dónde
00:51:27cierra, y tengo mt, mt es la que me permite agilizar el tema de los códigos, pues
00:51:33mire, esto es lo que hace bracket, me muestra dónde abre la etiqueta y dónde
00:51:37cierra, ahora quiero hacer esto que está acá, dice que tengo
00:51:45un navegador, dentro de ese navegador hay un ul, dentro de ese ul hay dos li, dentro de
00:51:50ese dos li hay dos a, entonces con mt yo puedo hacer lo siguiente, le digo nav
00:52:00le digo ul
00:52:03a esto le digo li, lo multiplico por la cantidad que necesite, en este caso 2, y
00:52:10le digo que dentro de él quiero un anchor, y le doy tab, y miren que él me ayuda a
00:52:18construir más o menos lo que está acá, entonces yo lo voy a llamar pruebas 1
00:52:25y a este lo voy a llamar pruebas 2
00:52:30debería comportarse como dos, debería comportarse como dos botones, listo, y
00:52:40ahorita miramos cómo están los botones y ahí aparecen nuestras etiquetas, si yo
00:52:45vengo acá, actualizo, ya se van a ir esas y quedan esas, listo, ahí están mis botoncitos
00:52:51obviamente pues acá hay más cosas, pero yo les quería mostrar solamente eran
00:52:56estas que están aquí, que eran las que no habíamos visto hasta el momento, en los
00:53:01nav van a ir todos los enlaces como ya les había mencionado con anterioridad,
00:53:05listo
00:53:08qué más van a encontrar ustedes, como les digo, etiqueta que no hayamos visto pues
00:53:13la vamos explicando, el main, el footer, ya todas estas las
00:53:19hemos visto, bueno, adres, cuando ustedes vayan a
00:53:25colocar una dirección o información de este estilo, por lo regular coloquenlo
00:53:30dentro de las etiquetas adres, entonces por ejemplo el nombre de la ciudad, la
00:53:35dirección postal, la ciudad, el teléfono, o sea más o menos para que le aparezca
00:53:40así, esto pues lo coloca uno en el footer, por lo regular casi siempre va en el
00:53:45footer, si ustedes buscan una página en el footer siempre va a ir como
00:53:49información
00:53:58esta no tiene footer, hay unas que sí y otras que no, ya dependiendo pues del
00:54:03diseño de cada persona
00:54:09y esto depende del diseño de cada cristian, listo
00:54:16por lo regular a mí sí me gustan los footer, yo pongo footer
00:54:22eso pues como les digo depende de cada uno de los grupos, vamos a volver
00:54:29qué elementos, bueno ya para razones les expliqué, fue la primera etiqueta que les
00:54:33expliqué, igual ahí está como digamos lo que ustedes necesiten, esta hr lo que
00:54:40hace es pasar una línea de lado a lado, entonces si nosotros miramos aquí lo
00:54:47único que de todas las que están acá, la única que es diferente es
00:54:52ese hr que está aquí, que es este resultado que está aquí
00:54:56y cuando ustedes coloquen un hr, él les va a trazar esa línea, vale
00:55:04bueno, la etiqueta pre, esta etiqueta pues realmente nos sirve a nosotros para
00:55:12cómo les digo
00:55:15la renderiza de esta forma, no lo deja tan como si fuera nuestro párrafo
00:55:24listo, entonces así como yo coloco la información, así mismo me la deja
00:55:33listo, entonces como yo la coloco en la etiqueta pre, así mismo me la va a
00:55:37mostrar en la parte de abajo, por qué, porque digamos yo tengo dos
00:55:43en párrafo, acuérdense de la etiqueta párrafo, por ejemplo
00:55:50hay una página que se llama lorinipso
00:55:55esta página nos coloca la información para que ustedes la puedan utilizar en
00:56:01cualquier momento, esto lo colocaría dentro de mi etiqueta párrafo
00:56:10listo, ahí iría toda mi información dentro de mi etiqueta párrafo, si yo
00:56:16actualizo, miren cómo me coloca la información del párrafo en este momento
00:56:20pues está colocando el color rojo, pues por el estilo que le tenemos en la parte
00:56:25de arriba, si yo le coloco a esto azul, así mismo la va a tomar
00:56:37miren que ya lo tomó de ese color, pero esto lo hace el CSS que les dije
00:56:44que pues que esta no es la mejor manera de poner CSS, ya vamos a mirar
00:56:48cuál era la mejor manera de hacer, cuando yo coloco pre, pues él me deja estos
00:56:53mismos saltos, si yo le doy acá salto
00:56:58vamos a darle un salto aquí, vamos a darle un salto aquí, vamos a darle un salto acá
00:57:04un salto acá, guardamos, no debería de afectar la información
00:57:14un segundo, con control de seleccionamos dos iguales, listo
00:57:25y si actualizamos, mire que ya la coloca tal cual como aparece acá
00:57:31entonces para eso es nuestra etiqueta pre, eso casi no se utiliza, la verdad yo
00:57:37esto un poco lo utilizo, listo, para colocar aquí tenemos más etiquetas
00:57:44entonces pues sería gastante ponernos a mirar todas las etiquetas porque aquí
00:57:49están todas, pero ya hemos explicado las más relevantes, listo, que si ustedes
00:57:54hacen memoria simplemente es, las etiquetas que nosotros más vamos a
00:58:00utilizar, hagamos recuento, como para que lo tengan presente
00:58:06.type, que es la que nos dice a nosotros que HTML es, en este caso es HTML5
00:58:13la etiqueta HTML sí o sí, que va una vez en todo, abre al principio y cierra al
00:58:19final, luego la etiqueta HEAD, que va para la cabecera del navegador y luego el
00:58:25BODY, que va para el cuerpo del navegador, luego va un HEADER, luego un STYLE
00:58:32y un footer, dado el caso que lo necesiten, muchas personas no
00:58:37utilizan footer, muchas personas no utilizan HEAD, no son tan esenciales, las
00:58:41etiquetas más esenciales son las que ustedes ven acá, sí o sí van, y muchas
00:58:47personas utilizan mucho, yo soy una de las personas que también utiliza mucho
00:58:51la etiqueta D, listo, con esas etiquetas podemos
00:58:56tranquilamente nosotros hacer una web sin ningún problema
00:59:01entonces pues no tendría más sentido seguir mirando la etiqueta, etiquetas
00:59:06cuando realmente tendremos que empezar a mirar cosas importantes, esto es lo que
00:59:12yo tengo acá, vale, esto es mío, esto es un nav, aquí están los títulos, más o
00:59:20menos lo que yo les expliqué, aquí están cómo funcionan los enlaces, bueno los
00:59:24enlaces todavía no se los he explicado, eso sí se los voy a explicar, se los voy a
00:59:28explicar de una vez, listo, regálenme un segundito y se los muestro
00:59:35un poco
00:59:51es bien, perdí el código, no sé que se hizo, un segundito y que esto me lleve allá, vamos a
00:59:58mirar si esto me lleva a donde está el código
01:00:06me necesitamos un segundo para poderles explicar esa, necesito la información como
01:00:13tal, listo muchachos, código
01:00:18regálenme un segundito, que no sé dónde está pero como lo tengo en tanto lado, él debe
01:00:24aparecer en una búsqueda rápida, acá están, ya aparecieron
01:00:33necesito el phtml
01:00:41tengo más o menos cosas
01:01:02listo
01:01:03vamos a ver, ya no hay abierto, pero la verdad es que no hay abierto, no hay abierto, no
01:01:09hay abierto, no hay abierto, no hay abierto, no hay abierto, no hay abierto, no hay abierto,
01:01:16no hay abierto, no hay abierto, no hay abierto, no hay abierto, no hay abierto, no hay abierto,
01:01:23no hay abierto, no hay abierto, no hay abierto, no hay abierto, no hay abierto, no hay abierto,
01:01:31ya lo había abierto pero ahora necesito abrirlo con subline, listo, le damos clic derecho
01:01:35y escogemos el editor, acá no me muestra subline, me muestra sedit, pero lo voy a arrastrar
01:01:41a subline sin ningún problema, listo, y acá está pues todo lo que les estaba mostrando,
01:01:47listo, yo lo tengo, se acuerdan de mis plantillas, yo lo tengo también como una plantilla, dado
01:01:53el caso de que algún día se me llegue a olvidar algo, nosotros a veces se nos olvida algo
01:01:59entonces pues prefiero ir a la segura y tener siempre información, listo, entonces este
01:02:06es el NAP, este es el menú que ustedes ven acá, listo, preferiblemente ustedes lo colocan
01:02:13de un NAP dentro del menú de navegación, luego colocan un UL y después colocan un
01:02:20LI, estos LI son los que me permiten hacer este tipo de, o sea colocar esta información
01:02:27que está acá, que es lo que les quiero explicar, que yo sé que ya algunos de ustedes
01:02:31ya manejan como tal los, manejan este tipo de cosas, aquí en el href está hacia donde
01:02:42yo quiero ir, listo, entonces si ahí coloco otra página, por ejemplo ya tenemos varias,
01:02:48ya en nuestro proyecto tenemos cero páginas, aquí tengo una, voy a crear otra, acuérdense
01:02:57la puedo crear de acá o la puedo crear de allá, no importa, me da lo mismo, simplemente
01:03:02le tengo que dejar la extensión, entonces lo voy a llamar pruebas.html, listo, ya tengo
01:03:12la página de pruebas, la voy a abrir, le voy a dar una infraestructura, acá le voy
01:03:25a quitar el nombre y le voy a poner índice, pero para que me llame a esta que está aquí,
01:03:30esta que tengo acá que estoy editando, ahora quiero abrir pruebas, también lo quiero abrir
01:03:36con subline y le voy a dar una estructura de html, html 2.5 tab y aquí tengo, entonces
01:03:48le voy a decir saludos desde pruebas y le voy a poner en un cuadro, vamos a ponerlo
01:03:58dentro de un h1, saludos desde pruebas, listo, ya estaría, y le voy a poner un ancor, que
01:04:16es lo que ustedes están viendo, y le voy a decir que me vaya al índice.html, y le
01:04:24voy a decir volver, ya que empezamos a navegar dentro de páginas, listo, este me va a llevar
01:04:30al índice para volver y si abro el índice que está acá, no debería tener nada y le
01:04:37voy a colocar un ancor también, que me va a llevar a pruebas, html y le voy a decir
01:04:47ir a pruebas, listo, guardo, actualizo, ir a pruebas, ya saludos desde pruebas, volver
01:04:57y vuelve al índice, creo que volver me quedó mal escrito, pero bueno, es lo de menos, no
01:05:03podríamos destrezarnos por eso, listo, miren que así es sencillo, tengo una navegación
01:05:11dentro de páginas, acá le pongo, voy a colocarle, este es el índice, listo, saludos desde pruebas,
01:05:26volver, y este me pone, este es el índice, ir a saludos desde pruebas, fácil, rápido
01:05:33y sencillo. ¿Qué era lo que le quería explicar para que me prestaran atención? Esta que
01:05:38está aquí, target bank, esta me permite abrir en otra pestaña sin necesidad de saltar,
01:05:49por ejemplo, miren que yo acá para ir a pruebas le doy click y él me lleva a pruebas, si
01:05:57yo le colocaría un target, él me lo abriría en otra pestaña sin necesidad de yo ir hasta
01:06:07por allá, no me lo tomó, target bank, ahora sí lo tomó, ya abre sin necesidad de yo
01:06:34ir hasta allá, para que no haya recargado, él me lleva pero me mantiene la página actual,
01:06:42entonces para eso es que sirve el target bank, cuando ustedes vayan a abrir en otra pestaña
01:06:49sin que se salgan de la de uno, por ejemplo, yo tengo una página y estoy haciéndole publicidad
01:06:56a X marca, entonces yo quiero que el usuario visite su página pero que no se salga de la
01:07:04mía, yo simplemente le doy click, ya lo llevo a su página pero que el usuario quede adentro
01:07:09de mi página, más o menos es para eso, ¿listo? Entonces eso era lo que le quería explicar
01:07:14con el target como tal. En el href, bueno en el href anchor a veces uno llama dentro
01:07:26de la misma página, va llamando secciones, eso pues también nos ayuda mucho en el momento
01:07:36que ustedes quieran como tal hacer eso. Acá está el tema de SEO como les había explicado
01:07:42y aquí tengo todo, el hgroup, los enlaces, aquí están todos los enlaces, cómo se utilizan,
01:07:50aquí está el target, como les digo, este es para la sección, entonces hay páginas
01:07:55que tienen sus secciones, entonces es bueno de ir viajando entre secciones, ¿vale?
01:08:02Eso es sumamente importante. ¿En qué me refiero con secciones? Lo mismo que les dije
01:08:08ahora al rato, yo aquí tengo, no sé, una sección que se llama comida para gatos, aquí
01:08:17está nuestro gatito, bueno pero es un pato, comida para patos, ¿listo? Entonces, por
01:08:23ejemplo, acá dice comida para patos, aquí dice comida para perros, aquí tengo la sección
01:08:28de comida para perros, ¿sí? Entonces cuando yo le doy click a la sección de comida para
01:08:32perros, toda la página se baja hasta donde está la sección de comida para perros.
01:08:38Esas son las personas o los programadores que nos quieren hacer la página en varios
01:08:46archivos, como yo les mostré ahorita que está acá, que es el índex y las pruebas,
01:08:51o sea, por lo regular casi siempre lo hacemos nosotros así.
01:08:54¿Listo? La idea principal es poder nosotros hacer eso, ¿vale? Como les digo, no es necesario
01:09:02ponernos a mirar todas las etiquetas, a medida que ustedes vayan avanzando, las van mirando,
01:09:09aquí está para qué sirve cada una de ellas, o sea, esto que yo tengo aquí es mío, realmente
01:09:18porque a veces donde estoy no tengo, digamos, acceso a Internet, entonces a veces se me
01:09:28olvida una etiqueta, ¿cierto? Suele pasar, ¿para qué era que servía esa etiqueta?
01:09:33Son las etiquetas, por lo regular uno no usa mucho, por ejemplo esta WBR, esto casi no
01:09:39se utiliza, entonces si uno no se acuerda para qué es, usted le da click acá y pues
01:09:44aquí lo lleva la etiqueta, WBR, ¿sí? Aquí simplemente están resaltando un HTTP, ¿vale?
01:09:53Entonces, aquí está el tema del audio, a nosotros no habíamos cargado ningún audio,
01:09:58ya les muestro cómo se carga un audio, ya habíamos cargado una imagen, cargamos un
01:10:04video y el audio se carga de la siguiente forma, bueno, aquí están todas, para qué
01:10:11sirve el párrafo, el span, el stroll, el EM, la section, el article, acá es audio,
01:10:18entonces aquí de esta forma se carga un audio.
01:10:22Primero, el nombre del archivo, entonces este archivo se llama, si yo pudiera, si vamos
01:10:31acá, miren que aquí está el nombre, ¿dónde está mi archivo? No lo veo por ningún lado,
01:10:38¿dónde está mi audio? No lo veo, está raro.
01:10:59Creo que no va a sonar porque no me acuerdo dónde está el audio, debería estar aquí.
01:11:05Tuve que haberlo borrado, entonces no debería de sonar, pero bueno, nosotros también en
01:11:12ese caso, acá nosotros, la idea es cargar siempre el archivo en MP4 y cargarlo donde
01:11:20nosotros estamos. No, pero este es para video, este es MP4, este es el que estoy buscando
01:11:29y no aparece. Debería estar ahí afuera, pero no sé si es que no lo veo, pero no,
01:11:36no aparece. Listo, entonces no debería de sonar. Le doy doble clic y no suena, ¿por
01:11:44qué? Porque no encuentra el audio y no me acuerdo si yo tengo un audio acá, si lo
01:11:49tengo lo uso y lo cargamos de una vez. Vamos a ir a equipos, música, vamos con este. No,
01:12:03pero no me acuerdo si me recibe eso, yo tengo un MP3, porque los audios también tienen
01:12:11extensiones, pero regularmente ahí siempre cargamos MP3. Listo, dejemos el audio quieto
01:12:16por ahora. El video, pues ya les mostré cómo se carga el video. Lo mismo, ir a buscar
01:12:22un video para poderlo cargar, que fue el de la clase pasada. Este que está acá, no
01:12:31les había explicado el iframe. ¿Para qué sirve el iframe? Para cargar una vista en
01:12:37miniatura de lo que nosotros queremos de otra página. Por ejemplo, en este caso se está
01:12:43cargando desde YouTube este enlace. Y con eso pues ya él empieza a cargar su información.
01:12:51Listo, aquí tenemos un pequeño formulario. Acuérdense, formulario que abre, formulario
01:12:57que cierra, el ID del formulario. Este ID del formulario es importante para capturarlos
01:13:04en JavaScript. Listo, el nombre del formulario, con esto lo capturamos al momento de enviarlo,
01:13:11el método es importante. Método POST o método GET. GET va por el navegador, POST
01:13:18va oculto. Por lo regular, cuando sea información sensible, envíenlo oculto. Listo, y luego
01:13:28hacia qué archivo va a ir. En este caso, pues el archivo se llama enzoco.php. Obviamente
01:13:33no lo tengo acá. Simplemente, ya sé para qué archivo va a ir. Eso lo vamos a ver cuando
01:13:39ya estemos trabajando directamente con PHP para darle entrada como tal a PHP. Listo,
01:13:45acá en el botón se llama submit, cuando para todo formulario, para poderlo enviar
01:13:52necesitamos un botón. ¿De qué tipo? Submit. En este caso pues estamos utilizando un input,
01:13:58pero si usted utiliza un botón de tipo submit, también lo va a enviar. Listo, y en el value
01:14:05nosotros colocamos el valor, o sea, lo que va a aparecer en pantalla. Acá se llama enviar
01:14:11el zc. Luego hablamos un poco del footer. Aquí está el documento, el strom. El strom
01:14:20es como para poner en negrita. Cuando ustedes quieran colocar algo en negrita, lo colocan
01:14:25dentro de strom. Miren que acá aparece documentos. Y aquí está, pues estoy haciendo referencia
01:14:30a todos los archivos que hay. Entonces, como les digo, este archivo es mío, lo construí
01:14:36en el 2018. Me gusta ponerle fecha absolutamente a todo. Lo construí en el 2018 y si quiere
01:14:45se los puedo compartir, no tengo ningún problema. Y no van a tener derechos de autor porque
01:14:52realmente es mío, yo se los estoy entregando. No van a tener ningún problema con ese tipo
01:14:57de cosas. ¿Listo? Bueno, ¿qué más podemos nosotros saber? Yo creo que con esto es suficiente
01:15:06HTML. Vamos a dedicarle unos cinco minuticos a CSS. ¿Listo? Vamos a dedicarnos a CSS.
01:15:16Yo también tengo acá CSS como tal. Tengo también un archivo de CSS. Realmente ya tengo
01:15:30archivo de casi todos los programas que utilizo. Acá está el CSS. ¿Listo? El CSS pues también
01:15:36está de esta forma y les voy a explicar cada una de ellas. Vamos a arrastrar el archivo
01:15:43acá para que lo puedan comprender. ¿Listo? Así es como se va a ver en el archivo y así
01:15:52es como nosotros lo vamos a ver en el código. ¿Listo? Esto es puro HTML, lo que les venía
01:16:01diciendo ahorita. El archivo real para poderlo trabajar es este, el CSS. Ese ya se los voy
01:16:10¿Listo? En la medida que estamos trabajando, pues nosotros vamos a mirar. CSS, o sea, primero
01:16:18necesitamos un poquito de teoría, igual que con HTML. CSS nosotros lo vamos a aplicar
01:16:26de esta manera. Entonces, primero necesitamos un selector. Agárrenme un segundito.
01:16:40Primero necesitamos un selector. ¿Listo? ¿Cuál va a ser nuestro selector? Puede ser la etiqueta,
01:16:48en este caso H1. Entonces, cuando yo coloco H1, afecto a todas las etiquetas que sean H1,
01:16:55¿ok? Para que lo tengan presente. Luego, bueno, aparte de la etiqueta, está el numeral,
01:17:05que es el ID, y está el punto, que es la clase. Entonces tenemos esas tres formas de
01:17:12afectar, como tal, a HTML. ¿Listo? Luego, necesitamos la propiedad. ¿Qué vamos a afectar?
01:17:22Y luego necesitamos es cómo lo vamos a afectar. ¿Listo? Entonces, esto viene siempre en combo,
01:17:30separado por los dos puntos. ¿Listo? Acá tenemos un background, tenemos dos puntos
01:17:38y tenemos un color. Si mi memoria no me falla, esto es RGB. Entonces esto es rojo,
01:17:54verde y azul. Green, blue. Este color es verde. ¿Listo? Porque este es el rojo, este es el verde
01:18:07y este es el azul. ¿Listo? Entonces, así como nosotros mezclamos los colores primarios normales
01:18:13acá, que ustedes saben que son amarillo, rojo y creo que azul, y tenemos esos tres primarios,
01:18:23acá tenemos esos tres primarios. Entonces, ahorita los vamos a ir mirando. ¿Listo?
01:18:29Entonces, acá les hablan de los selectores, que les dije. El ID, que es un signo de gato.
01:18:38Las clases. Entonces, acá están los ejemplos. Aquí estoy afectando al body, que es cómo se afecta
01:18:48la etiqueta. Y también se están editando todas las etiquetas, en este caso, de H3.
01:18:57Entonces, vamos a hacer el ejemplo. Vamos a volver a nuestro archivo para que ustedes
01:19:02me puedan hacer entender. Perdón, yo me pueda hacer entender. Entonces, voy a crear un archivo,
01:19:08una carpeta, que se va a llamar CSS. Porque a mí me gusta tener todo dentro de CSS.
01:19:17Voy a crear un archivo .css. Le puedo poner el nombre que yo quiera. Ahí lo importante es CSS.
01:19:25Entonces, le voy a decir, estilo.css. Listo. Ya ahí estaría. Entonces, a este estilo .css,
01:19:40le voy a decir que voy a afectar a todos los párrafos, los voy a afectar con un color rojo.
01:19:47Entonces, le voy a decir color. Y aquí hay varias formas. Yo le puedo copiar el color directo, que es red.
01:19:56Vamos a buscar una tabla de colores. De una vez para que vayan mirando cómo son las tablas de colores.
01:20:04Yo me apoyo mucho en estas tablas porque realmente, digamos, yo no es que sea muy bueno dando colores.
01:20:15Entonces, RGB quiere decir que esto va a ser rojo, esto va a ser verde y esto va a ser azul.
01:20:24Y mediante el cambio de estos, así mismo me va a dar los colores.
01:20:30Entonces, mire que me va dando el color en RGB, el color que yo quiera.
01:20:35Entonces, si quiero, yo puedo escoger el color que yo desee. También en hexagecimal.
01:20:42Listo. Diferencia entre RGB y hexagecimal. Hexagecimal es mucho más preciso.
01:20:50Tiene más tonos de colores, mientras que RGB es mucho más limitado.
01:20:55Listo. También está en HSL, pero no los quiero confundir con eso ahorita.
01:21:03Entonces, yo puedo decirle que todos los párrafos van a ir de color rojo.
01:21:08Y voy a mi archivo que está acá, que nosotros estamos trabajando ahorita.
01:21:16Y empezamos a cerrar cosas.
01:21:25Listo. Vamos a actualizar. Listo. Ya estamos donde es.
01:21:30Acá tengo... vamos a cerrar esto y ya tengo los estilos.
01:21:38Y necesito el párrafo con el que estábamos trabajando en el proyecto. Acá.
01:21:45Listo. Este índex es el que necesito y lo voy a volver a abrir con subline.
01:21:52Si no me deja abrirlo, pues lo arrastro directamente. Es más, yo tengo el proyecto abierto.
01:21:58Miren que aquí está el índice. Listo. Entonces necesito varios párrafos.
01:22:02Vamos a dejar eso quieto y vamos a crear 10 párrafos.
01:22:08Vamos a decirle p x 10.
01:22:13Y listo. Tengo 10 párrafos.
01:22:16Y a todos les voy a dar el mismo contexto.
01:22:20Les voy a decir archivo de prueba.
01:22:28Listo. Actualizo.
01:22:30Miren que ya tengo archivo de pruebas, archivo de pruebas, archivo de pruebas.
01:22:34¿Por qué no... si ya estoy afectando todos los párrafos, no me aparece acá en rojo como yo quiero?
01:22:43Pues porque sencillamente no he vinculado el archivo.
01:22:47¿Cómo se vincula el archivo? Con la etiqueta link.
01:22:52Listo. En la etiqueta link ya él me pone toda la información.
01:22:56Acá me pregunta dónde está la ruta. Me muestra el CSS.
01:23:00Dentro del CSS está el que yo llamo estilo. Estilo CSS.
01:23:06Si yo guardo y actualizo, debería todo estar en rojo.
01:23:11Ahí estoy afectando todos los párrafos.
01:23:15¿Por qué? Porque yo le estoy diciendo a la etiqueta p, o sea, todo lo que sea párrafo,
01:23:22póngamelo de color rojo, incluyendo el que está arriba.
01:23:25Este que está acá ni siquiera lo había tocado y miren que se puso de color rojo.
01:23:30Entonces tengan cuidado cuando afectan todas las etiquetas.
01:23:36También nosotros lo podemos afectar, en este caso, por ID.
01:23:44¿Cómo afectamos por ID? En la ID colocamos el numeral y ponemos...
01:23:50En este caso le voy a decir azul.
01:23:55Entonces voy a buscar una etiqueta de esas y le voy a decir que la voy a afectar por ID.
01:24:01Voy a utilizar la 3.
01:24:03Le voy a decir que va a ser un ID que se va a llamar azul.
01:24:10Listo.
01:24:11Entonces, como ya tengo el color, ahora lo voy a hacer en RGB para que vean ustedes cómo es en RGB.
01:24:19Le voy a decir que sea RGB.
01:24:27Y acá me coloca 3.
01:24:29Entonces me coloca primero el rojo, que está en 0, lo voy a dejar en 0.
01:24:35El verde, que está en 0, lo voy a dejar en 0.
01:24:39Y el azul, 255.
01:24:43Esto es opacidad.
01:24:44Si yo lo quiero dejar con opacidad, pues lo puedo dejar.
01:24:49Pero como no quiero tener opacidad, pues lo voy a quitar.
01:24:53Listo.
01:24:55Y todo sale bien.
01:24:56Ya el que yo coloqué con ID azul, se colocó azul.
01:25:02¿Por qué en este caso él está cambiando?
01:25:08Porque el CSS se aplica en cascada.
01:25:11¿Qué quiere decir?
01:25:12El primero que se aplica, el que sigue lo reemplaza.
01:25:18A ver, si yo muevo este azul hacia arriba, y dejo los párrafos en la parte de abajo.
01:25:30El azul se va a aplicar.
01:25:31Pero más sin embargo, como lo último que está es el rojo, deberían devolver todos a su estado rojo.
01:25:39No lo está haciendo, pero debería hacerlo.
01:25:42Listo.
01:25:43Bueno, en este caso se va a hacer CSS.
01:25:47Bueno, entonces volvamos a donde estábamos.
01:25:51Esto no deberían de utilizarlo.
01:25:57Importante.
01:25:59Esto obliga a CSS a hacer lo que yo le estoy diciendo.
01:26:05Si o si lo puso azul, lo puso rojo.
01:26:08Entonces a él le importa.
01:26:10No importa dónde esté, si yo lo coloco.
01:26:13Él, ese es el que más se va a aplicar.
01:26:17Esto lo utilizan mucho los frameworks.
01:26:19Nosotros no deberíamos de utilizarlo, porque no son buenas prácticas.
01:26:23Listo.
01:26:24Ahora, vamos a afectar varios a la vez.
01:26:28Que no sea ni el párrafo, ni por ID.
01:26:33Lo vamos a afectar por clase.
01:26:35¿Cómo se afecta por clase?
01:26:37Se coloca el punto y se coloca el nombre de la clase.
01:26:42Tenemos amarillo, azul.
01:26:43Vamos con el verde.
01:26:44Entonces.
01:26:48Verde.
01:26:50Pero vamos a afectar varios al tiempo.
01:26:52Listo.
01:26:53Color.
01:26:56No colabora.
01:26:58Color.
01:26:59Voy a decirlo otra vez RGB.
01:27:04Para colocarle acá 255.
01:27:06Que esto es verde.
01:27:08Borramos.
01:27:09Actualizamos.
01:27:10Y no va a pasar nada.
01:27:12¿Por qué?
01:27:13Porque todavía no le he dado la clase a ninguno de ellos.
01:27:16Entonces, quiero buscar uno con clase.
01:27:18Y voy a utilizar este, este y este.
01:27:21Estos tres.
01:27:23Le voy a decir que voy a utilizar una clase.
01:27:33Llamada.
01:27:35Verde.
01:27:37Creo que se llamaba así.
01:27:39Si actualizamos, debería de colocarse en verde.
01:27:43Afecte a más de una clase.
01:27:45En conclusión.
01:27:48Si yo lo hago por etiqueta, afectaría todas las etiquetas.
01:27:54Sí o sí.
01:27:56Si lo hago por ID, afectaría un solo objeto.
01:28:01Y si lo hago por clase, afectaría a cada objeto que tenga esa clase.
01:28:09¿Sí?
01:28:10Por ejemplo, mire que este que dice verde, verde, verde.
01:28:13Son los que están en verde.
01:28:15Si yo le aplico esa misma clase al resto.
01:28:18Por ejemplo, a este que está acá.
01:28:22Al antepenúltimo.
01:28:24Le aplico la misma clase que tengo.
01:28:28El antepenúltimo también va a cambiar.
01:28:31Entonces, ¿cuál es el que nosotros más utilizamos?
01:28:34Las clases.
01:28:36Ese es el que más utilizo.
01:28:37Es el que ustedes más van a ver para trabajar.
01:28:41Realmente, eso es lo que ustedes van a hacer.
01:28:44Por ejemplo, si yo quiero que el background.
01:28:49Cuando hablamos de background, estamos hablando de color.
01:28:57Hay varios background.
01:29:02Color.
01:29:04Le voy a decir que el color sea.
01:29:06Vamos a buscar un hexagésimal.
01:29:08Para que ustedes vean cómo funciona el hexagésimal.
01:29:12Entonces, quiero un color amarillo.
01:29:15Este amarillo.
01:29:19Listo.
01:29:20Copiamos el hexagésimal.
01:29:23Y lo pegamos.
01:29:27Background y en hexagésimal debería ser ese color.
01:29:31Entonces, miren.
01:29:33Realmente, todos los que cambiaron.
01:29:35Creo que se ve horrible.
01:29:38Vamos a decirle en hexagésimal.
01:29:41Vamos a colocarlo negro.
01:29:441, 2.
01:29:451, 2.
01:29:461, 2.
01:29:48Listo.
01:29:49Vamos a dejarlo en negro.
01:29:51Y acá lo vamos a convertir en blanco.
01:29:57Actualizamos.
01:29:59Quedó entre negro y blanco.
01:30:02Entonces, ahí ustedes ya empiezan a jugar con todo el tema de CSS.
01:30:08Como les digo, aprender CSS y HTML se van a demorar muchísimo.
01:30:14Realmente, ustedes no van a tener tiempo para aprender CSS.
01:30:19Tranquilamente, en CSS se pueden estar gastando seis meses para aprenderlos bien.
01:30:25Les tocaría aprender Z-Index.
01:30:28Les tocaría aprender un link, iconos.
01:30:31Cómo cargar posición máximo, mínimo de ventana.
01:30:36Float.
01:30:37Navbar.
01:30:38Background.
01:30:39O sea, un montón de cosas que realmente el tiempo no les va a dar.
01:30:43Obviamente, esto, cuando ya tengan el tiempo.
01:30:47Se sienten.
01:30:48Empiecen a utilizar bien esto.
01:30:51Yo se los recomiendo.
01:30:53Importante saber cómo son las clases y qué es lo que tenemos que afectar.
01:30:59Pero nosotros vamos a trabajar con bootstrap.
01:31:03Bootstrap es bastante interesante.
01:31:13Bootstrap es bastante interesante.
01:31:16Como ya les expliqué CSS, ya les expliqué JavaScript.
01:31:21Se lo voy a explicar después de PHP.
01:31:24¿Por qué?
01:31:25Porque con JavaScript vamos a hacer solo validaciones.
01:31:28Vamos a construir un sistema sin validaciones y después lo empezamos a implementar las validaciones.
01:31:34¿Por qué?
01:31:35Porque si nosotros le aplicamos un login a nuestro trabajo de entrada,
01:31:38siempre vamos a tener que estarnos loggeando.
01:31:41Voy a hacer la estructura del login, pero simplemente le voy a dar clic y que me lleve al otro lado.
01:31:48Sin ningún tipo de validación.
01:31:50Eso pues obviamente lo vamos a ir mirando con el tiempo.
01:31:54Pero primero necesito hacer la estructura, que se conecte a la base de datos, que pueda borrar.
01:31:59Y ahí sí empezamos a hacer las validaciones para que realmente no rinda y ustedes puedan entregarme la guía 7.
01:32:06Los que les hace falta.
01:32:08Los que no, pues los felicito.
01:32:11Ya todos, yo les habilité la guía 6 y la guía 7.
01:32:15Ya con esta explicación, yo les estaría habilitando este fin de semana la guía 8, aunque ya algunos la tienen activa.
01:32:23Pero la voy a dejar en la fecha en que habíamos estipulado.
01:32:26¿Listo? Entonces quiero que por favor, muchachos, eso que yo les envié, lo lean.
01:32:32Esos cositos son para leerlos.
01:32:33Por eso la formación la hice con ellos.
01:32:36Para que ustedes pudieran comprender cómo se trabaja.
01:32:40Obviamente no vimos el DCSS, ya lo podemos ver aquí rapidito.
01:32:44Para que ustedes vean cómo se puede ir trabajando.
01:32:49¿Qué dice acá?
01:32:51Buenas noches para todos.
01:32:53El Profesor Inocencio me regala por favor el link de la grabación de las sesiones del lunes.
01:32:59Muchachos.
01:33:01Eso.
01:33:03Ustedes ya saben dónde están.
01:33:05O sea, yo no les entiendo.
01:33:08Ustedes entran acá, entran a su grupo.
01:33:14Acá hay una lista de reproducción.
01:33:18Entonces digamos, yo estoy en el 8081.
01:33:21Ingreso.
01:33:23Y aquí está en el 8081.
01:33:25Ahí está su información.
01:33:26Las que no estén en el 8081.
01:33:28Yo estoy en 305-306.
01:33:32Ingresen a 305-306.
01:33:34Ahí está su información.
01:33:36O sea, no entiendo por qué me toca estarles enviando desde el enlace.
01:33:41Si ya ustedes son...
01:33:43Ya tienen cancha.
01:33:45O sea, eso, los primeros, vallivengan.
01:33:48Pero bueno, si quieren yo se los envío.
01:33:51Pero eso es un desgaste tanto para ustedes como para mí.
01:33:54¿Qué más es?
01:33:56Por acá.
01:33:58Las sesiones.
01:34:00Ustedes saben que siempre es por la misma parte.
01:34:04Si yo no les digo a ustedes, muchachos, no hay sesión.
01:34:08Es porque sí hay.
01:34:10O si yo no les hablo de la sesión.
01:34:13Es porque sí hay.
01:34:15Por ejemplo, yo les pedí el favor la formación pasada porque estaba sin luz.
01:34:19Entonces, como pude, les envié el mensaje para que por favor se conectaran a las 8.
01:34:23¿Sí?
01:34:25Pero mientras tanto, todo sigue igual y en eso quedamos nosotros en el convenio.
01:34:29Creería yo.
01:34:32Listo.
01:34:34Buenas noches, profesor.
01:34:36¿Hoy hay clase?
01:34:38Vamos a decirle que sí.
01:34:43Se eliminó.
01:34:45Compañeros, buenas noches.
01:34:47En el anuncio...
01:34:50Ya me confundí.
01:34:51¿De qué?
01:34:54Sesión casincrónica.
01:34:56Sesión septiembre 7.
01:35:08Septiembre 7, sábado.
01:35:11Dar clic aquí para ingresar.
01:35:13La propia Giovanna Raso.
01:35:17Jueves 20...
01:35:18Yo, tengo que hacer un peritaje.
01:35:20Profe, disculpe.
01:35:22Yo entré ahí ese encuentro de la profe y eso está activo, pero ahí ella no estaba.
01:35:27Y ahí ella dice que lo publicó hoy, que era para el 7.
01:35:31Entonces, hay una confusión ahí grave.
01:35:35Ok.
01:35:37Toca que hablen con ella.
01:35:40O sea, por eso lo mismo...
01:35:42Estas cosas a mí me...
01:35:44Dicen que yo tengo que colocar las sesiones.
01:35:46Dicen que yo tengo que colocar las sesiones.
01:35:48Pero es que eso los confunde a ustedes.
01:35:50Y si nosotros decimos lunes, martes y jueves a las seis de la tarde.
01:35:55Pare de contar. Yo no.
01:35:57Pero el SENA exige todo este tipo de cositas.
01:36:00Y yo también me confundo a veces con eso.
01:36:02Es por eso que casi no los programo de esta forma.
01:36:04Y ahorita comenzamos.
01:36:06Yo no he hablado contigo.
01:36:08¿Tú no puedes dar la clase un poquito más tardecito?
01:36:10Por ahí a las siete y media, a las ocho.
01:36:13¿A ustedes a qué hora les conviene, muchachos?
01:36:16O hago una encuesta a ver si lo podemos pasar a las ocho.
01:36:19Yo creo que deberías como en el grupo.
01:36:22Porque aquí nada más habemos cuatro.
01:36:24Y pienso que el día que la diste a las ocho, entramos doce, trece personas.
01:36:29Ok. Entonces podríamos...
01:36:32O sea, como les digo, esto es charlado, muchachos.
01:36:34Si ustedes me dicen, profe, hagamos esto.
01:36:36Lo estudiamos y si a ustedes les parece que sea mejor a esa hora.
01:36:39Y si se me van a conectar a esa hora.
01:36:41Con el mayor de los gustos, muchachos.
01:36:43Yo no tengo problema por eso.
01:36:45¿Vale?
01:36:47Gracias, profe.
01:36:49Listo. Entonces yo les enviaré la encuesta para ver.
01:36:52Bueno, antes de irnos.
01:36:54Venga, que necesitamos...
01:36:56Necesito mostrarles el libro también de PHP, de HTML.
01:36:59De CSS.
01:37:01Para que ustedes también lo practiquen.
01:37:03¿Listo, muchachos?
01:37:05Vamos acá.
01:37:07JavaScript.
01:37:09Y el último.
01:37:11Léanse HTML y CSS.
01:37:13¿Listo?
01:37:15Léanselo, muchachos.
01:37:17Porque realmente lo van a necesitar.
01:37:19Vamos a guardarlo y vamos a abrirlo.
01:37:21Yo tengo libros más largos.
01:37:23Tengo libros de mil páginas.
01:37:25Pero obviamente no los voy a expresar.
01:37:27Sino...
01:37:29Poquito.
01:37:31Eh, Flexbox.
01:37:33Bueno, esto...
01:37:35Creo que me confundí de libro.
01:37:37No vayan a leer ese.
01:37:39Flexbox es un poquito más...
01:37:41Esto es de ubicación.
01:37:43Es un poquito más avanzado.
01:37:45Entonces ya que estamos acá, muchachos.
01:37:47Permítanme y les comparto un libro.
01:37:49De CSS.
01:37:51Que si les pueda servir.
01:37:53Este es...
01:37:55Es que es un poquito más avanzado.
01:37:57Necesitan un...
01:37:59Trismat de nivel.
01:38:01Que la idea es llegar a él.
01:38:03Espérenme. Estoy buscando un disco duro.
01:38:05Que tengo acá.
01:38:07Que es donde están mis libros.
01:38:10Buscamos un CSS más...
01:38:12Más interesante.
01:38:14Es este.
01:38:16Un segundo.
01:38:18Un segundo, muchachos.
01:38:20Porque necesitamos ponerlo a prueba.
01:38:22Nada me sirve mostrarle un libro.
01:38:24Sin poderlo poner a prueba.
01:38:32Creo que es este.
01:38:34Libros.
01:38:36Acá están.
01:38:40Tengo libros, libros, libros.
01:38:44Más rápido así.
01:38:48CSS.
01:38:50Vamos a mirar.
01:38:52Lo miramos por tamaño.
01:38:55Y que esté en español.
01:39:00Creo que les podría pasar este.
01:39:02Este tiene los tres.
01:39:04Este que...
01:39:06Ah, bueno. Este es un muy buen libro.
01:39:10Este tiene 300 páginas.
01:39:12Este tiene 600.
01:39:14Pero este que yo tengo acá.
01:39:16Este es un excelente libro.
01:39:18Listo. Entonces.
01:39:21Aquí, bueno. Ahí está SEO.
01:39:23Sí, SEO es importante.
01:39:25Que ustedes ya lo empiecen a...
01:39:27Se empiecen a familiarizar con eso.
01:39:29Bueno, los que van a construir páginas para terceros.
01:39:31Los que van a construir sus propias páginas.
01:39:33No tienen ningún problema.
01:39:35Listo. Entonces, mire que acá está HTML.
01:39:37Todo lo que habíamos charlado.
01:39:39Entonces, aquí comienzan con CSS.
01:39:41Estamos hablando en la página 83.
01:39:46Listo.
01:39:48Entonces, aquí ya les empiezan a hablar de...
01:39:51De color.
01:39:53O sea, esto que tiene acá.
01:39:55De tipo color.
01:39:57Esto no deberían de utilizarlo.
01:39:59Pero mire, aquí ya les empiezan a hablar de...
01:40:01Como tal del color.
01:40:03Bueno, aquí les empiezan a colocar...
01:40:06Formularios.
01:40:09Cómo empiezan ustedes.
01:40:11Dónde está el CSS.
01:40:13Todos estos HTML.
01:40:15Y él me dijo que en la página 81 estaba el CSS.
01:40:17Ah, mire.
01:40:19Aquí está todo lo que ustedes necesitan de formularios.
01:40:21Muchachos.
01:40:23Esto es un muy buen libro.
01:40:25Como les digo.
01:40:27Les toca que se desgasten un momentico en la...
01:40:30En la...
01:40:32Leyéndolo.
01:40:34Yo se los comparto.
01:40:36Igual esta información que yo consigo.
01:40:37Tengo libros de absolutamente todo.
01:40:39Tengo videos de absolutamente todo.
01:40:41Porque como les digo.
01:40:43Unas veces se le olvidan las cosas.
01:40:45Yo mismo creo mis propios materiales para mí mismo.
01:40:47Tengo un blog.
01:40:49Solo para mí.
01:40:51Esta grosería me dijo que tenía CSS.
01:40:54Nada más.
01:40:56Yo les comparto el libro.
01:40:58El libro es bueno.
01:41:00Pero necesito algo que les explique CSS.
01:41:02Espérenme.
01:41:04Pero necesito que esté en español.
01:41:11CSS completo.
01:41:13De referencia.
01:41:15Esto está en inglés.
01:41:19El gran libro de...
01:41:21Creo que este es el mismo.
01:41:27Sí, es el mismo.
01:41:28Ah, no.
01:41:30Pero este no me dijo mentiras.
01:41:32Fue el otro.
01:41:34Indice.
01:41:38Estilos de CSS.
01:41:40Capítulo 31.
01:41:43Capítulo o página.
01:41:45Página 31.
01:41:50Cabeceramente.
01:41:52¿Se acuerdan de lo que estábamos hablando?
01:41:54Del header.
01:41:56Del nav.
01:41:58Del footer.
01:42:00Aquí se lo representan bien en una paginita.
01:42:02Cómo se debe ver.
01:42:04Es como les digo.
01:42:06Tocaba, muchachos.
01:42:08Dedicarle un tiempito y leer el libro.
01:42:10Este libro que les voy a pasar.
01:42:12Pero no veo dónde está.
01:42:14Ah, pero es que mira.
01:42:16Ahí dice página 17.
01:42:18Yo dije página 38.
01:42:20Creo que el otro tampoco me hizo mentiras.
01:42:22Capítulo 2.
01:42:24Por aquí lo vi, por aquí lo vi, por aquí lo vi.
01:42:26Por aquí está, por aquí está.
01:42:28Capítulo 2.
01:42:30Vamos con lo que es CSS.
01:42:32Vamos a lo importante.
01:42:34Mmm.
01:42:36Aquí.
01:42:38Bueno, aquí colocan CSS directamente en la página.
01:42:40Esto no es recomendado.
01:42:42Esto ya es caso extremo.
01:42:44Ahí están colocando el tamaño de la fuente.
01:42:47Este font-size simplemente es el tamaño de la fuente.
01:42:50Lo están colocando en 20 pixeles.
01:42:53Obviamente, si yo lo coloco en lo que yo tengo.
01:42:55Vamos a ver.
01:42:56lo que yo tengo, vamos a colocarlo acá, con size 20px, es lo mismo, entonces por ejemplo
01:43:04yo vengo acá a los estilos y estábamos en los párrapos, entonces yo en los párrapos
01:43:08todos los quiero de 60px, como para que se vea aquí extraordinario y ustedes lo alcancen
01:43:16a notar, entonces yo actualizo, mire como me deja el tamaño de la fuente, entonces
01:43:21es lo mismo, pero aquí lo están aplicando directamente en el html, como identifico
01:43:27yo que es el html, mire que acá arriba dice doctype, titulo, es la misma forma, esta es
01:43:34la segunda forma de aplicar css como les había dicho, esta ya no iría, va acá, pero iría
01:43:43exactamente acá, así en la cabecera, entonces pues tampoco lo recomiendo, pero lo voy a
01:43:53borrar de acá, y lo voy a dejar acá, con size, vamos a ponerle 100px, como para que
01:44:05se vea mucho más ordinario y también funciona, igual funciona, mire que lo estoy aplicando
01:44:11en la cabecera, pero no, realmente esta es la forma correcta, listo muchachos, entonces
01:44:18seguimos bajando, aquí pues llegará el momento donde lo harán de forma correcta, aquí están
01:44:26afectando todos los párrapos, como estábamos viendo ahorita, afectan los span, aquí están
01:44:32afectando por etiqueta, ya aquí empiezan por id, que era lo que acabamos de ver ahorita,
01:44:39aquí está el id y así se escribe en el html, entonces mire que es bastante sencillo,
01:44:46bastante intuitivo este libro, me parece super, entonces muchachos, bueno esto ya es otra voz,
01:44:54entonces está afectando los párrapos, que dentro tengan una clase que se llame texto1,
01:44:59ya esto es otro nivel, listo, acá buscan con el atributo que se llame name, entonces ahí va
01:45:09explicando bien el html, los que estén antes de un igual, cositas como realmente, como les digo,
01:45:17el css realmente es basto, el que crea que html solo es cambiar colorcito, subir imágenes,
01:45:25está totalmente equivocado, porque realmente aprender css bien les va a costar seis meses,
01:45:32y entonces como les digo, no hay tiempo para eso, por eso vamos a utilizar booster, yo siempre les
01:45:39he dicho, utilicen booster, si no tienen tiempo para aprender todas las tecnologías, saquen el
01:45:44título primero y después aprendanlas todas, que eso fue lo que yo hice, a mí me tocaba consultar,
01:45:52ahí fue donde conocí w3school, ahí fue donde conocí startoverflow, realmente tienen que consultar,
01:46:00yo ni siquiera los estoy poniendo a consultar, les estoy entregando todo, tomen idea, vale,
01:46:06entonces muchachos, necesitamos un poquito de esfuerzo, ya vieron más o menos cómo se utiliza,
01:46:12y pues ya la próxima formación vamos con la plantilla, con la planilla,
01:46:19a construir de una vez el backend, entonces permítanme les comparto este libro a todos,
01:46:26se llama el gran libro de html, css y javascript, vamos con el primer grupo,
01:46:39listo, 80 que es el segundo grupo,
01:46:50por acá 81, tercer grupo, me falta como el 06,
01:46:56listo muchachos, entonces por favor, les recomiendo,
01:47:09léanse ese librito, de aquí al martes, si no, gástenle realmente el tiempo,
01:47:20al menos al html, alcancen a leer el html, para que lo comprendan, y si pueden, dos pantallas,
01:47:29en una el libro y en la otra el editor, para que vayan haciendo las prácticas,
01:47:34así como yo se los mostré, yo tengo mi editor, tengo mi editor, señor,
01:47:42ok, entonces mire, ustedes colocan acá el editor, colocan las prácticas,
01:47:48y van ahí practicando, entonces, ¿para qué?, para que se vayan familiarizando con las cosas que
01:47:54se hacen, de nada me sirve a mí llenarles todo el código, si ustedes no lo van a comprender,
01:47:58entonces como les digo muchachos, vamos con todo, ya el martes empezamos a construir ya el back,
01:48:06necesitaba pues obviamente darle el front, necesitaba darle las bases para empezar a
01:48:11construir el front, porque yo no puedo llegar y bueno, vamos a abrir bootstrap,
01:48:15bootstrap está hecho de CSS, de javascript y de JS, es más, antes de retirarme les voy a
01:48:23mostrar bootstrap, pero las clases como tal, para que vean ustedes de lo que se están librando,
01:48:33como ya la rueda está hecha, pues simplemente tenemos que utilizarla,
01:48:38ustedes para, para un, ¿cómo se llama?, para aprender a manejar no necesitan saber cómo
01:48:45funciona el motor, primero aprenden a manejar y después aprenden a reconocer ruidos,
01:48:51haz que le está sonando esto, debe ser esto, ya ustedes, por siempre lógica, pues vamos,
01:48:57vamos que se, vamos mirando esas cositas, ¿listo?, esperen que se descargue bootstrap,
01:49:03les muestro las clases, para que ustedes vean y pues ya, y si ya, le damos finalizar a esto,
01:49:12en dos segunditos, vamos a extraer esta carpeta, extraer aquí,
01:49:22acá está, me equivoqué, bootstrap,
01:49:33listo, entonces acá, bootstrap, acá está el JS,
01:49:42y el DISS,
01:49:45todo esto es JS, vamos a buscar el CSS, creo que el CSS está en,
01:49:54está en SAS,
01:49:58todavía está B abajo,
01:49:59para los que no saben qué es SAS, SAS es una forma de escribir código, CSS,
01:50:09por ejemplo, si yo quiero abrir cualquiera de estos, yo lo puedo hacer, voy acá a subline,
01:50:14lo abro y todo esto es código SAS, entonces si yo le doy el tipo CSS,
01:50:23ya el cambio de colores, entonces mire que acá está el color, el background,
01:50:29está todo lo que ustedes necesitan, aquí están las clases, realmente bootstrap está hecho de
01:50:37clases, acá están los aleas, sí, lo mismo, todo esto son puras clases, solo clases,
01:50:44aquí está la clase principal, lo principal de bootstrap, realmente este es el fuerte,
01:50:52este archivo que se llama bootstrap.css, hace import, este import es llamar a cada uno de
01:51:01estos archivos que está aquí, se acuerdan cuando uno, en PHP les voy a mostrar también cómo se hace,
01:51:07digamos él, me regala el link, gracias, acá está toda la información y miren todos los que
01:51:17está haciendo import, cada uno de estos es un, digamos, un archivo diferente, por ejemplo,
01:51:24si yo busco este que se llama form, cómo trataría de los formularios, entonces yo vengo acá,
01:51:32busco el form, vamos a buscarlo, y aquí hay varias formas de tratar los formularios,
01:51:43entonces, cómo es un select, cómo es, entonces, como les digo, esto ya está hecho, ya está
01:51:50construido, usémoslo muchachos, no se desgasten, después se desgastan, cuando ya sea la hora,
01:51:56ya tengan el certificado, desgasten todo lo que quieran, si quieran aprender una tecnología nueva,
01:52:02yo les paso toda la información para que aprendan la tecnología nueva, pero muchachos,
01:52:06saquen el certificado con lo que hay en este momento, ¿listo? ¿Vale? ¿Dudas? ¿Preguntas?
01:52:14¿Inquietudes? Claro, para todos, cuando me, los archivos, cuando se me pasan, se me pasa la
01:52:21formación de cierta, cierto tiempo me toca dividir los archivos, porque no me deja subirlo de esa
01:52:27manera, si han visto que me ha tocado dividir los últimos archivos, porque la clase siempre ha pasado
01:52:32de dos horas. Vale muchachos, entonces, léanse ese libro que les acabo de enviar, revisense el
01:52:40vídeo de nuevo, y nada, nos vemos el martes con toda la actitud, ya yo voy a, vamos a empezar a
01:52:48hacer el front, para poder modificar esa base de datos con el back, ¿vale? ¿Listo muchachos?
01:52:58¿Dudas? ¿Preguntas? ¿Inquietudes? ¿Claro para todos? Gracias, sí, hasta el momento.
01:53:06Bueno, no se lo olviden muchachos, hacer ese fin de semana, si tienen un tiempito,
01:53:12sáquenle el tiempito y practiquen un poco, ¿vale? No siendo más, feliz noche para todos.