Desarrollo Web 1 - Aprende Programando

Desarrollo Web
Nivel 1
PROYECTO Al finalizar el curso serás capaz de:
➢ Manejo y representación de la información , analizando
Ingresamos a la web in fi nitas veces por día . Es las diferentes fuentes a las que recurran , de acuerdo
nuestra gran guía de información , donde encontramos con el contexto en el que son planteadas y a su
respuesta a todo. Allí aprendemos, nos divertimos y nos utilidad para la creación del producto.
reencontramos , recorriendo los diferentes sitios . La ➢ Comunicación y colaboración entre pares definiendo ,
adquisición de herramientas de desarrollo web de manera colaborativa , a partir del consenso grupal
incrementa las oportunidades en nuestro de las ideas producidas individualmente.
futuro laboral. ➢ Pensamiento crítico, elaborando una posición
fundamentada acerca de la idea del producto a crear.
Durante todo el trayecto se desarrollarán actividades de ➢ Participación responsable y solidaria a lo largo de las
exploración , de aprendizaje sistemático , de distintas instancias del proyecto , incentivando la
estructuración e integración: investigación, discusiones, convivencia y el respeto en el ciberespacio y la
producciones grupales , análisis , reflexión y evaluación necesidad del trabajo colaborativo en todas las
centradas en los intereses de los/as estudiantes . Estas etapas del proyecto.
actividades brindarán herramientas para el desarrollo de ➢ Creatividad e innovación en la producción tanto en
una página web propia forma grupal e individual valiéndose de recursos
tecnológicos.
Desarrollo Web I
Clase 1: ¿Qué es una web?
¿Qué es una web?
A simple vista, pareciera ser que todos/as podemos responder esta pregunta… Una
página web es una especie de página virtual a la cual podemos acceder desde algún
navegador como Chrome, Firefox, Brave, Safari, Opera, etc. Y contiene información de
distinto tipo.
Sabemos que hay páginas para jugar jueguitos, páginas para hacer compras y ventas,
páginas informativas, páginas de cocina, páginas artísticas, de expresión, etc.
Hay miles de millones de páginas dando vueltas por internet.
Si bien sabemos lo que es, nos podemos preguntar dos cosas más:
¿Cómo funcionan? ¿Cómo se ven?

¿Cómo funciona el sitio web?
Una página web no es más que un texto. Si abrimos cualquier navegador y hacemos click
derecho en alguna parte de la web, y luego seleccionamos “Inspeccionar” o “Inspector de
elementos”, vamos a ver de qué están armadas las webs, y vamos a ver que es texto.
Ese texto no es cualquier texto, son distintos lenguajes que los navegadores saben leer,
interpretar y convertir en lo que nosotros vemos.
¿Cómo funcionan las web?
Un sitio web es una colección de páginas conectadas entre sí que se encuentran en un
servidor y son accesibles a través de internet. Cuando ingresas la dirección de un sitio web en
tu navegador y presionas Enter, el navegador envía una solicitud al servidor donde se
encuentra el sitio web.
El servidor procesa la solicitud y envía de vuelta al navegador las páginas web solicitadas.
Estas páginas están escritas en lenguajes de marcado, como HTML, que define la estructura
y el contenido de la página, y CSS, que se encarga del diseño y la apariencia visual.
¿Cómo funcionan las web?
Una vez que el navegador recibe las páginas, las interpreta y las muestra en la ventana del
navegador. Esto incluye la disposición de los elementos en la página, las imágenes, los enlaces,
los estilos y otros elementos interactivos.
Los sitios web pueden contener diferentes tipos de contenido, como texto, imágenes, videos,
formularios, botones, etc. Además, pueden incluir funcionalidades interactivas y dinámicas
utilizando lenguajes de programación como JavaScript.
Códigos
HTML y CSS son los códigos que conoceremos para crear una maqueta de página web.
HTML (Lenguaje de Marcado de Hipertexto) es un lenguaje que nos va a permitir estructurar
nuestro sitio, darle forma, acomodar elementos en donde nosotros queramos.
CSS (Cascading Style Sheets) es un lenguaje que nos va a permitir darle estilo al sitio web
como por ejemplo color, tamaños a los elementos, márgenes, bordes, sombras y muchas otras
características visuales más.
Códigos
También existe un tercer lenguaje que se llama JavaScript. Este lenguaje es un lenguaje de
programación que tiene gran uso, dado que sirve para darle lógica a nuestro sitio, dinamismo
y hacer sitios complejos como lo puede ser Steam, MercadoLibre, o cualquier juego o página
web que conozcan.
Editores de código
Como habrán podido ver cuando veían el “código fuente de una página”, existen miles y miles
de líneas de código que no solo no entendemos, sino que además nos sería muy difícil de
escribir a mano.
Para esto se crearon unos programas que se llaman IDE (Integrated Development
Environment) que es un programa que nos ayuda a escribir código en distintos lenguajes.
Este programa nos va a dar ayudas para escribir código de forma mucho más rápida y de
forma ordenada, dándonos algunos tips para no perdernos en el camino.
Archivos
Sabemos que las páginas webs son texto y que los navegadores saben leer e interpretar este
texto para convertirlo en las cosas que vemos. Además que existen programas para escribir
estos textos.
Estos textos se guardan en archivos pero con una extensión especial para que puedan ser
abiertos por navegadores. Por ejemplo, un archivo de imágen se abre con una galería de
imágenes. Un archivo mp3 se abre con un reproductor de música, un archivo PDF se puede
abrir con Adobe Reader o lectores de PDF. Y así sucesivamente con diferentes tipos de
archivos.
Las extensiones, son simplemente entonces lo que identifica el formato del archivo. Acá
algunos ejemplos.
Formato Extensión
PDF .pdf
GIF .gif
Word .docx
Bloc de Notas .txt
Imagen con transparencia .png
Imagen sin transparencia .jpg, .jpeg
En este curso crearemos archivos .html y .css

El diseño web
Además de la dimensión técnica del desarrollo web, existe el mundo del diseño. Cuando
nosotros desarrollemos nuestra web, el código tiene que responder a un diseño planteado
previamente.
Primero diseñar la web y luego desarrollarla. De esta manera vamos a tener bien claro hacia
donde ir al construir nuestro sitio web que debe responder a una necesidad clara.
Desarrollo Web I
Clase 1: Estructura básica
HTML
Editores de código
Como habrán podido ver cuando veían el “código fuente de una página”, existen miles y miles
de líneas de código que no solo no entendemos, sino que además nos sería muy difícil de
escribir a mano.
Para esto se crearon unos programas que se llaman IDE (Integrated Development
Environment) que es un programa que nos ayuda a escribir código en distintos lenguajes.
Este programa nos va a dar ayudas para escribir código de forma mucho más rápida y de
forma ordenada, dándonos algunos tips para no perdernos en el camino.
Editores de código
Hoy en día existen muchos IDEs y entre los más populares se encuentran:
- Visual Studio Code
- Sublime
- Atom
Los tres editores mencionados son muy buenos y su elección depende de tu comodidad. En
este curso utilizaremos Visual Studio Code. Para poder descargarlo podes hacer clic en el
siguiente enlace y siguiendo estos pasos.
>> Link de descarga de VS Code <<

Extensiones
Una vez descargado e instalado VS Code en tu computadora, el siguiente paso es incorporar
extensiones.
Las extensiones de Visual Studio Code son complementos o paquetes de software que se
pueden agregar a este editor de código para extender su funcionalidad y adaptarlo a las
necesidades específicas de los desarrolladores.
son una forma poderosa de adaptar y personalizar el editor según las necesidades y
preferencias de cada desarrollador, lo que contribuye a mejorar la productividad y la
experiencia de programación.
Extensiones
Las extensiones que sumaremos a VS Code son:
Mithril Emmet Live Server. Spanish Language Pack

Sirve para escribir de
Sirve para ver los Sirve para cambiar el
manera eficiente y rápida
cambios que realizamos idioma de VS Code a
mediante la utilización
en el editor en el español.
de abreviaturas y atajos.
momento.
Extensiones Spanish Language
Proporciona soporte y funcionalidades específicas para trabajar con archivos de código en
el idioma español. Esta extensión incluye traducciones y ajustes en la interfaz de usuario
de Visual Studio Code, así como resaltado de sintaxis y autocompletado para el código en
español.
Al instalar la extensión "Spanish Language", puedes configurar Visual Studio Code para
que muestre los mensajes de la interfaz en español
Veamos su instalación.
1) Abrir VS Code y dirigirte a la parte
izquierda del programa, al ícono de
extensiones.
2) Al hacerle un clic te abrirá un buscado en

donde deberás escribir el nombre de la
extensión.
3) Debes seleccionar el primero que

aparezca en el resultado de la búsqueda.
4) Al seleccionarlo, abrirá una pestaña dentro de VS Code son los detalles de la extensión.
Selecciona “Install”
5) En la parte inferior derecha de VS Code aparecerá una notificación que pregunta si
querés cambiar el idioma y reiniciar el programa. Hacele clic al botón azul.
¡Listo!
Ahora VS Code lo tendrás en español.
Emmet
Emmet es una tecnología que permite generar rápidamente código HTML y CSS utilizando
abreviaciones y atajos de escritura. En Visual Studio Code, Emmet viene preinstalado
como una característica integrada, pero algunas extensiones, como Mithril Emmet,
amplían su funcionalidad para adaptarse a un marco de trabajo o biblioteca específica, en
este caso, Mithril.
Extensión Emmet
Para instalar la extensión de Emmet en VS Code
deber seguir los siguientes pasos:
1) Abrir VS Code y dirigirte a la parte izquierda
del programa, al ícono de extensiones.
2) Al hacerle un clic te abrirá un buscado en

elcque deberás escribir “Emmet”.
3) Debes seleccionar el primero que aparezca

en el resultado de la búsqueda.
Extensión Emmet
4) Cuando le hagas un clic abrirá los detalles de la extensión en una pestaña de VS Code.
Seleccioná el botón de Install o Instalar.
¡Y listo!
Extensión Emmet
4) Cuando le hagas un clic abrirá los detalles de la extensión en una pestaña de VS Code.
Seleccioná el botón de Install o Instalar.
¡Y listo!
Extensión Live Server
Esta extensión permite crear un servidor local y actualizar automáticamente el navegador
web cada vez que guardas un archivo. Esto facilita mucho el proceso de desarrollo, ya que
puedes ver los cambios en tiempo real sin tener que actualizar manualmente la página.
1) Abrir VS Code y dirigirte a la
parte izquierda del programa, al
ícono de extensiones.
2) Al hacerle un clic se abrirá un

buscador en donde deberás
escribir “Live Server.
3) Debes seleccionar el primero

que aparezca en el resultado de
la búsqueda.
4) Se abrirá una pestaña con la descripción de la extensión. Seleccionar “instalar”.
¡Listo!
Cuando comiences a realizar cambios en tus proyectos podrás ver los cambios en
tiempo real.
¡VS CODE listo!
Ya tenemos preparado nuestro editor de texto para comenzar a escribir las primeras líneas
de texto.
Existen muchas otras extensiones interesantes que podes sumar al programa y que pueden
facilitar tu experiencia desarrollando código. Te invitamos a que investigues y personalices
VS Code como más te guste.
Desarrollo Web I
Clase 1: Estructura etiquetas
Estructura de los elementos HTML
Cada elemento HTML está encerrado entre etiquetas, y estas etiquetas definen la función y
apariencia del elemento.
En este caso, por ejemplo, tenemos el elemento <p> que define párrafos en nuestro archivo
HTML.
Pero existen otros elementos con la siguiente estructura:
En el ejemplo anterior vimos que el elemento solo tiene etiqueta de apertura
<img>
Y dentro de la misma tenemos los atributos
src=” “ que source o fuente, y entre comillas se coloca la ruta donde está alojada la imágen.
Y el atributo
alt=” “ en donde se coloca alguna palabra clave o detalle sobre la imágen que se está
colocando. Es información extra que se le brinca al navegador y siempre debe estar completa.
Incluso existen elementos que encierran otros elementos dentro.
Por ejemplo, elementos para crear listas.
En este caso, el elemento <ul> que significa lista desordenada, debe contener dentro otros
elementos llamados <li> o “list items”, que son los ítems de cada elemento.
Ahora que conocemos la estructura de un elemento HTML, ya podemos comenzar a escribir el
código de nuestro sitio web y ver los primeros cambios en nuestra página.
Desarrollo Web I
Clase 1: Primer archivo HTML
Primer archivo HTML
Como mencionamos antes, un sitio web está

formado por archivos de diferentes tipos y
todos estos archivos tienen una organización
específica. La organización se vé de la siguiente
manera:
Archivo index.html
El archivo index.html contiene el código HTML que define la estructura y contenido básico
de una página web. Al abrir un sitio web en un navegador, el navegador buscará
automáticamente el archivo index.html y lo cargará como la página inicial.
Index significa índice en inglés.
Por lo tanto, el primer archivo HTML que crearemos para el sitio web debe tener ese nombre y debe
estar ubicado en la carpeta principal pero suelto, separado de los demás archivos como vimos en el
gráfico anterior.
Vamos a crear el primer archivo HTML de nuestro sitio web. ¡Manos a la obra!
Paso a paso
El primer paso es crear una carpeta principal, la que va a albergar todos los archivos del sitio
web. Esta carpeta puede tener cualquier nombre.
En este ejemplo se llamará “Proyecto”.
Paso a paso
Abrimos la carpeta en VS Code.
Archivo > Abrir carpeta > seleccionado la carpeta que creamos antes > Seleccionar carpeta
Paso a paso
Una vez abierta la carpeta en VS Code, podrás crear archivos nuevos dentro de ella.
Debes posicionarte sobre la carpeta en el sector izquierdo de la pantalla, como vemos a
continuación, y seleccionar el ícono de “nuevo archivo”.
En el espacio habilitado podrás escribir el nombre del archivo “index.html” y se abrirá una
nueva pestaña dentro del IDE para comenzar a escribir los códigos html.
Paso a paso
Atención
● El nombre tiene que terminar en .html

● Ojo que el orden es H T M L (Muchas veces escribimos htlm o hlmt, y eso no es lo mismo)
● El nombre tiene que ir en minúscula.
● El nombre no puede contener espacios. (Si son más de una palabra podés usar guión)
● El nombre no puede contener caracteres especiales (tíldes, ñ, etc.)
Listo
Ya tenemos el archivo listo para comenzar a escribir las primeras líneas.
Estructura básica de un documento HTML
Como hemos mencionado anteriormente,un archivo HTML es un tipo de archivo de texto plano
que utiliza lenguaje de marcado para estructurar y presentar el contenido de una página web.
La sigla HTML significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto), y
es el lenguaje estándar utilizado para crear documentos web. Define la estructura y el
contenido de la página. Estas etiquetas delimitan secciones específicas del documento y
permiten determinar cómo se debe mostrar el contenido en un navegador web.
En otras palabras, es el esqueleto de nuestro sitio web.

HTML CSS JS
La estructura es la siguiente:
Escrito en HTML se vé se la siguiente manera:
Como verás, dentro del <head> va
la información importante para el
navegador, es decir, la información
sobre el documento, como el título
de la página, enlaces a archivos CSS
y metadatos. Conozcamos sus
líneas en detalle:
¿ Y cómo hago todo esto?

Atajos de VS Code
Para este tipo de tareas y primeros
pasos es que hemos instalado la
extensión Emmet en VS Code. Veamos
cómo escribir la estructura de este
primer documento HTML del sitio web.
Volvamos al inicio de nuestro archivo

HTML en VS Code.
Primeras líneas de código
En el documento index.html que vemos en vs code, escribiremos “html” y nos mostrará
automáticamente algunas opciones, de las cuales debemos seleccionar “html5” que es la
versión más actualizada de este lenguaje.
¡Felicitaciones!
Escribiste tus primeras líneas de código de tu nuevo sitio web.
Desarrollo Web I
Clase 1: Estructura básica
HTML
Repaso rápido
¿Qué aprendimos hasta ahora?
1) Preparamos VS Code con las extensiones necesarias.
2) Cómo se escriben los elementos en HTML, por ejemplo <p>contenido</p>
3) Creamos la carpeta que contendrá los archivos del sitio web
4) Creamos el primer archivo index.html desde VS Code y escribimos la estructura
básica que contiene el <head> y el <body>
Llegó el momento de incorporar los elementos visibles para el usuario.

¡Comencemos!
Repaso rápido
Nuestra carpeta se ve de la siguiente manera:
De momento, sólo contiene un archivo .html que se puede abrir con el navegador que
tengas predeterminado, en este caso Chrome.
Elementos
Los elementos visibles siempre se incorporan dentro del <body>.
<body>
elementos
</body>
Para ver los cambios en tiempo real abriremos el sitio web desde VS Code con la extensión
“Live Server” que instalamos anteriormente.
De la siguiente manera:
1) clic derecho sobre el código html
2) Seleccionar “Open with Live Server” (abrir con Live Server)
Se abrirá el sitio web en una pestaña de tu navegador.
Elementos
Colocando título al proyecto
No olvides colocar título en el documento, dentro del elemento <title>
Elementos
Recordemos la estructura:
<h1>Título</h1>
Escribiendo títulos en el archivo.
En HTML, los elementos <h1> al <h6> se utilizan para representar encabezados de diferentes
niveles de importancia en un documento. Estos elementos se utilizan para estructurar y
organizar el contenido de una página web.
El <h1> es el encabezado de mayor importancia, mientras que el <h6> es el de menor
importancia
Es importante utilizar los encabezados de forma adecuada y jerárquica para ayudar a los
usuarios y motores de búsqueda a comprender la estructura y el contenido de la página.
<h1>Título</h1>
Gracias a Emmet, con solo escribir “h” el predictivo nos agiliza la escritura. En este
ejemplo verás el resultado en la página web.
<p> Párrafo </p>
El elemento <p> se utiliza para representar un párrafo de texto. Es uno de los
elementos más comunes y básicos utilizados para estructurar y presentar contenido
textual en una página web.
Cuando no sabemos qué contenido redactado vamos a colocar en el sitio, estos
espacios son completados con “Lorem Ipsum” a modo de marcador de posición para
el contenido real. Es comúnmente conocido como "texto de relleno" o "texto
simulado".
Se utiliza para ocupar el espacio en un diseño antes de que se inserte el contenido
real.
Pero no te preocupes por aprenderlo, Emmet lo ofrece de manera automática con
solo tipear “lorem”, como en el siguiente ejemplo.
<p> Párrafo </p>
El primer párrafo está completado con un texto cualquiera, pero el segundo párrafo
está completado con un lorem.
Listas e ítems
<ul> <ol> <li>
El elemento <ul> (unordered list) en HTML se
utiliza para crear una lista desordenada, es
decir, una lista en la que el orden de los
elementos no es relevante.
El elemento <ol> (ordered list) en HTML se
utiliza para crear una lista ordenada, es decir,
una lista en la que el orden de los elementos
es relevante.
En ambos tipos de listas, deben contener uno
o varios elementos <li> (list item), que
representan los elementos individuales de la
lista.
Listas
Lista ordenada: enumera los ítems.
Listas
Lista desordenada: presenta los ítems por puntos. Este elemento es el más utilizado.
<a>Links</a>
El elemento <a> (anchor o ancla) en HTML se utiliza para crear un enlace o
hipervínculo a otra página web, archivo o ubicación dentro de la misma página.
Permite a los usuarios hacer clic en el texto o la imagen dentro de la etiqueta <a>
para navegar a la URL especificada en el atributo "href”. La estructura es la siguiente:
<a>Links</a>
<a>Links</a>
Extra:
● Cuando aún no hay un link definido, puede colocarse un numeral # a modo de
reemplazo momentáneo, como en el ejemplo anterior. Será un link que sólo irá
hacia el inicio de la página.
● Para no perder la página que se está visitando, los links pueden abrirse en
pestañas o ventanas a parte. Para eso, se le agrega el atributo “target” con el
valor _blank, como se muestra a continuación:
<a href="#" target="_blank">Esto es un link</a>

Imágenes
El elemento <img> en HTML se utiliza para insertar una imagen en una página web.
Aquí la estructura el elemento:
src (source o fuente) se completa con la dirección de imágen ruta de su ubicación,

que puede ser la URL completa de la imagen (un link de internet) o la ruta relativa al
archivo HTML.
Si se utiliza una ruta relativa del archivo, debemos crear una carpeta de imágenes y
guardar todas las imágenes a utilizar en el sitio allí.
Imágenes
Importante:
● El nombre del archivo debe ser corto y sin
caracteres atípicos (como la letra ñ) o
acentos.
● Tener presente el tipo de archivo (.jpg, .png,
etc).
● El “alt” debe siempre estar completo. Esto
ayuda a los motores de búsqueda a verificar
que el código esté completo y detallado.
● Mantener las imágenes organizadas en la
carpeta correspondiente, como en el
siguiente ejemplo.
Imágenes
¡Bravo!
Ya aprendiste a crear tu primer documento
index.html y ahora podrás ingresar en él todos estos
elementos que vimos y que formarán parte de tu sitio
web.
Aún no se ven como lo esperado, ¡pero paciencia!
estamos en proceso de construcción del esqueleto.
Pronto podremos estilar estos elementos para que
se vean mejor utilizando CSS.
Desarrollo Web I
Clase 1: ¿Qué es una web?
El diseño web
Además de la dimensión técnica del desarrollo web, existe el mundo del diseño. Cuando
nosotros desarrollemos nuestra web, el código tiene que responder a un diseño planteado
previamente.
Primero diseñar la web y luego desarrollarla. De esta manera vamos a tener bien claro hacia
donde ir al construir nuestro sitio web que debe responder a una necesidad clara.
Wireframe
El objetivo principal de un wireframe es definir la
estructura y el diseño de la página, así como la
disposición de los elementos y la interacción general.
Se utiliza para planificar la distribución del
contenido, la navegación y las funcionalidades del
sitio web antes de pasar a etapas más avanzadas de
diseño visual y desarrollo.
Al crear un wireframe, los diseñadores web y los
clientes pueden colaborar para visualizar la
estructura y la organización del contenido
permitiendo realizar cambios rápidos y explorar
diferentes enfoques de diseño antes de
comprometerse con un diseño final.
Wireframe
Los wireframes generalmente se crean utilizando herramientas especializadas de diseño o
simplemente con papel y lápiz. Uno de los más utilizados y populares hoy en día es Figma.
Para conocer un poco más sobre su uso, te invitamos a

visitar su página oficial haciendo clic en el siguiente enlace.
clic acá
Este sitio es una propuesta para que conozcas otra alternativa

de diseño, pero su uso para este curso no es obligatorio.
Wireframe
Pero los wireframes también se pueden hacer a mano, a lápiz y papel o hasta utilizando el
programa más sencillo, como paint. Pero, ¿por dónde empezar?
Preguntas disparadoras
Algunas ideas pueden surgir respondiendo a algunas preguntas sin importar la respuesta.
Te dejamos algunas preguntas que esperamos puedan servirte de guía para desembocar en
alguna temática y diseño que te interese.
No te olvides que el objetivo principal del curso es realizar un sitio web e-commerce.
● ¿Hay alguna problemática de la vida cotidiana que te llame la atención?

● ¿Sabés a qué o quiénes afecta esta problemática?
● ¿Conocés las consecuencias de esa problemática que te interesa?
● ¿Esta problemática tiene alguna solución que conozcas? Puede ser digital o no.
● Esa solución, ¿existe de forma digital, como en una página web?
Respuestas de ejemplo
Tengo una mascota que se suele enfermar por la noche y no sé a qué veterinaria llamar o
acudir.
● ¿Sabés qué o quiénes afecta esta problemática?
Me afecta a mi y a mis amigas y familiares que también tienen mascotas.
Las mascotas corren peligro por su salud si no se las atiende con urgencia.
Si, existen veterinarias 24hs y teléfonos disponibles aunque no sé donde están.
No, no existe un sitio web oficial con esa información.
Respuestas
¡Se puede crear un sitio web que ofrezca servicios
veterinarios 24 horas!
Puede ser también un sitio web que contenga todos los
servicios que ofrecen diferentes veterinarias y que te
permita contratar la que quieras.
También puede funcionar para un equipo de veterinarios
que ofrecen sus servicios a través del sitio web.
Podría funcionar para una veterinaria en particular que
quiera ofrecer servicios y precise una página web para eso.
Más ejemplos
Necesito cosas de ferretería para arreglar mi casa pero no sé cómo se llaman, ni sus medidas.
● ¿Sabés qué o quiénes afecta esta problemática?
Me afecta a mi y a mi familia con la que convivo. Quizás a más personas también.
Se demoran los arreglos de mi casa o termino comprando lo más caro por desconocimiento.
Si. Buscar información en internet aunque esté poco clara o consultar con un profesional.
No, no existe un sitio web oficial con esos productos o servicios que necesito.
Otras respuestas
¡Se puede crear un sitio web que ofrezca materiales de
construcción con mucha información!
Puede ser también un sitio web que contenga todos los
servicios o asesoría por parte de un profesional.
También puede funcionar para un local que desea vender
por medio de una página personalizada.
Podría funcionar para una persona que se dedique a hacer
arreglos de plomería, electricidad, etc y que quiera ofrecer
servicios y precise una página web para eso.
Investigación
Cómo ves, el responder algunas preguntas puede derivar en una serie de respuestas cada vez
más amplia hasta llegar al objetivo de proyecto, idea o solución de tu interés, siempre y
cuando tengas en cuenta que se debe concluir a un sitio web e-commerce en el que se puede
“vender” algo, objetos o servicios.
El siguiente paso es recolectar una lista de sitios web que trabajen la misma temática que la
que proponés.
Siguiendo el ejemplo anterior, un sitio web que ofrece elementos de ferretería o arreglos de la
casa.
Investigación
Páginas web de la misma temática (siguiendo el ejemplo anterior):
Materiales Nuciari
IOMAQ
Todo Ferretería
Su ferretería
Easy
Inspiración y mejoría
Ahora bien. Una vez seleccionadas las páginas de interés, hay que revisarlas con mucha
atención para detectar todo aquello que guste y lo que no guste.
Algunos puntos a prestar atención:
● La paleta de color: si es agradable, acorde, oscura o clara, amigable con la vista, etc.
● La tipografía: si es legible o es una letra poco clara.
● El contenido escrito: si está bien redactado, si es mucho o poco texto, si las palabras
técnicas están bien utilizadas, etc.
● Imágenes: si tienen todas el mismo estilo, si tienen diferentes tamaños, si tienen buena
calidad, si son originales o sacadas de internet, etc.
● Navegación: cuesta encontrar el carrito de compras, falta organización en los productos
por categorías, la parte de “contactos” no tiene el teléfono, etc.
Esto va, aquello no
Una vez que analizamos los sitios que consideramos de inspiración, mejoría o competencia,
podremos tomar los elementos que nos sirvan y utilizarlos en nuestros bocetos o wireframes
hechos a mano.
Te dejamos algunos ejemplos.
Esto va, aquello no
¡Manos a la obra!
¡A dibujar los wireframes!
Resultado
Este boceto te servirá de guía para que puedas continuar con la programación del sitio web. El
o los wireframes pueden modificarse a lo largo del camino así que no te preocupes si cambias
de idea.
Las decisiones de diseño pueden ir cambiando a lo largo del camino hasta llegar al producto
final. Lo importante es no perder el objetivo.
Presentar un proyecto final de un maquetado web e-commerce que tenga la

función de solventar el problema de la vida cotidiana de tu interés.
Desarrollo Web I
Clase 2: HTML semántico
HTML semántico
Las etiquetas HTML le dicen al navegador cuál es la función que cumplen:
- Un h1, le dice que su función es ser un título principal
- Un h2, le dice que su función es ser un título secundario
- Un ul, le dice que su función es ser una lista
Trabajar con HTML semántico significa poder estructurar todo nuestro sitio, marcando de
manera clara cuál es la función de cada estructura que creamos.
HTML semántico
Podemos pensar la web como una especie de “diario”
o “libro” en donde hay partes específicas. Para el caso
del libro hay una tapa, una contratapa, un índice,
títulos, párrafos, imágenes, etc.
Cada parte es única y tiene su función propia.
En la web por lo general tenemos una cabecera, una
sección principal, múltiples secciones secundarias,
imágenes, párrafos, botones, un pié de página, etc
Beneficios de HTML semántico
Escribir HTML semántico ayuda en muchísimos aspectos tanto en el proceso de escritura,
para entender lo que se va haciendo en el camino, como en el resultado final, cuando el sitio
web se encuentre en uso.
➢ Accesibilidad: Aseguramos que personas que tienen distintas discapacidades (ya sea
visual, auditiva, motriz, etc.) puedan navegar nuestro sitio web sin problemas.
➢ Código legible, estructurado y mantenible.
➢ SEO: Si nuestro sitio es accesible y está bien desarrollado, es más probable que nuestro
sitio quede mejor posicionado en los resultados de los buscadores . (Google, por
ejemplo).
Etiquetas semánticas populares
<header>: La cabecera del sitio. Contiene por lo general la barra de navegación.
<nav>: Barra de navegación. Puede estar en múltiples lugares dependiendo el diseño de la
página.
<main>: Especifica el contenido principal de la página. Contiene contenido que resulta único
para la página y no se replica en otras páginas (como el section, header, footer, etc). Solo se
debe usar una sola etiqueta main en un mismo archivo. Una etiqueta main acepta múltiples
sections.
<section>: Agrupa secciones dentro de una web. Todos los elementos dentro de la sección
están relacionados. Pueden existir múltiples etiquetas section en un mismo archivo.
<aside>: Contiene información relacionada con el contenido principal, pero no es el contenido
en sí mismo. Agrega información como por ejemplo links relacionados, información del autor,
publicidades relacionadas, etc.
Etiquetas semánticas populares
<article>: Contiene información individual. Esta etiqueta se piensa como un bloque que
funciona en sí mismo y podríamos integrarlo a cualquier web. Tiene un contexto propio.
Algunos ejemplos son posteos de un blog, noticias, e información que funciona en sí misma.
<address>: Contiene información de contacto relacionado con la etiqueta que lo contenga.
<footer>: El pié de página del sitio. Contiene por lo general información de contacto, el mapa
del sitio y una barra de navegación del sitio entero.
Código
A la hora de armar nuestro sitio web (siempre existe la excepción a la regla) debería
estructurarse de una manera similar a ésta en donde se ven las etiquetas semánticas en
acción:
Atención
No desarrollar un sitio de manera semántica tiene sus repercusiones en SEO y Accesibilidad
por lo cual desarrollarlo bien es nuestro deber como desarrolladores y desarrolladoras para
no solo lograr que nuestro sitio esté mejor posicionado, sino que sea accesible a todas las
personas sin importar si tiene o no una discapacidad.
Desarrollo Web I
Clase 2: Etiquetas de línea y
bloque
Etiquetas de línea y de bloque
Las etiquetas de línea y de bloque son dos tipos diferentes de elementos HTML que se utilizan
para estructurar y presentar el contenido en una página web.
Etiqueta de línea
Una etiqueta de línea es esa etiqueta que ocupa solamente lo que ocupa el contenido por
ejemplo un botón. Por esta característica si escribimos dos etiquetas de línea una a
continuación de la otra estas se acomodan una al lado de la otra
Algunos ejemplos de etiquetas de línea son:

<img>, <span>, <button>, <a>, <code>, <label>
En CSS…
Si bien aún no comenzamos con CSS, es importante tener las siguientes características
presentes. ¡No te preocupes! más adelante lo retomaremos.
En el css una etiqueta de línea tiene de manera predeterminada la propiedad display: in line;
Para convertir cualquier etiqueta a una de bloque usamos la propiedad css display: block;
estas etiquetas no se llevan bien con márgenes y padín por eso si queremos usar una etiqueta
de línea con márgenes o padding tenemos que cambiar su propiedad de display a display
block.
Etiqueta de bloque
Una etiqueta de bloque es esa etiqueta que ocupa el 100% de la fila donde se lo ubica, es decir,
el ancho total de la pantalla.
Por ejemplo un div. Por esta característica, si escribimos dos etiquetas de bloque una a
continuación de otra estas se acomodan una debajo de la otra automáticamente.
Algunos ejemplos de etiqueta de bloque son:
<h1>, <div>, <ul>, <li>, <header>, <nav>, etc.
En CSS…
En el css una etiqueta de bloque tiene de manera predeterminada la propiedad display: block;
Para convertir cualquier etiqueta a una de línea usamos la propiedad css display: in line;
Esas etiquetas se llevan bien con márgenes y padding por eso si queremos usar una etiqueta
de bloque con márgenes o padding no hace falta hacer ningún cambio siempre hay que
recordar que las etiquetas de bloque se acomodan una debajo de la otra.
Importante
Las características mencionadas anteriormente serán retomadas más adelante cuando se

profundice en CSS.
Sin embargo, al momento de construir el esqueleto de la página web es importante tener
estas características presentes sabiendo que pueden modificarse y cómo es su
comportamiento.
Desarrollo Web I
Clase 2: div y span
<div> y <span>
Cuando estructuramos nuestro sitio ya sabemos que tenemos disponibles las etiquetas
semánticas, sin embargo, pasa que muchas veces necesitamos distintos contenedores para
poder armar estructuras más complejas.
Imaginemos un sitio desde una mirada genérica: tiene cabecera, contenido principal, tal vez
contenido secundario y un footer, algo así:
<div>
Esto lo podemos resolver sin problemas gracias a las etiquetas semánticas que conocemos.
Pensemos ahora en ir un poco al detalle e imaginamos que la sección principal (el <main>) se
ve así:
<div>
Si observamos, podemos ver que la etiqueta
<main> contiene dentro suyo tres “cards”.
Estas tienen un contenedor, una imagen, un
título, texto, información y un botón.
Podemos pensar en divisiones dentro de la
card:
1. La división del contenedor de la card
2. La división de la imagen
3. La división del título
La división de la información
La división del botón
<div>
El código, siguiendo el gráfico anterior, sería se la siguiente manera:
<div>
Estas divisiones no son semánticas.
Son divisiones que nos ayudan a estructurar nuestro sitio.
Para esto, entra la etiqueta <div>
El elemento <div> en HTML es una etiqueta utilizada para crear un contenedor genérico en el
cual se pueden agrupar y organizar otros elementos HTML. La palabra "div" es una
abreviatura de "division" (división en inglés), y su propósito principal es dividir o seccionar el
contenido de una página web en bloques lógicos y manejables.
El elemento <div> no tiene un significado o propósito semántico específico, lo que significa
que no aporta ningún significado adicional al contenido en sí mismo. En su lugar, se utiliza
como un contenedor genérico y versátil que se puede estilizar y manipular mediante CSS o
JavaScript para dar estructura y diseño al contenido de una página web.
<div>
A la hora de agrupar contenido existen muchas maneras de verlo y es muy probable que todas
sean válidas. Con el tiempo el desafío es entender que hay ciertos contenedores que solemos
crear que se pueden evitar, pero eso es algo que vendrá con la práctica.
Agrupar elementos
¿Y para qué me sirve agrupar contenido?. Y la respuesta a esto tiene que ver con tres cosas
principales:
1. Crear código legible.
2. Crear una estructura escalable que pueda cambiar con el tiempo: mientras mejor
estructuremos los elementos HTML que creamos, más simple será mantenerlos y cambiarlos
en el futuro.
3. Generar secciones que tendrán estilos particulares y en común: esto permite estilar cada
sección por separado dando atributos diferentes, como por ejemplo , distintos colores de
fondo o de letras, distintos tamaños, espacios entre elementos, y demás características que
veremos más adelante.
Características del <div>
● Un div, es una etiqueta de bloque, es decir que va a ocupar el 100% de la fila que ocupa.
● Un div, si no tiene contenido, no se ve dado que no tiene alto (height). Es un caja
invisible que sólo se podrá visualizar una vez que se le ponga contenido o se le asigne
una altura en específico con CSS.
● Un div no tiene márgenes ni padding, si queremos que tengan debemos agregarlo al
CSS.
<span>
El elemento <span> en HTML es una etiqueta utilizada para aplicar estilos y manipular
porciones de texto o elementos en línea de forma más precisa. A diferencia del elemento
<div>, que se utiliza para agrupar y dividir secciones de contenido, el elemento <span> se
enfoca en la manipulación de elementos en línea dentro de un bloque de texto más grande.
Para entenderlo pensemos en este ejemplo concreto: imaginemos un texto que tiene una
frase de otro color:
No te pierdas esta increíble oferta en herramientas de plomería.

<span>
¿Cómo lograríamos esto?
Cómo estamos cambiando el color, sabemos que vamos a tener que usar CSS en algún
momento, y lo que hacemos en “envolver” en un <span> el texto que queremos resaltar, y le
cambiamos los estilos mediante CSS.
El código se vería de la siguiente manera:
Diferencia entre <div> y <span>
La diferencia radical de estas etiquetas tan
similares, es que el <div> acepta dentro suyo
cualquier etiqueta mientras que el <span> solo
acepta etiquetas o elementos de línea (por
ejemplo una etiqueta <a> o simplemente
texto).
La otra gran diferencia es que el <div> es una
etiqueta de bloque que ocupará el 100% de la
fila que ocupa, empujando las etiquetas
siguientes hacia abajo mientras que el <span>
es de línea y ocupa solamente lo que su
contenido ocupe, sin empujar ningún elemento
hacia abajo.
Desarrollo Web I
Clase 2: URL y enlaces
Las URL
URL es el acrónimo de Uniform Resource Locator, que en español significa Localizador Uniforme
de Recursos. Es una cadena de caracteres utilizada para identificar la dirección de un recurso
en Internet. Una URL se compone de varios elementos que indican la ubicación y el protocolo
necesario para acceder al recurso específico. Dicho recurso puede ser una página entera, un
video, una imagen, un documento, cualquier cosa que esté compartida en internet.
La diferencia entre una ruta relativa y una ruta absoluta radica en cómo se
especifica la ubicación de un archivo o recurso en relación con la ubicación actual.
Ruta absoluta
Un URL o ruta absoluta en HTML es una forma de especificar la ubicación exacta de un
recurso en Internet utilizando una dirección completa. Se compone de todos los componentes
necesarios para acceder al recurso, incluyendo el protocolo, el dominio, la ruta y cualquier
parámetro adicional.
En este ejemplo, "https://" es el protocolo utilizado para la comunicación, "www.ejemplo.com"

es el dominio y "/imagenes/logo.png" es la ruta del archivo de imagen.
Ruta relativa
Una URL o ruta relativa en HTML es una forma de especificar la ubicación de un archivo o
recurso en relación con la ubicación actual del archivo HTML en el que se encuentra.
Omiten la parte del protocolo, nombre del host e incluso parte o toda la ruta del recurso
enlazado para hacerlas más breves.
Por ejemplo, supongamos que tenes una página HTML llamada "index.html" en la carpeta
principal de tu sitio web, y dentro de esa carpeta tienes una subcarpeta llamada "imágenes"
que contiene una imagen llamada "imagen1.jpg". Para enlazar correctamente a esa imagen
desde el archivo HTML, puedes usar una ruta relativa como:
Ruta relativa
Las rutas relativas son las rutas más utilizadas en la web, y reciben ese nombre porque indican
el camino para encontrar un elemento, pero basándonos en el directorio (carpeta) en donde
nos encontramos posicionados. Omiten la parte del protocolo, nombre del host e incluso parte
o toda la ruta del recurso enlazado para hacerlas más breves. Como se trata de rutas
incompletas, necesitamos información adicional para llegar al recurso enlazado.
Incorporando enlaces
El elemento <a> (anchor o ancla) en HTML se utiliza para crear un enlace o
hipervínculo a otra página web, archivo o ubicación dentro de la misma página.
Permite a los usuarios hacer clic en el texto o la imagen dentro de la etiqueta <a>
para navegar a la URL especificada en el atributo "href”. La estructura es la siguiente:
Dentro del elemento <a>, en el atributo href es en donde colocaremos el enlace hacia donde
queremos que se dirija el usuario, y en el contenido, colocaremos el texto que será visible para
el usuario.
Otro tipo de enlace es el que dirige al usuario a
otra parte de la misma página web, como el área
de contactos o perfil personal. Son otras páginas
web, otros archivos HTML, pero que están
dentro del mismo directorio principal.
Acá lo importante es tener una organización en
las carpetas.
Debes tener una carpeta especial para guardar
más archivos HTML, como en el ejemplo de la
imágen en donde tenemos un archivo
“contactos.html” y “sucursales.html”
Desde VS Code crearemos una carpeta
llamada “páginas”, y dentro de ella
Dentro de cada archivo .html escribimos
crearemos los archivos .html que se
su estructura básica.
consideren necesarios. En este caso son
dos.
En el documento index.html escribiremos el enlace que llevará al usuario a la página de
“contactos” y a la página de “sucursales” escribiendo la ruta del archivo.
Resultado
Recordemos que el elemento <a> es una etiqueta de línea, por lo tanto, aunque se escriban en
renglones diferentes en VS Code, en la página se verán una al lado de la otra.
Por otro lado, ¿te diste cuenta que el enlace se abre en la misma pestaña?. Esto lo podemos
modificar.
Atributo target
El atributo target para el elemento <a> en HTML se utiliza para especificar cómo se abrirá el
enlace cuando el usuario haga clic en él. Indica el contexto en el que se cargará la página
vinculada.
Los valores más comunes para el atributo target son:
● _self: Es el valor predeterminado. El enlace se abrirá en la misma ventana o pestaña en la
que se encuentra el documento actual.
● _blank: El enlace se abrirá en una nueva ventana o pestaña del navegador.
● _parent: El enlace se abrirá en el marco o ventana padre en caso de que el documento
tenga frames o iframes.
● _top: El enlace se abrirá en la ventana principal, reemplazando cualquier frame o iframe
existente.
Probemos un ejemplo. Agreguemos el atributo target junto con el valor _blank y veamos cómo
es su comportamiento.
Resultado
¿Te animás a probar los resultados de los demás valores para el atributo target?
Más adelante retomaremos este tema para navegar por las diferentes partes del sitio web sin
salirnos de él.
Desarrollo Web I
Clase 3: Estructura de CSS
CSS
CSS (Cascading Style Sheets) es un lenguaje de estilo utilizado para describir la presentación y
el diseño de un documento HTML o XML. Se utiliza para definir cómo se ven los elementos y
componentes de una página web, incluyendo el color, la tipografía, el tamaño, el espaciado, el
diseño y otros aspectos visuales.
CSS
CSS se basa en un sistema de reglas que determina cómo se aplican los estilos a los elementos
HTML. Cada regla está compuesta por un selector, que identifica los elementos a los que se
aplicará el estilo, y una serie de propiedades y valores, que definen cómo se verán esos
elementos.
css
La cantidad de propiedades que se pueden agregar a cada elemento seleccionado es
indefinida y dependerá de las partes visuales que se desee modificar. Por ejemplo, color, el
tamaño de la fuente, el color de fondo, bordes, márgenes, entre otras cosas. La estructura es
igual sólo que se agregan más propiedades.
Ejemplos
Si queremos subrayar todos los subtítulos, es
decir, los elementos <h2>:
Si queremos cambiar el color de texto de

todos los párrafos, es decir, los elementos
<p>:
Si queremos agregar un borde a todos los

links, es decir, a todos los elementos <a>:
Si queremos ponerle un color de fondo al

título principal.
Estructura del ejemplo
Resultado
Resumiendo
● CSS es el lenguaje utilizado para aplicar estilos visuales a los elementos HTML,
permitiendo controlar la apariencia y el diseño de una página web de manera eficiente y
flexible.
● El selector es a quien le vamos a aplicar el conjunto de propiedades que definimos entre
las llaves. Buscará todos los elementos con ese valor y les aplicará las propiedades
modificadas.
● La propiedad es lo que queremos modificar.
● El valor es el valor que vá a tomar la propiedad.
● La cantidad de elementos y propiedades a modificar son infinitas, únicas y personales.
Desarrollo Web I
Clase 3: Implementando CSS
Implementando CSS
CSS es un lenguaje que permite darle estilo a nuestro sitio. Cuando decimos estilo nos
referimos a poder darle colores, tipos de letras, cambiar el tamaño de letras, imágenes y todo
elemento que se nos ocurra, generar animaciones, etc, etc, etc.
A esta altura ya sabés que para crear un título principal, usás la etiqueta <h1> en el html y si
quisieras que esa etiqueta tuviera un color, tendrías que agregarlo por medio de CSS.
La pregunta es ... ¿Cómo lo implemento?
Implementando CSS
Existen tres maneras de implementar CSS al sitio web, dos de las cuales son incorrectas.
Aunque de estas tres opciones una sola sea la adecuada, es importante que conozcas las tres.
● Estilos en línea
● Etiqueta Style
● Etiqueta link
Vamos a ver estas diferentes formas de implementar CSS con ejemplos.

Estilo en línea
Hay algo que se llama “inline styles” o “estilos en línea”. En esta forma lo que hacemos es
agregar un atributo “style” a la etiqueta y dentro de este atributo, las propiedades CSS
El problema con esta metodología es que el código CSS se ve mezclado con el HTML haciendo
su lectura muy compleja y dificultando futuras modificaciones que se quieran realizar.
Este método no es recomendado.
Etiqueta Style
¿Te acordás de la etiqueta head?. Dentro de la
etiqueta <html> había dos grandes etiquetas, la
de <head> y la de <body>. En la de <body> va
información que se va a ver en la web y en la de
<head> van metadatos para el navegador.
Existe una etiqueta que se llama <style> en
donde podemos agregar estilos CSS. Esta
etiqueta va dentro de la etiqueta <head> y queda
de la siguiente manera:
Etiqueta Style
En el primer ejemplo vimos el uso de CSS en línea y el principal problema era la mezcla entre
códigos dificultando su lectura.
En este segundo caso se separa código HTML y CSS, ubicando las propiedades de CSS dentro
del <head> del HTML.
Aún así, este método tampoco es recomendado ya que quedan grandes columnas de código.
Ambas estructuras son igual de importantes y es preciso trabajar con ellas al mismo tiempo.
Este método tampoco resulta poco práctico en el uso cotidiano.
Este método no es recomendado.

Etiqueta Link
La etiqueta <link> es un elemento utilizado en la sección <head> de un documento HTML
para enlazar o referenciar recursos externos, como archivos CSS, fuentes, iconos, archivos
JavaScript, entre otros. Su función principal es establecer una conexión entre el documento
HTML y los recursos externos necesarios para su correcta presentación y funcionalidad.
Al tratarse de un archivo externo, en este caso, un archivo .css, debemos crearlo y ubicarlo del
directorio o carpeta principal, como vemos en el siguiente gráfico.
Este método si es recomendado.

Etiqueta Link
Al tratarse de un archivo externo, en este caso un

archivo .css, debemos crearlo y ubicarlo del
directorio o carpeta principal, como vemos en el
siguiente gráfico.
Esto podemos hacerlo desde el VS Code.
Creando archivo desde VS Code
En este ejemplo vemos cómo crear la carpeta que guardará los archivos .css que vas a crear y
el archivo CSS, desde VS Code. La cantidad de archivos puede ser la necesaria, pero como
primer paso haremos un solo archivo. Aunque sea uno solo, igualmente debe estar alojado en
la carpeta correspondiente.
Etiqueta Link
Dentro del <head> de nuestro archivo HTML escribimos la etiqueta <link> y el programa
mostrará sugerencias, de las cuales debemos seleccionar “link:css”. Los atributos que nos
aparecen son:
rel: Especifica la relación entre el documento actual y el recurso externo enlazado
href: Especifica la ubicación del recurso externo que se va a enlazar. Con escribir solo un
punto, dará las sugerencias de qué carpeta y archivo buscar.
Algunas recomendaciones
Estas recomendaciones son para ayudarte a trabajar de manera más cómoda las modificaciones
que realices en ambos archivos, tanto .html como .css.
➢ En la parte superior derecha de VS Code, encontrarás este ícono.
Al hacerle clic te permitirá ver dos archivos a la vez, de la siguiente manera:
➢ Utilizando el atajo Alt+Z se

logra que todo el texto entre
en una ventana más angosta,
evitando que se deba scrollear
hacia los costados.
Esta última recomendación es para
configurar la posibilidad de hacer zoom en
el código.
Archivos > Preferencias > Configuración
En el buscador de la pestaña
“Configuración”, buscamos zoom y
dejamos marcada la última casilla “Mouse
Wheel Zoom”.
Esta última configuración permite que al hacer clic en Ctrl+rueda del mouse, puedas hacer
zoom sobre el trabajo.
¡Listo!
Ahora si, el programa VS Code está aún más cómodo de utilizar para esta siguiente etapa en
la que se aplicarán estilos al sitio web desde el archivo CSS linkeado al HTML.
Desarrollo Web I
Clase 3: Propiedades texto y
fondo
Aplicando propiedades
Ya tenemos preparado el archivo CSS linkeado al archivo HTML. Ahora sí, vamos a darle color
al proyecto.
Antes de comenzar te recomendamos tener presente tu boceto. Aunque en un primer
momento no era necesario agregar color a los wareframes de las primeras clases, ahora que
aplicamos estilo, es importante definir una paleta de color representativa para tu sitio web.
Te dejamos algunos sitios donde podés generarla.
● colorhunt
● colorhail
● color Adobe
● canva colors Genera una paeta de color a partir de una imágen.
● blend genera gradientes rectos o circulares.
● htmlcolorcode
¡A tener en cuenta!
Existen tres maneras de escribir colores. Veamos cada una de ellas.
HSL: (Hue, Saturation, Lightness) Se utiliza para definir colores de manera más intuitiva y
flexible. Se basa en la combinación de componentes de rojo, verde y azul, el modelo HSL se
basa en tres propiedades
RGB: (Red, Green, Blue) Se utiliza para definir colores mezclando diferentes cantidades de los
componentes rojo, verde y azul. Cada componente puede tener un valor entre 0 y 255, donde
0 representa la ausencia del color y 255 representa la intensidad máxima del color.
HEX: Utiliza combinaciones de números y letras. En CSS, los colores se pueden especificar
utilizando una notación de seis dígitos, precedidos por el símbolo "#".
Esta última es la más utilizada.
Ya seleccionada la paleta de colores, es cuestión de ver en qué sectores se verá mejor.
Haremos la siguiente práctica con esta estructura html, que contiene un título, dos subtítulos,
dos párrafos y tres enlaces.
En VS Code, llamaremos a los elementos, uno por uno, y les aplicaremos los colores que
queramos.
Resultado
Tip:
Aunque las palabras se vean
negro, en realidad no es ese el
color. Es recomendable nunca
usar negro puro, sino un tono
bien oscuro.
También podemos cambiar el color de fondo de todo el sitio web utilizando backgroundcolor,
que significa “color de fondo”. Te recomendamos dar propiedades el body arriba de todas las
demás propiedades.
Resultado
Propiedades para texto
Ya vimos los primeros cambios con colores. Veamos qué otras propiedades podemos aplicar a
los textos. Algunas de las más utilizadas son:
● font-family: Define la fuente o tipo de letra a utilizar. (lo veremos más adelante)
● font-size: Especifica el tamaño del texto.
● font-weight: Indica el grosor o peso del texto.
● font-style: Define el estilo del texto, como normal, cursiva o inclinada.
● text-align: Controla la alineación del texto dentro de su contenedor, como izquierda,
derecha, centrado o justificado.
● text-decoration: Permite agregar decoraciones al texto, como subrayado, tachado o
resaltado.
● text-transform: Cambia la capitalización del texto, como mayúsculas, minúsculas o
capitalización inicial.
● line-height: Establece la altura de línea, es decir, el espacio vertical entre líneas de texto.
● letter-spacing: Controla el espaciado entre caracteres del texto.
Propiedades para texto
Para estas propiedades puede que no conozcamos o no aprendamos todos los valores que
pueden abarcar, pero emmet nos puede predecir algunas opciones y gracias a live server,
podemos ver cómo se ven esos cambios en tiempo real mientras lo probamos.
¡Probemos algunas!
font-size
font-style
text-align
text-decoration
text-decoration
Además de agregar “decoración” al texto, también lo podemos quitar, con el valor “none”.
letter-spacing
Propiedades de fondo
Como vimos antes, CSS nos brinda una serie de propiedades para que podamos personalizar
el fondo de los elementos HTML. Todas estas se desprenden de una propiedad llamada
background.
De momento, lo que probamos fue cambiarle el color de fondo del body, pero podemos
cambiarle el color de fondo a diferentes elementos. Por ejemplo a los párrafos.
Existe una posibilidad aún más interesante que es la de poder agregar imágenes como fondos.
Estas imágenes pueden ser de cualquier temática, desde algo formal hasta algo abstracto, o
hasta texturas. Se utiliza background-image y hay dos maneras de colocar imágenes como
fondos.
La primera es utilizando alguna imágenes que se tenga en la carpeta de imágenes y utilizando
la siguiente regla CSS:
Al estar dentro de la carpeta de css, debemos colocar dos puntos al inicio para indicar que
salimos de esa carpeta para ingresar en otra, que es “imagenes”.
Resultado
La segunda forma es copiando directamente la dirección de la imagen encontrada en internet
entre los paréntesis.
Resultado
¿Ves el problema?
Ya sea por el tamaño, la posición, el color de fondo, etc. de la imagen probablemente sea
preciso ajustar alguna propiedad extra. Es por eso que CSS nos trae un conjunto de
propiedades complementarias al background-image para optimizar la forma en la que se ve
nuestro fondo.
background-repeat
background-repeat: controla si la imagen de fondo se repite en el área disponible. Puede
tener los siguientes valores:
● repeat: la imagen se repite tanto en el eje horizontal como en el vertical (por defecto).
● repeat-x: la imagen se repite solo en el eje horizontal.
● repeat-y: la imagen se repite solo en el eje vertical.
● no-repeat: la imagen no se repite.
background-position
background-position: especifica la posición inicial de la imagen de fondo dentro del elemento.
Puede utilizar valores como píxeles, porcentajes o palabras clave como:
● left (izquierda)
● right (derecha)
● top (arriba)
● bottom (abajo)
● center
background-size
background-size: establece el tamaño de la imagen de fondo. Puede utilizar valores como:
● píxeles
● porcentajes
● auto
● cover (ajustar la imagen para que cubra completamente el área)
● contain (ajustar la imagen para que se ajuste completamente dentro del área sin
recortarse)
background-attachment
La propiedad background-attachment en CSS se utiliza para controlar si una imagen de fondo
se desplaza con el contenido de la página o se mantiene fija en su posición mientras se
desplaza el contenido.
Los posibles valores para background-attachment son:
● scroll: Es el valor por defecto. La imagen de fondo se desplaza junto con el contenido de
la página. Si el usuario se desplaza hacia arriba o hacia abajo, la imagen de fondo se
moverá con el contenido.
● fixed: La imagen de fondo permanece fija en su posición relativa a la ventana del
navegador. A medida que el usuario se desplaza por la página, la imagen de fondo no se
moverá.
● local: La imagen de fondo se desplaza junto con el contenido de su contenedor. Si el
contenido es más largo que el contenedor y se produce un desplazamiento, la imagen de
fondo se moverá con el contenido dentro del contenedor, pero no se desplazará más allá
de los límites del contenedor.
Repaso
Hasta ahora hemos visto las primeras propiedades que modificamos en CSS que fueron:
● el color de texto y de fondo

● algunas propiedades de los textos y decoraciones
● Incorporación de fondos con imágenes con una imágen guardada o con una imágen de
internet.
● Algunas propiedades que se pueden ajustar en los fondos con imágenes, como las
repeticiones, posicionamientos y tamaños.
¡No te preocupes!
Lo bueno de tener un boceto es que nos ayuda a marcar el camino por el que debemos
guiarnos. Puede que en el proceso el diseño cambie a algo diferente y eso está muy bien.
Conoceremos más propiedades CSS, pero la buena noticia es que no todas deben aplicarse,
sino que debes usar las que se ajusten mejor a tus necesidades, a tu boceto y a tu proyecto.
Lo importante es que conozcas todas estas herramientas que tenés a disposición, cómo se las
utiliza o al menos conozcas sus nombres para poder investigar por tu cuenta.
Desarrollo Web I
Clase 3: ¿Qué son las clases?
Clases
En CSS, las clases son selectores que se utilizan para aplicar estilos a uno o más elementos
HTML. Una clase se define mediante el uso del atributo class en el elemento HTML, seguido
de un nombre de clase único que se elige para identificar y agrupar elementos específicos.
Las clases permiten aplicar estilos a múltiples elementos en un documento HTML sin tener
que repetir el mismo estilo para cada uno de ellos. Al asignar una clase a un elemento, se le
puede aplicar una serie de estilos definidos en la hoja de estilo CSS correspondiente a esa
clase.
Su mejor función es la de seleccionar elementos específicos y asignarle sólo a ellos alguna
propiedad en particular.
Clases
Recordemos el ejemplo del tema anterior. Veamos cómo le cambiamos el color a dos párrafos
diferentes.
Clases
En el ejemplo anterior, todos los
elementos <p> cambiaban al color
asignado en el CSS. Con ayuda del
atributo “class”, lo que puedo hacer es
asignarles diferentes propiedades a
cada elemento por separado. En este
ejemplo le asignaremos una clase a
cada elemento <p> y le daremos
diferentes atributos.
Una se llamará “parrafoUno”, y la otra
“parrafoDos”
Clases
Luego en el CSS, le daremos las diferentes propiedades. Para “llamarlas” o nombrarlas, las
debemos mencionar con un punto adelante y luego el nombre. De la siguiente manera:
Resultado
Podemos ver cómo a cada párrafo le dimos propiedades por separado con ayuda de las clases.
A tener en cuenta
● Se pueden utilizar la cantidad de clases que se crean necesarias. Es muy probable que
todos los elementos tengan clases y eso está bien.
● Evitar que el nombre de las clases contenga números, caracteres extraños como la letra
Ñ, acentos, guiones, puntos, etc.
● El nombre de la clase debe comenzar con una letra.
● Si el nombre de la clase tiene dos nombres te sugerimos usar el método camelCase, que
indica que la primera letra de la segunda palabra debe ir en mayúsculas.
Ahora, ¡a sumar clases!

Desarrollo Web I
Clase 4: Tipografías
Tipografías
Las tipografías, también conocidas como fuentes, son conjuntos de caracteres diseñados
para representar estilos visuales específicos de texto. En el diseño gráfico y el desarrollo
web, se utilizan para dar estilo y presentación al texto, variando en términos de estilo,
grosor, altura y otras características visuales. Cada tipografía tiene su propia personalidad y
puede transmitir emociones y estilos visuales distintos.
Las familias tipográficas
Existen varios grupos o familias tipográficas (conocidas como font family), pero en general,
utilizamos con mayor frecuencia dos de ellos: serif y sans-serif. Ambos nombres provienen del
idioma francés y se refieren a ciertos detalles en el armado de las letras. Las tipografías serif
tienen una pequeña línea al principio y final de cada trazo, por ejemplo, la Times New Roman.
Podemos notar esta línea en la base de la A, o las puntas de la barra horizontal de la T. Estas
líneas son llamadas "serifas" y por eso se le da esa denominación a la variedad tipográfica.
Tipografías
Existen también la monospace, cursive y fantasy, entre otras pero que no son no tan utilizadas,
porque cuando se elige una tipografía se espera que sea leída con claridad por la mayoría de
las personas y por la mayoría de los dispositivos con sus respectivas variedades de tamaño de
pantalla.
Monospace: tal como indica su nombre, es

una tipografía en la que cada caracter ocupa
la misma cantidad de espacio. Solemos
usarla en editores de código o consolas.
Tipografías
Script: Estas tipografías imitan la apariencia de la escritura a mano y suelen ser elegantes y
fluidas. Se utilizan para agregar un toque de sofisticación y estilo a los diseños.
Tipografías
Display: Estas tipografías son llamativas y están diseñadas para ser utilizadas en títulos o en
situaciones donde se requiere un impacto visual. Suelen ser más ornamentadas y decorativas.
Tipografías
Estos son solo algunos ejemplos de grupos de tipografías, y existen muchas otras
clasificaciones y estilos disponibles. La elección de la tipografía adecuada depende del
contexto y el objetivo del diseño.
Utilizando tipografías en CSS
Para cambiar la tipografía de algún elemento en nuestro HTML, podemos escribir cualquiera
de estos valores en la propiedad font-family de dicho elemento, y el navegador aplicará la
fuente por default que tenga configurada para cada familia tipográfica.
Veamos un ejemplo práctico:
Los valores por defecto de la propiedad CSS font-family ofrecen varias tipografías como una medida de
precaución para garantizar que el texto se muestre de forma legible en diferentes sistemas y dispositivos.
Cuando se define una regla de estilo para font-family sin especificar una tipografía específica, el navegador
utilizará una lista de tipografías genéricas en orden de preferencia. Esto se conoce como una "pila de
fuentes genéricas". Las tipografías genéricas incluyen categorías como "serif", "sans-serif", "monospace",
"cursive" y "fantasy".
La razón detrás de ofrecer varias tipografías en la pila de
fuentes genéricas es que cada sistema operativo y
dispositivo puede tener diferentes tipografías instaladas.
Al proporcionar una lista de tipografías genéricas, el
navegador intenta encontrar la mejor opción disponible en
el sistema del usuario para mostrar el texto
correctamente.
Si ninguna de las tipografías de la lista está disponible en el
sistema del usuario, el navegador seleccionará una
tipografía por defecto definida en su configuración.
Esto garantiza que el texto se muestre legible incluso si
las tipografías preferidas no están disponibles.
En este caso, el navegador tratará de utilizar la tipografía "Arial". Si el usuario no la tiene
instalada, intentará con "Helvética". Si tampoco puede encontrarla, simplemente aplicará la
fuente por defecto que el usuario tenga configurada como "Sans-serif".
Las comillas son obligatorias si el nombre de la tipografía contiene espacios, pero es mejor
incluirlas siempre, para no olvidarlas cuando sean necesarias.
En el próximo apartado, aprenderemos a incluir tipografías desde fuentes externas, para
personalizar aún más nuestro sitio.
Desarrollo Web I
Clase 4: Tipografías de google
fonts
Tipografía de fuente externa
Una tipografía de fuente externa, también conocida como "web font", es una tipografía que no
está instalada en el sistema del usuario, sino que se carga desde un servidor remoto a través
de una solicitud HTTP.
Las tipografías de fuente externa permiten a los diseñadores y desarrolladores web utilizar
una amplia variedad de tipografías personalizadas en sus sitios web, en lugar de depender
únicamente de las tipografías disponibles en el sistema del usuario. Esto brinda mayor
flexibilidad y control sobre la apariencia del texto en el sitio y asegura que se vea igual en
cualquier dispositivo que se lo abra.
Tipografía de fuente externa
Para utilizar una tipografía de fuente externa en un sitio web, se necesita agregar un enlace a
la hoja de estilos CSS de la tipografía en el documento HTML. Este enlace especifica la
ubicación de la fuente externa y proporciona instrucciones al navegador sobre cómo cargarla
y aplicarla al texto del sitio.
Una vez que la tipografía de fuente externa está enlazada correctamente, se puede utilizar en
la definición de estilos CSS mediante la propiedad font-family, de manera similar a como se
utiliza cualquier otra tipografía.
Google Fonts
Google Fonts es una biblioteca de tipografías en línea gratuita y de código abierto que permite
a los diseñadores y desarrolladores web acceder a una amplia variedad de tipografías de alta
calidad para utilizar en sus proyectos.
Ofrece una amplia colección de tipografías de diferentes estilos, diseños y idiomas
proporcionadas a través de su servicio en la nube, lo que garantiza una alta disponibilidad y
rendimiento.
Veamos cómo utilizarla.
Tené presente el proyecto abierto en VS Code.
Google Fonts
Paso 1) Ingresamos a https://fonts.google.com/ (recomendamos traducir la página a español)
Paso 2) Seleccionamos la fuente que interesa utilizar.
Google Fonts
Paso 3) Seleccionamos el tamaño que precisamos de esa fuente.
Google Fonts
Paso 4) Desplegamos el menú superior derecho y seleccionamos el link que debemos copiar.
Google Fonts
Paso 5) Pegamos el link en el head del archivo index.html
Google Fonts
Paso 6) Aplicamos la regla CSS que nos brinda Google Fonts para la fuente descargada, en el
elemento html que queremos.
Tutorial
Te dejamos a continuación un video explicativo para recorrer el paso a paso de cómo linkear
una fuente de google y aplicarla en nuestro sitio web.
Desarrollo Web I
Clase 4: Íconos
Iconos
Un icono para un sitio web es una representación visual pequeña y simbólica que se utiliza
para transmitir información, funciones o conceptos de manera rápida y reconocible. Los
iconos suelen ser imágenes simples y minimalistas que se colocan estratégicamente en el
diseño de un sitio web para mejorar la usabilidad y la experiencia del usuario.
Iconos
Lo que se incluye en la etiqueta son algunas clases propias del servicio de íconos que elijamos.
Éstas se van a encargar de que aparezca el ícono con un estilo por defecto. Nosotros podemos
modificar eso, utilizando todas las propiedades de texto y estilo que conocemos: color,
font-size, text-decoration, line-height, etc.
Boxicons
Al igual que como hicimos con las fuentes de Google Fonts, vamos a aprender cómo
incorporar iconos desde una biblioteca online.
Boxicon es una biblioteca que posee una colección gratuita de iconos de código abierto y
podemos hacer uso de ellos con sólo copiar un link.
Veamos paso a paso como hacerlo.
Paso 1) Ingresamos a https://boxicons.com/ y modificamos el idioma de la página al español

para más comodidad.
Boxicons
Paso 2) En la parte de Uso se encuentra el manual de cómo utilizar Boxicon. Debemos linkear
esta biblioteca con el archivo HTML y esto se hace por medio del “Uso como fuente”. En ese
apartado buscaremos el link que debemos copiar y pegar en el HTML del archivo index.
Boxicons
Paso 3) Pegamos el link en el archivo HTML, por encima del link css.
Boxicons
Paso 4) Seleccionamos el ícono que nos interesa incorporar. Podemos buscarlos por
categorias, y entre “regulares” (sólo contornos) y “sólidos” (de color plano). También están los
íconos “logotipo” que hacen referencia a marcas específicas de programas como Amazon o
Ebay
Boxicons
Paso 5) Una vez seleccionado el ícono podremos personalizar algunos aspectos del ícono,
como su color, si será sólido o regular, su rotación, si estará animado (algo podremos ver más
adelante), y dirección. Una vez listo, copiaremos el link “Fuente”.
El código que debemos copiar es el de “Fuente”, NO el de “componente web”.

Boxicons
Paso 6) Pegamos el código en el la parte del HTML que nos interese ubicar el ícono. Veamos
cómo queda.
Boxicons
Ahora que ya tenemos incluidos los íconos, podremos realizar algunas acciones como cambiar
su tamaño o modificar su color. Como al momento de incluirlo en nuestro código, lo hicimos
utilizando la opción de font, la edición del ícono se hace de la misma manera que si editamos
un texto: font-size para su tamaño y color para su color.
A tener en cuenta:
● El elemento <i>, donde está alojado el icono, puede ser tratado desde CSS como texto.
Por lo tanto podemos utilizar las propiedades font-size para cambiar su tamaño, y color,
para cambiar su color.
● Al ser elementos de línea, ocupan solo el espacio de su contenido, por lo tanto un icono
se verá uno al lado del otro si se colocan juntos.
● No excederse de imágenes. Los íconos facilitan la lectura de información, pero el exceso
puede ser contraproducente. Utilizar lo íconos más comunes y todos del mismo color es
lo aconsejable.
Boxicons
Para conocer en profundidad más opciones de Boxicons, te invitamos a ver el siguiente video.
Desarrollo Web I
Clase 4: Cascada, especificidad
y herencia
Cascada
CSS (Cascading Style Sheets) se denomina "lenguaje de cascada" debido a la forma en que se
aplican las reglas de estilo a los elementos HTML en un documento web. El término "cascada"
se refiere al proceso de determinar cómo se combinan y aplican diferentes estilos cuando hay
múltiples reglas que afectan al mismo elemento.
la cascada en CSS se refiere al proceso de aplicar reglas de estilo en un orden específico y
utilizar la especificidad y la herencia para determinar cómo se combinan y aplican los estilos
a los elementos HTML. Este enfoque proporciona flexibilidad y control sobre el diseño y la
apariencia de un sitio web.
Cascada
El concepto de "cascada" en CSS se refiere a que los estilos serán aplicados a los elementos
html de acuerdo al orden en el que se encuentren en la hoja de estilos de forma descendente;
es decir, la última regla será tomada en cuenta por sobre las anteriores si afectan a un mismo
elemento.
Por ejemplo, si aplicamos un color gris a un parrafo,

y luego, más abajo, le damos una segunda regla de
color amarillo, y por ultimo, un nuevo color rojo, el
texto finalmente se verá de color rojo, ya que fue la
ultima regla a aplicarse. A esto se refiere a
“cascada”. El elemento toma la última regla que se
le asignó sobreescribiendo las demás.
Ejemplo
¿De qué color quedaría el texto en este ejemplo?
Cascada
Dentro de la cascada, hay tres factores que determinan cuál regla será aplicada a un elemento
en caso de que dos o más reglas intenten modificar a ese elemento:
● La especificidad
● El orden del código
● La declaración "!important"
La declaración !important.
Este agregado hace que la declaración de estilo que la
contenga se anteponga a las anteriores, sin importar la
especificidad o el orden en que se encuentre el código.
En otras palabras, anula todas las reglas de estilo
anteriores para esa propiedad específica en ese
elemento.
Especificidad
La especificidad en CSS es un concepto que
determina qué regla de estilo se aplicará a un
elemento HTML cuando hay varias reglas que
afectan al mismo elemento. Cada regla de estilo
tiene un nivel de especificidad que se calcula en
base a los selectores utilizados.
En otras palabras, a cada regla CSS se le asigna un
valor o peso, determinado por el valor del o de
los selectores que la componen. Hay selectores
que tienen más peso e importancia que otros, es
decir más especificidad.
Especificidad
La especificidad se representa como un valor numérico y se compone de cuatro componentes:
● Selectores de ID: Los selectores de ID tienen la mayor especificidad y se representan con

un valor de 100.
● Selectores de clase, atributo y pseudoclases: Los selectores de clase, atributo y
pseudoclases tienen una especificidad intermedia y se representan con un valor de 10.
● Selectores de elementos y pseudoelementos: Los selectores de elementos y
pseudoelementos tienen la menor especificidad y se representan con un valor de 1.
● Uso del selector universal (*), combinadores (+, >, ~) y selectores de hermanos: Estos
selectores tienen una especificidad de 0 y se consideran de menor importancia.
Especificidad
Elemento Clase ID
(p, h1, etc) (.titulo, .texto, etc) (#encabezado, #footer)
1 10 100
Especificidad
Para saber cómo se aplican los puntos, veamos algunos
ejemplos y la cantidad de puntos que tendrían en cada caso.
El navegador sólo consultará la regla de cascada una vez
que llegue a dos elementos que tengan la misma cantidad
de puntos de especificidad y cambien la misma propiedad.
En ese caso, aplicará los estilos de la regla que fue escrita
última.
En la web Specificity Calculator podés calcular la
especificidad de tus selectores de manera interactiva.
Herencia
¿Cómo se produce exactamente la herencia?
Veamos un ejemplo:
Resultado
Título principal de la página
Título secundario
Pokem ipsum dolor sit amet Bibarel Shuckle Thunder Badge Cherubi Palpitoad Grimer. Rising Badge Rattata
Celadon Department Store Giratina Cofagrigus anim id est laborum Arbok. Ut labore et dolore magna aliqua Staryu
Klang sed do eiusmod tempor Lickitung Psyduck Sudowoodo. Hive Badge Rayquaza Hitmontop Great Ball Pidove
Stunky Mewtwo. Blizzard Gliscor the power that's inside Oddish Dodrio Yellow Ekans.
En este caso, la regla CSS establece el color de la tipografía en verde sólo para el elemento
<body>. Pero como la propiedad color se hereda automáticamente, todos los elementos
hijos de <body> tienen el mismo color de letra. Aquí podemos ver las ventajas que tiene
definir cuanto antes propiedades básicas como son las fuentes, los tamaños de fuentes y los
colores, por ejemplo para el elemento <body>, de modo que no haya que repetirlas para cada
elemento del documento.
Herencia
Aunque la herencia de estilos se aplica automáticamente, podemos invalidarla, estableciendo
de forma explícita otro valor para la propiedad que se hereda. Veamos un ejemplo:
Resultado
Título principal de la página
Título secundario
Pokem ipsum dolor sit amet Bibarel Shuckle Thunder Badge Cherubi Palpitoad Grimer. Rising Badge
Rattata Celadon Department Store Giratina Cofagrigus anim id est laborum Arbok. Ut labore et
dolore magna aliqua Staryu Klang sed do eiusmod tempor Lickitung Psyduck Sudowoodo. Hive Badge
Rayquaza Hitmontop Great Ball Pidove Stunky Mewtwo. Blizzard Gliscor the power that's inside
Oddish Dodrio Yellow Ekans.
Herencia
No todas las propiedades CSS se heredan. Algunas propiedades como el ancho (width), la
altura (height), el margen (margin) y el padding no se heredan de forma predeterminada. Sin
embargo, la mayoría de las propiedades relacionadas con la apariencia visual, como el color
(color), la fuente (font), el tamaño del texto (font-size), el espaciado (letter-spacing), entre
otras, sí se heredan.
Desarrollo Web I
Clase 5: Márgenes y Padding
MARGIN
Los márgenes con una propiedad CSS que sirve para separar elementos. Como vimo antes, hay
muchos elementos que conforman un sitio web, y el espacio es uno de ellos. El margen
determina la distancia entre el borde exterior del elemento y los elementos adyacentes.
Supongamos que tenemos un contenedor que ocupa el 100% del ancho de la pantalla
E margen es el espacio que podemos darle del borde hacia afuera

MARGIN
La propiedad margin se puede utilizar para establecer los márgenes superior, derecho, inferior
e izquierdo de un elemento por separado, o se puede especificar un valor único para aplicar el
mismo margen a todos los lados. También es posible utilizar valores negativos para el margen,
lo que hace que el elemento se superpongan a otros elementos cercanos.
Escritura individual Escritura abreviada Escritura abreviada en pares
{ {
margin-top: 20px; { margin: 20px, 30px;
margin-bottom: 30px; margin: 20px, 30px, 10px, 7px; }
margin-left: 10px; }
margin-right: 7px; //arriba, derecha, abajo, izq. //arriba y abajo, izq y der.
}
PADDING
El padding (relleno en español) es una propiedad que se utiliza para controlar el espacio de
relleno alrededor del contenido de un elemento. El padding determina la distancia entre el
borde del elemento y el contenido dentro de él.
PADDING
La propiedad padding se puede utilizar para establecer el relleno, derecho, inferior e izquierdo
de un elemento por separado, o se puede especificar un valor único para aplicar el mismo
margen a todos los lados. También es posible utilizar valores negativos para el margen, lo que
hace que el elemento se superpongan a otros elementos cercanos.
Escritura individual Escritura abreviada Escritura abreviada en pares
{ { {
padding-top: 20px; padding: 20px, 30px, 10px, 7px; padding: 20px, 30px;
padding-bottom: 30px; } }
padding-left: 10px;
margipadding-right: 7px; //arriba, derecha, abajo, izq. //arriba y abajo, izq y der.
}
Desarrollo Web I
Clase 5: Box Sizing
BOX-SIZING
La propiedad box-sizing en CSS es una
propiedad que se utiliza para controlar cómo se
calcula el tamaño total de un elemento, teniendo
en cuenta su contenido, relleno y borde.
Por defecto, el modelo de caja CSS incluye el
tamaño del contenido, el relleno y el borde en el
cálculo del ancho y alto de un elemento. Esto
significa que si especificas un ancho o alto
determinado, el tamaño total del elemento será
mayor, ya que se agregarán el relleno y el borde
al tamaño del contenido.
BOX-SIZING
height: 300px;
width: 300px;
¿Qué pasa si agrego bordes?

¿Medirá más la caja?
¿Qué pasa si agrego padding?
BOX-SIZING
Si agregamos bordes de 10px en todo su

contorno, el contenedor pasará a medir
320px, sin importar si le hemos pedido
que mida 300px.
BOX-SIZING
Si agregamos padding de 20px en todo

su contorno, la caja pasa a medir 360px
de ancho y alto, ya que se sigue sumando
espacio, sin importar si se habían
designado 300px en un principio.
BOX-SIZING
Esto pasa porque la prioridad box-sizing tiene por defecto el valor “content-box”, y cuando
asignamos cierto ancho o alto, prioriza el contenido, no todo el contenedor en sí. Todo borde o
padding que se agregue después, sumará a estas medidas.
BOX-SIZING
Si cambiamos el valor de box-sizing por “border-box”, lo que va a suceder es que el ancho y
alto que se asigne va a contemplar también el padding y el borde.
CONTENT vs BORDER
box-sizing: content-box; box-sizing: border-box;
Desarrollo Web I
Clase 5: Contenedor Límite
CONTENEDOR
Como vimos anteriormente, cuando creamos la estructura del sitio web, utilizamos
contenedores semánticos. Estos contenedores tienen un propósito específico y reflejan la
naturaleza del contenido que contienen.
<header> <nav> <main> <footer> <section> <aside>
Luego utilizamos contenedores genéricos que sirven para agrupar elementos y ayudar a
formar estructuras más complejas.
<div> <span>
Todos estos elementos ocupan el 100% de la pantalla (excepto span), es decir, que son
etiquetas de bloque.
Cuando se está desarrollando estos elementos nunca llegan al borde de la pantalla sino que se
encuentran contenidos , principalmente cuando se trata de pantallas muy grandes.
CONTENEDOR
Podemos ver que hay sitios “contenidos”

cuando las abrimos en pantallas muy
grandes y vemos que sobra espacio en los
costados.
CONTENEDOR
Cuando empezamos a armar nuestra web y comenzamos a estructurar nuestro sitio, suele
pasar que todo ocupa el 100% del ancho de pantall. Esto pasa porque no hay contenedores
que contengan o limiten el contenido que estamos generando. Lo que tenemos que hacer es
generar un contenedor que envuelva este contenido y lo limite con un ancho máximo.
Para este ejemplo usaremos un <h1> y un <p>.
CONTENEDOR
Incluimos los elementos <h1> y <p> en el contenedor <div>. Y al contenedor le asignamos las
siguientes propiedades en CSS:
Resultado
Opcional: para este ejemplo agregamos un borde para poder visualizar los cambios.
¿Qué aprendimos?
● En este apartado conocimos los contenedores límites.
● Aprendimos a dar un máximo de ancho a un
contenedor utilizando porcentaje, con la propiedad
max-width
● Centramos un contenedor con la propiedad margin, en
pedimos que sea de 0 auto, acomodando el contenedor
automáticamente.
Desarrollo Web I
Clase 5: Posicionamiento
POSITION
Hasta ahora hemos visto cómo los elementos se acomodan uno debajo del otro a medida que
los vamos agregado en el documento HTML.
Cuando se hacen los primeros bocetos y vistas del sitio web nos damos cuenta de que los
elementos van ubicados en diferentes partes de la pantalla. Existen varias formas de
acomodar elementos. Hoy aprenderemos a utilizar la propiedad position para lograr layout
interesantes.
CAPAS
Antes de adentrarnos en la propiedad position, debemos entender cómo se ven los elementos
para el usuario cuando visita la página, y tenemos que tener en cuenta qué elementos
deseamos superponer para que se vea de tal manera.
CAPAS
Position
En CSS, la propiedad position se utiliza para controlar cómo se posiciona un elemento en
relación con otros elementos en la página. Los valores posibles para la propiedad position son
los siguientes:
● static: Es el valor por defecto. Los elementos con posición static se posicionan según el
flujo normal del documento y no se ven afectados por las propiedades top, right,
bottom y left.
POSITION: Relative
● relative: Los elementos con posición relative se posicionan en relación con su posición
normal. Puedes utilizar las propiedades top, right, bottom y left para desplazar el
elemento en relación con su posición original.
Relative
POSITION: Absolute
● absolute: Los elementos con posición absolute se posicionan en relación con el primer
elemento padre que tenga una posición distinta a static. Si no hay un elemento padre con
posición diferente a static, se posicionan en relación con el documento (el body). Puedes
utilizar las propiedades top, right, bottom y left para establecer la posición exacta del
elemento.
Absolute
Absolut
Para centrar elementos con la propiedad position, debemos hacerlo de una manera específica,
ya que las maneras aprendidas hasta ahora no se pueden aplicar en este caso.
Cuando usamos la propiedad position tenemos que pensar siempre en asignar los valores para
top, bottom, left y right.
Los div azules tienen position:absolut; es

decir que responden al contenedor que tenga
la propiedad relative más próximo. En este
caso, el contenedor naranja.
Si el contenedor naranja no lo tiene, se
posicionará en relación al body.
Centrado de elemento absoluto
Paso 1) Agregamos un elemento absoluto Paso 2) Movemos el el elemento al centro
dentro de un contenedor relativo. usando left o right con un valor 50%
Centrado de elemento absoluto
Paso 3) Calculamos la mitad del ancho del
Paso 4) Usamos la propiedad calc() de CSS y le
elemento (en este caso, 50px es la mitad del
pedimos que mueva el objeto 50% menos la
elemento)
mitad de su ancho
POSITION: Fixed
● fixed: Los elementos con posición fixed se posicionan en relación con la ventana del
navegador y permanecen en la misma posición incluso al desplazarse la página. Puedes
utilizar las propiedades top, right, bottom y left para establecer la posición exacta del
elemento.
Fixed
Z-INDEX
La propiedad z-index en CSS se utiliza para
controlar la posición en el eje z de los
elementos posicionados. Determina cómo se
apilan los elementos unos encima de otros en
caso de que se superpongan.
El valor de z-index es un número entero o la
palabra clave auto. Los elementos con un
z-index más alto se superponen a los
elementos con un z-index más bajo. Si dos
elementos tienen el mismo z-index, se apilan
en el orden en que aparecen en el código
HTML.
POSITION: Sticky
● sticky: Los elementos con posición sticky se comportan como relative hasta que
alcanzan una posición específica en la ventana del navegador, luego se vuelven fixed y se
mantienen en esa posición al desplazarse la página. Puedes utilizar las propiedades top,
right, bottom y left para establecer la posición exacta del elemento cuando se vuelve
fixed.
Sticky
POSITION
Te invitamos a probar los ejemplos anteriores y cambien los valores a ver qué sucedes. Por
ejemplo, elegir otro posicionamiento entre botton, top, left o right, y otros valores en pixeles.
¿En qué elementos aplicarías estos posicionamientos?
¿Viste elementos fijos en otras páginas web? ¿Cuáles?
Desarrollo Web I
Clase 6: Flexbox
FLEXBOX
Flexbox es una método que permite crear diseños flexibles y responsivos en páginas web.
Proporciona una forma eficiente y fácil de alinear, distribuir y organizar elementos en un
contenedor, independientemente de su tamaño o estructura. En otras palabras, nos permite
generar contenedores flexibles para poder ordenar los elementos uno al lado del otro, incluso
los elementos de bloque.
FLEXBOX
Veamos algunos ejemplos en sitios web donde se puede utilizar flexbox.
Alguno ejemplos pueden ser la barra de

navegación donde hay enlaces unos al lado del
otro, o card (tarjetas). Pueden ser también
galería de imágenes o layouts más complejos.
LAYOUTS
Un layout, en el contexto del desarrollo web, se refiere a
la estructura o disposición visual de los elementos en
una página web. Es la forma en que se organizan y se
distribuyen los componentes, como textos, imágenes,
botones y otros elementos, para crear una interfaz
coherente y atractiva.
Determina la ubicación, el tamaño y el orden de los
elementos en la página, y tiene un impacto significativo
en la experiencia del usuario y en la facilidad de uso del
sitio web. Un buen layout facilita la navegación, la
comprensión de la información y la interacción con los
elementos interactivos. Y lo más importante, marca el
camino para los y las desarrolladoras que deben crear los
códigos del sitio, cumpliendo una función de guía.
FLEXBOX
Flexbox significa “caja flexible”. Quiere decir que lo que hace que los elementos se acomoden
uno al lado del otro es su contenedor. Veamos un ejemplo.
Supongamos que tenemos el siguiente DIV y que contiene otros div más pequeños dentro.
FLEXBOX
El código es así:
FLEXBOX
Para que las cajas se acomoden una al lado debemos aplicar la propiedad displey:flex; en el
contenedor. Esto afectará a los child o hijos directos del contenedor, no así a los nietos, es
decir, a los elementos que se encuentren dentro de las cajitas naranjas. Esto posicionará los
elementos de la siguiente manera sin importar si son elementos de línea o de bloque.
FLEXBOX
Con una sola línea de código podemos lograr este reordenamiento de elementos. Pero, no es
sólo esto. Ahora queda identificar en nuestros layout qué elementos están dentro de
contenedores como hicimos en la clase 2 cuando estudiamos contenedores DIV y SPAN, y
aplicar display:flex; en el caso que sea necesario. Luego, alinear los elementos de manera
vertical u horizontal con más propiedades para el contenedor flexible.
Desarrollo Web I
Clase 6: Alineación y Centrado
FLEXBOX
Ya aprendimos a hacer un contenedor flexible. Ahora, debemos alinear y centrar los
elementos que contiene.
Para ello existen propiedades para alinear los elementos de manera horizontal y vertical y que
deben aplicarse al contenedor, no a los elementos que están adentro. Es al contenedor al que
debemos pedirle cómo debe ordenar sus child.
justify-content: … ;
Justify content es una propiedad cuyos valores permite ordenar elementos de forma horizontal.
justify-content:start; justify-content: space-between;
justify-content:end; justify-content: space-around;
justify-content:center; justify-content: space-evenly;

align-items: … ;
Align-items es una propiedad cuyos valores permite ordenar elementos de forma vertical.
align-items: start;
align-items: stretch;
align-items: end;
align-items: stretch;
align-items: center;
self
Además de acomodar los elementos de manera grupal, también podemos hacerlo de manera
individual, en el caso de que se quiera que un elemento se en un lugar diferente pero que siga
formando parte del mismo contenedor. Esto se logra con justify-self para el eje horizontal, y
align-self para el eje vertical, aplicándolo directamente sobre el elemento a acomodar y no en
el contenedor.
En este caso el contenedor tiene align-items:start; pero el segundo contenedor tiene
align-self:end; haciendo que se coloque de manera casi independiente en la base del
contenedor y no en el inicio o start.
Desarrollo Web I
Clase 6: Equipos responsive
RESPONSIVE
El término "responsive" o responsivo en español, se refiere a la capacidad de un sitio web para
adaptarse y responder de manera óptima a diferentes tamaños de pantalla y dispositivos,
brindando una experiencia de usuario adecuada en cada uno de ellos.
Permite que el contenido y el diseño de un sitio web se ajusten automáticamente para
adaptarse a dispositivos móviles, tabletas y pantallas de diferentes resoluciones.
RESPONSIVE
Cuando comenzamos a pensar en desarrollar una página web, ¿la imaginamos primero en
computadora o en celular?
Equipo Desktop Equipo Mobile First

(Equipo Escritorio) (Equipo Primero Mobil)
Responsive
El equipo desktop primero piensa el desarrollo para computadoras y luego piensa cómo se va
a adaptar a dispositivos más pequeños.
Responsive
El equipo mobile primero piensa el desarrollo para dispositivos pequeños como celular y
luego piensa cómo se va a adaptar a dispositivos más grandes.
MEDIA QUERY
Las media queries (o consulta d medios en español) son una técnica de CSS que permite
aplicar estilos diferentes según las características del dispositivo y la pantalla en la que se
está visualizando un sitio web. Con las media queries, se pueden establecer condiciones y
reglas CSS específicas para diferentes tamaños de pantalla, resoluciones, orientaciones o
incluso características del dispositivo.
La sintaxis de la misma es:
@media (condición de tamaño de pantalla) {
/* Estilos para pantallas con ancho máximo o mínimo de 000 px*/
}
Esta regla CSS puede ir escrita en cualquier parte del documento, pero es recomendable que
siempre quede al final de todas las reglas CSS, ya que es lo último que se suele ajustar en el
momento del desarrollo.
MEDIA QUERY
Veamos su estructura con ejemplos.
Esta media query se lee:

“Para todas las resoluciones menores o iguales a 768px, aplica las siguientes reglas”
Esta media query se lee:

“Para todas las resoluciones mayores o iguales a 768px, aplica las siguientes reglas”
MEDIA QUERY
Si bien podemos usar muchas media queries, lo ideal es mantenernos dentro de un estándar,
es por eso que te dejamos acá las medidas más populares que se usan al día de la fecha.
max-width
En este caso, somos equipo desktop, por lo tanto la media query a utilizar es con la condición
max-width. La sentencia sería: asignar ciertas propiedades en dispositivos más chicos que tantos px.
{} @media (max-width:992px) {} @media (max-width: 768px){}

min-with
El equipo mobile first utilizará en su mayoría la media query con la condición min-with, y la
sentencia sería: designar ciertas propiedades en dispositivos más grandes que tantos px.
{} @media (min-width:768px) {} @media (min-width: 992px){}

RESPONSIVE
Si bien ambas media query se pueden combinar, es recomendable trabajar con una sola de
estas estrategias. Sólo se trabaja combinando ambas maneras en casos muy puntuales.
Desarrollo Web I
Clase 6: Flexbox responsive
FLEXBOX RESPONSIVE
Ya prendimo como acomodar los elementos que componen el sitio web uno al lado de los
otros en un tamaño de pantalla de computadora.
También aprendimos sobre las media query, que son métodos para modificar propiedades del
sitio web en diferentes tamaños de pantalla.
Ahora nos falta generar la acción de responsive, es decir, hacer que los elementos cambien su
disposición según el tamaño de pantalla. Veamos cómo lograrlo con este ejemplo.
FLEXBOX RESPONSIVE
Supongamos que tenemos este contenedor con tres card en su interior.
FLEXBOX RESPONSIVE
Para poder cambiar el tamaño de la pantalla debemos hacer clic derecho sobre el sitio web y
seleccionar inspeccionar. Luego, en la opcion de visualizacion responsiva para poder cambiar
el tamaño de la pantalla libremente.
FLEXBOX RESPONSIVE
Hasta el momento, su código es así.
-Estructura HTML contenedor

y cajas. Cada caja con sus
clases
- CSS del contenedor y de las
cajas
-CSS del color de cada caja
FLEXBOX RESPONSIVE
Ahora, vamos a modificar las propiedades del contenedor y la disposiciones de las cajas
cuando la pantalla mida menos de 768 px de ancho, y le asignaremos nuevas propiedades.
Al final del código CSS entonces agregaremos el siguiente código. Veámoslo por partes.
● Declaramos la media query con el tamaño

máximo de pantalla
● Le asignamos nuevas propiedades al
contenedor:
-display:block; bloqueamos su flexibilidad
-Le damos un máximo de ancho de 300px
● Le asignamos nuevas propiedades a las cajas
para centrarse y haya espacio entre ellas
RESULTADO
FLEXBOX RESPONSIVE
Te invitamos a poner en práctica este ejercicio con un layout más completo.
Poné a prueba una disposición más compleja para los div.
¿Pasa algo con las imágenes? ¿Hacen falta más divs?
Te recomendamos hacer uso de las media query en el tamaño de pantalla responsivo del
inspector. Es decir, visualizar el sitio con un tamaño más pequeño y sobre esa vista realizar los
cambios que creas necesarios.
Ahora sí, ¡a poner flexbox responsive a prueba!
Desarrollo Web I
Clase 7: Grillas
SISTEMA DE GRILLAS
Las grillas son sistemas o estructuras de diseño que nos permiten organizar y distribuir
elementos en una página de manera ordenada y flexible. Se basan en una estructura de filas y
columnas que proporciona un marco para alinear y posicionar los diferentes elementos de
contenido. Las grillas nos ayudan a crear diseños balanceados y proporcionales, facilitando la
creación de diseños responsivos que se adaptan a diferentes tamaños de pantalla.
SISTEMA DE GRILLAS
Supongamos que tenemos una web con este diseño.
Podemos pensar que podemos

armar una grilla con 3x5 (tres
columnas y cinco filas), y agregar
espacio entre ellas. Luego distribuir
en ella los diferentes elementos,
como div, textos o imágenes que
componen el sitio.
CONSTRUCCIÓN DE GRILLAS
Al igual que flexbox, para armar una grilla precisamos un contenedor padre tenga la propiedad
display:grids; para comportarse como grilla y que sus elementos hijos se acomoden dentro de
ella. Para eso, cada elemento dentro de ese contenedor grilla tendrá sus propias coordenadas
para saber dónde ubicarse.
Veamos el paso a paso de cómo crear una grilla.
1) Creamos un contenedor con la propiedad display:grid;
2) Luego, asignamos la cantidad de columnas que va a tener la grilla escribiendo la
propiedad grid-template-columns. Por ejemplo:
grid-template-columns: 100px 100px 100px;
La cantidad de valores que se escriban en esta propiedad, será la cantidad de columnas
que tenga la grilla. En este ejemplo tendrá tres columnas de 100px de ancho cada una.
3) Lo mismo para designar la cantidad de columnas de la grillas. Por ejemplo:
grid-template-rows: 50px 150px 100px 50px 20px;
En este caso creamos filas con diferentes anchos.
Veamos cómo sería el código y su resultado.
Para poder ver el resultado de la grilla, precisamos hacerla visible en el navegador. Al no tener
elementos dentro del contenedor, la grilla está vacía, y por ende, invisible. Pero podemos ver
su esqueleto.
Para ello debemos abrir el inspector del navegador y activar la grilla desde el código. Así:
Lo que se ve como resultado es la grilla
vacía con sus respectiva cantidad de filas
y columnas declaradas anteriormente.
Por cada línea divisoria veremos unos
números. Esos números nos ayudarán a
ubicar elementos dentro de la grilla y
servirán como coordenadas.
Esta grilla tiene 4 líneas verticales y cinco
líneas horizontales.
¿Podes identificarlas?
Gap
4) Por último, podemos elegir el espacio que puede existir entre las columnas y filas
generando un espacio entre sí (muy similar a margin, pero exclusivo para el sistema de grillas).
Para lograr esto se utiliza:
grid-column-gap: 20px; Para dar espacios entre columnas, es decir, de forma vertical.
grid-row-gap: 10px; Para dar espacios entre filas, es decir, de forma horizontal. El código
completo se vería así:
Concepto de líneas
Los canales en rosa más oscuro son los espacios entre filas y columnas.
Ahora pensemos que queremos introducir un párrafo (o

cualquier otro elemento) dentro de la grilla.
Una vez elegido el “cuadrante” o área, debemos tener en
cuenta entre qué número de líneas está.
Vertical, entre las líneas 3 y 4.
Horizontal, entre las líneas 2 y 3.
¿Cómo le damos esas coordenadas al elementos?
COLOCANDO ELEMENTOS
Para cada elemento que queramos ubicar en la grilla se le deben dar las coordenadas, es decir,
decirle entre qué líneas se ubicará el elemento de forma horizontal en relación a las filas, y
vertical, en relaciona la columna.
El código en CSS sería algo así:
Lo que tenemos que pensar es qué

línea comienza y termina la columna
(3 y 4), y en qué línea comienza y
termina la fila (2 y 3).
Desarrollo Web I
Clase 7: Medidas de las grillas
UNIDADES DE MEDIDA
Ya hemos aprendido a crear grillas dando medidas específicas y fijas a las columnas y las filas,
utilizando la unidad de medida de pixel.
Existen otras dos unidades de medida que podemos utilizar y que brindan más flexibilidad.
PORCENTAJE
Los porcentajes siempre son en relación al tamaño del contenedor. Si un contenedor ocupa
600px dentro del mismo generamos una grilla, los porcentajes se acomodarán a esas medidas.
20%
30%
40%
10%
25% 50% 25%

FRACCIONES
Los fr son una unidad trabaja en grids que se maneja en fracciones de pantalla o en espacios
libres. Por ejemplo, si tenemos un contenedor que mide 700px de ancho, y le asignamos dos
columnas de 300px, los 100px restantes que no asignamos será “el espacio libre”, es decir, 1fr o
una fracción.
300px 300px 1fr

FRACCIONES
Las fracciones son unidades flexibles y super útiles al momento de trabajar con grillas. Si
usamos fr para definir el tamaño de las columnas, el espacio se dividirá proporcionalmente
dependiendo del valor asignado.
COMPARACIÓN DE MEDIDAS
Desarrollo Web I
Clase 7: Alineado y centrado
ORDENANDO LA GRILLA
Hasta el momento hemos aprendido a crear grillas asignando cantidad de filas y columnas.
Aprendimos a asignarles tamaños desde diferentes unidades de medida, aprendimos a darle
espacio con el uso de gap, e incluso, conociendo sus líneas, logramos comprender como
colocar elementos dándole coordenadas.
Ahora, sólo nos queda organizar los elementos allí colocados para que queden visualmente
más equilibrados. Para eso existen las propiedades justify-ítems y align-ítems
● justify-items alinea los elementos en el eje x o de manera horizontal
● align-items alinea los elementos en el eje y o de manera vertical
● justify-self: permiten alinear a cada elemento hijo de manera individual.
Estas propiedades se le asignan al contenedor que genera la grilla, y afecta a todos los hijos
que tiene, muy similar a lo que pasa con su flexbox.
justify-items
justify-items alinea los elementos en el eje x o de manera horizontal. Acepta los siguientes
valores.
Fuente de lás imágenes: https://css-tricks.com/snippets/css/complete-guide-grid/

align-items
align-items alinea los elementos en el eje y o de manera vertical. Acepta los siguientes valores:
Fuente de lás imágenes: https://css-tricks.com/snippets/css/complete-guide-grid/

justify-self y align-self
¿Qué pasa si queremos alinear un elemento particular en otra dirección distinta a los otros
elementos así como existen?
Las propiedades justify-self y align-self permiten alinear a cada elemento hijo de manera
individual.
Es importante recordar que esta propiedad se aplica sobre el elemento a ser alineado, no
sobre el contenedor.
ALINEADO INDIVIDUAL
justify-self
align-items
Desarrollo Web I
Clase 7: Grilla responsiva
grid-generator
Este generador de grillas nos permitirá generar un layout en cuestión de minutos. Ingresá a
https://cssgrid-generator.netlify.app/ y conozcamos su pantalla.
PASO A PASO
1) El primer paso es crear la grilla con la cantidad de filas y columnas que se requiera.
2) Luego, haciendo clic en cada input fr, cambiar la medida que se desee.
3) Determina el gap (recuerda que es en pixeles).
4) Esto se configura con los inputs del lado derecho de la pantalla.
¡Inventemos una grilla!
PASO A PASO
Una vez creada la grilla, ya se pueden introducir los div o contenedores. Para eso se hace un
clic en cada cuadrante. Esto depositara un div en cada espacio.
Para que un div ocupe más de un cuadrante se debe hacer clic sostenido, y sin soltar, recorrer
todos los cuadrantes que se quieren ocupar.
PASO A PASO
Haciendo clic en “Mostrar código”, podremos ver el HTML y CSS de la grilla creada.
COSAS NUEVAS
Vamos a ver cosas nuevas en este código. Analicemos en detalle.
● ¿Qué significa repeat(6, 1fr)?
Significa que se crearán 6 columnas iguales de una fracción cada una.
Repetir 6 columnas de una fracción”
● ¿Qué significa .div1 { grid-area: 1 / 1 / 2 / 7; } ?
La propiedad grid-area se utiliza para especificar la ubicación y el tamaño del elemento dentro
de una grilla. En este caso, la declaración 1 / 1 / 2 / 7 define los siguientes valores:
- El primer valor 1 indica que el elemento comienza en la primera fila de la grilla.
- El segundo valor 1 indica que el elemento comienza en la primera columna de la grilla.
- El tercer valor 2 indica que el elemento termina en la segunda fila de la grilla.
- El cuarto valor 7 indica que el elemento termina en la séptima columna de la grilla.
Es otra manera de ubicar elementos dentro de una grilla.
grid-area
.div1 { grid-area: 1 / 1 / 2 / 7; }
GRILLA
Llevemos estos códigos al proyecto.
Te recomendamos darle una height al contenedor para poder ver los resultados. Recordá
que la grilla y los div que contiene están vacíos.
GRILLA
Para poder visualizar cada div, te
proponemos colorearlos.
¿Cómo?
Colocando un background-color a cada
uno de ellos. Ejemplo:
.div1 {
grid-area: 1 / 1 / 2 / 7;
background-color: orange;
}
GRILLA RESPONSIVA
Ya creamos una grilla completa y le colocamos div vacíos para ver la disposición de los mismos.
Para lograr que esta grilla cambie la disposición de sus filas y columnas, y además, cambié la
distribución de los div, debemos seguir estos pasos:
1) Crear una nueva grilla para un tamaño de pantalla más pequeño
2) Crear una nueva distribución de TODOS los div en la nueva grilla. Si en el ejemplo
anterior hay ocho divs, la misma cantidad debe haber en la grilla más pequeña.
3) Integrar estas nuevas propiedades del contenedor dentro de una media query.
GRILLA RESPONSIVA
Dibujamos una nueva grilla con una cantidad de filas y columnas diferente, ajustamos sus
medidas (los fr), y colocamos en ella los ocho div anteriores.
GRILLA RESPONSIVA
Copiamos los nuevos códigos CSS que nos ofrece dentro de una media query.
Ajustamos lo que creamos necesario, ya sea color, una nueva distribución, etc.
RESULTADO
Probamos la grilla con el inspector, achicando la pantalla para ver si cambia la grilla.
¡BRAVO!
Aprendiste a hacer una grilla responsiva.
Flexbox y grids son herramientas son de suma importancia en el diseño y desarrollo de sitios
web responsivos.
De acá en adelante repensá el diseño de tu proyecto en base a una pantalla más pequeña
como por ejemplo, celular.
¿Qué otros dispositivos podrían mostrar páginas web?
¿Qué otros tamaños de pantalla existen?
Con los nuevos celulares que se pliegan, ¿qué tamaño corresponde?
Esta y muchas otras preguntas te las dejamos para investigar y descubras un mundo de
posibilidades con la cantidad de tamaños de pantallas que existen hoy.
Desarrollo Web I
Clase 8: Pseudoclases
INTERACTUANDO
Desde que se piensa el diseño se tiene en cuenta las interacción que tendrá el usuario con la
página. Esas interacciones se podrían hacer visibles cuando cuando el usuario pasa el cursor
por encima de alguno elemento.
Ejemplo: botones, haciendo que el boton cambie de color, de tamaño, de forma, agregue
sombreado, etc.
INTERACTUANDO
Esto es posible gracias a la pseudoclase Hover.Una pseudo-clase en CSS es una palabra clave
que se agrega a un selector para especificar un estado o una acción específica de un elemento.
Forma de uso:
EJEMPLO
Veamos un ejemplo de su uso cambiando el estilo de un botón.
Código HTML del botón.

Se utiliza el elemento
button. En este caso con la Se vuelve a nombrar la
clase “hover-button” clase del botón seguido de
:hover y nuevas
características que se
Le damos características harán visibles cuando se
al botón. pase el cursor por encima.
EJEMPLO
Resultado:
Para que el cursor cambie de flecha

a dedo, se utiliza la propiedad
cursor: pointer;
Este es un gran indicador para
usuario que le avisa cuando algo es
clickeable
Desarrollo Web I
Clase 8: Transforms
TRANSFORM
Como su nombre lo indica en inglés, transform es transformar. Se refiere a un conjunto de
propiedades que le podemos aplicar a un elemento para generar un cambio visual (escalar,
trasladarlo o rotarlo) y haciendo uso del :hover como activador.
Las transformaciones que vamos a generar son:
Escalar Trasladar Rotar

ESCALAR
Dentro de transform de usa el valor scale (escalar o agrandar), y entre paréntesis un número.
Veamos un ejemplo de código CSS aplicado a un div vacío:
Dentro de los parámetros se ponen

números enteros.
1 = 100% del tamaño del elemento
2 = 200% del tamaño del elemento, es
decir que medirá el doble.
3 = 300% y así sucesivamente.
ESCALAR
Resultado:
TRASLADAR
Dentro de transform de usa el valor translate (trasladar), y entre paréntesis se colocan dos
números (en px o en %) para indicar cuánto se quiere correr ese elemento en el eje X y en el eje
Y.
Veamos un ejemplo de código CSS aplicado a un div vacío:
TRASLADAR
Resultado: Si queremos trasladar el elemento
sólo en el eje X se utiliza translateX();
Si queremos trasladar el elemento

sólo en el eje Y se utiliza translateY();
RECORDANDO LOS EJES
En matemáticas es común que los valores negativos sobre el eje Y sean hacia abajo. En web
sucede al revés, como vimos en el ejemplo anterior. Los valores positivos son los que van hacia
abajo. Veámoslo en el siguiente gráfico:
En matemáticas En Web
ROTAR
Dentro de transform de usa el valor rotate (o rotar), y entre paréntesis un número seguido de
“deg”, es decir degrees, que en español significa grados.
ROTAR
Resultado:
ROTAR
Por último, en este caso, podemos cambiar el origen de la rotación:
Por defecto el giro se hace sobre el eje Para modificarlo se puede agregar la
central del elemento. propiedad transform-origin: y
agregarle dos valores: top o bottom
(para arriba o abajo) o left o right (para
izquierda o derecha)
ROTAR
Desarrollo Web I
Clase 8: Transitions
ANIMACIONES
Una animación en el contexto del desarrollo web se refiere a la técnica de crear una serie de
cambios visuales a lo largo del tiempo para generar una ilusión de movimiento. En lugar de
presentar una interfaz estática, una animación permite que los elementos de la página web se
muevan, cambien de forma, color u otras propiedades, creando una experiencia visual más
dinámica y atractiva para el usuario.
TRANSITION
Hasta el momento hemos aprendido a modificar algunos aspectos utilizando transform y la
pseudoclase hover, y los cambios logrados se ven un poco bruscos.
Para lograr un cambio progresivo se utiliza la propiedad transition. De esta manera logramos
entonces una transición de una propiedad a otra.
TRANSITION
La propiedad transition lleva tres valores:
USO DE TRANSITION
La propiedad transition es utilizada en el grupo de propiedades “original” del elemento. Y
aparte, como venimos trabajamos, las propiedades que se harán visible con hover. Veamos la
siguiente estructura repasando el tema anterior de transform.
En este ejemplo, la propiedad que va a

transicionar es la de “transform”, que
sucederá durante el hover. Es decir,
rotate.
EJEMPLO
Sin transición Con transición
MÁS EJEMPLOS
MÁS EJEMPLOS
Desarrollo Web I
Clase 1: Librerías
LIBRERÍAS
Las librerías son conjuntos de código preescrito y reutilizable que facilitan el desarrollo de
aplicaciones y sitios web. También conocidas como bibliotecas, están diseñadas para abordar
tareas comunes y repetitivas, lo que permite a los desarrolladores ahorrar tiempo y esfuerzo
al no tener que escribir todo el código desde cero.
Las bibliotecas web generalmente están escritas en lenguajes de programación como
JavaScript, y ofrecen una variedad de funciones y utilidades que se pueden incorporar
fácilmente en un proyecto.
LIBRERÍAS
Algunos ejemplos populares de bibliotecas
para desarrollo web son jQuery, React,
Angular, Vue.js, Bootstrap, entre otras. Cada
biblioteca se enfoca en diferentes áreas y
ofrece ventajas específicas según las
necesidades del proyecto.
Las dos librerías que te compartimos a
continuación son específicas para trabajar
animaciones y transiciones.
LIBRERÍAS
ATENCIÓN
Cada librería tiene su manual de uso, por eso esa importante que al momento de elegir una
leas la documentación que provee. De esta manera podrás incorporarlas a tu sitio sin errores
y sabrás cómo aprovechar sus propiedades en cada elemento y parte de tu página.
animate.style
animate.style
Esta librería es de uso libre y gratuito, y es super fácil de utilizar. El sitio oficial es
https://animate.style/
Te recomendamos ver el sitio en inglés para que puedas ver los efectos visuales que ofrece.
En la parte derecha del

sitio verás un listado
con todos los efectos.
Al hacer clic en cada
uno podrás
previsualizarlos.
animate.style: paso a paso
Paso 1) Más abajo en el sitio web https://animate.style/ vas encontrar la documentación que
explica distintas formas de linkear esta librería con tu proyecto. El modo de linkearlo será por
CDN (Content delivery network). En la documentación encontraremos el link que debemos
copiar y pegar en el head de nuestro archivo HTML.
Paso 2) En la documentación también está explicado el modo de aplicar la animación a cada
elemento.
Este paso nos indica que debemos agregar la clase animate__animated al elemento que
queremos animar. Ejemplo:
Ejemplo:
Paso 3) Como el manual de uso indica, luego de la clase animate__animated debemos
agregarle el nombre de la animación que queremos. Para eso, vamos al menos de la derecha
del sitio web, elegimos la animación y copiamos su nombre. Al lado de cada nombre tendrás un
icono de “copiar” para hacerle clic.
Paso 4) Pegamos el nombre de la animación a la clase, al lado de animate__animated
Ejemplo:
animate.style: resultado
¡Listo!
El resultado final se ve así.
animate.style: resultado
Este tipo de efectos (u otros) de puede agregar también a contenedores completos. Esto
afectará sólo al contenedor y el efecto visual se verá en conjunto. Por ejemplo, en esta grilla:
animate.style: configuración
En el manual de uso de esta librería podrás encontrar configuraciones que pueden aplicarse a
las animaciones. Por ejemplo, hacerlas más rápidas o más lentas controlando su duración,
hacer que comience con retraso aplicando un delay o también lograr que la misma animación
se repita varias veces. Te invitamos a ver el manual de uso en la sección Propiedades
personalizadas de CSS (variables CSS)
AOS
AOS
Esta librería es de uso libre y gratuito, y es super fácil de utilizar. El sitio oficial es
https://michalsnik.github.io/aos/
Esta librería es útil para aplicar animaciones al momento de hacer scroll en la página.
AOS: Paso a paso
Paso 1) Al igual que como hicimos con la librería anterior, debemos linkear esta librería al
proyecto. Al final del sitio encontraremos tres links importantes.
El primero de ellos es el CDN que debemos copiar y pegar en el head del proyecto.
AOS: Paso a paso
Paso 2) Luego linkeamos los dos links de javascript que nos indica la librería para que pueda
funcionar e iniciarse. Estos links van abajo de todo el documento HTML, justo antes de que
cierre el <body>
AOS: Paso a paso
Paso 3) Por último, queda recorrer el sitio web haciendo scroll para visualizar el efecto en
cada cuadro y tomar de ellos el que nos interesa copiando y pegando la clase completa en
algún elemento del proyecto.
AOS: Resultado
¡Listo!
El resultado final se ve así.
AOS: Resultado
Este tipo de efectos (u otros) de puede agregar también a contenedores completos. Esto
afectará sólo al contenedor y el efecto visual se verá en conjunto. Por ejemplo, en esta grilla o
en esta lista de productos o cards.
AOS: Configuración.
Un poco más abajo de las animaciones tenemos un sección de configuraciones en donde
directamente nos muestra algunos ajustes que podemos aplicar y cómo se ven.
Un poco más abajo de las animaciones tenemos un sección de configuraciones en donde

directamente nos muestra algunos ajustes que podemos aplicar y cómo se ven.
data-aos-duration ="3000" (DURACION DE LA ANIMACIÓN)
data-aos-easing ="linear" (TIPO DEMOVIMIENTO)
data-aos-offset ="300"
data-aos-anchor-placement ="top-bottom" (DÓNDE TERMINA LA ANIMACIÓN)

AOS: Configuración.
Te dejamos a continuación información sobre el modo de uso otras configuraciones haciendo

clic acá.
Podes ponerlo en español para entenderlo mejor.
MÁS LIBRERÍAS
Existen muchas otras librerías para diferentes acciones que se pueden hacer en el sitio web.
Cada una de ellas, como mencionamos, tienen su manual de uso y es importante conocerlo
para luego poder configurar todo a los gustos y necesidades del sitio web.
Te invitamos a investigar en internet sobre otras librerías de acceso libre y gratuito que se
puedan utilizar y a compartirlas con el resto de la clase.
ATENCIÓN
Te dejamos por último algunas recomendaciones al momento de utilizar animaciones:
- Utilizar la misma librería, evitar combinar distintas bibliotecas para no tener muchos
tipos de operaciones y clases diferentes.
- De la misma librería, utilizar siempre el mismo tipo de animaciones para no generar
mucho despliegue de movimientos que incomodan al usuario.
- Las animaciones son herramientas para llamar la atención del usuario, por lo tanto, se
recomienda usarlas con precaución sólo en los elementos importantes y que no agobien
a la vista.
Ahora si, ¡a ponerle movimiento a la página web!.

Desarrollo Web I
Clase 9: ¿Qué es bootstrap?
BOOTSTRAP
Bootstrap es un framework de código abierto creado por Twitter que se utiliza para facilitar el
desarrollo de sitios web y aplicaciones web. Es una herramienta muy popular en el desarrollo
front-end ya que proporciona una serie de estilos predefinidos, componentes y utilidades CSS
y JavaScript que permiten crear diseños responsivos y atractivos de manera rápida y sencilla.
De forma rápida podríamos entenderlo como un montón de código (HTML, CSS, JS) que
hicieron otras personas que tenemos disponible para usar, pero antes entendamos mejor qué
es una librería.
LIBRERIA VS FRAMEWORKS
Librerías Frameworks
Conjunto de funciones, clases y Entorno de trabajo, estructura o

métodos predefinidos que están grupo de herramientas y librerías
escritos y organizados de manera que proporciona un conjunto de
que pueden ser reutilizados por reglas y normas para facilitar y
desarrolladores para realizar tareas agilizar el proceso de creación de
específicas sin necesidad de volver a sitios web y aplicaciones web.
escribir todo el código desde cero.
FRAMEWORKS
En la clase anterior estuvimos trabajando con dos librerías para animaciones. Como vimos,
estas librerías son específicas para animaciones e incluso, cada una de ellas tenía un conjunto
de reglas diferente.
En el caso de un framework o marco de trabajo, se trata de un gran conjunto de librerías y que
todas comparten las mismas reglas.
Hoy aprenderemos a aplicar y utilizar Bootstrap.
BOOTSTRAP
Bootstrap contiene un gran conjunto de bloques de código HTML, CSS y JS pre armados que
nos permite como desarrolladores ahorrar mucho tiempo de trabajo, pero para utilizarlo hay
que conocer su estructura. Podríamos pensar que se trata de “materia prima” que podemos
adaptar a nuestras necesidades. Es código ya empezado que podemos “amoldar” a un
proyecto personal.
Vamos a integrar bootstrap al proyecto siguiendo estos pasos.
Tené en cuenta que estos pasos se están llevando a cabo con esta versión en el 2023, que a futuro
puede cambiar.
BOOTSTRAP
Paso 1) Ingresamos al sitio oficial de bootstrap https://blog.getbootstrap.com/ y nos dirigimos
a la parte superior izquierda para ingresar a la parte de “Docs” o documentación.
Al igual que como vimos con las librerías, los marcos de trabajo también vienen con su respectiva
documentación para ser estudiada con el fin de utilizar correctamente sus herramientas y evitar
errores en el código.
BOOTSTRAP
Paso 2) Para ayudarte podés poner el sitio web en español. En la parte de “inicio rápido”
vemos que nos pide colocar <meta name="viewport" content="width=device-width,
initial-scale=1"> en el head. Esta línea de código ya la tenemos gracias al atajo Emmet en VS
Code. 😎
BOOTSTRAP
Paso 3) En este paso incluimos los link de CSS y JS de este framework.
Haciendo clic en este

ícono que acompaña
al código podrás
copiar y pegar los
ejemplos de forma
más rápida.
BOOTSTRAP
¡ATENCIÓN!
El link CDN de CSS que vá dentro del <head>, va por encima del link CSS. ¿Por qué?
Porque así podremos sobreescribir las propiedades de bootstrap con las nuestras
personalizadas.
El link de <script> va justo antes del cierre de <body>

BOOTSTRAP
Siempre que utilices este entorno de trabajo es recomendable traer los links
correspondientes desde el sitio web oficial para asegurarte de que están actualizados.
¡Y listo!
Ya podemos utilizar los componentes en nuestros proyectos.
BOOTSTRAP
Por último y a modo de resumen, te compartimos algunas características de este framework.
Sistema de rejilla (grid system): Bootstrap utiliza un sistema de rejilla flexible basado en
columnas que permite crear diseños responsivos que se adaptan automáticamente a
diferentes tamaños de pantalla.
Componentes predefinidos: Bootstrap ofrece una amplia variedad de componentes
predefinidos, como botones, formularios, tarjetas, barras de navegación, entre otros, que
facilitan la creación de interfaces de usuario.
Tipografía y estilos: Bootstrap incluye una tipografía y estilos predeterminados que mejoran
la legibilidad y apariencia del contenido.
BOOTSTRAP
Responsividad: Bootstrap está diseñado para ser completamente responsive, lo que significa
que los sitios web creados con este framework se ajustarán automáticamente al tamaño de
pantalla del dispositivo en el que se visualicen, como computadoras de escritorio, tabletas o
dispositivos móviles.
Compatibilidad con navegadores: Bootstrap es compatible con la mayoría de los navegadores
modernos, lo que garantiza una experiencia consistente para los usuarios en diferentes
entornos de navegación.
Personalización: Aunque Bootstrap ofrece una gran cantidad de estilos y componentes
predefinidos, también es posible personalizarlo y adaptarlo a las necesidades específicas de
cada proyecto.
Desarrollo Web I
Clase 9: Integrando componentes
Bootstrap – Integrando componentes
Ya aprendimos que Bootstrap es una librería que contiene código de terceros listo
y disponible para que utilicemos. En el caso de esta librería, el código listo y
disponible se encuentra tanto en el .css como en el .js.
Como es código que vamos a querer usar lo tenemos que integrar a nuestro
proyecto. Para eso utilizamos la etiqueta <link> para el CSS y la etiqueta <script>
para el JS.
Todas las instrucciones se encuentran en la página

https://getbootstrap.com/
así como en la guía anterior.
Documentación
Una vez que tenemos integrada la librería a nuestro proyecto, no nos
queda más que comenzar a buscar en la documentación cómo utilizarla.
Si observamos la página de Bootstrap, vamos a ver en la barra de
navegación un link que dice “Docs”
Si hacemos click ahí, nos llevará al a página de la documentación de la

librería.
Como verás, la página está en inglés. Si manejás inglés no hay
problema pero si no, siempre existe la opción de traducir el sitio
gracias al traductor de Google:
A fines prácticos el lenguaje de la guia va a seguir con la traducida al español

En la documentación vamos a encontrar toda la información para utilizar la
librería. Mientras más leamos, mejor vamos a poder utilizar y conocer la
librería. Es super importante leer la documentación de todas las librerías
que vayamos integrando a nuestro proyecto.
¿Hay que leer todo antes de utilizarla?
No. Si bien está bueno tener un amplio conocimiento de la librería, muchas
veces se puede aprender a demanda. Cuando nos encontramos con algo que
queremos hacer, leemos y buscamos a ver si encontramos una solución.
En esta guía te contamos lo que sí o sí tenés que saber de Bootstrap,

pero hay mucho más por explorar.
Componentes
Una vez que hicimos click en “Docs”, estamos en la sección
de la documentación. A la izquierda hay una barra de
navegación que nos muestra todos los temas, algo así
como un índice.
Cada sección vale la pena ser explorada y vamos a
encontrar con que hay secciones más complicadas y otras
más fáciles. Por ahora nos vamos a enfocar en la sección
de “Componentes”.
Los componentes de Bootstrap son código HTML que ya
vienen con las clases adecuadas para que se muestren de
una forma particular.
El paso siguiente es copiar estos códigos y pegarlos en
nuestro proyecto, y ya vamos a tener los componentes
funcionando.
Existen muchos componentes y vamos a poder verlos
cuando hacemos click sobre “Componentes”.
Barra de navegación/ Navbar
Cuando hacemos click en Componentes > Barra de navegación, se nos
despliega toda la documentación pertinente a la barra de navegación. En los
primeros párrafos nos explica cómo funciona, qué clases admite y otros
detalles.
Si comenzamos a ir hacia abajo en la página vamos a ver que hay ejemplos de
barra de navegaciones junto con el código a copiar, por ejemplo:
La lógica con los componentes, es siempre la misma:
1) Hacemos click en el componente que nos interesa.
2) Leemos la información / documentación.
3) Buscamos el modelo del componente que nos sirva.
4) Copiamos el código.
5) Lo pegamos en nuestro proyecto..
No olvidemos tener linkeado el CSS y el JS de Bootstrap para que puedan

funcionar los componentes que queremos incorporar.
Una vez que encontremos el componente que nos guste y resuelva la

necesidad que tenemos, simplemente lo pegamos en nuestro proyecto. El
código debería verse algo así:
Si ahora abrimos nuestro archivo, vamos a ver algo como lo siguiente:
Es decir que tenemos la navbar lista para usar en nuestro proyecto.

¿Eso es todo?
Bueno… depende. Eso es todo a la hora de integrar un componente, pero ahora
podemos cambiar al código y modificarlo para que se adecúe a las necesidades
que tenemos.
Modificando la barra de navegación / navbar
Una vez que detectamos cada elemento en su línea de código traída desde
Bootstrap, es leer sus clases. Veamos el siguiente ejemplo de un elemento <ul>
del navbar anterior:
Su línea de código es así:
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
Como podemos ver en este ejemplo el elemento <ul> trajo clases ya asignadas
desde la librería. Para saber más sobre el significado de estas clases podemos
ver el instructivo de cada una de ellas que nos ofrece Bootstrap.
Modificando la barra
de navegación /
navbar
Como podemos ver, en este ejemplo
hay algunos elementos conocidos y
no tan conocidos. Una manera de
revisar el código en detalle para
visualizar qué elemento representa
en el HTML (en ese caso el navbar)
es utilizamos el inspector del
navegador:
Modificando la barra de navegación / navbar
¡No te preocupes!. Puede ser un poco confuso al principio pero te contamos

que no es necesario que utilices las clases que ofrece la librería si o si
(aunque es mejor no eliminarlas hasta no estar seguros).
La buena noticia es que las podemos sobreescribir. Es decir, podemos

inventar nuestras propias clases y aplicarlas. Veamos un ejemplo:
Para sobrescribir una característica predeterminada por Bootstrap lo que debo
hacer es buscar en mi propio archivo HTML el elemento que copié desde la
librería (continuamos con el ejemplo de elemento <ul>) y cuando lo encuentro,
creo una nueva clase.
El siguiente paso, es agregar propiedades a esa clase desde CSS. Como
hacemos normalmente, ingresamos al archivo CSS previamente linkeado al
archivo HTML, nombramos a la clase y le asignamos las propiedades y valores
que deseamos cambiar del elemento.
Como resultado, el nuevo navbar modificado se verá de la siguiente
manera:
Con este ejemplo pudimos ver cómo sobreescribir clases y asignarles

otras que se ajusten a las necesidades de cada proyecto, y las
funcionalidades quedan intactas.
Conceptualizando
Si bien no vamos a ir componente por componente, lo importante acá es
registrar el modo de operar que tuvimos:
1) Linkeamos CSS y JS de bootstrap en nuestro documento.
2) Buscar los componentes que nos sirven y los integramos al proyecto
copiando y pegando el código que nos ofrece la librería.
3) Investigamos sus líneas de código y efectuamos alguna modificación
agregando clases y propiedades nuevas desde CSS.
Siempre tengan presente que pueden incorporar sus propios estilos y
sobrescribir, en caso de ser necesario. El uso de Bootstrap es el piso, el techo
es el que ustedes quieran.
Desarrollo Web I
Clase : Bootstrap: Grillas
Veamos un ejemplo
Te dejamos este código HTML de ejemplo para que puedas aplicarlo en un sistema de grillas sencillo
de una sola fila y veas los resultados. Recuerda incluir los enlaces a los estilos de Bootstrap (CSS)y los
scripts (JS )correspondientes en el encabezado y el pie de página del documento HTML para que
funcione correctamente.
*Atención: a modo de ejemplo utilizamos CSS en línea. En la práctica este método no es recomendado.
Resultado
En este ejemplo, cada div tiene la clase col, lo que significa que ocupará
automáticamente el ancho necesario para adaptarse a la grilla de 12 columnas. Cada
div tiene un color de fondo diferente para que puedas ver claramente cómo se
distribuyen en la grilla.
Veamos un ejemplo
Te dejamos este código HTML de ejemplo para que puedas
aplicarlo en un sistema de grillas de varias filas con varias
columnas de diferentes anchos, y veas los resultados. Esto
te permitirá experimentar con diferentes combinaciones de
columnas y ver cómo se distribuyen en la grilla. Recuerda
incluir los enlaces a los estilos de Bootstrap (CSS)y los
scripts (JS) correspondientes en el encabezado y el pie de
página del documento HTML para que funcione
correctamente.
*Atención: los colores de fondo de cada div fueron asignados

con un archivo CSS linkeado.
Ejemplo:
.div1{
background-color: red;
}
Resultado
En este ejemplo, cada div tiene una clase de columna específica, como .col-4, .col-6, .col-8, etc., para
definir el ancho de la columna según la grilla de 12 columnas de Bootstrap. Puedes ajustar los colores y
los contenidos de los divs según tus preferencias.
Desarrollo Web I
Clase : Bootstrap: Mobile
Bootstrap Mobile
Ya sabemos que Bootstrap se maneja con una estructura de
contenedores, filas y columnas. También sabemos que las filas pueden
aceptar 12 columnas y que cada columna ocupa un espacio proporcional
al total de columnas:
También aprendimos que Bootstrap maneja una serie de prefijos que nos
permite lograr que las columnas no siempre ocupen el espacio de
manera proporcional, sino que ocupen el espacio de la forma en que
nosotros queramos. Siempre nos teníamos que basar en un total de 12
columnas.
Utilizando este prefijo nos daba resultados como los siguientes:
Bootstrap Responsive
Si bien lo que aprendimos son las bases para desarrollar layouts de manera
mucho más rápida, Bootstrap nos provee de nuevos prefijos para poder
lograr que nuestro sitio se adapte a cualquier dispositivo.
Los prefijos son:
sm md lg xl xxl
Cada prefijo le corresponde una medida de pantalla:
Breakpoint Prefijo Dimensión pantalla
X-Small None <576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px
Extra extra large xxl ≥1400px
¿Y qué quiere decir esto?

Utilizando prefijos
Si volvemos sobre el prefijo que ya conocíamos:
Podemos recordar que lo usábamos para

establecer cuánto queremos que ocupe una
columna
Estos nuevos prefijos funcionan igual, solo que se “activan” o
“funcionan” cuando se cumple la condición de tamaño de pantalla
que menciona en la tabla, es decir:
Si se quiere que una columna mida solamente 2 espacios (2 de un

total de 12) solamente en pantallas mayores o iguales a 768, lo
que hago es usar el prefijo .col-md-2
.col-md-2 funcionará solo para pantallas mayores o iguales a 768px.

Si quiero que una columna mida 4 espacios solamente en
pantallas mayores o iguales a 1400px, lo que hago es usar el
prefijo .col-xxl-2
.col-xxl-4 funcionará solo para pantallas mayores o iguales a 1400px.
En este ejemplo lo que vemos son 3 tamaños de pantallas distintos y cuatro
comportamientos distintos de columnas:
1) En mobile se ve una columna debajo de otra. Para que se vea una debajo de la
otra, tienen que ocupar el 100% del espacio, y para eso le damos un espacio de
12, que es el total de las columnas.
2) En pantallas mayores a 768, dos columnas arriba y dos columnas abajo. Para
que haya dos columnas arriba y dos columnas abajo,
3) En pantallas mayores a 1200, todas las columnas una al lado de otra
En el código se ve algo así:
Analicemos la estructura de las clases asignadas:
Y en la pantalla se ve así:
Pensemoslo distinto.
Esto lo podemos pensar desde otro enfoque. Hagamos preguntas:
1) ¿Cómo quiero que sea el layout en mobile?
¿Quiero que una columna vaya debajo de otra?
¿Quiero que haya dos columnas debajo de dos columnas?
2) En relación con la respuesta que elegimos, utilizamos el prefijo col-*, e indicamos el
número de columnas que queremos que ocupe dicho elemento.
¿Cómo quiero que sea el layout en pantallas mayores o iguales a 768px?
¿Quiero que haya dos columnas debajo de otras dos?
¿Quiero que todas las columnas se vean una al lado de la otra?
En relación con la respuesta que elegimos, utilizamos el prefijo col-md-*, por ejemplo
col-md-6, o col-md-4, etc.
Y estas preguntas las hacemos con todas los cambios que necesitemos en los
distintos tamaños de pantalla.

Desarrollo Web 1 - Aprende Programando

Cargado por

Copyright:

Formatos disponibles

Desarrollo Web 1 - Aprende Programando

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Desarrollo Web 1 - Aprende Programando

Cargado por

Copyright:

Formatos disponibles

Desarrollo Web

¿Cómo funcionan? ¿Cómo se ven?

Imagen sin transparencia .jpg, .jpeg

En este curso crearemos archivos .html y .css

>> Link de descarga de VS Code <<

Mithril Emmet Live Server. Spanish Language Pack

2) Al hacerle un clic te abrirá un buscado en

3) Debes seleccionar el primero que

2) Al hacerle un clic te abrirá un buscado en

3) Debes seleccionar el primero que aparezca

2) Al hacerle un clic se abrirá un

3) Debes seleccionar el primero

Como mencionamos antes, un sitio web está

● El nombre tiene que terminar en .html

En otras palabras, es el esqueleto de nuestro sitio web.

¿ Y cómo hago todo esto?

Volvamos al inicio de nuestro archivo

Llegó el momento de incorporar los elementos visibles para el usuario.

<a href="#" target="_blank">Esto es un link</a>

src (source o fuente) se completa con la dirección de imágen ruta de su ubicación,

Para conocer un poco más sobre su uso, te invitamos a

Este sitio es una propuesta para que conozcas otra alternativa

● ¿Hay alguna problemática de la vida cotidiana que te llame la atención?

Presentar un proyecto ﬁnal de un maquetado web e-commerce que tenga la

Algunos ejemplos de etiquetas de línea son:

Las características mencionadas anteriormente serán retomadas más adelante cuando se

No te pierdas esta increíble oferta en herramientas de plomería.

En este ejemplo, "https://" es el protocolo utilizado para la comunicación, "www.ejemplo.com"

Si queremos cambiar el color de texto de

Si queremos agregar un borde a todos los

Si queremos ponerle un color de fondo al

Vamos a ver estas diferentes formas de implementar CSS con ejemplos.

Este método no es recomendado.

Este método si es recomendado.

Al tratarse de un archivo externo, en este caso un

➢ Utilizando el atajo Alt+Z se

● el color de texto y de fondo

Ahora, ¡a sumar clases!

Monospace: tal como indica su nombre, es

Paso 1) Ingresamos a https://boxicons.com/ y modiﬁcamos el idioma de la página al español

El código que debemos copiar es el de “Fuente”, NO el de “componente web”.

Por ejemplo, si aplicamos un color gris a un parrafo,

● Selectores de ID: Los selectores de ID tienen la mayor especiﬁcidad y se representan con

E margen es el espacio que podemos darle del borde hacia afuera

Escritura individual Escritura abreviada Escritura abreviada en pares

Escritura individual Escritura abreviada Escritura abreviada en pares

¿Qué pasa si agrego bordes?

Si agregamos bordes de 10px en todo su

Si agregamos padding de 20px en todo

Podemos ver que hay sitios “contenidos”

Los div azules tienen position:absolut; es

Alguno ejemplos pueden ser la barra de

justify-content:start; justify-content: space-between;

justify-content:end; justify-content: space-around;

justify-content:center; justify-content: space-evenly;

Equipo Desktop Equipo Mobile First

Esta media query se lee:

Esta media query se lee:

{} @media (max-width:992px) {} @media (max-width: 768px){}