Módulo 1 | Introducción al

pensamiento computacional y a la
creación de páginas web
Introducción
UNIDAD 1 DE 12
En este módulo definiremos el pensamiento computacional y su relación con la creación de
páginas web. Daremos los primeros pasos en HTML, lo que nos permitirá crear nuestra primer
página web básica.

Objetivos
UNIDAD 2 DE 12
Al finalizar este módulo serás capaz de:
1. Conocer qué es el pensamiento computacional.
2. Identificar los elementos básicos del lenguaje de marcado HTML.
3. Crear una página web básica.

1. Introducción al pensamiento
computacional y su relación con la
creación de páginas web.
UNIDAD 3 DE 12
El pensamiento computacional es una habilidad fundamental en la resolución de problemas y en
la toma de decisiones. Se basa en la utilización de los principios y técnicas empleados en la ciencia de
la computación para analizar y resolver problemas de manera eficiente y efectiva. Implica el
desarrollo de diferentes habilidades. En la creación de páginas web, el pensamiento computacional es
esencial para el diseño y desarrollo de sitios web efectivos.
Esto incluye la comprensión de cómo funcionan las computadoras y cómo se comunican a través de la

web, así como la capacidad de escribir código para crear y mantener sitios web.

 Pensamiento computacional:
  Persistencia a trabajar con problemas difíciles.
 Confianza al trabajar con la complejidad.
 Capacidad para comunicarse y trabajar con otros para lograr una meta en común.
 Capacidad para lidiar con problemas abiertos y cerrados.
 Tolerancia a la ambigüedad.

Características del pensamiento computacional:

En la creación de páginas web, el pensamiento computacional es esencial para el diseño y desarrollo

de sitios web efectivos. Esto incluye la comprensión de cómo funcionan las computadoras y cómo se
comunican a través de la web, así como la capacidad de escribir código para crear y mantener sitios
web.

Para comenzar a aplicar el pensamiento computacional en la creación de páginas

web, es importante tener en cuenta los siguientes conceptos.
ABSTRACCIÓN: Este concepto se refiere a la capacidad de descomponer un problema en
partes más pequeñas y manejables, para poder comprenderlo y resolverlo de manera más
efectiva. En la creación de páginas web, esto podría incluir la descomposición de un sitio web
en sus componentes, como el diseño, la funcionalidad y el contenido.
ALGORITMOS: Los algoritmos son una serie de pasos o instrucciones que se utilizan para
resolver un problema. En la creación de páginas web, esto podría incluir la creación de un
algoritmo para determinar el orden en que se cargan los elementos en una página web, o la
creación de un algoritmo para buscar contenido en un sitio web.
LÓGICA: La lógica se refiere a la capacidad de aplicar la razón y el pensamiento crítico para
resolver problemas. En la creación de páginas web, esto podría incluir la capacidad de pensar
de manera crítica sobre cómo se presenta el contenido en una página web, o la capacidad de
encontrar soluciones creativas a problemas técnicos.

2.1 ¿Qué lenguajes intervienen en la

creación de una web?
UNIDAD 4 DE 12
El lenguaje de programación es un conjunto de reglas, símbolos, y normas de sintaxis, que se
aplican para desarrollar programas.
Un lenguaje de programación es un lenguaje formal (o artificial, es decir, un lenguaje con reglas
gramaticales bien definidas) que le proporciona a una persona, en este caso el programador, la capacidad de
escribir (o programar) una serie de instrucciones o secuencias de órdenes en forma de algoritmos con el fin
de controlar el comportamiento físico o lógico de un sistema informático, de manera que se puedan obtener
diversas clases de datos o ejecutar determinadas tareas.
Ahora bien, el front-end (interfaz gráfica para que el usuario pueda ver e interactuar con
el programa) de una web está compuesta por elementos realizados en tres lenguajes:
HTML: Es un lenguaje de marcado y no uno de programación, pues
no tiene temas de lógica.
CSS: Es el mejor compañero de HTML, pues es el que se encarga de
agregar un estilo a lo que escribimos con el anterior lenguaje.
JAVSCRIPT: Es el mejor compañero de HTML, pues es el que se
encarga de agregar un estilo a lo que escribimos con el anterior
lenguaje.

2.2 HTML
UNIDAD 5 DE 12lenguaje?
HTML es el lenguaje de marcado utilizado para crear páginas web y se compone de diferentes elementos y

etiquetas que definen la estructura y el contenido de una página web.

Un lenguaje de marcado o lenguaje de marcas es una forma de codificar un documento que, junto con el

texto, incorpora etiquetas o marcas que contienen información adicional acerca de la estructura del texto o

su presentación

Veamos algunos conceptos básicos de HTML y su estructura:

Etiquetas HTML
–
Las etiquetas HTML son elementos que se utilizan para definir la estructura y el contenido de una
página web. Cada etiqueta se define mediante corchetes angulares "<" y ">". Por ejemplo, la
etiqueta "<p>" se utiliza para definir un párrafo y "</p>" se utiliza para cerrar el párrafo.
Atributos HTML
–
Los atributos HTML se utilizan para proporcionar información adicional sobre las etiquetas. Los
atributos se definen dentro de las etiquetas y se utilizan para especificar cosas como el color de
fondo de una página, el tamaño de una imagen, etc. Por ejemplo, la etiqueta "<img>" se utiliza
para insertar imágenes y el atributo "src" se utiliza para especificar la ubicación de la imagen.
Elementos HTML
–
Los elementos HTML son combinaciones de etiquetas y atributos que se utilizan para definir
diferentes partes de una página web, como el encabezado, el cuerpo y el pie de página. Algunos
ejemplos de elementos HTML incluyen "<head>", "<body>", "<title>", "<div>", "<ul>", "<li>", entre
otros.
Estructura básica de una página web
–
La estructura básica de una página web consta de dos secciones principales: el encabezado y el
cuerpo. El encabezado contiene información sobre la página, como el título y la descripción,
mientras que el cuerpo contiene el contenido real de la página.

Aquí hay un ejemplo básico de la estructura de una página web:

A continuación vemos una página web completa. Poco a poco iremos analizando cada etiqueta,
atributos y elementos hasta poder generar una nosotros mismos.
2.3 Definición de etiquetas HTML
UNIDAD 6 DE 12
Las etiquetas HTML consisten en breves instrucciones de comienzo y final, mediante las cuales se
determina la forma en la que debe aparecer en el navegador (Chrome, Firefox, Opera u otro) el texto,
así como también las imágenes y los demás elementos, en la pantalla del dispositivo (computadora,
celular, tablet, etc.).

Veremos algunas a continuación:

 <DOCTYPE> Se utiliza para indicar al navegador el tipo de documento que se va a manejar

en este caso HTML.
 <HTML> Esta etiqueta delimita el documento HTML.
 <LANG> Le indica al navegador el idioma del contenido del documento.
 <HEAD> Esta etiqueta delimita la cabecera del documento y nos permite establecer
información tal como el título del sitio, metadatos para facilitar la indexación en buscadores,
linkear hojas de estilos, etc.
 <META CHARSET> Establece el tipo de codificación del documento, determina cómo se
transmite y almacena el texto, o en otras palabras especifica la codificación de caracteres
utilizada en el documento.
 <TITLE> Establece el título que se mostrará en los motores de búsqueda.
 <META DESCRIPTION> Contiene el texto que se mostrará en los motores de búsqueda.
 <LINK> Esta etiqueta enlaza una hoja de estilos externa.
 <HREF> Define la URL donde se localiza la hoja de estilo, lo que hemos definido en CSS.
 <BODY> Delimita el cuerpo del documento y contiene todo el contenido que se mostrará en el
navegador.
 <SPAN> Se utiliza para marcar una parte de un texto <p>Mi mamá tiene ojos
color<spanstylecolorblue>azul</span>.</p>
 <HEADER> Es la cabecera de nuestra página, usualmente contiene algún título, logo,etc.
 <NAV> Permite establecer el menú de la página, y a través de enlaces nos permite navegar
entre secciones de nuestro sitio.
 <A> La etiqueta "anchor" representa un enlace o hipervínculo.
 <HEREF> Dirección URL hacia donde apunta el enlace.
 <H1>, <H2>, <H3>, <H4>, <H5>, <H6> Etiquetas "heading tags" son encabezados o títulos
definidos por niveles, siendo H1 el de mayor importancia y H6 menos importante.
 <SECTION> Define una sección de elementos que guardan relación entre ellos, texto,
imágenes, etc.
 <ARTICLE> La etiqueta article se utiliza para organizar los contenidos al interior de una
sección.
  <DIV> Permite dividir el contenido del sitio.
 <P> Contiene un párrafo de texto.
 <IMG> Inserta una imagen en el documento a través de un enlace.
 <ALT> Texto alternativo para una imagen, muy importante para que los buscadores puedan
obtener información de la imagen y por temas de accesibilidad.
 <SRC> URL o Path donde se encuentra la imagen.
 <ASIDE> Contiene información que está indirectamente relacionada con el contenido del
documento, podrían ser banners de anuncios, citas o enlaces externos.
 <FOOTER> Pie de página de nuestro sitio web.

2.4 Listas
UNIDAD 7 DE 12
Si en mi página web quiero que se vea una lista de elementos, tengo dos tipos básicos para
utilizar.
La lista ordenada: muestra elementos en un formato numerado donde el orden de los elementos importa.
La lista desordenada: muestra los elementos en un formato con viñetas donde el orden de los elementos no
importa.

2.5 ¿Qué son los atributos HTML?

UNIDAD 8 DE 12
Los atributos HTML son información adicional sobre las etiquetas html que cambian la forma en
que el elemento se comporta o se muestra.
Los atributos se especifican directamente después del nombre de apertura de la etiqueta, dentro de los dos
corchetes angulares.
<a href="[Link] nuestra web</a>
En este caso el atributo es href="[Link]
¿Para qué sirven los atributos de datos?
El atributo de datos le permite asignar datos personalizados a un elemento para almacenar más información
o datos cuando no existe ningún elemento o atributo HTML5 adecuado.
ALT: El atributo alt acompaña a la etiqueta <img> y especifica un texto alternativo para una imagen,
si la imagen por algún motivo no se puede mostrar. Esto puede deberse a una conexión lenta, a un
error en el atributo src, o si el usuario usa un lector de pantalla. No es obligatorio, pero es deseable, ya
que permite que la web sea accesible, posible de comprender para ciegos o disminuidos visuales.
Atributos globales:
Existen atributos que pueden ser utilizados en todos los elementos. Veamos los dos más utilizados.

ID
–
Le brinda una identificación ÚNICA a un elemento. Esto nos va a permitir manipularlo desde los
otros lenguajes, como CSS y Javascript.
<h2><a id="arriba">Ir a arriba</a></h2>
CLASS
–
Especifica a que clase pertenece un elemento. Una clase es un código específico que impacta en
ese elemento. Varios elementos pueden pertenecer a la misma clase.
<p class="importante">Este es un párrafo importante. :)</p>
¿Cuál es la diferencia entre el atributo 'id' y el atributo 'class'?
La ID se usa para identificar un solo elemento. La clase se puede utilizar
para identificar más de un elemento HTML.

2.6 Elementos en línea (Inline) y en

bloque (Block)
UNIDAD 9 DE 12
Cada elemento de HTML tiene una forma de mostrarse por defecto en la pantalla del navegador.
Esto significa unos que ocuparán todo el ancho de la página disponible y siempre comienzan
desde una nueva línea (Bloque) y otros ocupan sólo el espacio que necesitan de acuerdo al
contenido y no comienzan desde una nueva línea (Inline).
Veamos dos ejemplos:
 bullet
<p> y <DIV> son elementos del tipo block.
 bullet
<span> es del tipo Inline.

3. Creación de una página web básica

utilizando HTML
UNIDAD 10 DE 12
Ya tenemos idea de que es HTML y cómo se escribe una página web. Es momento de que
pasemos de la teoría a la acción.

Mi primer página Web

Conceptos básicos de HTML
Síntesis del módulo
UNIDAD 11 DE 12

En este módulo definimos pensamiento computacional y los

lenguajes que se necesitan para crear una página
web. Reflexionamos sobre la relación entre pensamiento
computacional y el lenguaje de marcado HTML. Es
importante realizar mucha práctica y recordar que este
capítulo presenta una introducción al mundo web,
profundizar en él puede ser un camino muy largo pero muy
satisfactorio y el comienzo de un futuro laboral.

Bibliografia
UNIDAD 12 DE 12
 Duckett, J. (2015). HTML y CSS: diseño y construcción de sitios web. Anaya
Multimedia.
 Freeman, E., Robson, E. y Bates, D. (2014). Aprendizaje efectivo con HTML y CSS:
diseño web desde cero. O'Reilly MediaMOLLOY, E. (2015). El feedback en la
educación superior. ed. Narcea. Madrid.
 Ala, JM (2006). Pensamiento Computacional. Revista de Educación en Ingeniería, 1(1),
13-23. [Link] abre en una nueva pestaña)
 Hoc, J.-M., & Sentance, S. (2019). Educación en informática en el siglo XXI: desafíos y
oportunidades de investigación en Europa (Capítulo 2: Pensamiento
computacional). Publicaciones internacionales de Springer. [Link]
3-319-98390-5_2

Módulo 2 | Diseño web básico con CSS

Introducción
 UNIDAD 1 DE 13
En este módulo conoceremos CSS , hojas de estilo de cascada, un lenguaje de diseño gráfico
para definir y crear la presentación de un documento estructurado realizado en HTML . Esto nos
permitirá profundizar en el conocimiento de HTML y avanzar en crear una página web con estilo.

Objetivos
UNIDAD 2 DE 13
Al finalizar este módulo serás capaz de:
 Aplicar una hoja de estilo a una página HTML.
 Identificar los elementos básicos de las hojas de estilo.
 Usar Replit para crear un proyecto que involucre HTML y CSS.

[Link]ón a CSS y su papel en el

diseño web
UNIDAD 3 DE 13
El lenguaje HTML está limitado a la hora de dar forma a un documento. Es excelente para
especificar el contenido que debe tener una página web, pero no permite definir cómo ese
documento se debe presentar al usuario.
 CSS (Cascading Style Sheets) es un lenguaje de diseño utilizado para definir la apariencia y el estilo de un
sitio web. La introducción a CSS comienza con la comprensión de cómo funciona la estructura de una
página web y cómo HTML (HyperText Markup Language) se utiliza para crear el contenido de una
página. Una vez que se tiene una comprensión básica de HTML, se puede comenzar a usar CSS para
controlar la apariencia de la página.
 CSS se utiliza para definir estilos, como el color, la fuente, el tamaño y el posicionamiento de los elementos
HTML. Se puede aplicar CSS a todo el sitio web, oa elementos individuales de la página, como títulos,
párrafos, imágenes y formularios.
 El papel de CSS en el diseño web es esencial. Permite a los diseñadores y desarrolladores tener un mayor
control sobre la apariencia de una página web, lo que les permite crear sitios web atractivos y fáciles de
usar. Además, separar la presentación (estilo) del contenido (HTML) permite una mayor
flexibilidad en el diseño y facilita el mantenimiento de un sitio web.

✅ Veamos para que sirve CSS y sus ventajas.

HTML Y CSS
¿Para qué sirve CSS?

CSS sirve para crear formatos específicos para una página WEB.

Se crean reglas para determinar de que modo se va a ver en la página, cómo

se verá la información el estilo de fuente, colores, tamaños. Estos datos
estarán separados de la información propiamente dicha que se leerá en la
página WEB.

Con HTML y Javascript se podrán crear espacios para que los usuarios interactúan, ya sea contactando a los
responsables del sitio, comprar en linea, y si se tratase de una página que ofrece productos para la compra.
CSS le dará el diseño a estos espacios.

Ventajas
 El lenguaje CSS tiene la ventaja de ser sencillo, lo que implica codificar mucho menos y de
que haya menos errores, así como una mayor velocidad de carga y facilidad de lectura.
Ventajas
 Sabemos la importancia de los elementos visuales para comunicar un mensaje. La presentación
de los datos de una empresa y la usabilidad de la plataforma son factores fundamentales para
atraer visitantes a tu sitio y retener su atención en el contenido que presentas.
 La usabilidad estará dada por HTML y Javascript, la presentación por CSS

CON CSS SIN CSS

CSS Zen Garden es una página que presenta cientos de diseños CSS

2. Creación de hojas de estilo CSS

básicas para dar estilo a una página
web
UNIDAD 4 DE 13
La vinculación de CSS en HTML es posible con hojas de estilo internas o externas . Con las hojas de
estilo internas, las instrucciones CSS se encuentran dentro del documento HTML. Así, puedes integrar CSS
al principio del archivo HTML o colocarlo en el código fuente.
Con este método, una buena comprensión básica de HTML y su sintaxis es una ventaja. La forma más
común y limpia de desarrollar páginas web es utilizar hojas de estilo CSS externas. El CSS se integra
enlazando el documento HTML con un archivo CSS externo.
Hay tres metodos posibles:
1. Estilo inline , es decir, directamente en el código fuente.
2. Al principio del documento HTML.
3. Externalizado en un archivo CSS externo.
2.1 Incluir CSS: estilo en línea
UNIDAD 5 DE 13
Con este método, las instrucciones de diseño se integran directamente en el código fuente
mediante una etiqueta de estilo.
Las propiedades deseadas sólo se asignan a un elemento, de modo que es posible realizar diseños diferentes
en todo el documento HTML. En el ejemplo, el encabezamiento <H1> debe aparecer en azul y con un
tamaño de letra de 14. Sólo este <H1> tendrá este estilo, si en el mismo HTML tengo otros encabezados
<H1>, no heredarán el mismo.
<h1 style= "color:azul; tamaño de fuente:14px;">
Esto es un encabezado</h1>
Con este tipo de integración, se pierden muchas de las ventajas de
CSS. Entre ellas, la posibilidad de definir un único comando que luego se
aplica, por ejemplo, a todos los elementos <H1> del documento HTML. En
algunas circunstancias, también hay un mayor esfuerzo de mantenimiento,
porque se requiere la intervención directa en el código HTML.

2.2 Añadir CSS al principio del HTML

UNIDAD 6 DE 13
dis

En este caso, se incluye el CSS en la

cabecera (<HEAD>) del documento
HTML. La etiqueta de estilo se convierte
así en parte del elemento de cabecera y se
aplica a todo el archivo. Las instrucciones
de diseño están contenidas en el
documento, pero están separadas del
código HTML. , pero están separadas del código HTML.
Veamos cómo sería si quiero aplicar el mismo estilo que en el
ejemplo anterior pero a todos los <H1>
2.3 Integrar el CSS con un archivo
externo
UNIDAD 7 DE 13
Este es, posiblemente, el mejor método para enlazar CSS en HTML.
Un sitio web suele contener muchas páginas, por lo que tiene sentido guardar las instrucciones de diseño en
un archivo separado. Esto permite una separacion entre el contenido y el diseño y facilita el
mantenimiento. El archivo exportado está simplemente vinculado al documento HTML.
Se guarda la hoja de estilos externa con la extensión .css y luego se utiliza una etiqueta de enlace para
incluirla en el archivo HTML.
En el siguiente ejemplo, el archivo CSS se llama [Link].
El atributo rel define el tipo de relación lógica y href hace referencia al archivo CSS que se va a

incrustar. La hoja de estilos externa no contiene ninguna etiqueta HTML, solo el selector respectivo y los

corchetes con las instrucciones, como en el siguiente ejemplo:

2.4 Estructura
UNIDAD 8 DE 13
Esta estructura es una regla , y tiene los siguientes elementos:
💭 Veamos la definición de cada uno de los elementos...
Selector
–
El elemento HTML en el que comienza la regla. Esta selecciona el(los) elemento(s) a dar estilo
(en este caso, los elementos <p> ). Para dar estilo a un elemento diferente, solo cambia el
selector.
declaración
–
Una sola regla como color: rojo ; especifica a cual de las propiedades del elemento querés dar
estilo.
Propiedades
–
Maneras en las cuales puedes dar estilo a un elemento HTML. (En este caso, color es una
propiedad del elemento <p> ). En CSS, seleccionas qué propiedad quieres afectar en tu regla.
valor de la propiedad
–
A la derecha de la propiedad, después de los dos puntos (:), está el valor de la propiedad, para
elegir una de las muchas posibles apariencias para una propiedad determinada (hay muchos
valores para color además de red ) .
Nota las otras partes importantes de la sintaxis:
 Cada una de las reglas (aparte del selector) deben estar encapsuladas entre llaves ( { } ).
 Dentro de cada declaración, debe usar los dos puntos ( : ) para separar la propiedad de su valor.

 Dentro de cada regla, debe usar el punto y coma ( ; ) para separar una declaración de la
siguiente.
 De este modo para
modificar varios valores de
propiedad a la vez, solo
necesita escribirlos
separados por punto y
coma (;), así:

También se pueden
seleccionar varios elementos y
aplicar una sola regla a
todos ellos. Incluye varios
selectores separados por
comas (,). Por ejemplo:

2.5 Diferentes tipos de selectores

UNIDAD 9 DE 13
Existen muchos tipos diferentes de selectores. Antes, solo vimos los selectores de elementos, los cuales
seleccionaran todos los elementos de un tipo dado en los documentos HTML. Sin embargo se pueden
hacer selecciones más específicas que esas.

💭¿Te acordás ID y CLASS? En seguida veremos cómo podemos aplicar estilo a estos
atributos:
2.6 Fuentes y texto
UNIDAD 10 DE 13
Elegir la fuente correcta tiene un gran impacto en cómo los lectores experimentan un sitio web.
La fuente correcta puede crear una identidad fuerte para una marca.
Es importante usar una fuente que sea fácil de leer . La fuente agrega valor al texto . También es
importante elegir el color y el tamaño del texto correcto para la fuente.
En CSS hay cinco familias de fuentes genéricas:
Serif
–
Tienen un pequeño trazo en los bordes de cada letra. Crean una sensación de formalidad y
elegancia.
sans-serif
–
Tienen líneas limpias (sin pequeños trazos adjuntos). Crea un aspecto moderno y minimalista.
monoespaciadas
–
Todas las letras tienen el mismo ancho fijo. Crea un aspecto mecánico.
cursiva
–
Imita la escritura humana.
De fantasia
–
Son fuentes decorativas/divertidas.
Todos los diferentes nombres de fuentes pertenecen a una de las familias de fuentes genéricas. En las
pantallas de las computadoras, las fuentes sans-serif se consideran más fáciles de leer que las fuentes
serif.
En CSS, usamos la propiedad font-family para especificar la fuente de un texto. Si el nombre de la fuente
es más de una palabra, debe estar entre comillas, como en "Times New Roman". Esta propiedad debe
contener varios nombres de fuentes como un sistema "alterno" , para garantizar la máxima
compatibilidad entre navegadores y sistemas operativos. Primero colocamos la fuente que se desea y
terminamos con una familia genérica (para permitir que el navegador elija una fuente similar en la familia
genérica, si no hay otras fuentes disponibles). Los nombres de las fuentes deben estar separados por comas.
A continuación dejamos algunos ejemplos...
H1 {
familia de fuentes: "Times New Roman", Times, serif;
}

pag {
familia tipográfica: Arial, Helvetica, sans-serif;
}

.p1 {
familia de fuentes: "Lucida Console", "Courier New", monoespaciado;
}

3. Crear una página web básica

UNIDAD 11 DE 13
El módulo anterior crea una página muy sencilla. es hora de ponerle diseño. Volveremos a
ingresar a [Link] y crearemos un nuevo Repl. Lo llamaremos miSegundoProyecto.
Allí copiaremos el código de miPrimerProyecto, y ahora le agregaremos estilo a través de CSS.
 Miremos la línea 8. Allí vemos la etiqueta de enlace:

<enlace href="[Link]" rel="hoja de estilo" type="texto/css" />

Como vimos, esta instrucción es la que le dice al HTML que utiliza el estilo que se encuentra en el
archivo [Link] que se encuentra en el mismo directorio que el HTML. En Replit, lo veremos aquí:

Agreguemos unas líneas conocidas en el archivo [Link]

pag {
color rojo;
}
Luego, presionamos el botón RUN .
¿Y qué sucede?
+

¿Por qué?
Si volvemos al HTML ([Link]) veremos que en la línea 12 tenemos la etiqueta <p></p>
<p>Esto es un párrafo</p>
Por ello se aplica el estilo color rojo a ese texto.
Vamos a hacer que nuestra página web tenga más sentido, cambiemos el texto por:
Escobar es uno de los 135 partidos de la provincia argentina de Buenos Aires. Su cabecera es la localidad
de Belén de Escobar. Situado en el borde de la zona norte del Gran Buenos Aires, parte de su extensión se
ubica dentro del mismo, y es uno de los sitios con mayor crecimiento poblacional del conurbano
bonaerense. (Wikipedia).
Y quizás un color menos llamativo, puede ser un gris (grey) y si queremos enmarcarla, podemos colocar la
propiedad border
pag {
color: gris;
borde: 2px negro sólido;
}

Cierre
UNIDAD 12 DE 13
En este módulo conocemos CSS como una manera de
poner estilo a nuestras páginas web. Existen muchas
propiedades en CSS3, las que presentamos hasta
ahora son las más básicas. Es importante profundizar
para realizar páginas web con diseños creativos y
originales. Conociendo HTML y CSS, ya podremos
realizar páginas web básicas. Nuevamente, la práctica
y la investigación nos permitirán presentar sitios web
increíbles.

Bibliografia
UNIDAD 13 DE 13
  bala
 Escuelas W3 (sf) CSS. Recuperado de: [Link] abre en una
nueva pestaña)
 Duckett, J. (2012). Diseño web con HTML, CSS y JavaScript. Anaya Multimedia.
 Meyer, EA (2019). CSS Grid Layout: Diseño web responsive y móvil. Anaya Multimedia.
 Weyl, E. (2013). CSS avanzado. Anaya Multimedia.
 Gauchat, JD (2015). CSS3: Desarrollo web profesional. Marcombo.

Módulo 3 | Diseño web avanzado con

CSS
Introducción
UNIDAD 1 DE 11
En este módulo profundizaremos en la utilización de estilos con CSS. Y veremos diferentes
consideraciones estéticas que debemos tener en cuenta: nos introducimos en el diseño propiamente
dicho.

Objetivos
UNIDAD 2 DE 11
Al finalizar este módulo serás capaz de:
 Crear hojas de estilo CSS avanzadas.
 Elegir colores y tipografías para tu sitio web.
 Conocer diferentes herramientas que nos ayudan a crear nuestra página web.

1. Avanzamos un poco más con CSS y

HTML
UNIDAD 3 DE 11
Vamos a agregar algunas características más de las que vimos la semana pasada a nuestra
página Web:
Borde y margen a una imagen
html
<img src="[Link]" alt="Descripción de la imagen">
CSS
imagen {
borde: 1px negro sólido;
margen: 10px;
}
Cambiar el color de fondo de una seccion
html
<sección>
<h2>Esta es una sección</h2>
<p>Este es un párrafo dentro de la sección.</p>
</sección>
CSS
sección {
 color de fondo: gris claro;
}

Establecer un ancho máximo para un elemento de formulario

html
<label for="nombre">Nombre:</label>
<tipo de entrada="texto" id="nombre" name="nombre">
CSS
#nombre {
ancho máximo: 300px;
}

Cambiar el color y el estilo del borde de un boton

html
<button>Este es un boton</button>
CSS
botón {
borde-color: rojo;
estilo de borde: discontinuo;
}
Establecer el ancho y la altura de una caja de div
html
<div>Este es un div.</div>
CSS
división {
ancho: 200px;
altura: 100px;
}

2. Uso de selectores avanzados

UNIDAD 4 DE 11

¿Para qué sirven los selectores avanzados?

En CSS los selectores se utilizan para delimitar los elementos HTML de nuestra página web a
los que queremos aplicar estilo. Hay una amplia variedad de selectores CSS, lo que permite una
gran precisión a la hora de seleccionar elementos a los que aplicar estilo.
Un selector CSS es la primera parte de una regla CSS. Es un patrón de elementos y otros términos que
indican al navegador qué elementos HTML se seleccionan para aplicarles una regla que incluye los valores
de las propiedades CSS. El elemento o los elementos seleccionados por el selector se denominan sujeto del
selector.
h1 { color: azul; color de fondo: amarillo; }
pag {color: rojo; }
Ya vimos que si más de un elemento utiliza el mismo CSS, se pueden combinar los selectores en
una lista de selectores para que la regla se aplique a cada uno de los selectores individuales. Por
ejemplo, si tengo el mismo CSS para un h1 y para una clase .special , los puedo escribir como dos
reglas separadas como veremos a continuación.
h1 { color: azul; } .special { color: azul; }
También los podrían combinar en una lista de selectores, separándolos con una coma.
h1, .special { color: azul; }
Es posible dejar un espacio en blanco tanto antes como después de la coma. Incluso puede resultar

más legible si cada selector se encuentra en una línea distinta.

h1, .special { color: azul; }

En el ejemplo siguiente, intente combinar los dos selectores de modo que tengan la misma
declaración. El aspecto visual debe permanecer igual tras la combinación.

palmo { color de fondo: amarillo; } fuerte

{ color: violeta rebeca; } em { color:
violeta rebeca; }
2.1 Tipos de selectores
UNIDAD 5 DE 11
A continuación se presentan diferentes tipos de selectores:
A. Selectores de atributos
Este grupo de selectores te proporciona diferentes formas de seleccionar elementos según
la presencia de un atributo determinado en un elemento:
un título] { }
O hacer incluso una selección basada en la presencia de un atributo que tiene un valor particular asignado:
a[href="[Link] { }
B. Las pseudoclases y los pseudoelementos
La clase anterior nombramos al selector de pseudoclases. Vamos a profundizar un poco más. Estos

selectores aplican estilo a ciertos estados de un elemento. La pseudoclase :hover , por ejemplo,

selecciona un elemento solo cuando se le pasa el ratón por encima.

a: flotar {}
También incluye pseudo elementos, que seleccionan una parte determinada de un elemento en vez del
elemento en sí. Por ejemplo, ::first-line siempre selecciona la primera línea del texto que se encuentra dentro
de un elemento (<p>, en el ejemplo siguiente), y actúa como si un elemento <span> hubiera delimitado la
primera línea, seleccionado y aplicado estilo.
p::primera línea { }
C. Combinadores
El último grupo de selectores combina otros selectores con el fin de delimitar elementos de nuestros
documentos. El ejemplo siguiente selecciona los párrafos que son hijos directos del
elemento <article> utilizando el operador de combinación hijo (>):
artículo > p { }
D. Tabla de referencia de selectores
Agreguemos algunos selectores a la tabla que trabajaron la semana anterior, con los enlaces respectivos a
tutoriales de Mozilla.
Selector ejemplo Tutorial de aprendizaje de CSS
Selector de tipo(se abre en una nueva Los tipos de selectores(se abre en un
h1 { }
pestaña) nueva pestaña)
Selector universal(se abre en una Selector universal(se abre en una
*{}
nueva pestaña) nueva pestaña)
Selector de clase(se abre en una nueva Los selectores de clase(se abre en un
.caja { }
pestaña) nueva pestaña)
Selector de ID(se abre en una nueva Los selectores de ID(se abre en una
#único { }
pestaña) nueva pestaña)
Selector de atributos(se abre en una Los selectores de atributo(se abre en
un título] { }
nueva pestaña) una nueva pestaña)
pseudoclasa(se abre en una nueva Las pseudoclases(se abre en una nuev
p: primer hijo { }
pestaña) pestaña)
pseudoelemento(se abre en una nueva Los pseudoelementos(se abre en una
p::primera línea { }
pestaña) nueva pestaña)
Operadores de combinación Operadores de combinación
descendentes(se abre en una nueva artículo p descendentes(se abre en una nueva
pestaña) pestaña)
Operador de combinacion de Operadores de combinacion de
elementos hijo(se abre en una nueva articulo > pag elementos hijo(se abre en una nueva
pestaña) pestaña)
Operador de combinacion de
hermanos adictivos(se abre en una
elementos hermanos adictivos(se abre h1 + p
nueva pestaña)
en una nueva pestaña)
Operador de combinacion general de h1 ~ pag hermanos generales(se abre en una
 Selector ejemplo Tutorial de aprendizaje de CSS
elementos hermanos(se abre en una
nueva pestaña)
nueva pestaña)

3. Codigos de colores
UNIDAD 6 DE 11

¿Sabías que papel juegan los colores en tu sitio web?

Tu sitio web es la carta de presentación de tu negocio o de lo que quieras comunicar. Darle color a tu
sitio web es muy importante, ya que impacta en la experiencia del usuario. debe provocar emociones,
establecer un ambiente adecuado y hacer que tu diseño en general sea más coherente y cohesivo.
Todos los días vemos diferentes colores, y desde tiempos antiguos los hemos clasificado: colores primarios,
secundarios, entre otros. Amarillo, azul y rojo se encuentran dentro de estos colores primarios. Además, hay
cientos de tonos diversos que también tienen su propio nombre: el rosa, por ejemplo, cuenta con diferentes
tonalidades como neón, fucsia, magenta, chicle, entre otros.
No obstante, lo que para alguien es de un modo para otra persona puede ser algo completamente

diferente. Por ejemplo, cuando algunas personas piensan en turquesa aseguran que provienen de un

tono azul y otras del verde. Lo mismo pasa con el rosa neón y el fucsia. Los colores HTML ayudan a

evitar este tipo de imprecisiones a la hora de diseñar un sitio web en HTML.

Si tu IDE (el editor donde estás escribiendo tu código) no tiene la posibilidad de que selecciones los colores
de manera visual, podrías utilizar páginas como la siguiente para elegir los mejores colores para tu web.
[Link] abre en una nueva pestaña)
En el ejemplo que vemos a continuación a vemos que bajo el atributo color: tenemos código hexadecimal
(aquél que comienza con #). Debemos saber que HTML reconoce 140 nombres de colores en inglés (por
ejemplo, rojo, azul, etc.) por lo que los colores más simples podemos escribirlos directamente, como la
semana pasada.
[Link]

3.1 Cuestiones a tener en cuenta para

trabajar con colores
UNIDAD 7 DE 11
Al momento de diseñar un sitio se debe contemplar la mejor combinación de colores, para ellos
podemos acceder a herramientas con las que podemos analizar los colores a utilizar, para que estén en
armonía y no produzcan efectos no deseados
A. Colores degradados
Si querés utilizar colores degradados, en esta web tendrás los códigos CSS a utilizar.
[Link] abre en una nueva pestaña)

B. Paleta cromática para el sitio web

Si queremos que los colores de nuestra web tengamos una buena paleta de colores y no
sabemos mucho de diseño, podemos dejar que esta web nos la sugiera.
[Link] abre en una nueva pestaña)
C. Paleta de colores a partir de la tonalidad de una imagen
Supongamos que toda nuestra web gira alrededor de nuestro logo o de alguna imagen
significativa. Puede ser que queramos que la paleta de colores de nuestra web esté en
concordancia con ella. Podemos pedirle una sugerencia a esta web:
[Link] abre en una nueva pestaña)
(se abre en una nueva pestaña)

4. Tipografías
UNIDAD 8 DE 11

Veamos que tan importante es la tipografía que utilizamos.

Una fuente segura para web es simplemente una tipografía que es visible en la mayoría de
dispositivos, incluyendo computadoras de escritorio y móviles. Típicamente, vienen preinstalados
en cada Sistema Operativo (OS).
💭 ¿Por qué es importante tener una fuente segura?
Porque si un visitante intenta ver su sitio web y usa una fuente que no está instalada en su dispositivo , verá
una tipografía genérica tal como Arial o Times New Roman en vez de la tuya. En algunos casos, tu
contenido incluso puede volverse ilegible en ciertos dispositivos.
Por supuesto, la última situación no es deseable, ya que los usuarios normalmente no se van a quedar si no
pueden leer su sitio. Sin embargo, incluso tener que mostrar una fuente de una familia genérica puede
interrumpir el diseño de tu sitio web en general. También puede llevar a cabo inconsistencias en tu marca.
En algunos casos, usar fuentes seguras para web puede mejorar la velocidad de carga de tus páginas. Ya
que están preinstaladas en los sistemas operativos más famosos, los navegadores modernos no tienen que
descargarlas de tu servidor mientras que están leyendo tu sitio. Esto puede mejorar tanto UX como SEO.
💭Te dejamos algunos tips...

Siempre se aconseja variar el tamaño de una misma fuente y no utilizar

diferentes tipografías en un mismo sitio.
La semana pasada nombramos las familias de fuentes seguras que manejan los navegadores. Pero
puede ser que necesites utilizar otro tipo de tipografía.
Para ello, Google ofrece una API (Una API es una pieza de código que permite a diferentes aplicaciones
comunicarse entre sí y compartir información y funcionalidades) Una API es un intermediario entre dos
sistemas, que permite que una aplicación se comunique con otra y pida datos o acciones específicas que
agregan muchísimas fuentes.

Aca te dejamos donde lo podes encontrar [Link]

Y un instructivo de como incluirlo a tu codigo HTML
[Link]

5. Más recursos
UNIDAD 9 DE 11
5. Más recursos
Hay muchísimas herramientas en la web que nos pueden ayudar en el diseño de nuestro sitio. El
siguiente video nos presenta algunos y nos brinda algunos consejos que nos pueden ayudar en el
lanzamiento de nuestra página.
[Link]

5.1 Iconos
 [Link] abre en una nueva pestaña)

5.2 Imágenes
¿Podemos utilizar cualquier imagen en nuestra página web? NO. Aprendamos sobre el
derecho de autor.

Aquí tenemos más de 2500 imágenes imágenes libres para utilizar.

[Link] abre en una nueva pestaña)

El siguiente es otro sitio con recursos de imagen, que cuenta con imágenes sin realeza que se

actualizan cada semana.

[Link] abre en una nueva pestaña)

5.3 Efectos especiales
Esta herramienta genera elementos html ondulados para hacer transiciones onduladas entre las
secciones de su sitio web, lo cual es una tendencia popular en el diseño de interfaz de usuario en estos
días. Simplemente tome los marcadores rojos y crea la curva adecuada para su sitio web. El
contenedor es de 684 x 150px. La ola llenará el 100% del ancho y alto del contenedor.
[Link] between-sections(se abre en una nueva pestaña)

5.4 Generador de sitios web

Figma es una herramienta para diseñar prototipos, esquemas de páginas, interfaces… Todo aquello
que posea una interfaz gráfica se puede diseñar desde Figma ya sean páginas web, pantallas de móvil
e incluso para relojes inteligentes.
La característica principal de Figma es que está basada en web y se accede a los proyectos mediante
un navegador. Además, permite trabajar en equipo.
[Link] abre en una nueva pestaña)
Síntesis del módulo
UNIDAD 10 DE 11
Realizar un sitio web no es sólo saber programar, hay una gama de conocimientos que hay que
conocer. Por ello, en general los sitios web tienen un equipo de trabajo donde hay especialistas
de todo tipo.
Ya podemos hacer una página estática y agregarle diseño, en las próximas semanas
interactuamos con el usuario solicitando datos, organizando el contenido en una estructura que
hoy representa un estándar.
Es momento de practicar y ante cualquier duda, consultar con el tutor.

Bibliografia
UNIDAD 11 DE 11
 Weyl, E. (2013). CSS avanzado. Anaya Multimedia.
 Gauchat, JD (2015). CSS3: Desarrollo web profesional. Marcombo.
 Rodríguez, JG (2020). La guía definitiva de HTML5 y CSS3: Todo lo necesario para
programar páginas web desde cero. Con más de 40 ejemplos prácticos y ejercicios resueltos y
explicados. Sonia Castellano de Arriba.
 Córcoles, SC, & Muñoz, AM (2020). Aprende HTML y CSS en un fin de Semana.

Módulo 4 | Creación de formularios

con HTML y CSS
ntroducción
UNIDAD 1 DE 9
La creación de formularios es una parte esencial en el desarrollo de cualquier sitio web
interactivo.
A través de los formularios, los usuarios pueden interactuar con los sitios web de múltiples maneras,
desde enviar comentarios y sugerencias hasta procesar pagos y realizar acciones de compra.
En este capítulo, hablaremos específicamente sobre cómo crear formularios en HTML y CSS. HTML
proporciona las herramientas necesarias para construir la estructura del formulario, incluyendo los
 campos de entrada y los botones de envío, mientras que CSS, como ya vimos, permite personalizar el
aspecto visual del formulario, incluyendo colores, fuentes y diseño. Juntos, HTML y CSS ofrecen una
solución completa para crear formularios atractivos y funcionales que mejoren la experiencia de
usuario en un sitio web.
En este capítulo, se explorarán paso a paso los conceptos clave necesarios
para crear formularios en HTML y CSS, incluyendo elementos de formulario
básicos, estilos para elementos de formulario y técnicas para la validación
de datos del formulario.

Objetivos
UNIDAD 2 DE 9
Al finalizar este módulo serás capaz de:
 Crear formularios con HTML.
 Comprender el objetivo de la creación de formularios HTML.
 Identificar todos los campos que pueden incluir un formulario HTML.
 Agregar diseño CSS a los formularios HTML.

1. Introducción a la creación de
formularios con HTML
UNIDAD 3 DE 9
Comenzamos con algunos conocimientos básicos:
FORMULARIOS
Los formularios son una herramienta muy útil y eficaz para recolectar información y se utiliza para
los siguientes eventos

Registro de usuarios: Un formulario de registro

permite a los usuarios crear una cuenta en un sitio
web proporcionando su información personal, como
su nombre, correo electrónico, contraseña, etc.
 Registro para asistir a un evento: Un formulario
de registro permite la inscripción para acceder a
una conferencia o espectáculo.

Se puede añadir la descarga al programa del

evento utilizando esta instrucción

Ejemplo
<a href="[Link]
target="_blank">Click here to download PDF.</a>

Contacto: U
n formulario
de contacto
permite a los
visitantes de
un sitio web
ponerse en
contacto con
el dueño del
sitio web o
con su
equipo de
soporte. Los
visitantes
pueden
proporcionar
su nombre,
correo electrónico y un mensaje con sus consultas o preguntas.
 Encuestas: Los formularios pueden ser
utilizados para recopilar información
sobre los visitantes de un sitio web o
sobre un producto o servicio específico.
Las encuestas pueden incluir preguntas
de selección múltiple, preguntas de texto
abierto o una combinación de ambas.

Comentarios: Los formularios también se pueden

utilizar para permitir que los visitantes de un sitio
web dejen comentarios sobre un artículo, un
producto o un servicio. Los visitantes pueden
proporcionar su nombre, correo electrónico y un
mensaje con sus comentarios o críticas.
 Compra de productos: Los formularios pueden
ser utilizados en tiendas en línea para que los
usuarios ingresen información como su
dirección de envío, información de pago y
detalles del producto que desean comprar.

2. Etiquetas y atributos HTML de un

formulario
UNIDAD 4 DE 9

Veamos que etiquetas normalmente

se ajustan a un Formulario HTML:
Veamos que etiquetas normalmente se ajustan a un Formulario HTML:
Etiqueta <formulario>.
Para crear un formulario en HTML, se utiliza la etiqueta <form> que se cierra
con </form> . Dentro de esta etiqueta se incluyen los diferentes campos que conforman el
formulario.
Boton de envio.
Al final del formulario se suele incluir un botón de envío que permite al usuario enviar la
información ingresada al servidor para su procesamiento.
Tipos de campo.
Existen diferentes tipos de campos que se pueden incluir en un formulario, como campos de
texto, de selección, de radio, de checkbox, etc. Cada tipo de campo se define mediante una
etiqueta HTML específica.
Veamos algunos de los tipos de campos:
Etiqueta <etiqueta>.
La etiqueta <label></label> se utiliza para asociar un texto descriptivo con un campo del
formulario. Esto permite que los usuarios comprendan mejor qué información deben ingresar en
cada campo.
Etiqueta <entrada>.
Como se ven en los ejemplos de tipos de campos la etiqueta <input> es una de las más
utilizadas en los formularios, ya que permite crear campos de texto, de selección, de radio, de
checkbox, entre otros. Cada tipo de campo se define mediante el atributo "tipo".
Algunos otros tipos:
 Correo electrónico: <tipo de entrada="correo electrónico">
 Número: <tipo de entrada="número">
 Fecha: <tipo de entrada="fecha">
 Búsqueda: <tipo de entrada=”buscar”>
 Teléfono: <tipo de entrada="tel">
 URL: <tipo de entrada=”url”>

Veamos algunos ejemplos...

BUSCAR
<label for="busqueda">Buscar:</label> <input type="search" id="busqueda" name="busqueda"
placeholder="Escribe aquí lo que quieres buscar">
Este código creará un campo de búsqueda en el que los usuarios pueden escribir lo que están
buscando. Además, incluye un texto de ayuda (marcador de posición) para indicar a los usuarios qué deben
escribir en el campo.
TELÉFONO
El elemento representa un control para editar un número de teléfono, porque los números telefónicos varían
ampliamente en el mundo. Podés usar atributos como pattern y maxlength para reducir los valores
ingresados en la caja.
<label for="telefono">Teléfono:</label> <input type="tel" id="telefono" name="telefono" placeholder="Ej:
123-456-7890" pattern="[0-9] {3}-[0-9]{3}-[0-9]{4}" longitud máxima="12">
Este código creará un campo de entrada para números de teléfono en el que los usuarios pueden escribir su
número. El atributo "patrón" especifica un patrón que debe seguir el número de teléfono (en este caso, el
patrón es ###-###-####, donde # es cualquier dígito del 0 al 9). El atributo "maxlength" limita la longitud
máxima del número de teléfono a 12 caracteres (incluyendo los guiones).

CORREO ELECTRÓNICO
El elemento representa una dirección de correo electrónico. Los saltos de línea se quitan automáticamente
del valor ingresado. Puede ingresar una dirección de correo no válida, pero el campo de ingreso sólo
funcionará si la dirección ingresada posee letras o números, una arroba "@" y por lo menos un
"." (punto). Si el atributo múltiple está agregado, se pueden ingresar muchas direcciones de correo
electrónico en ese campo <input>, como una lista separada por espacios.
<label for="correo">Correo electrónico:</label> <input type="email" id="correo" name="correo"
placeholder="Ej: usuario@[Link]">
Este código creará un campo de entrada para direcciones de correo electrónico en el que los usuarios pueden
escribir su dirección. El atributo "type" se establece en "email" para indicar que se espera una dirección de
correo electrónico. Además, se incluye un texto de ayuda (marcador de posición) para indicar a los usuarios
qué deben escribir en el campo.

UNIDAD 5 DE 9
Además de type tenemos otros atributos para los campos de un formulario. Estos definen su
comportamiento, como el tipo de dato que se espera recibir, la cantidad de caracteres que se pueden
ingresar, entre otros.
IMPORTANTE: Cada campo de un formulario debe tener un atributo
"name" que lo identifique de manera única . Esto permite que la información
ingresada por el usuario pueda ser enviada al servidor y procesada
adecuadamente.
 "REQUIRED": indica que el campo de entrada es obligatorio y no se puede enviar el
formulario sin completarlo.
 "PLACEHOLDER": proporciona un texto de ejemplo dentro del campo de entrada para
ayudar al usuario a entender qué tipo de información debe ingresar.
 "VALUE": especifica un valor predeterminado para el campo de entrada.
Cuando el usuario envía un formulario, los datos ingresados en los campos del formulario se envían a una
URL especificada en el atributo "acción" del formulario. Esta URL puede ser la dirección de un archivo
PHP, un script CGI o cualquier otro programa que pueda procesar los datos del formulario.
El atributo "método" se utiliza para especificar el método HTTP que se desconecta para enviar los datos
del formulario al servidor. Los valores posibles son "GET" y "POST" . La combinación de los atributos
"acción" y "método" determina la forma en que se obtienen los datos del formulario al servidor.
Hay muchos otros atributos que se pueden utilizar en formularios HTML, pero estos son algunos de los más
comunes.
💭Veamos algunos ejemplos:
FORMULARIO 1
<forma acción="[Link]" método="publicar">
<label for="name">Nombre:</label>
<input type="text" id="name" name="name" requerido><br>
 <etiqueta para="correo electrónico">Correo electrónico:</etiqueta>
<input type="email" id="email" name="email" requerido><br>
<label for="comentario">Comentario:</label><br>
<textarea id="comentario" nombre="comentario" filas="4" cols="50"></textarea><br>
<input type="enviar" value="Enviar">
</formulario>

Formulario 2
<formulario>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" requerido>
<br>
<input type="enviar" value="Enviar">
</formulario>

En este código, hemos creado un formulario con un campo de texto y un botón de envío. El atributo
for del elemento label debe coincidir con el atributo id del elemento input para que el texto descriptivo
esté asociado con el campo de texto. El atributo requerido del elemento input indica que el campo es
obligatorio y el usuario debe completarlo antes de enviar el formulario.
Si miramos detenidamente el ejemplo FORM 1 vemos que la etiqueta action se refiere a [Link] . esto
significa que cuando el usuario presione ENVIAR el sistema va a buscar un archivo programado
en lenguaje php submit que realice la acción, en general puede ser que grabe en alguna base datos lo
ingresado, ya que seguramente si en nuestra web solicitamos datos al usuario , queremos guardar esa
información para utilizarla después (un comentario, una compra, la entrega de un currículum, etc.).
¿Podemos trabajar con formularios si no conozco otro lenguaje?
Si. Por ejemplo, si queremos que el formulario se envíe a un correo, la acción quedaría escrita de la siguiente
manera: <form action=[Link] . Este tipo de envíos se
utilizarían para casos de formularios de contacto, de sugerencias, etc.

UNIDAD 6 DE 9
Todo lo que hemos visto hasta ahora de CSS lo podemos usar con el
formulario, por ejemplo, para el FORM 1:
html {
altura: 100%;
ancho: 100%;
}
forma {
ancho: 50%;
margen: automático;
 alineación de texto: centro;
}

etiqueta {
bloqueo de pantalla;
margen superior: 20px;
tamaño de fuente: 1,2 em;
}

entrada, área de texto{

relleno: 10px;
tamaño de fuente: 1,2 em;
borde-radio: 5px;
borde: ninguno;
caja-sombra: 0px 0px 5px gris;
}

entrada[tipo="enviar"] {
relleno: 10px 20px;
tamaño de fuente: 1,2 em;
color de fondo: #007bff;
color blanco;
borde-radio: 5px;
borde: ninguno;
caja-sombra: 0px 0px 5px gris;
cursor: puntero;
margen superior: 20px;
}
Este se vería así:

En este código CSS, hemos

definido algunos estilos
básicos para el formulario y
los elementos dentro de
él. Hemos centrado el
formulario, mantenido el
tamaño de la fuente y
agregado sombras y bordes
redondeados a los
elementos de entrada para
darles un aspecto más
atractivo.
4. Estilización de formularios con CSS
UNIDAD 7 DE 9

Trabajar con CSS permite personalizar el estilo en los formularios.

1. Repasamos cómo cambiar el estilo del botón de enviar:
Podés personalizar el aspecto del botón de enviar tu formulario con CSS. Por ejemplo, podés
cambiar el color de fondo, el color del texto, el tamaño y la forma.
entrada[tipo="enviar"] { color de fondo: #4CAF50; color blanco; relleno: 12px 20px; borde:
ninguno; borde-radio: 4px; cursor: puntero; }

2. Cambiar el estilo de los campos de entrada:

Podés personalizar el aspecto de los campos de entrada de tu formulario con CSS. Por ejemplo,
podés cambiar el color de fondo, el color del texto, el tamaño, la forma y el borde.
entrada[tipo="texto"], entrada[tipo="correo electrónico"], entrada[tipo="contraseña"], entrada[tipo="fecha"]
{ ancho: 100%; relleno: 12px 20px; margen: 8px 0; pantalla: bloque en línea; borde: 1px sólido #ccc; borde-
radio: 4px; tamaño de caja: caja de borde; }
3. Cambiar el estilo de las etiquetas de los campos:
Puedes personalizar el aspecto de las etiquetas de los campos de tu formulario con CSS. Por
ejemplo, puede cambiar el color del texto, el tamaño, la fuente y la posición.
etiqueta { tamaño de fuente: 16px; fuente-peso: negrita; margen inferior: 10px; pantalla: bloque; }

4. Cambiar el estilo de los mensajes de error:

Podés personalizar el aspecto de los mensajes de error de tu formulario con CSS. Por ejemplo,
podés cambiar el color del texto, el tamaño, la fuente y la posición.
entrada[tipo="texto"]:inválido, entrada[tipo="correo electrónico"]:inválido,
entrada[tipo="contraseña"]:inválido, entrada[tipo="fecha"]:inválido { border-color: red; }
entrada[tipo="texto"]:inválido + intervalo::antes, entrada[tipo="correo electrónico"]:inválido +
intervalo::antes, entrada[tipo="contraseña"]:inválido + intervalo::antes, entrada [type="date"]:invalid +
span::before { content: "⚠ "; color rojo; }
[Link] abre en una nueva pestaña)
Síntesis del módulo
UNIDAD 8 DE 9
Poco a poco nuestra página web va tomando forma. además de la información al usuario, ahora
podemos solicitarle datos. Todavía debemos completar con lenguaje javascript para sumar
interactividad. En las próximas semanas trabajaremos sobre esto.
¡No te olvides de consultar con el tutor cualquier duda! Hemos incorporado
muchos conceptos en poco tiempo. La clave: probar, equivocarse y
consultar.

Bibliografia
UNIDAD 9 DE 9
 Formularios en HTML5 - Aprende desarrollo web | MDN. (2022, 29 de
noviembre). [Link] abre en una nueva pestaña)
 Hazunaweb. (2017, 7 de marzo). Formularios HTML 1: formulario. acción, método y enctype ®
HazUnaWeb. Haz Una Web. [Link] abre
en una nueva pestaña)
 Atributos de formularios en HTML. DAWEB. Universidad de Murcia. Rafael
Barzanallana. (Dakota del Norte). [Link]
[Link]

Módulo 5 | Responsive Design y

adaptacion a diferentes positivos
Introducción
UNIDAD 1 DE 9
Esta semana exploraremos cómo crear sitios web que sean visualmente atractivos y fáciles de
usar en cualquier dispositivo, ya sea un móvil, una tableta o una computadora de escritorio.
El Responsive Design es una técnica que permite que el diseño de un sitio web se adapte

automáticamente al tamaño de la pantalla del dispositivo en el que se está mostrando.

Diseño compatible con diferentes tamaños de dispositivos.

¿Qué significa esto?

Que los elementos del sitio, como el texto, las imágenes y los botones, se reorganizan y redimensionan para

que sean legibles y fáciles de usar en pantallas más pequeñas. Además de ser importante para la experiencia

del usuario, el Responsive Design también es fundamental para el SEO (optimización para motores de

búsqueda). Los motores de búsqueda, como Google, prefieren los sitios web que son fáciles de usar en

dispositivos móviles y los clasifican más alto en los resultados de búsqueda.

Objetivos
UNIDAD 2 DE 9
Al finalizar este módulo serás capaz de:
 Crear paginas responsivas usando HTML y CSS3.
 Reconocer los requisitos necesarios para crear páginas responsivas.

1. Introducción al diseño adaptable y

responsive design
UNIDAD 3 DE 9

Introduzcámonos en el desarrollo adaptable y responsive design.

El diseño web responsivo se trata de usar HTML y CSS para cambiar el tamaño, ocultar, reducir o
ampliar automáticamente un sitio web.
Lo primero que debemos hacer para comenzar a programar una página responsive es colocar
esta meta etiqueta en el <head>
<cabeza>
<meta name="viewport" content="width=dispositivo-ancho,
escala-inicial=1.0">
</cabeza>
La parte width=device-width significa que el ancho de la página web se ajustará automáticamente al ancho
del dispositivo en el que se está visualizando.
La parte initial-scale=1.0 establece el nivel de zoom inicial cuando el navegador carga la página por primera
vez.
Cuando hablamos de VENTANA GRÁFICA (español) estamos hablando de
VIEWPORT (inglés).
Esto configura la ventana gráfica de su página, que le dará al navegador instrucciones sobre cómo

controlar las dimensiones y la escala de la página.

Fuente: w3schools
Las páginas web no deben dejar de mostrar información si el dispositivo es más pequeño, sino que

deben adaptar su contenido para que así el usuario no pierda información importante.

Fuente: w3schools
El Viewport es el área visual donde se plasma el contenido del documento HTML de tu sitio web. Se
podría traducir como vista o ventana y nos sirve para definir qué área de pantalla está disponible al
renderizar un documento, la escala/zoom que debe mostrarse inicialmente. Todo ello, con parámetros
que le damos a la propia etiqueta meta, separados por comas en caso de utilizar más de uno:
ATRIBUTO VALORES DESCRIPCION

Ancho Valor en píxeles. Ancho de la página.

Altura Valor en píxeles. Alto de la página.

ATRIBUTO VALORES DESCRIPCION

Cualquier número real de 0.1 en

adelante.
1 representa no escalable La escala / zoom inicial del sitio
escala inicial
(1.0 para no tener zoom o 2.5 para Web.
tener un zoom del 2,5 de aumento,
por ejemplo).
 ATRIBUTO VALORES DESCRIPCION

Define los permisos para que el

Escala de usuario sí No
usuario pueda o no hacer zoom.

Cualquier número real de 0.1 en Definir la escala / zoom mínimo

Escala mínima
adelante. 1 representa no escalable. que podemos hacer en la página.

Cualquier número real de 0.1 en Definir la escala / zoom máximo

Escala máxima
adelante. 1 representa no escalable. que podemos hacer en la página.

Prácticamente todos los navegadores de los celulares inteligentes al entrar a un sitio analizan el
tamaño total y lo escalan para que se muestre completo en la pantalla, este procedimiento genera
muchas veces resultados inapropiados, pero si especificamos su comportamiento en el
HTML/CSS, se comportará como deseamos.
1.1. Imágenes
Para que las imágenes sean receptivas, deben escalarse de acuerdo al tamaño de la
ventana. Para que eso suceda, debemos poner la propiedad width en CSS al 100% y así se
escalará cuando cambie el tamaño de la pantalla.
<img src="[Link]" style="ancho:100%;">
Con esto corroe el riesgo de que si se agranda mucho (más del 100%) la imagen se pixele. Para que esto no
suceda, la propiedad que debo usar es max-width . Esto significa que si pongo esta propiedad al 100%, la
imagen puede escalar, pero nunca más del 100%
<img src="[Link]" style="max-width:100%;height:auto;">
Para subsanar el tema de las definiciones, podría decidir que según con qué dispositivo (o tamaño del
navegador) se mire mi página, las imágenes que muestro son diferentes. Para ello, puedo utilizar el
elemento HTML <imagen> .
<imagen> <source srcset="imagen_chica.png" media="(max-width: 600px)"> <source
srcset="imagen_grande.png" media="(max-width: 1500px)"> <img src=" [Link]" alt="Imagen">
</imagen>
En este ejemplo, se especifican tres versiones de la misma imagen para diferentes tamaños de
pantalla. La imagen "imagen_chica.jpg" se muestra en pantallas con una resolución de máximo 600
píxeles, la imagen "[Link]" se muestra en pantallas con una resolución de máximo 1500
píxeles, y la imagen "[Link]" se desconoció como una opción predeterminada si ninguna de las
otras condiciones se cumple.
1.2 Texto
El tamaño del texto se puede configurar con una unidad "vw" , lo que significa el "ancho
de la ventana gráfica" .
De esa forma, el tamaño del texto se adaptará al tamaño de la ventana del navegador. Viewport es el tamaño
de la ventana del navegador. 1vw = 1% del ancho de la ventana gráfica . Si la ventana gráfica tiene 50 cm
de ancho, 1vw es 0,5 cm.
<h1 style="font-size:10vw">¡Hola Mundo!</h1>
Veamos otras medidas:
 vh Relativa al 1% del ancho de la ventana gráfica (viewport)
 vmin Relativa al 1% de la menor dimensión de la ventana gráfica (viewport)
 vmax Relativa al 1% de la mayor dimensión de la ventana gráfica (viewport)

2. Consultas de medios
UNIDAD 4 DE 9
¿Qué son las Media Queries?
Las consultas de medios (Media Queries) son una técnica de CSS3 que cambia la presentación de
contenido basada en diferentes tamaños de viewport. Con las consultas de medios, podemos definir
completamente diferentes estilos para diferentes tamaños de navegador. Nacen de la necesidad
de crear breakpoints o puntos de ruptura en la hoja de estilos CSS que tengas predefinida.

Veamos los tipos de medida.

 all Usado para todos los tipos de medios
 print Usado para la impresión
 screen Usado para las pantallas de computadoras, tabletas, celulares.
 Speech Usado para lectores de pantalla que leen la pantalla en voz alta.
¿Qué puedo verificar con la consulta de medios?
Entre otras, las siguientes características:
 Ancho y alto de la ventana gráfica.
 Ancho y alto del dispositivo.
 Orientación (¿horizontal o vertical?).
 Resolucion.
@media no|solo tipo_de_media y (caracteristica y|o|no característica) { Código CSS; }
Las consultas de medios se basan en un tipo de medio y si ese tipo de medio coincide con el tipo de
dispositivo en el que se muestra el documento, los estilos se aplican. Se pueden tener tantos selectores
y estilos dentro del media query como se desee. O sea que puedo decidir que el CSS de mi celular sea
totalmente diferente al que veo en la computadora.
Para ello puedo utilizar operadores lógicos, que son las palabras clave not , only, and :
La palabra clave no invierte el significado de una consulta de medios
NO
completa.
La palabra clave solo evita que los navegadores antiguos que no presentaro
SOLO consultas de medios con funciones de medios apliquen los estilos
especificados. No tiene ningún efecto en los navegadores modernos.
La palabra clave y combina una función de medios con un tipo de medio u
Y
otras funciones de medios.
Todos son opcionales. Sin embargo, si usa no solo , también debe especificar un tipo de medio.

Vamos a ver algunos ejemplos:

@media ( ancho máximo: 100px ) { /* Reglas CSS */ }
Dentro de la llave pondremos el diseño que queremos que se aplique si el ancho del dispositivo es menor o
igual a 100 píxeles.
@media ( altura mínima: 350px ) { /* Reglas CSS */ }
Esta consulta de medios devuelve el contenido de las reglas CSS cuando la altura del dispositivo es mayor o
igual a 350 píxeles.
✅ Probá este código en Replit y modificá el tamaño del navegador. ¿Qué sucede?
☝ Click para ver el codigo
–
<!DOCTYPEhtml>
<html>
<cabeza>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<estilo>
cuerpo {
color de fondo: verde claro;
}

@media solo pantalla y (ancho máximo: 600 px) {

cuerpo {
color de fondo: azul claro;
}
}
</estilo>
</cabeza>
<cuerpo>

<p>Modifica el tamaño de la ventana del navegador. Cuando el ancho sea de 600

píxeles o menos, el color del fondo es “celeste”. Si no, es “verde claro”.</p>

</cuerpo>
</html>
Las consultas de medios también se pueden usar para cambiar el diseño de una página según la
orientación del navegador. Podés programar un conjunto de propiedades CSS que sólo se utilizarán
cuando la ventana del navegador sea más ancha que su altura (orientación "Horizontal").
✅ Probá lo siguiente:
☝ Click para ver el codigo
–
<!DOCTYPEhtml>
<html>
<cabeza>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<estilo>
cuerpo {
color de fondo: verde claro;
}

@media solo pantalla y (orientación: horizontal ) {

cuerpo {
color de fondo: azul claro;
}
}
</estilo>
</cabeza>
<cuerpo>

<p>Cambia el tamaño de la ventana del navegador. Cuando el ancho de este

documento es mayor que el alto, el color de fondo es "celeste", de lo contrario, es
"verde claro".</p>

</cuerpo>
</html>
Para ser más ordenados, podemos usar una hoja de estilo para cada tipo de medio, por ejemplo:
< link rel ="hoja de estilo" media ="pantalla y (ancho mínimo: 900 px)" href ="[Link]">
< link rel ="hoja de estilo" media ="pantalla y (ancho máximo: 600 px)" href ="[Link]">
Supongamos que tenemos lo siguiente:
< link rel="hoja de estilo" media="solo pantalla y (ancho máximo: 768px)" href="[Link]">
Lo que concretamente le estamos indicando es que cargar la hoja de estilos “ [Link] ” si se cumple que el
dispositivo de salida es una pantalla, no una impresora u otro dispositivo ( solo pantalla ), y si la anchura de
la ventana del navegador tiene de máximo 768 píxeles ( max-width: 768px ).
Si se cumplen las condiciones, los estilos se muestran correctamente, en caso contrario, los estilos se

omiten por completo, y el contenido se muestra sin estilos definidos:

¡Cuidado! A pesar de que esto es correcto, cargar de esta manera las Media Queries
supone un problema, y es que cada vez que queramos cargar diferentes estilos
dependiendo de ciertas condiciones que queramos aplicar para distintos dispositivos,
tenemos que cargar una hoja de estilos nueva. Esto conlleva una carga más lenta de
tu sitio web, ya que se hacen solicitudes HTTP adicionales, que se podrían evitar.
Como vimos, hay otro sistema más recomendable para aplicar las Media Queries, incluyendo todas las
condiciones necesarias dentro de un único archivo CSS. Así, incorporaremos la construcción @media
seguido de las condiciones que queremos definir para cada tipo de dispositivo y donde se apliquen entre
llaves { } los estilos concretos para cada uno de ellos. Es la manera más recomendable, ya que la carga es de
un único archivo CSS.
2.1. impresion
Es frecuente querer poner un botón de imprimir en la página web que se está visualizando.
Generalmente, no queremos que se imprima todo lo que se ve en esa página. Por ejemplo, el pie y los

menús generalmente no son necesarios.

Existe la forma de controlar el estilo de la versión imprimible mediante CSS y el Media Query @media
print . Así podemos controlar qué elementos deben o no aparecer, su tamaño y su ubicación.
2.2. Móvil primero
Mobile First significa diseñar para dispositivos móviles antes de diseñar para computadora de
escritorio o cualquier otro dispositivo.
Esto hará que la página se muestre más rápido en dispositivos más pequeños. Para ello, en lugar de cambiar
los estilos cuando el ancho es menor a 800 px , por ejemplo, debemos cambiar el diseño cuando el ancho
es mayor a 800 px .

3. ¿Cómo sé si mi web es responsive?

UNIDAD 5 DE 9
Google nos da una herramienta que nos permite verificar nuestra web.
Here is the link to the tool [Link]
utm_source=mft&utm_medium=redirect&utm_campaign=mft-redirect&hl=es
I
En nuestro caso probamos [Link](se abre en una nueva pestaña)y este fue el resultado:
 Probá alguna de las páginas que acostumbras a utilizar. ¿Es web responsive?

4. Colores, tipografías e imágenes

UNIDAD 6 DE 9
En la semana 3 comenzamos a hablar sobre el uso de tipografías y colores.
Ahora, debemos prestar especial atención de acuerdo a los tamaños de pantalla, por eso recordemos que:
Menos es más
4.1. tipografias
Dentro de un mismo documento es ideal respetar las siguientes normas:
 Use las mismas tipografías y tamaño en los títulos.
 Use las mismas tipografías y el tamaño de los párrafos.
 Misma regla para cada parte del documento.
✏️¿Cómo destaco o resalto una palabra importante?
 Con variables tipográficas.
 Con un color distinto.
En este sitio pueden descargarse fuentes: [Link]
abre en una nueva pestaña)
4.2. Colores
Conozcamos algunas herramientas para el color:
color de adobe
–
[Link] abre en una nueva pestaña)
Colrdo
–
[Link] abre en una nueva pestaña)
Colorea a Lisa
–
[Link] abre en una nueva pestaña)
paleta
–
[Link] abre en una nueva pestaña)
4.3. Imágenes
¿Qué NO hacer con las imágenes?

Algunos bancos de imágenes

–
[Link](se abre en una nueva pestaña)
[Link](se abre en una nueva pestaña)
[Link](se abre en una nueva pestaña)
✍🏼 Herramientas para la edición
–
Estas herramientas sirven para remover el fondo de una imagen:

adobe expreso(se abre en una nueva pestaña)

Corte de imagen(se abre en una nueva pestaña)
Eliminar

Tengamos en cuenta todos estos puntos:

5. Problemas que suceden en la visión
UNIDAD 7 DE 9
Veamos correctamente pueden ser las dificultades relacionadas con la visión que debemos tener
en cuenta:
contraste
–
El contraste entre el texto y el fondo es esencial para una legibilidad
adecuada. Asegúrese de utilizar colores con suficiente contraste para que las
personas con discapacidades visuales puedan leer fácilmente el contenido. Por
ejemplo, evite combinar colores claros con colores claros o colores oscuros con
colores oscuros.

Tamaño de la fuente
–
Utilice un tamaño de fuente lo suficientemente grande para facilitar la lectura. Los
usuarios con baja visión pueden tener dificultades para leer fuentes
pequeñas. También asegúrese de que el texto sea lo suficientemente claro y nítido.

Colores
–
Evite utilizar únicamente el nombre del color para transmitir información
importante. Algunas personas pueden tener dificultades para distinguir ciertos colores,
por lo que es mejor utilizar combinación de colores y proporcionar otra forma de
diferenciar la información, como íconos o etiquetas.

Usos de etiquetas y marcadores

–
Utilice etiquetas y marcadores claros y distintivos para resaltar la información
importante. Esto ayuda a las personas con discapacidad visual a navegar y
comprender mejor la estructura y el contenido de la página.

Pruebas y ajustes
–
Realiza pruebas de accesibilidad con herramientas específicas para verificar el
contraste de colores y otras características accesibles de tu diseño. Además, solicite
 comentarios de usuarios con discapacidades visuales para identificar posibles mejoras
y ajustes.

Cierre
UNIDAD 8 DE 9

Hemos trabajado en crear páginas web que se ajustan a la dimensión de las pantallas y
que responden a las necesidades del usuario (responsive) utilizando CSS. Más adelante
veremos cómo lograr estos efectos con frameworks, por ejemplo Bootstrap.
Es muy importante que hagas pruebas y pruebes cada ejemplo. No dudes en
consultar al tutor.

Bibliografia
UNIDAD 9 DE 9
 Regla CSS @media. (Dakota del
Norte). [Link] abre en una
nueva pestaña)
 Uso de consultas de medios - CSS | MDN. (2023, 29 de
mayo). [Link]
Using_media_queries(se abre en una nueva pestaña)
 Atributos de formularios en HTML. DAWEB. Universidad de Murcia. Rafael
Barzanallana. (Dakota del
Norte). [Link]
abre en una nueva pestaña)
 Guerras, A. (13 de noviembre de 2017). Diseño responsive: ¿cómo
configurarlo correctamente? -
Aukera. Aukera. [Link]

Módulo 6 | Introducción a Javascript

Introducción
UNIDAD 1 DE 13
Esta semana incursionamos en el lenguaje de programación más utilizado hoy junto a HTML y
CSS para darle vida a la mayoría de los sitios que conocemos. Actualmente no sólo encontramos
Javascript en las páginas web, sino que también se encuentra en los servidores de la mano de
proyectos como NodeJS , React Native y otros. Además, cada día surgen nuevos marcos que
expanden sus posibilidades.

Objetivos
UNIDAD 2 DE 13
Al finalizar este módulo serás capaz de:
 Conocer las bases del lenguaje Javascript.
 Comprender su alcance.
 Identificar cómo puede interactuar con HTML y CSS.
 Usar Javascript para modificar páginas HTML.

1. Los comienzos de JS
 UNIDAD 3 DE 13

¿Por qué JavaScript? Veamos algunas razones:

¿Cómo surge Javascript?

Fue creado en 1995 por Brendan Eich, quien trabajó para Netscape Communications Corporation
en ese momento. La idea original era crear un lenguaje de programación que pudiera ser utilizado
en el navegador web Netscape Navigator.
 Inicialmente, el lenguaje se llamó Mocha y luego se renombró a LiveScript, pero finalmente se convirtió en
JavaScript. Aunque el nombre puede sugerir que está relacionado con Java, JavaScript es un lenguaje de
programación completamente independiente.
 JavaScript se convirtió rápidamente en una herramienta popular para la creación de sitios web interactivos y
dinámicos. En 1997, Netscape presentó JavaScript a la Organización de Estándares Abiertos (ECMA) para
que fuera estandarizado. El resultado fue ECMAScript, la elección oficial del lenguaje.
Sin embargo, integrado originalmente como una especie de complemento en los
navegadores, fue muy crítico por su longitud para procesar el código, lo que hacía que las
páginas tarden en cargarse. Cuando llegó Flash Player , fue pasado al olvido. Pero una
década después, recuperó su lugar.
Desde entonces, JavaScript ha evolucionado significativamente y se ha convertido en uno de los
lenguajes de programación más utilizados en todo el mundo. Es utilizado tanto en el lado del cliente
(en navegadores web) como en el lado del servidor (con [Link]), y es un pilar fundamental para la
creación de aplicaciones web modernas e interactivas. Está integrado dentro del motor de los
navegadores web.
Está basado en el lenguaje C y utiliza algunas convenciones de lenguaje y
nombre de Java .

2. Entorno de trabajo
UNIDAD 4 DE 13
 Vamos a seguir usando Replit. Lo primero que nos preguntaremos es si nos conviene utilizar la
sintaxis de JavaScript integrada en el HTML o en un archivo independiente. Esto seguro te resulta
conocido, es lo mismo que sucedió con CSS.
✏️📄Hagamos nuestro “Hola Mundo” . Creemos un nuevo archivo HTML, y ponemos lo
siguiente antes del tag </head>
<script> alert("Hola Mundo. Hola
Javascript </script> </head>
Pongámosle como nombre [Link] y ejecutemos en cualquier navegador. ¿Qué sucede?

Seguramente veremos algo similar a esto:

💭Ahora, coloquemos ese mismo código después de </body>

</body> <script>
alert("Hola Mundo. Hola Javascript"); </script>
</html>
Volvamos a ejecutar. ¿Hay algún cambio? Según el navegador que usemos, puede ser que la ventana
emergente se muestre antes o después de Nuestro primer código Javascript al cambiar el código de
lugar.
Ahora bien,
Ya hicimos nuestro primer programa con Javascript, vimos que el código JS va entre tags
<SCRIPT></SCRIPT> , que la expresión alert() genera una ventana desplegable, y que la sentencia
termina con ;
Ahora, igual que con CSS, podemos tener el código fuera de mi HTML, en un archivo que puede
llamarse [Link] (en Replit ya lo tenemos creado) y escribimos este código:

En [Link] borramos todo el código dentro del tag <script> (y también borramos el
tag) y dentro de <head> agregamos lo siguiente:
<script src=”[Link]”></script </head>
Y en <body> colocamos
<body onload=”saludo();”>
Al ejecutarlo, la página se verá así:
 Una característica de Javascript es que puedo hacer el seguimiento del código mediante la
consola.
Modifiquemos [Link]

var ejemplo="Hola Mundo. Hola Javascript"; var numero=1234; function saludo()

{ alert(ejemplo); }
En Replit, vemos que está este ícono en la Webview

Al presionarlo, se nos abre una consola con un aviso de ingreso. Si colocamos una variable (ejemplo o

número) no devolverá los valores que le asignamos en [Link]. Con esto podemos hacer seguimiento a

nuestro código.

3. Sintaxis básica de Javascript

UNIDAD 5 DE 13
¿Qué es la sintaxis?
La sintaxis de un lenguaje de programación se define como el conjunto de reglas que deben
seguirse al escribir el código fuente de los programas para preferir como correctos para ese
lenguaje de programación.
La sintaxis de JavaScript es muy similar a la de otros lenguajes de programación como Java y C y
seguramente nos recuerda a Pseint.
💭 ¿Cuáles son las reglas básicas de la sintaxis JavaScript?
No se tienen en cuenta los espacios en blanco y las líneas
nuevas.
Como sucede con Pseint, el intérprete de JavaScript ignora cualquier espacio en blanco sobrante, por lo que
el código se puede ordenar de forma adecuada para entenderlo mejor (tabulando las líneas, agregando
espacios, creando nuevas líneas, etc.).
Se distinguen las mayúsculas y minúsculas.
Si en JavaScript se intercambian mayúsculas y minúsculas, el script no funciona.
No se define el tipo de las variables.
Al crear una variable, no es necesario indicar el tipo de dato que almacenará. De esta forma, una misma
variable puede almacenar diferentes tipos de datos durante la ejecución del script.
Se pueden incluir comentarios.
Los comentarios se utilizan para agregar información en el código fuente del programa. Aunque el contenido
de los comentarios no se visualice por pantalla, si se envía al navegador del usuario junto con el resto del
script, por lo que es necesario extremar las precauciones sobre la información incluida en los comentarios.

JavaScript define dos tipos de comentarios: los de una sola línea y los que ocuparon varias
líneas.
Ejemplo de comentario de una sola línea.
–
// a continuación se muestra un mensaje
alert( "mensaje de prueba" );

Los comentarios de una sola línea se definen añadiendo dos barras oblicuas (//) al
principio de la línea.
Ejemplo de comentario de varias líneas.
–
/* Los comentarios de varias líneas son muy útiles
cuando se necesita incluir bastante información
en los comentarios */
alert( "mensaje de prueba" );

Los comentarios multilínea se definen encerrando el texto del comentario entre los
símbolos /* y */.
Es momento de recordar lo que practicamos en Pseint, ya que la sintaxis
será similar. Utilizaremos condicionales, bucles, etc. Para conocer bien la
sintaxis podemos recurrir, como siempre a [Link]

4. Programación orientada a objetos

UNIDAD 6 DE 13
Una de las aplicaciones más comunes en Javascript, al momento de programar, es la invocación
de objetos que simplifican mucho escribir código.
💭¿A qué hace referencia el término objetos?
Dentro del mundo de la programación, el concepto “objetos” hace referencia a algo similar a lo
que sucede en el mundo que nos rodea. Si miramos a nuestro alrededor, podemos ver objetos:
mesas, sillas, personas, etc. Cada uno de estos objetos tiene un comportamiento determinado.

Programación orientado a objetos Bases:

Un objeto en programación es la representación informática de un objeto físico o imaginario
puede ser simple o complejo dependiendo de sus tres propiedades:Estado - Comportamiento -
Identidad

Estado (definido por un conjunto de datos llamados atributos que almacena las características del
objeto en un determinado momento)

Identidad (se define por medio del identificador con el que se declara)
Identidad

1-Revisar
2- Diagnosticar
3- Dar indicaciones
4- Recetar

Comportamiento
 Dra. Sonia Smith
Comportamiento (está definido por sus métodos, funciones que permiten su interacción con otros
objetos y con el programa)
Vamos a ver un ejemplo, en este caso en vez de programar en el entorno de Replit se utiliza
Visual Studio Code, pero el código en una u otra IDE funcionaría igual.
[Link]

5. Javascript para Webs dinámicas

UNIDAD 7 DE 13

Javascript proporciona dinamismo e interactividad a los sitios web, pero también permite
el procesamiento y transformación de los datos enviados y recibidos.
La creación del Document Object Model o DOM es una de las innovaciones que más influyó en el
desarrollo de las páginas web dinámicas y de las aplicaciones web más complejas.
DOM permite a los programadores acceder a la web y manipular las páginas HTML como si tuvieran
documentos. DOM se ha convertido en una utilidad disponible para la mayoría de los lenguajes de
programación (Java, PHP, JavaScript) y cuyas únicas diferencias se encuentran en la forma de
implementarlo.
Una de las tareas habituales en la programación de aplicaciones web con JavaScript consiste en la
manipulación de las páginas web. De esta forma, es habitual obtener el valor almacenado por algunos
elementos (por ejemplo los elementos de un formulario), crear un elemento (párrafos, <div>, etc.) de
forma dinámica y añadirlo a la página, aplicar una animación a una elemento (que
apareció/desaparezca, que se desplace, etc.).
Todas estas tareas habituales son muy sencillas de realizar gracias a DOM. Sin embargo, para poder utilizar
las utilidades de DOM, es necesario "transformar" la página original. Una página HTML normal no es más
que una sucesión de caracteres, por lo que es un formato muy difícil de manipular. Por ello, los navegadores
web transforman automáticamente todas las páginas web en una estructura más eficiente de manipular.
Esta transformación la realizan todos los navegadores de forma automática y nos permite utilizar las
herramientas de DOM de forma muy sencilla. El motivo por el que se muestra el funcionamiento de esta
transformación interna es que condiciona el comportamiento de DOM y por tanto, la forma en la que se
manipulan las páginas.
DOM transforma todos los documentos XHTML en un conjunto de elementos llamados nodos,
que están interconectados y que representan los contenidos de las páginas web y las relaciones
entre ellos. Por su aspecto, la unión de todos los nodos se llama "árbol de nodos".
Diferencia entre HTML y XHTML
–
La principal diferencia entre HTML y XHTML es que XHTML es una versión más
estricta de HTML que sigue las reglas de XML. Esto significa que XHTML requiere que
se sigan ciertas reglas de sintaxis y estructura, como el uso de etiquetas
correctamente anidadas y cerradas, el uso de atributos en minúsculas y la definición
de todos los elementos mediante un DTD (Documento de tipo de documento).

XML significa "Extensible Markup Language" y es un lenguaje de marcado utilizado

para estructurar datos de manera legible tanto para humanos como para máquinas. Es
utilizado en la creación de documentos y aplicaciones web para organizar y etiquetar
información en un formato estructurado.

El HTML fue diseñado con un énfasis en las características de presentación de los

datos. En contraste, el XML es específico de datos; El XML no permite ningún error en
el código.
Ejemplo 1
La siguiente página XHTML sencilla:
<!DOCTYPE html PÚBLICO "-//W3C//DTD XHTML 1.0 Transicional//EN"
"[Link]
<htmlxmlns="[Link]
<cabeza>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Pagina sencilla</title>
</cabeza>
<cuerpo>
<p>Esta página es <strong>muy sencilla</strong></p>
</cuerpo>
</html>

En el esquema, cada rectángulo representa un nodo DOM y las flechas indican las relaciones entre
nodos con su contenido. La raíz del árbol de nodos de cualquier página XHTML siempre es la misma:
un nodo de tipo especial denominado "Documento".
1. 1

Con el lenguaje JavaScript podemos utilizar el modelo de programación basado en eventos. En este tipo de
programación, los scripts se dedican a esperar a que el usuario "haga algo" (que pulse una tecla, que mueva
el ratón, que cierre la ventana del navegador). A continuación, el script responde a la acción del usuario
normalmente procesando esa información y mostrando un resultado.
Los eventos hacen posible que los usuarios transmitan información a los programas. JavaScript define
numerosos eventos que permiten una interacción completa entre el usuario y las páginas/aplicaciones
web. La pulsación de una tecla constituye un evento, así como cliquear o mover el mouse, seleccionar un
elemento de un formulario, redimensionar la ventana del navegador, etc.
JavaScript permite asignar una función a cada uno de los eventos. De esta forma, cuando se produce

cualquier evento, JavaScript ejecuta su función asociada. Este tipo de funciones se denominan "event

handlers" en inglés y suelen traducirse por "manejadores de eventos".

Los eventos más utilizados:

El nombre de cada evento se construye mediante el prefijo on , seguido del nombre en inglés de
la acción asociada al evento. Así, el evento de cliquear un elemento con el mouse se
denomina onclick y el evento asociado a la acción de mover el mouse se
denomina onmousemove .
EVENTOS
🖍️Los eventos más utilizados en las aplicaciones web tradicionales
son onload para esperar a que se cargue la página por completo, los
eventos onclick, onmouseover, onmouseout para controlar el mouse y
onsubmit para controlar el envío de los formularios.
🖱️Las acciones típicas que realizan un usuario en una página web pueden
dar lugar a una sucesión de eventos. Al pulsar por ejemplo sobre un botón
de tipo <input type="submit"> se desencadenarán los eventos
onmousedown, onclick, onmouseup y onsubmit de forma consecutiva.

Un evento de JavaScript por sí mismo carece de utilidad. Para que los

eventos resulten útiles, se deben asociar funciones o código JavaScript a
cada evento. De esta forma, cuando se produce un evento se ejecuta el
código indicado, por lo que la aplicación puede responder ante cualquier
evento que se produzca durante su ejecución.
Las funciones o código JavaScript que se define para cada evento se
denominan "manejador de eventos" y como JavaScript es un lenguaje muy
flexible, existen varias formas diferentes de indicar los manejadores:
 Manejadores como atributos de los elementos HTML.
 Manejadores como funciones JavaScript externas.
 Manejadores "semánticos".
5.1 Manejadores como atributos de
los elementos HTML
UNIDAD 8 DE 13
Se trata del método más sencillo ya la vez menos profesional de indicar el código JavaScript que se
debe ejecutar cuando se produce un evento. En este caso, el código se incluye en un atributo del
propio elemento HTML. El ejemplo anterior utiliza este manejador.
<input type="button" value="Cliquéame y verás" onclick="alert('Gracias por cliquear');" />
Caso 1
En este otro ejemplo, cuando el usuario cliquea sobre el
elemento <div> se muestra un mensaje y cuando el usuario
pasa el mouse por encima, se muestra otro mensaje:
<div onclick="alert('Haz clic aquí');" onmouseover="alert('Acabas de pasar el mouse por encima');"></div>
Caso 2
Este otro ejemplo incluye una de las instrucciones más utilizadas en
las aplicaciones JavaScript más antiguas:
<body onload="alert('La página se ha cargado completamente');">
...
</cuerpo>
El mensaje anterior se muestra después de que la página se haya cargado completamente, es decir, después
de que se haya descargado su código HTML, sus imágenes y cualquier otro objeto incluido en la página.
El evento onload es uno de los más utilizados.
Caso 3
La variable ESTE
JavaScript define una variable especial llamada this que se crea automáticamente y que se emplea en
algunas técnicas avanzadas de programación. En los eventos, se puede utilizar la variable this para utilizar al
elemento XHTML que ha provocado el evento. Esta variable es muy útil para ejemplos como el siguiente:
Cuando el usuario pasa el ratón por encima del <div>, el color del borde se muestra de color negro. Cuando
el ratón sale del <div>, se vuelve a mostrar el borde con el color gris claro original.
Caso 4
Veamos un ejemplo de la variable ESTO:
Elemento <div> original:
<div id="contenidos" style="width:150px; height:60px; border:fino solid silver">
sección de contenidos...
</div>
Si no se utiliza la variable this, el código necesario para modificar el color de los bordes, sería el
siguiente:
<div id="contenidos" style="width:150px; height:60px; border:thin solid silver"
onmouseover="[Link]('contenidos').[Link]='black';" onmouseout="document
.getElementById('contenidos').[Link]='silver';">
sección de contenidos...
</div>
Caso 5
Opción más compacta:
El código anterior es demasiado largo y demasiado propenso a cometer errores. Dentro del código de un
evento, JavaScript crea automáticamente la variable this, que hace referencia al elemento XHTML que ha
provocado el evento. Así, el ejemplo anterior se puede reescribir de la siguiente manera:
<div id="contenidos" style="width:150px; height:60px; border:thin solid silver"
onmouseover="[Link]='black';" onmouseout="[Link]='plata';">
sección de contenidos...
</div>
El código anterior es mucho más compacto, más fácil de leer y de escribir y sigue funcionando
correctamente aunque se modifique el valor del atributo id del <div>.

5.2 Manejadores como funciones

JavaScript externas
UNIDAD 9 DE 13
La definición de los manejadores de eventos en los atributos XHTML es el método más sencillo pero
menos aconsejable de tratar con los eventos en JavaScript. El principal inconveniente es que se
complica en exceso en cuanto se añaden algunas pocas instrucciones, por lo que solamente es
recomendable para los casos más sencillos.
Si se realizan aplicaciones complejas, como por ejemplo la validación de un
formulario, es aconsejable agrupar todo el código JavaScript en una función
externa y llamar a esta función desde el elemento XHTML.
Siguiendo con el ejemplo anterior que muestra un mensaje al p cliquear sobre un botón:
<input type="button" value="Cliqueame y verás" onclick="alert('Gracias por cliquear');" />
Utilizando funciones externas se puede transformar en:
function muestraMensaje() { alert('Gracias por hacer clic'); }
<input type="button" value="Cliqueame y verás" onclick="muestraMensaje()" />
💭¿En qué consiste esta técnica?
En extraer todas las instrucciones de JavaScript y agruparlas en una función externa (¿recuerdan el
archivo [Link] ?). Una vez definida la función, en el atributo del elemento XHTML se incluye el nombre
de la función, para indicar que es la función que se ejecuta cuando se produce el evento.
La llamada a la función se realiza de la forma habitual, indicando su nombre seguido de los paréntesis y de
forma opcional, incluyendo todos los argumentos y parámetros que se necesitan.
El principal inconveniente de este método es que en las funciones externas no se puede seguir
utilizando la variable this y por tanto, es necesario pasar esta variable como parámetro a la
función:
 En el ejemplo anterior, la función externa es llamada con el parámetro this,
que dentro de la función se denomina elemento. La complejidad del ejemplo
se produce sobre todo por la forma en la que los distintos navegadores
almacenan el valor de la propiedad borderColor.
Mientras que Firefox almacena (en caso de que los cuatro bordes coincidan en color) el valor black, Internet
Explorer lo almacena como black black black black y Opera almacena su representación hexadecimal
#000000.

5.3 Manejadores "semánticos"

UNIDAD 10 DE 13
Los métodos que se han visto para añadir manejadores de eventos (como atributos XHTML y como
funciones externas) tienen un grave inconveniente: "ensucian" el código XHTML de la página.
Como es conocido, una de las buenas prácticas básicas en el diseño de páginas y aplicaciones web es la
separación de los contenidos (XHTML) y su aspecto o presentación (CSS). Siempre que sea posible,
también se recomienda separar los contenidos (XHTML) y su comportamiento o programación (JavaScript).
Mezclar el código JavaScript con los elementos XHTML solo contribuirá a complicar el código fuente de la
página, a dificultar la modificación y mantenimiento de la página ya reducir la semántica del documento
final producido.
Afortunadamente, existe un método alternativo para definir los
manejadores de eventos de JavaScript. Esta técnica es una evolución del
método de las funciones externas, ya que se basa en utilizar las
propiedades DOM de los elementos XHTML para asignar todas las funciones
externas que actúan de manejadores de eventos.
 Así, el siguiente ejemplo:
 <input id="cliqueable" type="button" value="Cliqueame y verás" onclick="alert('Gracias por cliquear');" />
 Se puede transformar en:
// Función externa en [Link]
function muestraMensaje() {
alert('Gracias por hacer clic');
}

// Asignar la función externa al elemento

[Link]("cliqueable").onclick =muestraMensaje;

// ElementoXHTML
<input id="cliqueable" type="button" value="Cliqueame y verás" />
💭 ¿En qué consiste la técnica de los manejadores semánticos?
 Asignar un identificador único al elemento XHTML mediante el atributo id.
 Crear una función de JavaScript encargada de manejar el evento.
 Asignar la función externa al evento correspondiente en el elemento deseado.
El último paso es la clave de esta técnica. Veamosla en especifico:

En primer lugar,
se obtiene el elemento al que se desea asociar la función externa:
[Link]("clicable");
A continuación
se utiliza una propiedad del elemento con el mismo nombre que el evento que se quiere manejar. En este
caso, la propiedad es onclick :
[Link]("cliqueable").onclick = ...

Por ultimo,
se asigna la función externa mediante su nombre sin paréntesis. Lo más importante (y la causa más común
de errores) es indicar solamente el nombre de la función, es decir, prescindir de los paréntesis al asignar la
función:
[Link]("cliqueable").onclick =muestraMensaje;

¿Qué pasa si añadimos paréntesis después del nombre de la

función?
Si se añaden los paréntesis después del nombre de la función, en realidad se está terminando la función y
guardando el valor devuelto por la función en la propiedad onclick de elemento.
// Asignar una función externa a un evento de un elemento
[Link]("cliqueable").onclick = muestraMensaje;
// Ejecutar una función y guardar su resultado en una propiedad de un elemento
[Link]("cliqueable").onclick = muestraMensaje();

La gran ventaja de este método es que el código XHTML resultó ser muy "limpio", ya que no se
mezcla con el código JavaScript. Además, dentro de las funciones externas otorgadas sí que se
puede utilizar la variable esto para referirse al elemento que provoca el evento.
El único inconveniente de este método es que la página se debe cargar
completamente antes de que se puedan utilizar las funciones DOM que
asignan los manejadores a los elementos XHTML.
Una de las formas más sencillas de asegurar que cierto código se va a ejecutar después de
que la página se carga por completo es utilizar el evento onload:
 [Link] = función() {
 [Link]("cliqueable").onclick =muestraMensaje;
}

[Link] = función() {
….
}
En el siguiente ejemplo, se añaden eventos a los elementos de tipo input=text de un
formulario complejo:
 function resaltar() {
// Codigo JavaScript
}

[Link] = función() {
var formulario = [Link]("formulario");
var camposInput = [Link]("input");

for(var i=0; i<[Link]; i++) {

if(camposInput[i].type == "texto") {
camposInput[i].onclick = resaltado;
}
}
}

6. ¿Qué más puede hacer Javascript?

UNIDAD 11 DE 13
Síntesis del módulo
UNIDAD 12 DE 13
Javascript, como ya dijimos, es un lenguaje en sí mismo muy potente. Aquí sólo nos asomamos a
las posibilidades de intervenir en los eventos de la página HTML. Pero hay mucho más…

Bibliografia
UNIDAD 13 DE 13
 Luna, Fernando O. (2019) Javascript: aprende a programar el lenguaje de la web. Seis ediciones
 Uniwebsidad. (Dakota del Norte). Introducción a
JavaScript . Uniwebsidad. [Link] abre en una nueva pestaña)
 Tutoría JavaScript . (Dakota del Norte). [Link]

Modulo 7 | Bootstrap - Introducción y

uso básico
Introducción
UNIDAD 1 DE 8

Bootstrap es una biblioteca de diseño front-end que se utiliza para crear sitios web
hermosos y receptivos de manera rápida y fácil.
Se basa en HTML, CSS y JavaScript, lenguajes que ya conocemos, por lo que no va a ser difícil
comprender este framework. Viene con varias características predefinidas, como clases CSS,
componentes JavaScript y plantillas de diseño.
Estas características pueden ayudarnos a crear sitios web modernos y
atractivos sin tener que escribir mucho código.

Objetivos
UNIDAD 2 DE 8
Al finalizar este módulo serás capaz de:
 Conocer las bases del framework Bootstrap.
 Comprender su alcance.
 Identificar cómo puede interactuar con HTML y CSS.
 Usar Bootstrap para crear front-end.

Modulo 7 | Bootstrap - Introducción y

uso básico
1. ¿Qué es Bootstrap?
UNIDAD 3 DE 8
Bootstrap es un marco de interfaz de usuario (framework) con capacidad de respuesta para la
creación de sitios web. El marco de Bootstrap, al igual que muchos otros frameworks, es una colección
de clases CSS, componentes de interfaz de usuario y complementos de JQuery. Bootstrap se considera
un marco ligero .
💭¿Qué quiere decir esto?
En otras palabras, usa más CSS que JavaScript para realizar su trabajo. Aunque Bootstrap se
considera ligero, una página web que use herramientas de Bootstrap sigue necesitando más
 procesamiento para representarse que una página que se diseña específicamente para un factor
de forma determinado.
Por este motivo, el rendimiento debe ser una consideración importante al
diseñar, desarrollar y probar las páginas que usan cualquier parte del marco de
Bootstrap, aunque en la versión 5 este tema está mejor controlado.
Bootstrap permite personalizar fácilmente el comportamiento predeterminado de un factor de forma
específico, mientras mantiene un buen aspecto de la página en otros factores de forma. La versión 5 de
Bootstrap es la versión más reciente lanzada en mayo de 2021, y trae varias mejoras y nuevas
funcionalidades.
Veamos algunas de las características más destacadas de Bootstrap 5:
Actualización a CSS personalizado.
–
Bootstrap 5 ha eliminado el soporte para jQuery y ha actualizado su CSS
personalizado para ser más ligero y fácil de personalizar.
Nuevas caracteristicas de diseño.
–
Se han agregado varias características nuevas de diseño, como soporte para
degradados personalizados, sombras, bordes redondeados, y nuevas medidas de
espacio.
Mejoras en la accesibilidad.
–
Se han realizado mejoras en la accesibilidad, como el soporte para navegar por
teclado y mejoras en el contraste de color.
Nuevos componentes.
–
Se han agregado varios componentes nuevos, como el componente "Offcanvas" para
menús laterales deslizantes, un componente de carrusel mejorado y un componente
de acordeón.
Eliminación de jQuery.
–
Bootstrap 5 ha eliminado la dependencia de jQuery, lo que significa que las
aplicaciones construidas con Bootstrap 5 tienen menos código y se ejecutan más
rápido.

1.1 ¿Por qué Bootstrap es tan interesante para los programadores?

Con la implementación de plantillas prediseñadas en HTML y CSS, los desarrolladores web no
necesitan desarrollar una buena idea para una página web desde cero. Su estructura modular permite
integrarlas fácilmente en cualquier documento HTML. Con esto, se eliminan muchas de las tediosas
configuraciones CSS, ahorrando una gran cantidad de tiempo y esfuerzo.
💭¿Qué elementos incluye?
 Botones.
 Elementos de navegación.
 Vista en miniatura.
 Menús desplegables.
 Avisos.
 histórico
 Inclusión responsiva de videos.
Otro aspecto importante es el Bootstrap grid o rejilla, sobre la que
se construye el diseño de una página web.
Este sistema facilita la definición de los márgenes y el posicionamiento de los elementos que
constituyen una página web distribuyendo los diseños en 12 columnas.
En la organización de los elementos en esta cuadrícula se puede distinguir entre una
gran variedad de tamaño de pantalla, ya sea de escritorio, smartphone, tablet o
portátil. En cualquier caso, Bootstrap asegura un diseño web responsivo.
 2. Primeros pasos: descargar
Bootstrap e instalarlo
UNIDAD 4 DE 8
Debido a que Twitter lanzó Bootstrap como un software libre, su descarga y uso no tienen ningún
costo. desarrolladores web con más experiencia también se benefician del estatus open source de
Bootstrap, pues pueden adaptar aquellos y modificar el framework de acuerdo a sus necesidades. En
la siguiente guía presentamos las medidas necesarias para utilizar plantillas de Bootstrap en
JavaScript y CSS.
💭¿Cómo empiezo? Tan facil como agregar una linea en el <head></head>
 <!doctipo html>
<html lang="es">
<cabeza>
<juego de caracteres meta="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<enlace href="[Link] rel="hoja de estilo"
integridad="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
crossorigin="un anónimo" >
<title>Demostración de Bootstrap</title>
</cabeza>
<cuerpo>
<h1>¡Hola Mundo!</h1>
</cuerpo>
</html>
Probá en Replit el código, primero sin la línea de Bootstrap y luego con ella ¿Qué cambió?
Esta línea que colocamos impacta sobre el CSS.
Para impactar sobre el Javascript, también agregaremos esta línea
 <!doctipo html>
<html lang="es">
<cabeza>
<juego de caracteres meta="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<enlace href="[Link] rel="hoja de estilo"
integridad="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
crossorigin="un anónimo" >
<title>Demostración de Bootstrap</title>
</cabeza>
<cuerpo>
<h1>¡Hola Mundo!</h1>
<script src="[Link]
integridad="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anónimo "></guion>
</cuerpo>
</html>
Recordemos que el TAG <script></script> no obstante debe ir al final del
<Body> pero se recomienda para agilizar el tiempo de carga de la página.
También hay una versión descargable de Bootstrap, que
podemos utilizar para no depender de la conexión a su sitio
web. Veamos el paso a paso:
 Paso 1

Vea [Link]
started/download/ presioná el primer botón
Download
Paso 2
Este enlace contiene los archivos CSS y JavaScript
(en versión compilada y reducida), así como las
fuentes y el tema opcional.
Paso 3
Descomprime el archivo y copia el “Bootstrap File”
en el directorio deseado.
Paso 4
Obtendrás las carpetas “CSS” y “js”.
Paso 5
Los archivos de las carpetas “CSS” y “js” contienen:
1. [Link]: código CSS en formato legible
2. [Link]: código CSS reducido. Se ha eliminado contenido irrelevante (como espacios) para
facilitar su interpretación
3. [Link]: contiene mapas de fuente CSS, que facilitan la búsqueda de datos originales en
formato LESS
4. [Link]: archivos CSS de los temas prediseñados
5. [Link]: código reducido de los temas
6. [Link]: mapas de fuente de los temas
7. [Link]: código JavaScript en formato legible
8. [Link]: código JavaScript reducido
Paso 6
Una vez que se hayan descargado e identificado todos los componentes, puede empezar a trabajar con el
framework.
Paso 7
Una plantilla Bootstrap puede ser personalizada libremente. En la página web oficial encontrará los
diferentes códigos para configurar tipografías, botones, el Bootstrap grid, etc.

Hay 4 formas que en que podemos usar Bootstrap, podemos verlas aquí:

[Link]

3. Sistema de rejillas
UNIDAD 5 DE 8
Para hacer que un sitio web se adapte a todo tipo de pantallas, ya sea una tablet, celular o
computadora de escritorio, Bootstrap utiliza un sistema de 12 columnas -llamadas también
rejillas o grids - para adaptar el contenido de la página web a las distintas resoluciones y amplitud
de los dispositivos que pueden utilizarse.
💭 Ya hablamos del diseño responsivo y cómo Bootstrap nos facilita el trabajo.
 Por ejemplo, si diseñamos una página web basada en 4 columnas, cuando accedemos a ella desde la tableta,
el contenido puede reorganizarse en 3 columnas, oa una sola si accedemos desde el celular.
En Bootstrap, ese sistema de columnas lleva un prefijo de clase compuesta por cuatro tamaños diferentes, de
acuerdo al dispositivo para el cual esté programado.

4. Mi primera pagina
UNIDAD 6 DE 8
Veamos cómo crear una página:
Copia y pega este código en Replit y cambia el tamaño de la pantalla de salida.
 <!DOCTYPEhtml>
<html lang="es">
<cabeza>
<title>Ejemplo de arranque</title>
<juego de caracteres meta="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<enlace href="[Link] rel="hoja de
estilo">
</cabeza>
<cuerpo>

<div class="bg-texto primario-blanco p-5 texto-centro">

<h1>Mi primera página Bootstrap</h1>
<p>Mirá esta página en diferentes dispositivos o cambiará el tamaño del navegador para ver los
resultados</p>
</div>

<div class="contenedor">
<div clase="fila">
<div clase="col-sm-4">
<h2>Escobar</h2>
<p>Escobar es uno de los 135 partidos de la provincia argentina de Buenos Aires. Su cabecera es la
localidad de Belén de Escobar.</p>
</div>
<div clase="col-sm-4">
<h2>Garin</h2>
<p>Garín es una ciudad argentina dentro del partido de Escobar, situado en el Gran Buenos Aires en la
provincia de Buenos Aires.</p>
</div>
<div clase="col-sm-4">
<h2>Ingeniero Maschwitz</h2>
<p>Ingeniero Maschwitz, o simplemente Maschwitz (pronúncise: mash-vits), es una localidad argentina
del partido de Escobar, provincia de Buenos Aires.</p>
</div>
</div>
</div>
<script src="[Link]
</cuerpo>
</html>
💭 Analicemos el código:
 Con la etiqueta <!DOCTYPE html> estamos definiendo que el tipo de archivo que creamos es un
documento HTML y con el atributo lang que el lenguaje predeterminado del documento será en
español.
 Dentro del <head></head> incluimos una serie de etiquetas de HTML con las cuales estamos
indicando la codificación de caracteres utilizados con <meta> y luego con la etiqueta viewport el
navegador sabrá que tiene que adaptar la página a diferentes dispositivos.
 Luego agregamos las librerías necesarias para trabajar con Bootstrap enlazando por medio de CDN
los archivos [Link]
COMO PODEMOS VER EN EL <BODY>, BOOTSTRAP BRINDA DISEÑO A LA PÁGINA A
TRAVÉS DE CLASES. EL PRIMER <DIV> SE PRESENTA ASÍ:
<div class="bg-texto primario-blanco p-5 texto-centro">
✏️📄Analicemos qué significa:
.bg-primary bg significa background , o sea que esta clase nos dará el color de fondo, en este caso,
para este <div>. Los colores en Bootstrap están predefinidos (¿te diste cuenta qué parecidos son
últimamente los diferentes sitios y que muchos tienen los colores de Twitter? ¿Por qué será?)
.text-white Lo mismo sucede con el color del texto, puede utilizar los
mismos colores.
 .p-5 padding nivel 5. ¿esto qué significa?
o conjuntos acolchados para .25 rem
o conjuntos acolchados para .5 rem
o conjuntos para 1 rem
o conjuntos acolchados para 1,5 rem
o conjuntos acolchados para 3 rem
 0 relleno 0
REM es una unidad de medida en HTML que se utiliza para definir el tamaño de fuente
y otros elementos de diseño en relación con el tamaño de fuente
predeterminado del documento . REM significa "raíz cuadrada del tamaño de la
fuente del elemento raíz" y se refiere al tamaño de la fuente predeterminada del
elemento raíz (normalmente el elemento <html>), que se establece en 16
píxeles por defecto . Por ejemplo, si se define una fuente con un tamaño de 1,5 REM,
esto significa que la fuente será 1,5 veces más grande que la fuente definida del
documento.
.text-center alineación del texto.
 < p class = "text-start" >Comenzar el texto alineado en todos los tamaños de ventana gráfica
(viewport).</p>
< p class = "text-center" >Centrar el texto alineado en todos los tamaños de ventana gráfica (viewport).</p>
< p class = "text-end" >Finalizar el texto alineado en todos los tamaños de ventana gráfica (viewport).</p>
< p class = "text-sm-start" >Comenzar el texto alineado en todos los viewport de tamaño SM.</p>
< p class = "text-md-start" >Comenzar el texto alineado en todos los viewport de tamaño MD o más
ancho.</p>
< p class = "text-lg-start" >Comenzar el texto alineado en todos los viewport de tamaño LG (large) o más
ancho.</p>
< p class = "text-xl-start" >Comenzar el texto alineado en todos los viewport de tamaño XL (extra-large) o
más ancho.</p>
O sea que todo lo que está entre <div class="bg-primary text-white p-5 text-center"></div> tendrá un
fondo celeste con letras blancas, el texto estará en el centro con un tamaño 3 veces más grande que el
tamaño por defecto.
 Luego tenemos <div class="container"> La clase container es una de las clases de Bootstrap más
importantes. Proporciones márgenes, relleno, alineaciones y más a los elementos HTML.
[Link]
sistema de cuadriculas
El sistema de cuadrícula de Bootstrap está construido con flexbox y permite hasta 12 columnas
en la página. Si no deseas usar las 12 columnas se pueden agrupar las columnas para crear
columnas más anchas

El sistema de cuadrícula es responsivo y las columnas se reorganizan automáticamente según el tamaño de

la pantalla. Hay que asegurar que la suma sea siempre 12 o menos. O sea que la cuadrícula (grid) Bootstrap
posee filas (las que necesitan) y columnas (hasta 12).
En nuestra primera página tenemos una <div class="row"> (una sola fila) y 3 columnas, las que utilizan
la clase .col-sm-4 (3 columnas de span 4 = 12)
<div clase="col-sm-4">
El sistema de cuadrícula Bootstrap 5 tiene seis clases:
.columna-
–
Dispositivos extrapequeños: ancho de pantalla inferior a 576 px
.col-sm-
–
Dispositivos pequeños - ancho de pantalla igual o mayor a 576px
.col-md-
–
Dispositivos medianos - ancho de pantalla igual o mayor a 768px
.col-lg-
–
Dispositivos grandes - ancho de pantalla igual o mayor a 992px
.col-xl-
–
Dispositivos extragrandes - ancho de pantalla igual o superior a 1200 px
.col-xxl-
–
Dispositivos xxlarge - ancho de pantalla igual o mayor a 1400px
Las clases se pueden combinar para crear diseños más dinámicos y
flexibles. Sugerencia: cada clase se amplía, por lo que si desea establecer
los mismos anchos para sm y md, sólo necesita especificar sm.
Botones:
Tenemos 5 botones predefinidos en Bootstrap:

Podés probarlos insertando algunas de estas líneas en tu código:

 <div class="contenedor mt-3">

<h2>Estilos de botones</h2>
 <button type="button" class="btn">Básico</button>
<button type="button" class="btn btn-primary">Primario</button>
<button type="button" class="btn btn-secundario">Secundario</button>
<button type="button" class="btn btn-success">correcto</button>
<button type="button" class="btn btn-info">Información</button>
<button type="button" class="btn btn-warning">Advertencia</button>
<button type="button" class="btn btn-danger">Peligro</button>
<button type="button" class="btn btn-dark">Oscuro</button>
<button type="button" class="btn btn-light">Claro</button>
<button type="button" class="btn btn-link">Enlace</button>
</div>
Aún cuando Bootstrap cuenta con contenidos prediseñados,
es necesario tener conocimientos básicos en HTML y CSS
para poder configurarlos. Incluso los programadores
experimentados pueden necesitar algo de tiempo para
acomodarse a la interfaz, aunque suelen tener su
recompensa. Para quienes no tengan el tiempo o los medios,
existen bibliotecas de plantillas Bootstrap creadas por otros
usuarios y que están disponibles de forma gratuita o de
pago para ser descargadas. Como por ejemplo, aqui(se abre en
una nueva pestaña).

Quien trabaje con HTML, CSS y JavaScript reconocerá rápidamente las ventajas de
trabajar con este framework. Estas son principalmente:
 El enorme ahorro de tiempo.
 La gran cantidad de posibilidades en cuanto a diseño responsivo.
 Las actualizaciones periódicas y asistencia por parte de una gran comunidad de usuarios.
 La documentación disponible sobre el framework.
 Los factores anteriores, sumados a que Bootstrap es un proyecto de
código abierto, lo posicionan como uno de los frameworks más
populares para el diseño web

Síntesis del módulo

UNIDAD 7 DE 8
Hemos dado una mirada muy superficial al framework Bootstrap, uno de los más utilizados
actualmente para diseño de páginas web. Hay muchas posibilidades de uso, hay muchas clases
que trae incorporadas; seguramente las podran ir descubriendo a medida que investiguen.

Bibliografia
UNIDAD 8 DE 8
 Colaboradores, MOJT a. B. (sf). Comience con Bootstrap. [Link]
started/introduction/(se abre en una nueva pestaña)
 Qué es Bootstrap. (Dakota del Norte). [Link]
abre en una nueva pestaña)
 Hereter, L. y Zanini, V. (sf). Oreja. Editorial: Usuarios Rojos