1 00:00:12,480 --> 00:00:17,000 Vamos a revisar a continuación en laboratorio caso de estudio proyectos SST 2 00:00:19,660 --> 00:00:26,660 el objetivo se solicita analizar el Proyecto Laboratorio CCS el cual contiene la siguiente salida y 3 00:00:26,680 --> 00:00:32,620 el objetivo es entender cómo se crearon los tabuladores y analizar los estilos que se aplicaron en este 4 00:00:32,620 --> 00:00:36,070 proyecto web con ayuda de los estilos CSS 5 00:00:39,580 --> 00:00:45,530 como primer paso vamos a crear nuestro proyecto en nombre del proyecto se llama laboratorios CCS 1 lo 6 00:00:45,550 --> 00:00:48,970 depositamos en la ruta mostrada y damos clic en Finalizar 7 00:00:52,470 --> 00:00:59,730 posteriormente vamos a crear algunos archivos en este caso un archivo llamado contenido 1 punto HTML 8 00:01:00,300 --> 00:01:08,360 así que este es un archivo de tipo HTML el nombre del archivo entonces se llama contenido 1 lo depositamos 9 00:01:08,510 --> 00:01:14,840 en un folder esto para que estos archivos no estén directamente al nivel raíz de nuestro proyecto así 10 00:01:14,840 --> 00:01:19,770 que vamos a empezar a organizar de mejor manera nuestras páginas HTML. 11 00:01:19,820 --> 00:01:26,360 Para ello vamos a depositar esta página dentro del folder páginas y damos clic en Finalizar y podemos 12 00:01:26,360 --> 00:01:30,590 observar que la ruta de este archivo entonces quedaría dentro del nivel raíz. 13 00:01:30,740 --> 00:01:36,530 Posteriormente dentro de un folder llamado páginas y posteriormente directamente a la página contenido 14 00:01:36,560 --> 00:01:43,910 1 punto HTML van a ser tres páginas en total y esas tres páginas se van a depositar dentro de este mismo 15 00:01:43,910 --> 00:01:45,290 folder llamado páginas 16 00:01:48,850 --> 00:01:51,610 creamos un segundo archivo llamado contenido 2. 17 00:01:51,610 --> 00:01:55,750 De igual manera lo depositamos en el folder páginas y damos clic en Finalizar 18 00:01:58,790 --> 00:02:05,600 y creamos un tercer archivo llamado contenido 3 puntos HTML cada archivo va a hacer referencia a un 19 00:02:05,600 --> 00:02:07,910 tabulador y son tres tabuladores. 20 00:02:07,970 --> 00:02:14,120 Por ello es que estamos agregando tres archivos en este caso al archivo se llama contenido 3 lo depositamos 21 00:02:14,120 --> 00:02:17,720 también dentro del folder páginas y damos clic en Finalizar 22 00:02:23,110 --> 00:02:29,680 y finalmente vamos a crear un archivo llamado estilos puntos CSS el nombre del archivo se llama estilos 23 00:02:29,770 --> 00:02:36,310 y lo depositamos dentro de un folder llamado CSS así que ya no va a estar al nivel raíz sino que también 24 00:02:36,310 --> 00:02:43,120 ya vamos a empezar a separar nuestras hojas de estilo de nuestro código HTML y posteriormente también 25 00:02:43,120 --> 00:02:46,690 veremos cómo separar nuestro código JavaScript. 26 00:02:46,690 --> 00:02:53,740 Sin embargo hasta este momento hemos estudiado únicamente páginas HTML y contenido CSS así que podemos 27 00:02:53,740 --> 00:03:00,040 observar que dentro de nuestra carpeta de públic HTML se está creando un folder llamado CSS y dentro 28 00:03:00,040 --> 00:03:06,010 de ese folder es que se deposita el archivo estilos puntos CSS y damos clic en Finalizar 29 00:03:08,570 --> 00:03:12,080 posteriormente vamos a modificar nuestro archivo índex punto HTML 30 00:03:14,680 --> 00:03:15,970 agregamos el Doctrine. 31 00:03:16,090 --> 00:03:25,150 Posteriormente las etiquetas HTML Get y el meta de charged VF 8 y en este archivo vamos a agregar una 32 00:03:25,150 --> 00:03:28,310 referencia a nuestro archivo estilo CSS. 33 00:03:28,390 --> 00:03:33,880 Sin embargo podemos observar que ya no se encuentra directamente a nivel raíz sino que debemos especificar 34 00:03:34,060 --> 00:03:37,600 el folder donde se encuentra este archivo diagonal. 35 00:03:37,630 --> 00:03:47,080 El nombre del archivo estilos puntos CSS y con esto ya podemos hacer referencia a este documento ya 36 00:03:47,080 --> 00:03:55,470 que este archivo índex punto HTML se encuentra a nivel raíz de nuestro proyecto HTML agregamos un título 37 00:03:55,470 --> 00:03:59,940 llamado Laboratorio CSS y cerramos nuestro cabecero. 38 00:03:59,940 --> 00:04:05,970 Posteriormente agregamos nuestra etiqueta de Bodhi también un título de tipo H1 llamado Laboratorio 39 00:04:05,970 --> 00:04:14,680 CSS y vamos a agregar una referencia a la página 1 en este caso a la página contenido 1.La HTML. 40 00:04:14,680 --> 00:04:19,990 Para ello hacemos uso de la etiqueta de hipervínculo llamado a posteriormente por medio del atributo 41 00:04:20,070 --> 00:04:28,290 HR-V indicamos la página donde se encuentra nuestro documento HTML y recordemos que esta página la hemos 42 00:04:28,290 --> 00:04:30,720 agregado dentro del folder llamado páginas. 43 00:04:30,720 --> 00:04:37,860 Posteriormente diagonal indicamos el nombre del archivo contenido 1 punto HTML y el texto que va a visualizar 44 00:04:37,890 --> 00:04:40,540 el usuario es página de contenido. 45 00:04:40,740 --> 00:04:45,990 Así que cuando dé clic a ese nombre de la página de contenido nos va a llevar al archivo de contenido 46 00:04:46,050 --> 00:04:47,760 1 punto HTML. 47 00:04:47,760 --> 00:04:52,610 Cerramos el cuerpo del documento HTML y cerramos la etiqueta HTML. 48 00:04:52,680 --> 00:04:56,610 Esto es todo lo que va a tener nuestra página de índex punto HTML 49 00:04:59,190 --> 00:05:06,480 posteriormente vamos a agregar el contenido a nuestro documento contenido 1.La HTML y agregamos el siguiente 50 00:05:06,480 --> 00:05:14,080 código según se muestra la etiqueta de Doctrine el elemento HTML y agregamos el cabecero. 51 00:05:14,460 --> 00:05:22,290 El meta de hecharse F8 y vamos a agregar un link a nuestro estilo CSS debido a que ahora vamos a centralizar 52 00:05:22,290 --> 00:05:25,310 los estilos que vamos a aplicar en estas páginas. 53 00:05:25,380 --> 00:05:31,140 Entonces todos los estilos van a estar definidos dentro del archivo estilos puntos CSS. 54 00:05:31,140 --> 00:05:37,110 Sin embargo recordemos que este archivo contenido 1.La HTML se encuentra dentro de una carpeta por lo 55 00:05:37,110 --> 00:05:43,260 tanto debemos de subir un nivel para que lleguemos al nivel raíz de nuestro proyecto web y posteriormente 56 00:05:43,320 --> 00:05:50,580 entramos a la carpeta CSS y así es como ya podemos encontrar la ruta correcta del archivo estilos puntos 57 00:05:50,580 --> 00:05:51,720 CSS. 58 00:05:51,720 --> 00:05:57,240 Recordemos que esto ya lo hemos visto cuando trabajamos las rutas relativas y absolutas cuando hacemos 59 00:05:57,240 --> 00:06:03,570 referencia a nuestros documentos HTML y en este caso aplica de manera similar cuando estamos trabajando 60 00:06:03,570 --> 00:06:07,910 con archivos de tipo CSS o incluso archivos de tipo JavaScript. 61 00:06:07,980 --> 00:06:13,500 Así que con esta notación encontramos de manera adecuada el archivo estilo CSS. 62 00:06:13,500 --> 00:06:19,140 Posteriormente agregamos un título contenido 1 y cerramos el cabecero agregamos el body de nuestro documento 63 00:06:19,140 --> 00:06:24,430 HTML y un título el título sitio web con tabuladores. 64 00:06:24,580 --> 00:06:32,360 Para ello utilizamos las etiquetas H1 y posteriormente vamos a agregar algunos tips para manejar cada 65 00:06:32,360 --> 00:06:34,040 uno de los tabuladores. 66 00:06:34,040 --> 00:06:40,700 Vamos a agregar tres tips este primer tip va a ser el tabulador que hace referencia al tabulador que 67 00:06:40,700 --> 00:06:46,230 tiene el contenido 1 por lo tanto en este Dir. vamos a aplicar dos estilos. 68 00:06:46,280 --> 00:06:51,430 En este caso se van a aplicar los estilos definidos por una clase llamada Tab. 69 00:06:51,440 --> 00:06:59,000 Esta clase recordemos que se va a agregar dentro del archivo estilos CSS por medio de la notación punto 70 00:06:59,120 --> 00:07:05,660 Tab y esto es lo que se va a agregar en este archivo y se van a agregar algunos estilos a esta clase 71 00:07:05,870 --> 00:07:10,340 y todos estos estilos que se definan se van a aplicar directamente a este. 72 00:07:10,700 --> 00:07:17,240 Pero también vamos a agregar ahora algo nuevo que no hemos aplicado pero es un identificador recordamos 73 00:07:17,240 --> 00:07:23,120 que para definir una clase se va a utilizar el punto pero para definir un Heydi vamos a utilizar el 74 00:07:23,120 --> 00:07:24,270 símbolo de número. 75 00:07:24,440 --> 00:07:30,320 Así que se va a definir una clase pero por medio de esta notación para definirlo de manera única y aunque 76 00:07:30,320 --> 00:07:37,010 se puede aplicar a varios elementos dentro de nuestro documento HTML la idea es que cuando definimos 77 00:07:37,010 --> 00:07:43,460 un estilo de tipo único precisamente únicamente lo utilicemos en este caso en un tabulador. 78 00:07:43,460 --> 00:07:49,280 Este ejercicio se trata precisamente de que tenemos tres tabuladores en nuestra página HTML y donde 79 00:07:49,280 --> 00:07:53,300 demos clic se va a aplicar un estilo como si estuviera activo. 80 00:07:53,300 --> 00:08:00,530 Este tabulador por lo tanto únicamente va a estar activo un tabulador a la vez y en este caso debido 81 00:08:00,560 --> 00:08:08,780 a que estamos dentro del contenido 1 esta página va a aplicar el estilo actual al tabulador 1 y los 82 00:08:08,780 --> 00:08:15,620 siguientes tabuladores van a estar apagados pero en la siguiente página HTML llamada contenido 2 el 83 00:08:15,620 --> 00:08:19,400 tabulador que va a estar activo va a ser el segundo tabulador. 84 00:08:19,490 --> 00:08:26,090 Por lo tanto este estilo de identificador único se va a aplicar al segundo tabulador y ya no al primero 85 00:08:26,390 --> 00:08:31,840 ni tampoco al tercero así que esto lo vamos a ir viendo poco a poco. 86 00:08:31,930 --> 00:08:37,120 Sin embargo así es como vamos a empezar a trabajar tanto las clases como los estilos definidos de manera 87 00:08:37,180 --> 00:08:37,870 única. 88 00:08:37,870 --> 00:08:44,350 Todo esto con ayuda de nuestro archivo estilos puntos CSS y posteriormente agregamos un segundo Dip 89 00:08:44,890 --> 00:08:53,650 más interno y posteriormente un link en este caso un hipervínculo al documento contenido 1 punto HTML. 90 00:08:53,650 --> 00:09:00,600 Es decir un link hacia este mismo documento ya que es el tabulador actual posteriormente cerramos nuestro 91 00:09:00,780 --> 00:09:03,840 más interno y cerramos el más interno. 92 00:09:03,900 --> 00:09:09,510 Estamos trabajando de esta manera el elemento de tabulador debido a que vamos a aplicar un estilo de 93 00:09:09,510 --> 00:09:16,260 la siguiente manera vamos a tener un DIV que como hemos comentado es una sección HTML dentro de nuestro 94 00:09:16,260 --> 00:09:25,830 documento posteriormente tenemos otro DIV y posteriormente tenemos un link y lo que vamos a hacer es 95 00:09:25,830 --> 00:09:31,450 que al Dib más externo le vamos a asignar una imagen para que dibuje este tabulador. 96 00:09:31,560 --> 00:09:37,650 La imagen que le vamos a asignar es una imagen redondeada la cual va a asignar la imagen de la parte 97 00:09:37,650 --> 00:09:43,560 izquierda de este tabulador es decir que a este DIV va a asignar la imagen de la parte izquierda. 98 00:09:43,560 --> 00:09:51,410 Posteriormente este Dib más interno le vamos a asociar una imagen que va a completar el tabulador pero 99 00:09:51,440 --> 00:09:57,540 de la parte derecha y finalmente dentro del link lo que vamos a hacer es asignarle el resto de la imagen 100 00:10:00,820 --> 00:10:04,560 es decir que los estilos los vamos a ir aplicando poco a poco. 101 00:10:04,570 --> 00:10:10,210 Por ello es que vamos a combinar esta técnica para ir combinando las imágenes a cada uno de los elementos 102 00:10:10,270 --> 00:10:11,470 HTML. 103 00:10:11,470 --> 00:10:16,390 Esto lo vamos a ir viendo poco a poco conforme armemos nuestro proyecto pero básicamente esta es la 104 00:10:16,390 --> 00:10:21,790 razón por la cual estamos utilizando tres elementos a cada elemento le vamos a asignar un pedazo de 105 00:10:21,790 --> 00:10:26,850 una imagen para que se forme la imagen del tabulador y tenga esquinas redondeadas 106 00:10:32,420 --> 00:10:38,830 y básicamente aunque va a aparecer una sola imagen en sí van a ser tres imágenes una imagen izquierda 107 00:10:39,070 --> 00:10:40,590 con las esquinas redondeadas izquierda. 108 00:10:40,600 --> 00:10:47,410 Posteriormente una imagen con la esquina redondeada derecha y una imagen central la cual se puede extender 109 00:10:47,410 --> 00:10:53,080 todo lo necesario a la izquierda o a la derecha según se necesite hacia el tamaño de la imagen central 110 00:10:53,080 --> 00:10:58,050 del tabulador puede ocupar un tamaño mayor o menor según se necesite. 111 00:10:58,120 --> 00:11:04,090 Por ello este es un ejercicio de laboratorio no es necesario que entendamos a detalle todos los elementos. 112 00:11:04,090 --> 00:11:10,120 Sin embargo sí es importante que empecemos a darnos cuenta cómo es que se aplican estos elementos CSS 113 00:11:10,330 --> 00:11:13,340 y se combinan con nuestros elementos HTML. 114 00:11:13,360 --> 00:11:19,770 Posteriormente agregamos nuestro segundo tabulador en el documento HTML y podemos observar que aquí 115 00:11:19,770 --> 00:11:25,810 ya no vamos a aplicar el estilo de Airy actual ya que debido a que estamos en la página de contenido 116 00:11:25,840 --> 00:11:31,570 uno únicamente el primer tabulador va a ser el tabulador actual y los siguientes tabuladores que va 117 00:11:31,570 --> 00:11:37,150 a ser el tabulador dos y tres no se van a considerar como elementos actuales y únicamente se van a aplicar 118 00:11:37,150 --> 00:11:45,070 los estilos de la clase tab que se defina en el archivo estilos puntos CSS de igual manera para ir aplicando 119 00:11:45,070 --> 00:11:50,980 la técnica de las imágenes la imagen de la esquina izquierda redondeada esquinera de derecha redondeada 120 00:11:51,240 --> 00:11:52,510 y la imagen central. 121 00:11:52,510 --> 00:11:58,690 Entonces también vamos a manejar estos tres elementos un nivel externo un divi interno y un elemento 122 00:11:58,690 --> 00:12:05,530 interno que es un hipervínculo en este caso este hipervínculo va a hacer referencia al documento contenido 123 00:12:05,620 --> 00:12:12,940 2.El HTML y debido a que este archivo contenido 2.La HTML se encuentra dentro de la misma carpeta donde 124 00:12:12,940 --> 00:12:15,720 está el archivo contenido 1.No HTML. 125 00:12:15,790 --> 00:12:22,480 Podemos hacer referencia directamente al archivo contenido 2 punto HTML sin necesidad de subir o bajar 126 00:12:22,510 --> 00:12:30,640 en carpetas únicamente poniendo directamente el nombre del archivo y cerramos nuestros dips y hacemos 127 00:12:30,640 --> 00:12:37,810 lo mismo para el tercer tabulador en este caso este tercer tabulador va a hacer referencia al link de 128 00:12:37,810 --> 00:12:45,870 contenido 3.La HTML damos un salto de línea abrimos un párrafo y en este caso únicamente agregamos un 129 00:12:45,870 --> 00:12:52,760 contenido simple para que sepamos que estamos dentro del contenido de la página 1 hacemos un salto de 130 00:12:52,760 --> 00:12:56,270 línea y agregamos un link para la página de inicio. 131 00:12:56,360 --> 00:13:01,880 Recordemos que debido a que estamos dentro de una carpeta necesitamos subir un nivel para que lleguemos 132 00:13:01,880 --> 00:13:03,530 al nivel raíz del proyecto. 133 00:13:03,530 --> 00:13:10,160 Por ello es que utilizamos dos puntos posteriormente diagonal índex punto HTML y con esto podemos regresar 134 00:13:10,310 --> 00:13:15,020 y encontrar correctamente el archivo de índex punto HTML. 135 00:13:15,140 --> 00:13:20,810 Cerramos el cuerpo de nuestro documento y cerramos nuestro código HTML para cualquier duda recuerden 136 00:13:20,810 --> 00:13:22,980 que pueden dar clic en el nombre del archivo. 137 00:13:23,120 --> 00:13:28,550 Vamos a detener hasta aquí este video y en la siguiente idea vamos a continuar codificando los demás 138 00:13:28,550 --> 00:13:29,200 archivos.